Hoe komt een goede responsive website tot stand?

Misschien sta je op het punt om een responsive website te laten ontwikkelen. Dan is het handig om te weten welke zaken je met je internetbureau moet bespreken. Welke fases komen aan bod?

In mijn vorige twee artikelen in deze serie over responsive en adaptive webdesign heb ik jullie verteld wat responsive webdesign is en wat de misverstanden zijn rond dit hyperpopulaire fenomeen. Maar welke opties heb je eigenlijk? Dat vertel ik je in dit artikel.

Voor elke situatie een andere strategie

Allereerst zijn er verschillende oplossingen met elk een ander prijskaartje mogelijk. Welke oplossing je kiest, hangt af van het type organisatie (welke rol vervul je en wat bied je aan?), je doelgroep (wat voor publiek bedien je en in welke mate gebruiken zij mobiele apparaten?) en je budget (welke oplossing kun je je veroorloven?).

De meest fancy en tegelijkertijd meest prijzige strategie is een volledig ‘fluid design’, dat meebeweegt met elke schermgrootte en is opgebouwd uit een groot aantal ‘breakpoints’ en ‘states’. Op die manier maakt je website optimaal gebruik van de beschikbare schermgrootte en bied je bezoekers op alle apparaten en schermformaten een ultieme ervaring. Werkt lekker, oogt heerlijk.

Een goed voorbeeld hiervan is de website van het toonaangevende technologieblog TheNextWeb. Speel maar eens met de grootte van je venster en je begrijpt precies wat ik bedoel. De content, de navigatie en het aantal kolommen verspringt steeds naar gelang je scherm groter of kleiner wordt. Steeds weer wordt de indeling aan je venstergrootte aangepast.

Hoeveel states laat je ontwerpen?

Je kunt er ook voor kiezen om een beperkter aantal states te laten ontwerpen. Bijvoorbeeld één state voor desktops en laptops, één voor tablets en één voor smartphones. In dat geval worden twee breakpoints bepaald. De website verspringt in dat geval naar een kleinere state zodra de beschikbare schermgrootte onder een vastgesteld breakpoint van een x aantal pixels komt. En die tabletversie verspringt op zijn beurt naar de state voor smartphones, zodra de beschikbare schermgrootte onder het volgende vastgestelde breakpoint van een x aantal pixels komt.

Goed om te weten: in de praktijk wordt er meestal – in het geval van de ‘mobile first’-benadering – andersom gewerkt, dus van klein naar groot, van smartphone naar desktop. Voor elke state wordt de meest ideale indeling opnieuw bepaald. Er wordt goed gekeken naar het aantal kolommen en de positie van content. Tussen de verschillende breakpoints is de site fluid. Een andere benadering is het laten vastzetten van de maximale breedte van de state voor desktops en laptops. Deze beweegt dan niet oneindig mee naarmate het scherm groter wordt (volledig fluid), maar oogt prima op elke desktop en laptop.

Eén state voor zowel desktop als tablet

Weer een andere oplossing – één die de ontwikkelkosten drukt – is het laten ontwerpen van een state die qua formaat op zowel een desktop en laptop als een tablet een goede ervaring biedt. Op die manier hoeft er voor tablets geen aparte state te worden ontworpen. Alleen nog één voor smartphones en dan ben je – wat de states en breakpoints betreft – klaar. Deze oplossing biedt natuurlijk geen ultieme gebruikerservaring op apparaten en schermformaten, maar je website oogt in alle gevallen goed genoeg om frustraties te voorkomen.

Voor de duidelijkheid, er zijn nog veel meer oplossingen mogelijk. Meer of minder breakpoints en fluidness bijvoorbeeld. Eén en ander is vooral afhankelijk van de content die je aanbiedt.

States en breakpoints

Ok. Stel je hebt een budget bepaald en een strategie gekozen. Wat nu? Welke zaken komen er aan bod?Eén van de eerste stappen die een webdesigner zet – na het bepalen van het aantal breakpoints – is het bepalen van de breedtes waarop die breakpoints worden vastgezet. Zo’n breakpoint is met name bedoeld om een andere indeling te kunnen weergeven, zodra een ander apparaat wordt gebruikt. Bijvoorbeeld een tablet in plaats van een desktop of laptop.

