De tijd van pixel-georiënteerd ontwerpen lijkt op zijn einde te lopen. Met de komst van alle nieuwe mobiele apparaten is er voor grafisch ontwerpers en webdesigners een nieuw tijdperk aangebroken. 2013 lijkt heel sterk het jaar van responsive webdesign te worden. Website ontwerpers zullen met een andere bril naar hun scherm(pjes) moeten gaan kijken. Het nieuwe ontwerpen is begonnen!
Pixel-georiënteerd ontwerpen
Jarenlang is de breedte van een website (960 pixels) een vast gegeven geweest voor webdesigners. Wanneer een site niet breder was dan werd hij keurig op het scherm van de websitebezoeker getoond. De jaren daarvoor (tot ongeveer 2000) was die maat 760 pixels. Tijdens het ontwerpen van de website werd een breedte gegeven aan de menubalk en het gedeelte voor de inhoud. Allemaal in pixels. Op die manier wist de webdesigner (of grafisch ontwerper) zeker dat een website goed tot zijn recht kwam.
Een website bekijken achter de pc is zóó 2010
Websites werden tot enkele jaren geleden vrijwel uitsluitend op desktop pc's ("normale computers") bekeken. Gewoon, op een bureau. "Achter de computer zitten" was toen nog een hele normale uitdrukking. Tegenwoordig is dat wel anders.
Tegenwoordig worden websites altijd en overal bekeken op veel verschillende apparaten. Er is geen vaste tijd of plaats meer verbonden met het bezoeken van een website; bijvoorbeeld:
- in de bus
- op de fiets (helaas)
- in de trein
- op de bank voor de tv
- in een eetcafé in de stad
- en binnenkort in het vliegtuig
Omdat dit ruimtes zijn met veel afleiding uit de omgeving en de schermpjes compact zijn, is het nodig om websites anders te ontwerpen en in te vullen. 'Kort en overzichtelijk' zijn daarbij belangrijke uitgangspunten.
Veel websites zijn nog niet op die manier ontworpen. Bezoekers moeten nog vaak inzoomen en van links naar rechts en van boven naar beneden schuiven om de inhoud van een website te kunnen bekijken. Dat moet anders! Waarom? Omdat websitebezoekers snel weer doorklikken naar de concurrent en je daardoor dus potentiële klanten misloopt.
Websites anders ontwerpen
Als basis voor het nieuwe ontwerpen worden er drie apparaten centraal gesteld:
- een desktop computer (of laptop)
- een tablet
- een mobiele telefoon
Mobiele apparaten worden steeds meer leidend. Om de gebruikerservaring te optimaliseren zijn dus websites nodig die zich eenvoudig aanpassen aan de grootte van het apparaat. Dit is mogelijk met responsive webdesign, ofwel schaalbare websites die worden opgedeeld in blokken.
Deze blokken met verschillende functies (bijvoorbeeld bestemd voor tekst, afbeeldingen, slide-shows, acties, formulieren, Twitter berichten, introductie teksten, contactgegevens, navigatiemenu, etc.) dienen als bouwstenen voor een website.
Denken in blokken en bouwstenen
Op elk van de genoemde apparaten worden de bouwstenen anders ingedeeld. Bij de mobiele telefoon staan de blokken meer onder elkaar. Vaak is de breedte van een blok gelijk aan de breedte van het scherm tenzij het scherm wordt gedraaid. In liggende positie is er ruimte om blokken naast elkaar te zetten. De bezoeker van een website gaat er van uit dat dit vloeiend in elkaar overloopt. Bij een tablet is er meer breedte beschikbaar en zijn de blokken beter naast elkaar te zetten.
Voordelen van het denken in blokken:
- ontwerpen worden strakker
- websites worden overzichtelijker
- websites zijn makkelijker te bekijken op smartphones
- functionaliteiten zijn beter afgestemd op het apparaat en de bezoeker
- informatie wordt beter overgedragen
Groot denken in kleine websites
In de toekomst zullen steeds minder "grote website" worden ontworpen om vervolgens uit te kleden voor mobiel gebruik. Bij het nieuwe ontwerpen zal de focus liggen op het ontwerpen van "kleine websites" voor mobiele telefoons. Zeg maar, handpalm design. Wanneer deze websites worden getoond op grotere schermen zullen er meer blokken (dus functionaliteiten) worden toegevoegd en op een andere manier worden weergegeven. Het nieuwe ontwerpen van websites heb je straks dus letterlijk in je hand.