Vroeger werden websites alleen bezocht via computers met schermen waarvan de afmetingen binnen bepaalde dimensies vielen. Een website die er goed zag op jouw pc, zag er vrijwel hetzelfde uit op alle andere schermen.
Vandaag de dag echter, kan jou website bezocht worden door een hele hoop apparaten van computers met grote en kleine schermen tot smartphones en tablets. Hoe jou website reageert op al deze schermafbeeldingen is daarom iets om goed over na te denken.
Wat is een responsive design?
Tegenwoordig hebben websites een responsive design nodig zodat ze zich aanpassen aan de schermresolutie van het apparaat van de bezoeker. Dit betekent het maken van flexibele en dynamische websites die zich aanpassen aan verschillende schermresoluties.
Zo wordt de weergave ervan automatisch aangepast aan het schermformaat van het toestel waarop uw website bekeken wordt en vermijd je een slechte gebruikerservaring.
Heb ik verschillende websites nodig voor verschillende apparaten?
Nee, bij een responsive website delen alle apparaten per webpagina hetzelfde HTML-bestand. Door te werken met verschillende stylesheets (CSS) kan de weergave worden afgestemd op de gebruiker. Je hebt dus geen aparte mobiele website nodig.
Wat wil dat zeggen? De HTML-code, die zorgt voor de structuur van je website, blijft hetzelfde. De stylesheets, die zorgen voor hoe de structuur eruit ziet, is anders voor een verschillende schermgrootte.
Een bestaand ontwerp van een volledige website kan dus geschikt gemaakt worden verschillende apparaten apparaten door een extra stylesheet te voorzien. Je hebt dus geen mobiele versie nodig van je website.
Hoe weet mijn site door welk apparaat hij bezocht wordt?
Bij een responsive website is geen ingewikkelde apparaatdetectie of javascript nodig. Er is slechts één website waarvan de broncode onderhouden moet worden. Voor elke resolutie wordt bepaald wat er wordt getoond door de keuze van een stylesheet.
Dit gebeurd door een breekpunt toe te voegen in de stylesheet code. Dit breekpunt word dan door je browser gebruikt om te kiezen welke code relevant is. Kort uitgelegd, de code zegt tegen de browser, als je een bepaalde breedte hebt die kleiner is als het breekpunt, gebruik dan deze code om de website te stylen. Heb je een breedte die groter is als het breekpunt, gebruik dan deze andere code.
Zit je momenteel op een desktop of laptop kan je dit live in actie zien. Verklein het venster van deze website en zie hoe hij zich aanpast aan jouw browsergrootte. Zie je op een bepaald moment alles verspringen naar een nieuw design? Dat was het dus het ingestelde breekpunt.
In principe kan je zoveel breekpunten toevoegen als je wil, maar het is gebruikelijk om het bij 2 breekpunten te houden zodat je ontwerp van toepassing is op 3 groepen van schermgroottes (smartphones, tablets en PC). Afhankelijk van je toepassing of ontwerp kan je uiteraard besluiten om meer breekpunten in te voegen.
Waarin verschillen deze verschillende stylesheets?
Om te beginnen is de navigatie bij een kleiner scherm vaak herleid tot één dropdown menu, terwijl het op je desktop en laptop volledig getoond word. Menu’s in de sidebar worden bij kleine schermen niet meer rechts getoond, maar boven of onder andere content weergegeven.
Content die op een groot scherm netjes naast mekaar kan staan, word bij kleinere resoluties onder mekaar gezet. Heb je links tekst en rechts afbeeldingen op een groot scherm, zie je eerst de tekst en dan de afbeeldingen op je smartphone. Ook je tekst krijgt best andere marges om de leesbaarheid te verhogen.
Sommige content wordt alleen getoond op grotere schermen. Een foto om je website mooi te doen ogen op een pc, is misschien onnodig op een klein scherm. Op die manier kan je ook de laadtijd via mobiele data drastisch verlagen. Grote afbeeldingen kan je voor mobiele weergaven in resolutie verlagen.
Over het algemeen hebben websites op kleinere schermen dus een vereenvoudigde vormgeving en bevatten ze vaak minder informatie en functionaliteit dan de volwaardige site.
Door echter één algemene website responsive te maken blijft het merendeel van de content (zo niet alle) ook op mobiele apparaten toegankelijk en hoeft maar één website te worden ontwikkeld en onderhouden.
Waar start ik?
Meestal wordt gekozen om een website te ontwerpen voor een pc scherm om dan daarna te gaan bepalen hoe dat ontwerp eruit moet zien op de kleinere schermen.
Waarom? Omdat het grote deel van je bezoekers op een pc je website bezoeken (al is dit de laatste jaren aan het veranderen). Daarnaast heeft een groot scherm meer ontwerp nodig, meer foto’s en bevat het de volledige functionaliteit van je website. Het is makkelijker om achteraf deze elementen te herstructureren of uit te zetten in de stylesheet voor kleinere schermen, dan omgekeerd te werken.
Een andere ontwerpfilosofie die in opkomst is, is mobile first. Bij mobile first gaat men in eerste instantie uit van het kleinste scherm (smartphone), en vervolgens worden het ontwerp en de mogelijkheden opgeschaald naarmate de viewport groter wordt. Hierbij ga je ervan uit dat als je met een klein scherm begint, je alleen bezig bent met de essentiële inhoud.
Welke kies ik? Probeer in te schatten met welk apparaat je klanten naar je website gaan surfen en of je meer mobiele bezoekers verwacht dan PC gebruikers.
Hoe weet ik of mijn responsive design goed is?
Het grote scala aan verschillende schermformaten en browsers zijn soms moeilijk na te bootsen. Je hebt thuis wel wat apparaten, maar lang niet alle toestellen en browser combinaties. Hoe weet je dan dat je website er goed uit ziet op alle schermen en browsers?
Een dienst als Viewporter biedt soelaas, maar is niet perfect. De dienst maakt het mogelijk websites te testen in verschillende schermafmetingen, maar specifieke bugs in verschillende browsers kunnen er niet meer uitgehaald worden.
Daarom is het belangrijk dat je je laat bijstaan door een professional! Een professionele website werkt altijd en overal!
Google houdt van responsive!
Als je je online strategie serieus neemt, dan is responsive webdesign een belangrijke stap in de ontwikkeling van een nieuwe website. Niet alleen ga je klanten mislopen als je website niet mooi getoond wordt op hun apparaat. De kans dat ze je website gaan terugvinden is ook kleiner.
Google ranked namelijk jouw website in de zoekresultaten gebaseerd op verschillende parameters. De parameter, ‘is deze website responsive’ is de laatste jaren steeds belangrijker geworden. Je hebt misschien relevante content, maar als het apparaat waarop die content gelezen wordt niet geschikt is, was dit geen goed zoekresultaat volgens google . Vanuit het oogpunt van zoekmachine optimalisatie gaat responsive webdesign steeds belangrijker worden en verhoogd het je vindbaarheid.
Conclusie
Responsive webdesign is zeer belangrijk. Een responsive website met een adaptive webdsign die goed werkt op verschillende devices zorgt voor een optimale gebruikerservaring voor je klant of hij nu op zijn mobiele telefoon, desktop, tablet of laptop je website gebruikt.
