Het mobiele Internet, je kan er vandaag de dag niet onderuit. Iedereen heeft tegenwoordig één of meerdere mobiele toestellen, hetzij een smartphone of tablet om op het Internet te surfen. Dit maakt dat mobiele gebruikers de grote meerderheid uitmaken op het Internet vandaag.
Bedrijven moeten begrijpen dat hun (toekomstige) klanten niet enkel via een desktop PC of laptop hun website bezoeken. Ook mobiele gebruikers moeten de website vlot kunnen bezoeken. Hier komt Responsive Web Design op het toneel.
Wat is Responsive Web Design (RWD)?
Responsive Web Design is een techniek waarbij via CSS3 Media Queries andere stijlregels geladen worden door de (mobiele) web browser, zodat de website zich kan aanpassen aan de schermresolutie (of context) van het toestel waarmee de website bezocht wordt.
Bij specifieke schermresoluties zal het originele webontwerp “breken”. We spreken van breekpunten (breakpoints). Het zijn deze specifieke resoluties die voor het ontwerp de Media Query breakpoints zullen bepalen (naast de standaard breakpoints voor de courante mobiele resoluties).
Op deze manier kan de webdesigner de website zich laten aanpassen aan de context. Responsive Web Design wordt voornamelijk toegepast om bv. de layout te wijzigen van een drie-kolom layout naar een één-kolom layout, het menu te vervangen door een menuknop en het laden van geoptimaliseerde fotobestanden om het downloaden te versnellen.
Het voordeel van Responsive Web Design is dat éénzelfde website een breder doelpubliek kan bereiken. Er dient slechts één website te worden onderhouden. Een nadeel is dat de inhoud niet geoptimaliseerd is voor mobiel gebruik. Fotobestanden in het grafisch ontwerp kunnen dan wel geoptimaliseerd worden, maar dat geldt niet voor teksten en fotobestanden die behoren tot de pagina inhoud. Dit kan enkel opgelost worden door ontwikkeling van een 100% mobiel geoptimaliseerde website met een eigen webadres, ontwerp en inhoud.
Wat is Mobile First Responsive Design?
Historisch gezien ontwikkelden webdesigners voor desktop Internet browsers. Pas in een tweede fase zouden zij dan via Responsive Web Design mobiele ondersteuning inbouwen voor kleinere schermresoluties.
Met de gigantische explosie van het aantal mobiele toestellen is de trend om de omgekeerde weg te volgen en de website éérst te bouwen voor de kleinste resoluties en nadien te gaan optimaliseren voor hogere resoluties (tablet, ipad, laptop, desktop pc, smartTV, …).
Zoals bij elke methodologie zijn er voor -en tegenstanders. Tegenstanders hekelen voornamelijk het feit dat men niet meer op hetzelfde ontwerp zou uitkomen indien men gestart zou zijn vanuit het standpunt van de desktop resoluties.
Hoe kan Mobile First Design hierbij helpen?
Wanneer we uitgaan van het degradatie standpunt, wordt het summum aan items (tekst, afbeeldingen, video,...) aangeboden voor optimale weergave op hoge resoluties en later worden deze dan verborgen voor de kleinere resoluties. Hierdoor downloaden we toch nog vaak té veel en te zware bestanden op mindere krachtige toestellen met vaak ook een beperkte bandbreedte, wat de gebruikservaring niet ten goede komt. Er bestaan natuurlijk wel enkele technieken om dit te vermijden, maar echt logisch lijkt het toch niet …
Bij Mobile First Responsive Design legt men van bij de start de focus op de inhoud vanuit de minst krachtige context. De website wordt geoptimaliseerd voor mobiel gebruik en biedt enkel het absolute minimum aan. Hierdoor voelt de website ook vaak sneller en lichter aan. Extra bestanden worden enkel geladen wanneer strict noodzakelijk (via het specifieke Media Query breakpoint). Hierdoor zijn we zeker dat we voor elke resolutie telkens de optimale bestanden aanbieden en dit komt de website op vele vlakken ten goede.
Conclusie
Mijn persoonlijke voorkeur gaat uit naar Mobile First Responsive Design en ik voel me gesteund door het feit dat grote bedrijven als Google Inc. deze technieken ook lijken te omarmen. Het een sluit het ander natuurlijk niet uit. Beide benaderingen blijven mogelijk en hangen vaak af van de situatie.
Ongeacht de aanpak wil ik nog meegeven dat RWD geen silver bullet is! Het is een client-side technologie die de mobiele gebruikerservaring kan boosten voor vele websites, maar dekt niet altijd de volledige lading. Er zijn ook server-side oplossingen voorhanden (device detection & redirection, image re-scaling, …) voor meer complexe architecturen.