Betere webpagina's met responsive design

door ing. Jan Everink

juni 2018

Bij responsive webdesign (RWD) worden webdocumenten zo ontworpen dat ze een flexibele lay-out hebben en zich kunnen aanpassen met betrekking tot de verschillende media waarop ze worden gepresenteerd. Responsive design is als ontwerpfilosofie volledig afgestemd op de dynamiek van het web en biedt voor verschillende problemen een doeltreffende oplossing.

Goede weergave op elk medium

RWD-pagina's passen zich harmonisch aan met betrekking tot de schermgrootte en komen ook op smartphones goed tot hun recht, dus er is naast de RWD-site geen speciale mobielvriendelijke site nodig.

Responsive design biedt ook de oplossing voor het probleem als gevolg van de steeds meer toegepaste beeldschermen met grotere breedte dan 1024 pixels. Deze brede en zeer brede beeldschermen maken het mogelijk om meerdere vensters ofwel viewports tegelijk open te hebben, een mogelijkheid waar in toenemende mate gebruik van wordt gemaakt. Als de bezoeker van een webpagina de viewport aanpast moet ook de pagina-weergave zich aanpassen, hetgeen bij een webpagina op basis van RWD inderdaad gebeurt.

Ook wordt het met responsive design overbodig om printervriendelijke versies van webpagina's te maken. Met RWD kan worden gezorgd dat hetzelfde bestand zowel voor het scherm als voor de printer geschikt is.

Flexibel raamwerk

Bij het ontwerpen van een webpagina volgens het responsive design principe wordt op de eerste plaats een flexibel raamwerk voor de gehele pagina-lay-out gedefinieerd. Dit raamwerk doet dienst als een onzichtbare flexibele structuur van de pagina, zodat deze zich niet alleen aanpast met betrekking tot de viewportbreedte maar ook een harmonisch geheel blijft vormen.

Het raamwerk bestaat uit rechthoeken, containers genaamd. Door aan deze raamwerkcontainers relatieve afmetingen, dat wil zeggen percentages in plaats van pixelwaardes, toe te kennen is een flexibele pagina-lay-out mogelijk. De hoogte/breedte-verhouding van de raamwerkcontainer is niet gefixeerd maar kan veranderen als de viewport verandert.

Het creëren van een flexibel raamwerk is de essentiële eerste stap bij het ontwerpen van webpagina's volgens het responsive design principe. Het flexibele raamwerk dient uitsluitend om structuur te geven en is zelf niet zichtbaar. Het wordt samengesteld door de pagina onder te verdelen in flexibele horizontale secties en elke sectie eventueel weer te verdelen in kolommen. Bovenaan de pagina wordt veelal een header-sectie gedefinieerd; daaronder komen een of meer content-secties; de pagina wordt afgesloten met een trailer-sectie. De header- en de trailer-sectie bestaan vaak uit maar één kolom. Voor een content-sectie is meestal een indeling in twee of meer kolommen wenselijk.

Content arrangeren met vloeiprincipe

Flexibiliteit is op zichzelf niet voldoende om te zorgen dat webpagina's optimaal responsief zijn. Omdat de raamwerkcontainers flexibel zijn moet ook de inhoud zich bij verandering van de hoogte/breedte-verhouding aanpassen. Bij teksten levert dit geen problemen op want het vloeiprincipe wordt bij tekst vanzelf door de browser toegepast. De woorden worden van links naar rechts naast elkaar geplaatst en zodra de rechter grens van de container is bereikt wordt naar een volgende regel gesprongen.

Maar de content van een raamwerkcontainer kan behalve uit tekst ook bestaan uit blokvormige elementen, zoals afbeeldingen en losse containers. Blok-elementen vloeien normaliter niet; ze worden onder elkaar in de kolom geplaatst. Om blok-elementen wél te laten vloeien moet dat speciaal worden aangegeven. Dankzij de mogelijkheid om blok-elementen te laten vloeien kan worden gezorgd dat ook deze elementen in een flexibele kolom goed worden gearrangeerd.

Als voor een blok-element wordt gespecificeerd dat het naar links moet vloeien dan zal dit element naar links aansluiten op het vorige element. Als daarvoor niet voldoende ruimte is wordt het element onder de voorgaande elementen aan de linkerkant tegen de containergrens geplaatst.

Binnenin een tekstflow kunnen door middel van het vloeiprincipe meerdere blokken meelopen. Deze kunnen tegen de linker- of rechterkant van de kolom worden geplaatst, waarbij de tekst er omheen loopt. Zo is het bijvoorbeeld mogelijk om in een tekstkolom afbeeldingen en uitlichters te plaatsen.

Vloeiende blokken in container zonder tekst

Meerdere blok-elementen kunnen ook tezamen, zonder omlopende tekst, vloeiend in een container worden geplaatst. Normaliter worden blokken in een kolom onder elkaar geplaatst en dus niet bij verschillende breedtes van de container adequaat gearrangeerd. Door de blokken niet onder elkaar maar vloeiend naast elkaar te plaatsen wordt de beschikbare ruimte wél optimaal gebruikt. Vaak zal daarbij worden gekozen voor vloeien van links naar rechts, zoals ook bij de normale tekstflow plaatsvindt.

