Responsive design: desktop first, maar wat daarna?

De desktop website is ‘alive and kicking’, maar jouw klant ziet een mobiele website wel zitten. Dit is natuurlijk geen probleem voor jou, als webbureau. In je achterhoofd spoken alleen de woorden van Brad Frost steeds rond: ‘planting a seed for responsive design’.

Met deze methode wordt de desktop website van bestaande klanten voorbereid op responsive design. Hoe dat aangepakt moet worden, vertelt hij niet. In dit artikel geef ik mijn aanvulling op deze methode.

Planting a seed: de ‘awkward tree’

Brad Frost heeft het in zijn artikel over de ‘Planting a seed’-methode. Vaak heeft een klant een bestaande desktop website. In de slides, die bij zijn artikel horen, wordt zo’n website vergeleken met een ‘awkward tree’: je wilt er als ontwikkelaar eigenlijk niet meer mee geconfronteerd worden.

Vanuit deze boom wordt een zaadje gepland. Het is klein, maar wel geplant. Dit zaadje is een mobiele, flexibele, opnieuw doordachte website, die het begin gaat vormen van een ‘new global site’; de mooie nieuwe boom. Deze website is mobile first, adaptive/responsive en future-friendly opgebouwd. Wanneer alles doorgevoerd is, kan er definitief afgerekend worden met de ‘awkward tree’.

De ‘Planting a seed’-methode klinkt eigenlijk heel goed. Je hebt een ‘awkward tree’, breekt deze af, bekijkt alle onderdelen opnieuw en begint alles ‘mobile first’ op te bouwen. Bij het ‘mobile first’-principe is de basis van je HTML en CSS eigenlijk de mobiele website. De rest van de breakpoints worden beschreven in de media queries. Op die manier blijft de performance van ieder apparaat hoog en kan de bezoeker de website op ieder apparaat op de gewenste manier bekijken.

Probleem opgelost?

Probleem opgelost, zou je zeggen. Echter lopen nog veel professionals vast op het moment dat je vanuit de ‘awkward tree’ een zaadje plant. Want hoe vertaal je een desktop website nou naar een klein schermpje?

Eigenlijk komt het erop neer dat je al te veel weet. De methode heet niet voor niets ‘mobile first’; je mag in principe nog niet 1 seconde aan desktop denken. Ik weet zelf ook dat het wat overdreven is, aangezien er al in een vroeg stadium na wordt gedacht over interaction design en contentchoreografie. Dat terzijde hoor je eigenlijk nog niet te weten hoe je website er op desktop uit gaat zien. Het feit dat je al weet hoe desktop eruit gaat zien zal echter een groot voordeel worden met gebruik van de onderstaande methode. Deze methode heb ik bedacht, als aanvulling op de ‘Planting a seed’-methode van Brad Frost.

Disciplines

Op de één of andere manier wordt er gedacht dat het responsive maken van een bestaande desktop website vooral een klus is voor een front-end developer. “Hier, ga jij maar even knoeien met de CSS, dan komt er vanzelf een responsive website uitrollen.”

Een fixed website overzetten naar een flexibele website kan wel, maar duurt erg lang. Daarbij moet de front-end developer ineens nadenken over dingen waar hij zich normaal niet mee bezig houdt. Om die reden wordt er gebruikt gemaakt van een interactie designer, een designer, een front-end developer en een back-end developer.

Interactie design

Het proces begint met interactie design. Voor de desktop website is er destijds een interactie design gemaakt. De templates van de desktop website worden je nieuwe leidraad. Het interactie design van een desktop website kan niet klakkeloos overgenomen worden naar mobiel. Onderdelen als hovers, komen te vervallen. Complexe interacties moeten heroverwogen worden, maar de meeste dingen kunnen wel overgenomen worden. Een zoekfunctie, social buttons, formulieren et cetera; allemaal prima te gebruiken op mobiel. Voor een interactie designer is het makkelijker om deze functies te visualiseren voor mobiel.

Deze onderdelen kunnen gevisualiseerd worden in contentchoreografie of modulechoreografie-boards. In zo’n board zijn meerdere breakpoints opgenomen. De modules op de website zijn momenteel nog geplaatst en vormgegeven volgens desktop principes, maar de bedoeling is een flexibele, adaptive/responsive website te krijgen. In onderstaande video, deze pdf en dit Illustrator-bestand wordt modulechoreografie-boarding uitgelegd.

