Responsive websites zijn websites die ontworpen en ontwikkeld zijn om zich aan te passen aan diverse schermformaten en apparaten. Dit betekent dat responsive websites er goed uitzien en goed werken, ongeacht of ze worden bekeken op een desktop, laptop, tablet of smartphone.
Responsive websites passen zich automatisch aan de schermgrootte en zorgen ervoor dat de inhoud gemakkelijk leesbaar en navigeerbaar is. Dit is vooral belangrijk omdat steeds meer mensen websites bezoeken via mobiele apparaten.
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 responsive websites.
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. Dus bij deze ..
#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 adaptive of responsive 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 in responsive websites?
Responsive Web Design (RWD) is een benadering van webdesign waarbij een website wordt ontwikkeld om optimaal te functioneren op verschillende apparaten en schermformaten. Door het gebruik van Media Queries in CSS3 kan de website reageren op de schermgrootte van het apparaat en de inhoud en layout dienovereenkomstig aanpassen.
Een Media Query is een CSS regel die wordt toegepast wanneer aan bepaalde voorwaarden wordt voldaan, zoals de schermgrootte van het apparaat. Een breekpunt is het punt waarop de layout van een website verandert op basis van het schermformaat. Breekpunten zorgen er dus voor 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)!
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!
#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 je 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?
Heb je een maatwerk WordPress project in gedachten?
Een goede beveiliging, snelle laadtijd, flexibele bedrijfsintegratie, unieke vormgeving en beter gebruiksgemak zijn de meest voor de hand liggende onderscheidende factoren om te kiezen voor een op maat gemaakt WP thema. gonzodesign bouwt zoekmachine vriendelijke en responsive WordPress websites met aandacht voor detail.
WordPress Ontwikkeling#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 je een sidebar met een zoekveld hebt. 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 je broncodes in jouw 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 responsive websites.
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 responsive websites moeten uiteraard wel geoptimaliseerd worden vanwege o.a. de beperkte snelheid van het mobiele netwerk. Hou performance daarom altijd in het achterhoofd!
#Navigatie
Bij responsive websites, op een mobiel scherm, kan de navigatiebalk worden omgezet in een uitklapmenu en kunnen afbeeldingen worden geschaald om op het scherm te passen zonder de kwaliteit te verliezen.
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 je responsive website!
Jouw website navigatie bepaalt hoe je gebruikers informatie kunnen vinden op je website, en daarmee de producten of diensten die jij levert! Zorg ervoor dat je 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, ook op responsive websites.
Conclusie
Het doel van responsive webdesign is om een optimale gebruikerservaring te bieden, ongeacht het apparaat dat wordt gebruikt om de website te bekijken.
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 responsive websites. 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:
Nog Geen Reacties
Sorry, maar het is niet (meer) mogelijk te reageren op dit artikel.