Login

Responsive websites

Gepubliceerd: 2014-05-15 15:12:48 | Door hetuilskuiken | 973x bekeken |

Responsive websites

Een nieuwe trend in de wereld van webdesign en development zijn de zogenaamde responsive websites. Ik als webdeveloper bied mijn klanten dan ook de optie voor een zogenaamde responsive website. Veel van de klanten reageren dan met de vraag, wat is dit en waarom zou ik dit willen? In dit artikel zullen deze vragen centraal staan. Verder zullen ook de voor en nadelen behandeld worden, wat techniek aan bod komen en tenslotte zullen er wat tips gegeven worden voor een goed responsive design.

Wat is het?

Responsive websites

Een responsive website schaalt mee met de afmetingen van een scherm, zonder in te leveren op leesbaarheid van tekst of bruikbaarheid van de gebruikersinterface. In andere woorden is het een website die op elk denkbare scherm goed te zien is. Dan moet er gedacht worden aan mobieltjes, maar ook aan grote computerschermen. De website is in principe op een mobieltje even goed te lezen als op een computerscherm. Het design schuift als het ware mee met het scherm. Je hebt dus maar één websitedesign. 

Voordelen

Wat zijn nou de voordelen van een responsive webdesign? 
  • Een optimale gebruikerservaring, achter je bureau én op de bank
Dit is ook gelijk het belangrijkste voordeel. De manier waarop de gemiddelde consument het web benadert is in de afgelopen jaren erg veranderd. Vroeger gingen mensen achter hun bureau zitten om op het internet te surfen. Tegenwoordig browsen we ons suf zelfs in de trein met een smarthpone of op de bank met een tablet. Vandaag de dag neemt mobiel internetverkeer al 15% van het totaal voor haar rekening. De verwachting is dat dit aandeel gaat groeien naar zo’n 25%. Het is zelfs zo dat het in de VS is het al heel normaal om alleen een tablet of smartphone te hebben in plaats van een computer. 
  • Beheergemak
Een alternatief dat vaak wordt gebruikt voor een responsive website, is een applicatie of een mobiele website. Het voordeel van zo’n oplossing is dat je een 100% mobiel geoptimaliseerde ervaring biedt, maar vergeet niet dat je vanaf de lancering twee verschillende omgevingen moet bijhouden. Dat wil zeggen: twee omgevingen om inhoud in te plaatsen en twee omgevingen op veranderingen in door te voeren. Ik heb dit persoonlijk als webdeveloper meegemaakt met een klant en het neemt ontzettend veel tijd in beslag. 

Nadelen

Het belangrijkste nadeel van een responsive website zijn de kosten om het te realiseren.  Het maken van een responsive design neemt meer tijd in beslag en kost daarom meer uren = meer geld.  Tevens is het ontwikkelen van een responsive design ook lastiger dan het ontwikkelen van een statische website. Elk blok en lettertype moet op een andere manier in de code geplaatst worden en er moet met procenten gerekend en gewerkt worden. Dit kost dus ook meer uren = nog meer geld. Op korte termijn zal je dus als klant meer geld betalen. Er kan wel gezegd worden dan het op de lange termijn wel geld zal opleveren. Doordat er maar één website is zal de vindbaarheid van de pagina hoger zijn. Ook zal door het beheergemak  geld bespaard worden. 

Techniek

Er bestaat niet één juiste manier om een responsive website te bouwen. Er zijn verschillende manieren om dit te bereiken. Hieronder vind u een drietal mogelijkheden: 
  • Media queries
De eerste manier die ik ga bespreken is de methode van de media queries. Bij media queries kunnen we voor elk mogelijk scherm een apart stylesheet maken. De media queries geven dus de webpagina een indicatie van de afmetingen van het apparaat waarop de website wordt geladen.
  • Breakpoints 
Zodra een gedeelte van de website buiten het scherm valt wordt er een breakpoint gemaakt. Met dit breakpoint geef je dan aan wat er moet veranderen aan de website zodat het gedeelte dat buiten het scherm valt nu weer binnen het scherm valt.
  • Mobile first
Bij deze methode wordt er eerst een mobiele website gemaakt, vervolgens wordt het scherm steeds vergroot en gekeken wat er anders moet. Dit wordt dan weer aangepast in de code. 
  • Flexibele afbeeldingen
Deze methode wordt vrij weinig toegepast, maar is wel een mogelijkheid. Hierbij worden de plaatjes dynamisch erin gezet zodat ze mee schalen met de grootte van het scherm. Deze methode heeft het nadeel van gebruikersvriendelijkheid en vindbaarheid in de zoekmachine. 

Responsive Web Design with HTML5 and CSS3

Responsive Web Design with HTML5 and CSS3 kopen

Vind u "Responsive websites" interessant? Wellicht is dit product dan wat voor u!

Bestellen

Tips

Om een goede responsive website te maken zal ik (uit ervaring) een aantal tips geven. Een responsive website draait om een combinatie van lay-out, content en gebruikerservaring. Een belangrijke tip bij het maken van een responsive design is het werken via een epicentrische methode (Epicenter design, 2014). Dit houd in dat je begint met ontwerpen van waar de website omdraait. 
Een voorbeeld hiervan is 9292.nl, als je kijkt naar de website is het belangrijke doel (het plannen van een reis) van de website in het midden gecentreerd te vinden. Hierna zijn de afbeeldingen en het menu toegevoegd. Dit moet dus ook bij een responsive website gebeuren. De gedachte hierachter is dat de ruimte dan optimaal gebruikt wordt. Een andere tip die mij regelmatig heeft geholpen is het tegelijk ontwerpen van de schermen. Ontwerp bijvoorbeeld de drie of vier verschillende formaten tegelijkertijd naast elkaar. Ook als een scherm al een ontwerp heeft. Zo kunnen de verschillende formaten elkaar inspireren tijdens het ontwerpen en krijg je met gepuzzel een meer consitent concept uit.

Tot slot

Een responsive website is helemaal hot tegenwoordig en is dat terecht? Waarschijnlijk wel. Het heeft veel voordelen en kan bijdragen aan positieve ontwikkelingen voor jouw bedrijf. 
Ik als webdeveloper raad dan ook mijn klanten aan om een responsive website te nemen!


Deel:

Tags:

Focus gerelateerde producten


Handboek Responsive Design

Handboek Responsive Design kopen

Vond u "Responsive websites" interessant? Wellicht is dit product dan wat voor u!

Bestellen

Reacties


Er zijn momenteel geen reacties !

Geef reactie







Hetuilskuiken


Like deze focus


Naar boven
Feedback