Responsive design: the do’s and dont’s

Sinds ‘mobilegeddon’ op 21 april 2015 is het hebben van een mobielvriendelijke website een must. Bedrijven met websites die volgens Google niet mobiel vriendelijk zijn worden vanaf die dag slechter gewaardeerd. Veel bedrijven zullen dus moeten anticiperen en een mobielvriendelijke website (laten) ontwikkelen. Toch moet het hebben van een mobielvriendelijke website niet het doel te zijn. Het hebben van een goed werkende website op een mobiel apparaat is het streven!

Deze blogpost zal dieper ingaan op wat er vaak mis gaat bij het ontwikkelen van een website naar een mobiel design en belangrijker, hoe het weer opgelost kan worden.

Eerst even duidelijkheid scheppen. Een responsive design is slechts één manier hoe een website mobielvriendelijk gemaakt kan worden. Voorbeelden van andere methodes zijn het ‘schalen’ van websites of het ‘liquid’ maken van een pagina. In dit artikel hebben we het over het responsive maken van een website.

Probleem 1: Het hoofdmenu doet niet wat je wilt

Je hebt een homepage met bovenaan de pagina een mooi overzicht van al je belangrijke thema’s naast elkaar. Je hoofdmenu. Alles past perfect op een computer. Bij het responsive maken van een website gebeurt het vaak dat een hoofdmenu raar in tweeën wordt geknipt. Zo krijgt de bovenste rij 4 menuknoppen en de rij eronder maar 2. Niet echt netjes.

Gelukkig zijn er diverse manieren om dit op te lossen. Zo kan je het aantal menu hoofdstukken verminderen zodat alles in één rij past. De andere, minder belangrijke, menu hoofdstukken plaats je vervolgens als submenu.

Een meer technische oplossing is door het breekpunt aan te passen. Het punt waar de website verschuift naar de mobiele variant. Zoek de breedtegraad op waar het allemaal mis dreigt te gaan en zet hem daar op. Tot slot kan je natuurlijk ook nog voor een hele andere lay-out kiezen. Zoals alle menu items onder elkaar.

Probleem 2: Afbeeldingen die niet goed meeschalen

Je hebt veel geld betaald voor een fotograaf en prachtige foto’s laten schieten maar op je mobiele apparaat zie je maar een halve foto inclusief een scrollbalk. Zonde!

De oplossing is erg simpel. Neem een framework zoals Bootstrap en gebruik de responsive class (class=”img-responsive”). Nu wordt de afbeelding netjes geschaald afhankelijk van de grootte van het scherm.

En probleem 3: Een overzicht dat ineens geen overzicht meer is

Stel je hebt op je website een overzicht van drie diensten die je levert. Mooi naast elkaar zodat iedereen kan zien wat je allemaal doet. Dan is het logisch dat je dit ook op de mobiele versie zo wilt zien. Toch gaat dit erg vaak mis. Blokken die zo herschalen dat het overzicht dat je had geen overzicht meer is omdat één blok onder de andere twee wordt geplaatst.

De oplossing is simpel, gewoon de afmetingen van de breedte en hoogte zo aanpassen dat de drie elementen naast elkaar passen. Wordt iets anders nu geblokkeerd? Blijven pielen met afmetingen tot alles wel goed staat.

Uiteraard zijn er nog veel meer problemen die kunnen ontstaan bij het ontwikkelen van een responsive website. Bovenstaande drie problemen zijn de meest voorkomende. Doe er je voordeel mee!