Maar welke breedte wordt er dan genomen? Toen tablets net populair werden, was het een piece of cake: nagenoeg elke tablet was een iPad. Maar nu het marktaandeel van Apple drastisch terugloopt en andere fabrikanten in hoog tempo een enorm scala aan verschillende tablets – en formaten – uitbrengen, is dat wat lastiger. Eén oplossing is het kiezen voor een gemiddelde. Hier vind je de meest gebruikte breedtes. Een slimmere manier om de breedte te bepalen is het analyseren van je cijfers in Google Analytics. Daar kun je vinden welke apparaten en schermresoluties je bezoekers gebruiken.

Contentprioriteren

Een groot deel van responsive webdesign draait om het juist prioriteren van content. Wat is het belangrijkst? En daarna? Dit is voor zowel de eigenaar van de website als de webdesigner iets om goed over na te denken. Om die reden beginnen veel webdesigners met wireframes (schematisch ontwerp, de bouwtekening van het uiteindelijke ontwerp) van de versie voor smartphones. Want door met de minst beschikbare ruimte te beginnen, dwing je jezelf om te bepalen wat de allerbelangrijkste content is. Een strategie die bekend is onder de noemer mobile first.

Op smartphones is er vooral in de breedte weinig ruimte. Eigenlijk heb je dan slechts de beschikking over één kolom, waardoor vrijwel alle content onder elkaar wordt weergegeven. Dat vraagt om een goed doordachte prioritering.

Voorbeeld: je bent de uitgever van een online magazine

Een voorbeeld. Stel je bent de uitgever van een online magazine. Dan stel je de artikelen centraal. Waarschijnlijk heb je ook een sidebar waar verschillende categorieën in staan. Op een desktop en laptop heb je daar meer dan genoeg ruimte voor. Daar kun je zelfs meerdere kolommen naast elkaar plaatsen en dan nog heb je de ruimte voor een sidebar. En op een tablet in portrait-houding heb je ook nog ruimte voor een sidebar.

Op een smartphone wordt dat stukken lastiger. Daar heb je in de breedte ruimte voor één kolom, de artikelen. Wat gebeurt er dan met de sidebar? Veel webdesigners verplaatsen die naar onder. Een logische keuze ook, aangezien er simpelweg de ruimte niet meer voor is en bezoekers gemakkelijk naar beneden kunnen scrollen of swipen. Maar veel webdesigners vergeten dat sommige elementen in de sidebar uitermate belangrijk zijn en de bezoeker zich verloren kan voelen wanneer deze volledig verdwijnt. Je zou daarom – een idee geopperd door EdenSpiekermann – kunnen kiezen om een deel naar onder te verplaatsen en de belangrijkste elementen in de kolom, dus tussen de artikelen, te zetten.

Ga er niet vanuit dat je elementen weg kunt laten

Besef verder ook dat het wel eens handig zou kunnen zijn om de volgorde van de content per media query (kort gezegd: state per apparaat) opnieuw te bekijken. Zoals ik in artikel één in deze reeks al uitlegde, is het niet verstandig om een deel van de content weg te laten op smartphones en tablets. Gebruikers van een mobiel apparaat hebben vaak andere behoeftes dan een desktopgebruiker, maar niet altijd. Ga er dus niet vanuit dat je bepaalde elementen kunt weglaten.

Maar je kunt natuurlijk wel verschil aanbrengen in de volgorde waarop de content wordt weergegeven. Analyseer daarom alle content die je hebt en bedenk of een bepaald element belangrijker of juist minder belangrijk wordt wanneer het ‘onderweg’ wordt bekeken. Een routebeschrijving of telefoonnummer bijvoorbeeld, stijgen in prioriteit. En lange stukken informatieve tekst over de achtergrond van je bedrijf, dalen in prioriteit.

Navigatie

Ik hoef niemand uit te leggen dat navigeren op een desktop compleet anders werkt dan op een smartphone. Maar tussen die twee apparaten bestaan er talloze andere verschillende schermformaten. Wat doe je met de hoofdnavigatie? Hoe kleiner een scherm wordt, hoe groter de uitdaging het navigeren zo intuïtief en eenvoudig mogelijk te maken. Op tablets bijvoorbeeld, heb je al een stuk minder ruimte dan op een desktop. Hoe los je dat op? Het is onzin om te denken dat je gedwongen bent het aantal navigatie-items te beperken. Je hebt verschillende opties.

Allereerst kun je de grootte van de verschillende navigatie-items met de rest van de website laten meeschalen. Dat scheelt al een hele hoop. Dit geldt overigens tot een bepaalde breedte, aangezien kleine navigatie-items op touch devices een drama zijn. In het geval dat je navigatie (rechts) naast je logo staat, kun je de navigatie iets naar onder verplaatsen. Skinnyties heeft dat bijvoorbeeld heel slim aangepakt, kijk maar. Mashable heeft alle verschillende items geprioriteerd en naar gelang het scherm kleiner wordt, verdwijnen er steeds meer items onder ‘more’. Alleen de populairste categorie, social media, blijft overeind.

