Betere responsive websites met behulp van RESS

Er zijn honderden meningen over het maken van sites die goed werken op elk denkbaar apparaat. Zo gebruiken sommigen puur responsive websites. Daarbij zal er altijd data worden ingeladen en wordt er aan  de hand van de grootte van het scherm alles netjes gezet. Anderen zweren bij adaptive websites. Op deze manier wordt er een compleet andere site ingeladen aan de hand van het apparaat. Zelf zweer ik meer en meer bij een combinatie: waarbij RESS (responsive design + server side components).

In normale responsive websites, blijft de url altijd consistent, op welk apparaat je de site dan ook bekijkt. Dit heeft natuurlijk zijn voordelen, omdat je links kan delen, en deze over het algemeen altijd dezelfde informatie bevatten. Helaas komt hierbij het nadeel dat de opbouw van de pagina, de HTML, altijd overal ingeladen wordt. Dit kan bij grote websites invloed hebben op de laadtijd van de website.

Adaptive websites daarentegen, laten enkel zien wat het apparaat vraagt. Hierdoor kan de url, de HTML, de afbeelding & video’s en dergelijke perfect geoptimaliseerd worden voor het desbetreffende apparaat, voordat de browser de informatie ontvangt. Hier zitten echter ook nadelen aan: dit betekent vaak dat er bij een aanpassing aan de site meerdere keren wijzigingen doorgevoerd moeten worden. Denk hierbij bijvoorbeeld aan een normale site (zalando.nl) en de desbetreffende mobiele site (m.zalando.nl).

Beide varianten hebben dus hun voor- en nadelen. RESS daarentegen combineert het beste van beide. Een enkele (responsive) template, waarbij bepaalde elementen vanuit de server tegengehouden (of juist getoond) worden aan de hand van het type apparaat.

Hoe werkt het?

Een handige open-source PHP class wat we hiervoor kunnen gebruiken is mobiledetect. Deze kijkt naar de User-Agent van de browser. Aan de hand hiervan kunnen we met een simpele regel PHP-code bepaalde elementen tonen aan de hand van de user agent. Voorbeelden van codes zijn ook te vinden op deze site. Tevens zijn er ook plugins ontwikkeld voor CMS systemen zoals WordPress. Plugins zoals deze zijn ook eenvoudig zelf te ontwikkelen. Maar het voordeel van een bestaande partij is dat de lijst van user-agents completer is, en alle mogelijke apparaten zullen bevatten.

Met behulp van deze code kun je aan de slag gaan, door op een gebruikelijke wijze een responsive website te ontwikkelen. Maar waar er normaal gesproken inhoud verborgen zou worden via CSS, of inhoud verplaatst met behulp van Javascript, kunnen we nu kiezen wat we tonen, en dat allemaal in hetzelfde template bestand.

Nadelen?

Bij het voorschotelen van een pagina wordt er gekeken naar de user-agent van de browser. Deze toont informatie, zoals de naam van het apparaat en enkele andere technische informatie. Een voorbeeld van de iPhone user agent is bijvoorbeeld:

Mozilla/5.0 (iPhone; CPU iPhone OS 5_0 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A334 Safari/7534.48.3

Aan de hand hiervan wordt de juiste variant voorgeschoteld. Dit is natuurlijk geen probleem bij een iPhone of een Galaxy S7, maar wat moet er getoond worden bij een minder bekend toestel? En wanneer is een apparaat een “tablet”, en wanneer een “telefoon”? De lijn hiertussen vervaagd steeds meer. Een iPad Mini is haast net zo groot als een iPhone Plus! Gelukkig valt er een hoop op te lossen door te kijken naar de resolutie van het apparaat, waarbij we toch voor een groot gedeelte terug kunnen vallen op responsive webdesign.

Dit bericht verscheen eerder op: Redbanana.nl

Vond je dit interessant, en wil je meer weten? Neem dan gerust contact met mij op!

✉️ Neem contact op