Responsive design is niet alleen een passende lay-out

Wat is responsive nou precies?

De reden waarom een website responsive wordt gemaakt is om ervoor te zorgen dat de website ook te bedienen is op verschillende mobiele apparaten. Dit betekent niet dat hiervoor alleen de lay-out van de website wordt aangepast en de grootte van teksten en buttons. Er komen veel meer achterliggende gedachtes bij kijken waarbij de belangrijkste is: Wat is het doel van de bezoeker? Iemand die een website bezoekt op zijn smartphone, heeft hele andere wensen en eisen dan wanneer zij via een desktop de site bezoeken. Bezoekers die vanaf een smartphone afkomstig zijn, oriënteren zich vaak meer op een website of zoeken naar contactgegevens. Onderdelen zoals sliders of animaties zijn hierdoor vaak overbodig en leiden juist af. Is het niet relevant voor je mobiele bezoeker? Dan kunnen bepaalde onderdelen van je site anders worden weergeven of helemaal worden weggelaten. Vanuit dit perspectief worden de keuzes voor een responsive design gemaakt.

Voordelen van responsive

Voordat we dieper ingaan op hoe een responsive website bij ons tot stand komt, vertellen we je graag eerst welke voordelen je allemaal kunt krijgen.

Optimale gebruikerservaring
Responsive design zorgt voor een optimale gebruikerservaring voor je bezoekers. Zij kunnen vanaf elk device jouw website bezoeken en alle content wordt duidelijk en overzichtelijk weergegeven. Je hebt het vast wel een keer zelf meegemaakt dat je via je smartphone een website bezocht, maar je alle tekst op de website moest inzoomen en verschuiven om überhaupt te kunnen lezen. Wanneer een website responsive is kan je juist alle content makkelijk lezen en is ook navigeren heel eenvoudig.

Google
Het doel van Google is om zoveel mogelijk mensen een optimale gebruikerservaring te geven. Hiervoor willen zij mensen doorlinken naar kwalitatieve sites waar zij dit kunnen ervaren. Mobiel- en gebruiksvriendelijkheid speelt hierbij een belangrijke rol. Responsive design ondersteund dit doordat bezoekers makkelijker een site vanaf elke device kunnen bezoeken en navigeren. Ook hoeft Google maar één website te indexeren. Als je een aparte mobiele site voor je website maakt, moet Google al twee verschillende websites indexeren met twee verschillende webadressen. Dit betekent ook dat Google ziet dat er op twee “verschillende” websites, exact dezelfde teksten staan. Dezelfde teksten oftewel duplicate content, wordt door Google gestraft.

Beheren van content
Een mobiele versie van je website betekent ook dat je gebruik moet maken van twee CMS-systemen. Ook de content moet je dus altijd dubbel aanpassen in twee verschillende systemen, wat veel extra werk met zich mee kan brengen.

Mobiele gebruikers blijven toenemen
Eigenlijk weet je dit stiekem al, het aantal mobiele gebruikers en het verkeer dat vanaf mobiele apparaten komt, blijft toenemen. Volgens onderzoeksbureau Zenith is de verwachting voor 2017 dat wereldwijd het mobiele internetverkeer zal toenemen tot 75%. Voor 2018 is dit zelf 80%.

Door deze toename is het ook belangrijk om stil te staan bij een mobile-first perspectief. Hierbij wordt je website ontworpen en gebouwd met het doel dat deze vooral vanaf mobiele apparaten wordt bezocht. Vanuit dit perspectief worden vaak andere keuzes gemaakt in het responsive design dan vanuit de desktop.

Hoe wordt een website responsive gemaakt?

Een website is opgebouwd uit meerdere onderdelen die allemaal beïnvloed worden bij een responsive design. Hierdoor verschilt de weergave van het design op de desktop met die van mobiele apparaten. We nemen je kort mee in deze onderdelen en welke belangrijke effecten hierbij komen kijken.

1. De container

Als eerst beginnen we met de container van je website die de inhoud van je website bevat. De breedte die voor de container wordt gebruikt is bij responsive design flexibel. Wij gebruiken vier mogelijke maximale breedtes voor de container 1000 px, 1200 px, 1400 px of schermvullend. Elke breedte heeft zijn eigen voordelen en wordt afhankelijk van de doelgroep en de doel van de website gekozen.

