Wat is responsive design?

De bedoeling van responsive design is om de web pagina mee te bewegen met de schermbreedte van de bezoeker. Dat wil zeggen, de web pagina wordt uitgelijnt op basis van beeldbreedte. In de design worden afbeeldingen relatief afgebeeld. In plaats van dat een afbeelding een specifieke of vaste afmeting heeft, wordt er een relatieve afmeting aan gegeven. Zoals 100% in plaats van 100 pixels. Met andere woorden, in de code wordt aangegeven dat iets relatief moet zijn. Hierdoor wordt een web pagina responsive ten op zichte van een schermgrootte. Immers 100% van een scherm van 800 pixel is 800 pixels en 100% van 500 pixel scherm is 500 pixels.

Daarnaast hebben verschillende smartphones verschillende standaard beeldgrootte ongeacht de daadwerkelijke beeldgrootte van een scherm. Bijvoorbeeld Android is (meestal) standaard 800 pixels groot en iOS (iPhone bijvoorbeeld) is 980 pixels groot onacht wat de daadwerkelijke grootte is van het scherm. Dit betekend dat een gebruiker die op een web pagina landt altijd deze een uit-ge-zoomd beeld krijgt, of om de tekst te lezen moet de gebruiker altijd inzoomen. Daarom wordt erbij responsive design een code toegevoegd waarmee wordt aangegeven dat er automatisch moet worden in-ge-zoomd. Met andere woorden, de code geeft aan dat de pixels één op één dienen te worden overgenomen. Hierdoor hoeft de gebruiker niet in te zoomen maar het kan wel als de bezoeker dit wil.

Tot slot, een bepaald design wat werkt voor de desktop werkt niet voor smartphones. Bijvoorbeeld een dropdown kan goed werken op een desktop computer maar op een mobiel is het een ramp. De rede is dat het beeld op een mobiele telefoon te klein is en daardoor valt de dropdown buiten het scherm. Ook is het vaak moeilijk om met een touchscreen de juiste dropdown te raken en naar een sub pagina te navigeren. Daarom is het vaak verstandig om een andere navigatie te hebben voor mobiele gebruikers. Via responsive design worden verschillende navigatie manieren gemaakt en als de beeldgrootte te klein is wordt er een andere aanboden dan op de desktop. Naast navigatie geldt dit voor meerdere onderdelen. Daarom maken we vaak meerdere designen geoptimaliseerd voor verschillende schermgrootte. De verdeling die we maken is meestal hoger dan 800 pixels krijgt een desktop design, 480 pixels tot en met 800 pixels een tablet design en lager dan 480 pixels krijgt een smartphone design. Hoewel dit ongeveer de standaard is kan dit veranderen van project tot project op basis van uw wensen.

Bijvoorbeeld een screenshot van onze blog:

responsive design op onze blog

Voordelen

  1. Eén URL: bezoekers worden niet ge-redirect naar een mobiel vriendelijke web site.
  2. Eén web site: er is één web site die alle schermgroottes ondersteund. Hierdoor is er geen extra onderhoud of extra handeling nodig voor de mobiele site.
  3. Zoekmachines begrijpen responsive design: Google adviseerd zelfs webmasters om gebruik te maken van responsive design.
  4. Alle smartphones worden ondersteund: Toekomstige smartphones hebben allemaal moderne browser en begrijpen responsive design. Met andere woorden, als er een nieuwe smartphone uitkomt ondersteund uw web site die smartphone.