Je zoekbar inrichten

Wil je een zoekbar? Die kun je uitstekend inklappen door er een zoekicoontje van te maken. Door erop te klikken of drukken, schuift deze uit tot een zoekbar. Dat kan zijwaarts, maar ook verticaal. En hetzelfde geldt voor je social media-logo’s. Ook hier zit – gezien de beperkte ruimte – de grootste uitdaging in het ontwerp voor smartphones. En dat terwijl de navigatie niet minder belangrijk wordt. Daarom wordt de navigatie vrijwel altijd ingeklapt en prominent, helemaal rechtsboven, in het beeld geplaatst.

Voor welke optie ga je?

Dat kan op verschillende manieren, kijk hier maar eens op de verschillende items onder ‘Navigation’ en verklein je venster tot het formaat van een smartphone. Het is lastig te zeggen welke optie ‘de beste’ is.

Persoonlijk ben ik niet zo’n fan van menu’s die bij het uitschuiven ook de menuknop mee naar rechts schuiven. Want waarom zou je dat doen? M’n vinger bevindt zich nog aan de linkerkant, dus laat die knop daar staan! Denk ook na over hoe je de ingeklapte navigatie weergeeft. Gebruik je de term ‘Menu’ of gebruik je het inmiddels als universeel beschouwde ‘hamburger icon’ (icoon met drie streepjes)? Ook hier speelt persoonlijke voorkeur een rol. Volgens mij is de enige regel: hou het duidelijk en herkenbaar!

Afbeeldingen en video

Afbeeldingen en video kosten relatief veel laadtijd. Met name op mobiele apparaten kan dat voor problemen zorgen. Bezoekers zijn wellicht bereid iets langer te wachten dan op een desktop of laptop, maar na meer dan vijf seconden laadtijd ben je de meerderheid toch echt kwijt. Een veelgebruikte oplossing om de laadtijd te reduceren is het gebruik van afbeeldingen met een lagere resolutie. Het probleem met deze oplossing is dat steeds meer smartphones over een scherm met zeer hoge resolutie beschikken. Denk bijvoorbeeld aan het retinascherm van 1136 x 640 pixels op de iPhone 5 en 5s. Afbeeldingen of video’s met een te lage resolutie zien er dan al snel korrelig uit.

Daar kun je op verschillende manieren mee omgaan. Technisch gezien kan een internetbureau de website zo bouwen dat de resolutie en het aantal dpi (dots per inch) van het gebruikte apparaat wordt herkend. Vervolgens kan dan voor elke resolutie een andere afbeelding worden geladen. Ethan Marcotte of Lydie Polak kunnen je hier meer over vertellen.

De ideale oplossing

Toch bestaat er geen ideale oplossing voor dit probleem. Want stel dat een bezoeker een iPhone met retinascherm heeft, maar niet de beschikking over een redelijke internetverbinding: wat heb je dan liever? Een relatief korte laadtijd en een korrelige afbeelding? Of een relatief lange laadtijd en een scherpe afbeelding? Het is dus jammer dat er nog geen methode bestaat om de resolutie en de internetsnelheid te detecteren en op basis daarvan een bepaalde afbeelding of video in te laden. Je kunt wel de internetsnelheid detecteren en op basis daarvan een andere video inladen.

Formulieren en tabellen

Smartphones en tablets hebben niet alleen een kleiner scherm, ze worden ook anders gebruikt dan een desktop of laptop. Door de afwezigheid van een fysiek toetsenbord en de houding waarin de apparaten worden gebruikt, is typen veel minder gebruiksvriendelijk dan op een desktop of laptop. Gebruikers van een smartphone zullen om die reden niet zo snel een heel uitgebreid formulier invullen. Aangezien ingevulde formulieren nogal waardevol kunnen zijn, is het wijs hier rekening mee te houden. Er zijn verschillende manieren waarop je bezoekers op een mobiel apparaat blij kunt maken:

• Een korter formulier met minder invulvelden
• De optie om het formulier naar je eigen e-mailadres te mailen
• In het geval van een contactformulier: een standaardtekst, waarna de bezoeker alleen nog maar op ‘Verzend’ hoeft te drukken. En vergeet ook een grote call-button niet.
• Het gebruik van mobielvriendelijke invoermethoden als de ‘picker view’ (denk aan de manier waarop je de wekker instelt op een iPhone).