2. De zijmarges

Wij beschouwen de zijmarges heel simpel als de randen die buiten de inhoud van de website vallen. Op de afbeelding hieronder zijn deze oranje gekleurd. Deze marges kunnen op verschillende schermen, anders worden weergeven op basis van de schermresolutie. Een scherm met een lage resolutie kan hierdoor smallere zijmarges weergeven dan een scherm met een hogere resolutie.

3. Het logo

Het logo van je website is natuurlijk een van de belangrijkste kenmerken van je website. Je bezoekers kunnen je hierdoor makkelijk herkennen en het kan een gevoel van vertrouwen creëren. Ook dient het vaak als een klikbare button waardoor je terug komt op de homepagina. Voor smartphones gebruiken wij een andere plek voor het logo, dan de desktop versie. De weergave van het logo verwisseld hierdoor ook per apparaat. Bij een smartphone versie wordt het logo vaak bovenin de pagina gecentreerd, terwijl op de desktop versie het logo vaak links bovenin, naast andere elementen te vinden is.

4. De hoofdnavigatie

Hiermee wordt ook wel het menu waarmee je over de website kunt navigeren bedoeld. Op de desktop is vaak een lijst met buttons of tekstlinks te vinden die naast of onder elkaar kunnen staan. Doordat je op een smartphone niet genoeg ruimte hebt voor al deze tekst zijn er verschillende mogelijkheden om het menu te weergeven. Wij gebruiken standaard een hamburgermenu, waarmee het tekstmenu wordt vervangen.

Dit is het icoon van een hamburgermenu. Door hier op te klikken verschijnt er een tweede laag over de site heen waarin het menu wordt weergeven. Op de afbeelding hieronder kun je een goede indruk krijgen van hoe dit eruit ziet.

5. De feature (of slider)

Dit is vaak een grote afbeelding of slider die bovenaan de website te vinden is. Bij een slider is er vaak sprake dat om de zoveel seconden een andere afbeelding verschijnt. Op een desktop kan dit er strak en gelikt uit zien, maar bij een mobiele weergave kan dit niet handig zijn. Hiervoor zijn vaak twee opties mogelijk: De feature uitsplitsen in blokken of deze volledig weghalen. De keuze hiertussen wordt gemaakt op basis van de noodzaak van het tonen van de slides. Bevat de slider niet te veel slides en is het echt belangrijk? Dan worden de afbeeldingen apart onder elkaar gezet, met elk een corresponderende tekst. Dient de feature vooral om aandacht te trekken, maar is deze verder niet noodzakelijk? Weghalen kan dan een goede optie zijn. Zo komen belangrijk elementen hoger op je website te staan.

6. De content

Hiermee bedoelen we eigenlijk alle inhoud in je site, zoals de teksten en bijbehorende afbeeldingen en buttons. Dit kan op een desktop vaak makkelijk naast elkaar in kolommen worden weergeven. Wanneer de website op een kleiner scherm wordt weergeven, wordt dit lastig. De kolommen zullen hierbij eerst smaller worden, maar als dit niet past zullen zij onder elkaar gaan staan. Dit is niet erg doordat mensen gewend zijn om op mobiele apparaten te moeten scrollen.

7. De footer

Dit is het onderste deel van je site waar meestal contactopties, copyright info en links naar andere delen van de site staan. De footer bestaat vaak uit meerdere kolommen waarin de tekst wordt weergeven. Op de mobiele weergave wordt dit vaak onder elkaar geplaatst. Als sommige elementen van de footer niet een daadwerlijke meerwaarde opleveren voor op smartphones of tablets, kan ervoor gekozen worden dat deze worden weggelaten.

Hoe kunnen wij helpen?

Hopelijk heb je zo een goed beeld van hoe wij een website responsive maken en dat dit hierdoor anders eruit kan zien dan je uiteindelijk verwacht. Heb jij een bepaalde visie van hoe jouw website responsive eruit moet zien? Hier kunnen wij uiteraard ook voor zorgen en we bespreken graag de mogelijkheden met je.