Mobiele Navigatie

Na meerdere responsive websites te hebben ontworpen voor zowel klanten als ten behoeve van persoonlijke projecten, zijn mij een aantal zaken opgevallen die enorm handig zijn om in het achterhoofd te houden bij het ontwerpen van een responsive website.

Ik heb al geruime tijd deze overwegingen uit de afgelopen jaren willen documenteren, en ik dacht dat het misschien handig is om deze ook in mijn blog te delen. Bij deze ..

Overwegingen bij Responsive Design

Hiërarchie van de Inhoud

Deze eerste overweging heeft op het eerste gezicht minder met design te maken maar veel meer met planning en is belangrijk om de best mogelijke gebruikerservaring te kunnen leveren op elk apparaat (van desktop computerschermen tot mobiele telefoons).

Media-Query gestuurde responsive of adaptive websites geven ons de mogelijkheid om de content telkens aan te passen aan de grootte van het scherm waarop de website wordt bekeken. Webdesigners zullen dus inzicht moeten krijgen hoe de content zal ‘vloeien’ op verschillende schermbreedtes met behoud van vorm en hiërarchie.

Hiërarchie (of prioriteit) van content is nuttig voor de ontwerper omdat het hem/haar toelaat om weloverwogen beslissingen te nemen om te weten waar de belangrijkste content geplaatst moet worden als de content onder elkaar (gestapeld) op een smartphone wordt getoond! Daarom is het belangrijk om tijdens de ontwerpfase al samen met de klant vast te leggen wat de hiërarchie van de content moet zijn.

Waar komen de breekpunten?

Media Queries is een CSS3 module die ervoor zorgt dat de layout zich aan kan passen aan verschillende omstandigheden, zoals oa. de schermresolutie waarop de site bekeken wordt (bijvoorbeeld smartphone scherm versus computerscherm). Breekpunten, gedefinieerd in deze Media Queries, zorgen ervoor dat bij verschillende schermbreedtes andere CSS styles van toepassing worden:

@media only screen and (max-width: 460px) { 
   /* diverse CSS styles */
}

Als het zichtbare gedeelte van de browser (ook wel de viewport genoemd) bijvoorbeeld smaller wordt gemaakt, kan het zijn dat de website niet meer optimaal bruikbaar is. Een voorbeeld is een navigatiebalk die bij een kleinere viewport niet meer bruikbaar wordt omdat de onderliggende (secundaire) navigatieknoppen niet meer functioneren (touch versus mouse -> hover)!

In zo’n situatie is het gebruikelijk om een breekpunt te maken in de CSS en de navigatiebalk te vervangen door een mobiele navigatie menu vanaf een minimale schermbreedte.

Door ‘in de browser’ te ontwerpen ziet de front-end designer waar de layout eventueel fout gaat en bij welk element, zodat hij/zij weet waar een breekpunt moet worden toegevoegd voor het desbetreffend element.

Met alle nieuwe (mobiele) apparaten die bijna dagelijks worden gepresenteerd, is het zinvol om breekpunten te creëren als de layout dat vereist en niet op basis van bestaande schermresoluties van verschillende (Apple) apparaten!

Lees het artikel Logical Breakpoints For Your Responsive Design van Vasilis van Gemert, waarin hij adviseert te kijken naar de klassieke theorie over leesbaarheid om vervolgens daarop de breekpunten te baseren. 

Hergebruik van Stijlen

Degenen die wel eens hebben gewerkt met CSS, weten dat stylesheets vrij grote bestanden kunnen worden, evenals het feit dat een aantal eigenschappen van HTML elementen waarschijnlijk dubbelop zullen voorkomen in de CSS. DRY (Don’t Repeat Yourself) is een beginsel uit de software-ontwikkeling, die gericht is op het verminderen van herhaling van informatie van alle soorten, met name handig in web architecturen met meerdere lagen.

Zou het niet handig zijn als u bijv. het lettertype slechts op één centrale plek hoefde te wijzigen in plaats van veranderingen in de gehele CSS door te moeten voeren? Of wat te denken van het veranderen van slechts één kleurcode om verschillende elementen iets donkerder of lichter te maken?