Op deze wijze kunnen bijvoorbeeld buttons vloeiend in een container worden geplaatst. Tekstlinks kunnen worden gedefinieerd als blokken, zodat buttons ontstaan. Het weergeven van tekstlinks als blokken heeft verschillende voordelen. Onder meer kan het mouse-over-effect verbeteren; het is bijvoorbeeld mogelijk om bij mouse-over de achtergrondkleur te laten veranderen. Door links als buttons weer te geven kan ook de navigatie makkelijker worden gemaakt.

Soms is het wenselijk om voor een navigatiebalk behalve vloeiendheid ook flexibiliteit toe te passen. Dat is met name het geval als we de buttons bij voorkeur harmonisch naast elkaar en alleen als het scherm daarvoor te smal is onder elkaar willen laten verschijnen. Dit kan worden gerealiseerd door elke button in een eigen flexibele container te plaatsen. Aan deze containers wordt bovendien een minimumbreedte toegekend. Zolang de buttons door de browser naast elkaar kunnen worden geplaatst wordt de ruimte tussen en opzij van deze knoppen bij elke viewport-breedte gelijkmatig verdeeld. Als het scherm nog smaller wordt en de minimumbreedte van de button-containers wordt bereikt springen de meest rechtse buttons naar de volgende regel.

Door gebruik van het vloeiprincipe kan de lay-out van een pagina op smallere en bredere viewports aanzienlijk verschillen. Als de mogelijkheden om content te laten vloeien goed worden gebruikt zal op elk medium een mooie ruimtelijke indeling ontstaan. Het vloeiprincipe biedt veel creatieve mogelijkheden, maar altijd moet door testen worden vastgesteld of het resultaat inderdaad overeenkomstig de bedoeling is.

Mediaspecifieke opmaak

Een belangrijke mogelijkheid in de tegenwoordige technologie is mediaspecifieke opmaak. Een verzameling gedefinieerde opmaak-codes kan specifiek aan een bepaald medium worden toegekend

Het creëren van afzonderlijke printervriendelijke versies van webpagina's is dankzij de mogelijkheid van mediaspecifieke opmaak niet meer nodig. Door mediaspecifieke opmaak te gebruiken kan de printversie vanzelf tot stand komen als de pagina wordt afgedrukt. Zo kan onder meer worden gezorgd dat navigatieknoppen op de afdruk wegblijven. Ook kunnen bijvoorbeeld foto's op de afdruk kleiner worden weergegeven dan op het scherm.

Behalve het type medium kunnen ook nog andere specificaties met betrekking tot het medium worden vermeld. Met name nuttig zijn de beschikbare codes om een minimum- en maximum-breedte te specificeren. Deze voorziening kan met name heel praktisch zijn om de weergavegrootte van afbeeldingen te laten afhangen van de breedte van de viewport. Het is bijvoorbeeld mogelijk om een grote afbeelding op brede schermen op ware grootte en op smalle schermen verkleind weer te geven.

In de toekomst zal, naarmate de technische mogelijkheden daartoe verder toenemen, mediaspecifieke opmaak ongetwijfeld steeds belangrijker worden.

Projectmatige aanpak

Responsive design heeft als ontwerpfilosofie ook invloed op de projectmatige aanpak bij het bouwen en onderhouden van websites. Van belang is dat een onderscheid wordt gemaakt tussen de ontwerp- en de realisatie-fase. Alleen met een goed doordacht ontwerp is het mogelijk om optimale flexibiliteit te combineren met een consistente "look and feel".

Belangrijk is ook dat een website in de toekomst gemakkelijk aangepast kan worden. Niet alleen moet de content gemakkelijk gewijzigd en uitgebreid kunnen worden, ook moet het goed mogelijk zijn gewenste veranderingen aan te brengen wat betreft de vormgeving. Bij een volgens de RWD-filosofie gebouwde website zal vaak direct in de codering gewerkt moeten worden. Essentieel is daarom dat de codering inzichtelijk wordt opgebouwd. Door een logische opbouw van de codering en doeltreffend gebruik van toelichtende commentaren kan optimale aanpasbaarheid worden verkregen.

Te verwachten is dat veel bestaande websites op basis van RWD aangepast zullen worden. Tegelijk met het responsief maken kan eventueel ook een upgrading naar versie 5 van HTML plaatsvinden. In HTML5 zijn interessante nieuwe mogelijkheden voor communicatie en promotie  beschikbaar. Maar om pagina's responsief te maken is versie 5 niet per se nodig; de technische mogelijkheden daarvoor zijn ook in de verschillende bestaande HTML-versies ruim aanwezig.

Verder kan tegelijk met het responsief maken eventueel het aanzien van de site vernieuwd worden maar ook dat is niet noodzakelijk. Responsive design heeft vooral betrekking op de lay-out en nauwelijks op het kleurgebruik, de typografie en het gebruik van beeldmateriaal. Het is daarom zeker mogelijk om bij een RWD-herstructurering de "look and feel" van een website te behouden.

Het RWD-concept kan worden beschouwd als de doorbraak naar een nieuwe doeltreffende aanpak op het gebied van de website-ontwikkeling.