En dan heb je nog tabellen. Die zijn vaak groot. En dat terwijl het scherm van een smartphone dat niet is. Hoe los je dat op? Je kunt het menu bijvoorbeeld inklappen. Een andere manier is het verticaal in plaats van horizontaal weergeven van de data. Front-end designer Brad Frost laat op deze ‘github’ (een online platform om stukjes code met elkaar te delen) verschillende oplossingen zien.

Let op de laadtijd!

Een hoge laadtijd is één van de grootste, zoniet de allergrootste, traffickiller in de online wereld. Elk zichzelf respecterend internetbureau is in staat om een website te bouwen die op een desktop binnen enkele seconden volledig geladen op je scherm verschijnt. Maar mobiele apparaten – en zeker smartphones – beschikken over veel minder power dan een desktop of laptop. De uitdaging begint dan ook pas écht op het moment dat je een lage laadtijd wilt realiseren voor mobiele gebruikers. In het geval van responsive webdesign zijn er grofweg twee manieren om ervoor te zorgen dat de website ook op mobiele apparaten binnen een acceptabele tijd – dus binnen enkele seconden – kan worden geladen.

Enerzijds kun je zorgen dat mobiele gebruikers een minder zwaar pakket hoeven binnen te halen dan gebruikers van een desktop of laptop. Wanneer je bijvoorbeeld op een smartphone een bepaalde slider niet weergeeft, zorg je dat ook de benodigde javascript-bestanden niet ingeladen hoeven te worden. In dit  geval gaat het met name om de afbeeldingen en video’s. Die kunnen webdesigners – zoals ik in dit artikel bij ‘afbeeldingen en video’ heb uitgelegd – per schermresolutie opnieuw bepalen. Zo zorg je dat bezoekers van je website op een mobiel apparaat minder grote afbeeldingen en video’s hoeven in te laden dan wanneer zij je website bezoeken op een desktop of laptop.

Schaalbaarheid

Anderzijds kun je gebruik maken van technieken die de laadtijd in het algemeen reduceren, dus voor alle gebruikers. Het gaat dan vooral om het begrip ‘schaalbaarheid’, waarbij je zorgt dat de schermresolutie nog maar een beperkte rol speelt. Wat bedoel ik daar precies mee?

In het geval van afbeeldingen kan een webdesigner kiezen voor pixel based-bestanden, maar – behalve in het geval van foto’s – ook voor Scalable Vector Graphic-bestanden. SVG’s kun je onbeperkt schalen en hebben een beperkte bestandsgrootte. Dat zorgt ervoor dat dezelfde afbeelding gewoon kan worden ‘uitgesmeerd’ over een groter vlak, zonder dat het bestand zwaarder en de kwaliteit minder wordt. Verder kun je deze website gebruiken om PNG-afbeeldingen te verkleinen, vaak tot wel 50%.

Een andere methode is het gebruik van zogeheten ‘icon fonts’, of eigen lettertypes. In veel gevallen kunnen afbeeldingen die voor de vormgeving of huisstijl worden gebruikt worden vervangen door een icon font. Het voordeel daarvan is dat je meerdere losse icons kunt  vervangen door één bestand: het icon font. Bovendien zijn icon fonts in het algemeen minder zwaar dan een afbeelding. Zo bespaar je als websitebeheerder dus dubbel op je laadtijd.

Afgeronde hoeken en gradient met css

In welke gevallen kan dat dan? Denk aan logo’s, headers en iconen die uitgeschreven worden. Tot slot kan er tegenwoordig een hoop met css worden opgelost, waarbij ‘vroeger’ nog afbeeldingen voor nodig waren. Denk aan afgeronde hoeken en gradient (kleurverloop). Hierdoor hoeven minder afbeeldingen ingeladen te worden, wat ook weer laadtijd scheelt.

Geen ‘noob’ meer

Als het goed is heb je nu een vrij uitgebreid beeld van het proces rond de ontwikkeling van een responsive website. Misschien vond je het artikel hier en daar wat te technisch van karakter, maar zo weet je in ieder geval welke overwegingen een professioneel internetbureau maakt en kun je enigszins invulling geven aan het verhaal dat jou als eigenaar van een website wordt verteld op het moment dat je een responsive website laat ontwikkelen.

Je weet wat je wel en niet kunt verwachten en misschien kun je zelfs suggesties doen. Zo ben je niet meer de ‘autonoob’ die bij de garage wordt verteld dat er iets mis is met je ‘fuseekogel’. Wat? Fuseekogel? Precies.