Dit blog vormt het begin van een reeks over Responsive webdesign. Het begin, omdat dit blog de basis en de ontwikkeling van Responsive webdesign uitlegt en de vraag "Waarom Responsive webdesign?" behandelt. Kortom de basis van Responsive webdesign komt hier aan bod.

 

Definitie

Responsive webdesign (aldus wikipedia): Responsive webdesign is een benadering van webdesign waarbij de web developer streeft naar een optimale webervaring voor een breed scala aan apparaten (van desktop computerschermen tot mobiele telefoons). Het ontwerp van een responsive website schaalt mee met de afmetingen van een scherm, zonder in te leveren op leesbaarheid van tekst of bruikbaarheid van de gebruikersinterface.

 

Introductie

De term responsive webdesign (hierna RWD) is in 2010 bedacht door Ethan Marcotte. In het gelijknamige artikel schreef Marcotte waarom een website die met vaste afmetingen voor een specifiek apparaat (desktop of mobiel) gebouwd is niet meer voldoet aan de huidige standaarden. De opkomst van smartphones, tablets, laptops en alle verschillende schermgroottes heeft gezorgd voor een grote omslag in de wereld van web development. Omdat steeds meer websites bezocht worden door mobiele apparaten is het logisch dat hier rekening mee gehouden wordt bij de ontwikkeling van die websites. Aangezien niet te voorspellen is wat voor apparaten er in de toekomst bij zullen komen is het vervolgens logisch om te zorgen dat de website goed functioneert voor alle schermgroottes, in plaats van één vastgestelde grootte.

 

De doorslaggevende factor voor de opmars van RWD t.o.v. alternatieve opties, zoals een losse mobiele website of de ontwikkeling van een app, kwam vanuit Google. In juni 2012 gaf het bedrijf RWD op als voorkeur en ‘industry best-practice’ voor het ontwikkelen van websites voor smartphones.

 

Techniek

Technisch gezien bestaat RWD uit de volgende basiselementen:

  • Een flexibel grid; Deze techniek zorgt ervoor dat de lay-out van een website altijd dynamisch is. De lay-out zal zich uitstrekken over de beschikbare ruimte op het scherm van de gebruiker en bij een tekort aan ruimte zichzelf herindelen om altijd op het scherm te passen.
  • Flexibele afbeeldingen; Door de afbeeldingen binnen een website flexibel te maken wordt ervoor gezorgd dat, hoe de website zich ook aanpast aan het scherm van de gebruiker, de afbeeldingen zich altijd netjes schalen en plaatsen binnen deze ruimte, net als het grid.
  • Media Queries; De vorige twee technieken worden al heel lang gebruikt, wat RWD uiteindelijk echt op de kaart heeft gezet zijn Media Queries. Met behulp van Media Queries kan worden gezorgd dat de indeling van een pagina zich aanpast aan de breedte van het scherm, waardoor elementen die eerst alleen onder elkaar pasten nu naast elkaar kunnen staan zodat het overzicht voor de gebruiker wordt verbeterd.
  • 1 Code base; Een responsive website heeft maar 1 code-base. Dat wil zeggen dat wanneer de code of inhoud van de website wordt aangepast, dit direct voor alle versies van de site is aangepast, waarmee overbodig werk voorkomen wordt.

 

Totstandkoming responsive webdesign

Nu we de basis en de techniek beschreven hebben kunnen we overgaan naar de totstandkoming van Responsive webdesign
 

Schermafbeelding 2015-09-03 om 11.11.15

 

2007

De iPhone wordt gelanceerd – niet de eerste smartphone ter wereld, maar wel de eerste met multi-touch ondersteuning, waardoor normale websites beter bruikbaar worden op het kleine scherm, voornamelijk door de pinch-to-zoom functionaliteit, waardoor inzoomen wordt vergemakkelijkt.
Webdevelopers beginnen met het maken van voor-iPhone-geoptimaliseerde-websites om bezoekers van hun website met een iPhone een betere gebruikerservaring te bieden.
 

2008

Google reageert op de groeiende markt van smartphones met een eigen OS genaamd Android. In 2008 wordt de eerste smartphone met Android gelanceerd, de HTC Dream. Snel daarna volgen andere smartphone modellen met andere resoluties dan de iPhone, waardoor websites die gemaakt zijn voor de iPhone al niet meer voldoen.
Development van mobile websites blijft groeien en past zich aan door te ontwikkelen voor kleine schermen in plaats van specifiek voor de iPhone
 

2010