Modulechoreografie-boarding heeft toegevoegde waarde, omdat:

• een interactie designer kan experimenteren, door de elementen realtime te positioneren/herpositioneren;
• de verschillen van de choreografie in een blik duidelijk zijn per breakpoint;
• het voor iedere discipline een leidraad vormt;
• iemand die later in het project komt vallen, er meteen verder mee zou kunnen gaan.

Wanneer een interactie designer voor alle breakpoints de choreografie heeft verzonnen, is het tijd voor een overleg tussen interactie designer en front-end developer. Het is de bedoeling dat met zo min mogelijk code de gewenste choreografie bereikt kan worden. De front-end developer zou eventueel nog kleine aanpassingen kunnen suggereren, zodat het aantal regels code beperkt blijft. Wanneer alles duidelijk is voor beide partijen kunnen alle modules ook daadwerkelijk op een board bevestigd worden.

Design

Een designer ontvangt het kant-en-klare module-board. Hierin is alle choreografie te zien en zijn alle modules zichtbaar. Een designer kan aan de choreografie, maat van de modules en de flexibiliteit van modules zien, wat hij of zij moet gaan voorbereiden. Hieronder een voorbeeld:

In de afbeeldingen hierboven zijn de breakpoints desktop en mobiel te zien, zoals ze op het modulechoreografie-board zijn bevestigd. Een designer kan hier in een oogopslag al iets uit afleiden, bijvoorbeeld:

• de header is kleiner en de navigatie is ingeklapt;
• de imageslider is iets compacter gemaakt.

De designer gaat deze onderdelen voorbereiden voor mobiel, maar ook voor tablet. Zo zijn er van iedere afbeelding drie smaken: small, medium en high resolution. Ook kunnen elementen als een pictogram voor het uitklappen van de navigatie ontworpen worden. In overleg met een front-end developer kan er ook nog gekozen worden om elementen die in de desktop website fixed of als background-image ingesteld staan flexibeler te bouwen. Soms zijn daar nog wat design-aanpassingen voor nodig.

Front-end development

In de nieuwe techniek heeft de front-end developer de desktop website al in zijn of haar bezit. Het aangepaste interactie design en het modulechoreografie-board, worden door de interactie designer aangeleverd en van de designer ontvangt de front-end developer vervolgens een map met allerlei bronbestanden in verschillende resoluties.

Overleg tussen de drie partijen is essentieel. In een meeting wordt besproken wat de bedoeling is en wat de front-end developer opnieuw moet bouwen en wat hij of zijn kan overnemen. Na de meeting kan er eindelijk gebouwd worden. De bestaande modules kunnen gezien worden als stukken code die hergebruikt kunnen worden. De stukken code dienen natuurlijk wel overgezet te worden van fixed naar flexibel. In de HTML zullen hier en daar transities moeten komen, zodat er op ieder apparaat de goede resolutie afbeelding geplaatst kan worden. Dit wordt vanzelfsprekend gedaan met media queries.

Voordelen van beide methodes

Een voordeel aan de ‘Planting a seed’-methode is dat er (nog) niets verandert aan de desktop website. Daarnaast krijgt de gebruiker de gewenste weergave op ieder breakpoint en ook is de stap van mobiel of tablet naar alles responsive flexibel en snel te maken. Tenslotte zorgt het planten van het zaadje voor enthousiasme bij klanten, wat ze over kan halen tot aankoop van de laatste stap: het toevoegen van de desktop website aan je zaadje om zo een mobile first, adaptive/responsive website neer te zetten.

Ook mijn verdieping op de ‘Planting a seed’-methode biedt een aantal voordelen. Zo gaat het sneller en makkelijker door een goede samenwerking en kunnen er voor een redelijk klein budget meer apparaten bediend worden dan alleen mobiel en desktop. Modulechoreografie-boarding zorgt daarbij voor overzicht en een nauwe samenwerking tussen de verschillende disciplines en een eventuele klant (bij scrum). Tenslotte kan er door breakpoints te visualiseren in een modulechoreografie-board, geen twijfel ontstaan over de choreografie van de modules.