Volgorde van Broncodes

HTML broncode volgorde (Source Order) is belangrijk om in gedachten te houden, omdat het vaak van invloed kan zijn op de content als het wordt getransformeerd in de verschillende viewports.

Waarom? Neem als voorbeeld de desktop viewport, waarin u een sidebar met een zoekveld heeft. Wanneer we naar de kleinste viewport gaan, zal naar alle waarschijnlijkheid de sidebar, inclusief de verschillende elementen, onder de belangrijkste inhoud schuiven. Dit betekent dat de prioriteit van het zoekveld lager is dan bijna alles wat op de pagina staat en de vraag is of dit wel wenselijk is in bepaalde gevallen?

Alhoewel er manieren zijn om bovenstaand voorbeeld met behulp van JavaScript op te lossen, het is altijd beter om de volgorde van uw broncodes in uw voordeel te laten werken!

Performance

Dit is momenteel een veelbesproken onderwerp in de responsive web design community. Volgens sommigen is een van de nadelen van deze techniek een slechte performance, wat ten koste zou gaan van de laadtijd. Ik ben van mening dat het niet een kwestie van responsive web design is, maar aan gebrek aan bewustwording bij ontwerpers en ontwikkelaars om de echte problemen aan te pakken bij het bouwen van een responsive site.

Webpagina’s met mooie, full-width foto- en videobanners zijn sfeervol en aantrekkelijk, .. maar, die kunnen vrij groot zijn qua bestandsgrootte. Deze videos en afbeeldingen op uw responsive website moeten uiteraard wel geoptimaliseerd worden vanwege o.a. de beperkte snelheid van het mobiele netwerk. Hou performance daarom altijd in het achterhoofd!

Dave Rupert heeft 2 artikelen geschreven over performance en responsive web design en deze mythe voor eens en altijd uit de wereld geholpen: RWD Bloat en RWD Bloat Part II

Navigatie

Er zijn veel overwegingen te nemen tijdens de bouw van een site navigatie, zoals o.a. hoe wordt de mobiele navigatie van de site aangepakt (een off-canvas sliding menu, ‘drop-down’ navigatie menu, of toch maar een select veld)? Maar ook het aantal lagen van navigeren (primaire, secundaire of tertiaire navigatie) kan een grote complexiteit met zich meebrengen bij een mobiele navigatie – met name bij het behouden van een consistente look, feel en ervaring op uw site!

Uw website navigatie bepaalt hoe uw gebruikers informatie kunnen vinden op uw website, en daarmee de produkten of diensten die u levert! Zorg ervoor dat u weet hoe gebruikers willen navigeren en dat bepaald in grote mate hoe de navigatie moet worden ontworpen.

Typografie

Er is veel aandacht nodig voor de typografie als de viewport breedte verandert. De grootte van het gebruikte lettertype, zinslengte, regelafstand en marges van de broodtekst en titels moeten zo mogelijk allemaal worden aangepast om de leesbaarheid optimaal te houden.

Een website moet tegenwoordig op dragers van heel verschillende formaten goed leesbaar zijn én blijven.

Conclusie

Dit is uiteraard geen volledige of uitgebreide ‘one size fits all’ checklist. Het zijn algemene overwegingen die nuttig voor mij waren om responsive te gaan denken en om rekening mee te houden bij het ontwerpen van een responsive website.

Ik weet zeker dat er ook nog andere belangrijke overwegingen zijn – waaronder een aantal specifieke overwegingen voor ontwerpers, ontwikkelaars, of voor beide.

Deel dit Bericht:

Auteur: Jan Rajtoral

Jan Rajtoral is een ervaren grafische vormgever en webdesigner. Hij heeft een ruime ervaring met User Experience (UX), Responsive Web Design (RWD) en WordPress Ontwikkeling & Thema Ontwerp. Maar hij ontwerpt en ontwikkelt ook logo’s en huisstijlen, waarbij hij streeft naar merkconsistentie in het hele ontwerp.

Nog Geen Reacties

Sorry, maar het is niet mogelijk te reageren op dit artikel.

Meest Recent Project

Ikdoemeejijook