Ondertussen is de markt voor smartphones en het aantal smartphone bezitters hard gegroeid. Steeds vaker blijkt dat ook een generieke mobiele site niet meer een sluitende oplossing is.

 
In april lanceert Apple de iPad. Mobiele websites zijn te klein om goed te functioneren op de eerste tablet, terwijl desktop sites te groot blijken. Een deel van de webdesigners reageert met websites specifiek voor tablets, waardoor uiteindelijk 3 verschillende websites gemaakt en onderhouden moeten worden.

 
Flexibele afbeeldingen en grids worden al gebruikt om te zorgen dat een website goed wordt getoond op grote en kleine schermen, maar ook dit blijkt niet voldoende omdat het tonen van desktop content – ook al schalen deze flexibel naar mobile devices – niet gebruiksvriendelijk zijn.

 
De oplossing draagt zich in juni via Ethan Marcotte aan in de vorm van de toevoeging van Media Queries. Deze techniek bestaat al langer, maar door het combineren hiervan met de flexibele afbeeldingen en grids ontstaat de mogelijkheid om voor verschillende schermgroottes een andere indeling te maken.Ethan Marcotte noemt deze nieuwe techniek Responsive Web Design.

 

2010 +

In de jaren hierna komen er veel nieuwe technieken bij als alternatief voor, of uitbreiding op, RWD. De basis van de techniek is nu al 5 jaar onveranderd gebleven. Daarnaast geven zoekmachines sinds 2015 websites met RWD voorrang in de ranking.

 

Waarom responsive webdesign?

De implementatie van responsive webdesign in een website kan een flinke investering zijn. Toch is het voor de meeste websites wel raadzaam om deze transitie op den duur te maken. Hierbij geldt over het algemeen: “hoe eerder hoe beter”.

 

Belangrijk is wel om te kijken hoeveel mobiele bezoekers je eigenlijk hebt, en wat hun gedrag is op je website. Wanneer bijvoorbeeld slechts 5% van je bezoekers met een smartphone of tablet je website bekijkt is optimaliseren voor deze apparaten geen prioriteit.
Wanneer echter 30% van je bezoekers via hun smartphone je website bekijkt, maar 50% hiervan gelijk weer vertrekt, is het hoog tijd om deze gebruikers beter te bedienen.
Hieronder een drietal punten die stof geven tot nadenken:

 

1. Google

In 2012 gaf Google aan dat RWD wat hen betreft de industry best practice is. De reden hiervoor is dat andere implementaties over het algemeen andere URL’s hanteren en voor dezelfde pagina’s andere content tonen aan de bezoeker. Wanneer een website responsive is, is het voor Google makkelijker om deze goed te indexeren en te bepalen welke content op de website belangrijk is.

 

Daarnaast heeft Google dit jaar aangegeven vanaf 21 april 2015 sites die geoptimaliseerd zijn voor mobile devices een hogere pagerank te gaan toekennen. (http://googlewebmastercentral.blogspot.nl/2015/02/finding-more-mobile-friendly-search.html)
Kort gezegd betekent dit dat, wanneer je website niet voor mobiel geoptimaliseerd is, je lager in Google komt te staan ten opzichte van websites die dit wel zijn.

 

2. Mobiele gebruikersstatistieken

In onderstaande grafiek is het internet gebruik van volwassenen over de afgelopen 7 jaar (in de VS) te zien. Het gebruik van het internet op desktop en laptops is in die tijd nagenoeg hetzelfde gebleven, maar de hoeveelheid uren per dag is verdubbeld. Dit is zichtbaar volledig te wijden aan de opmars van smartphones en tablets.

Untitled 1
Ook in Nederland is de penetratie van smartphones enorm gestegen de laatste jaren. In onderstaande grafiek is te zien hoeveel Nederlanders in het bezit zijn van een smartphone van Q1 2010 tot Q1 2015:

 

Untitled

Deze gigantische groei geeft aan hoe belangrijk het is om ook bezoekers op een smartphone of tablet van een goede gebruikerservaring te voorzien.

 

3. Future-proof

Het is belangrijk zo flexibel mogelijk te zijn voor toekomst. Geen markt groeit zo hard als die van elektronica en geen werkveld ontwikkelt zich zo snel als webdesign. Elke week is er weer een nieuwe gadget of techniek beschikbaar. Het feit dat het rekening houden hiermee in de filosofie van responsive design is ingebakken maakt dat deze techniek - welke in de basis in vijf jaar nauwelijks veranderd is - één van de meest stabiele is. RWD zorgt dat je website, ongeacht de apparaten die in de toekomst uitkomen, goed weergegeven zal worden en voor de bezoekers gebruiksvriendelijk zal zijn.

 

Conclusie

Responsive webdesign is niet een verplichte techniek die iedereen per sé moet hebben, sommige sites worden nagenoeg alleen op een desktop bekeken, en sommige sites hebben niet veel baat bij de zoekresultaten van Google. Op basis van hoeveel mobiele en tablet bezoekers er op je website komen, en hoeveel waarde er wordt gehecht aan de organische zoekresultaten van Google kan de prioriteit van implementatie van RWD variëren.

Wanneer je echter besloten hebt te willen optimaliseren voor smartphones en tablets is responsive webdesign zeker de beste keuze.