Menu

Responsive Design

HP Hans-Peter Harmsen heeft dit geschreven in juli 2012

De wereld van schermen waarop je website wordt getoond, raakt in rap tempo versnipperd. Voorheen was het makkelijk: websites werden bekeken op een PC. Als je maar zorgde dat je website goed zichtbaar was op een redelijk klein scherm, dan zat je goed.


Dat is nu wel anders. Steeds meer mensen gebruiken mobiele telefoons voor hun internettoegang; met een goot scala aan schermformaten. Met de opkomst van de tablets is er ook nog eens een serie tussen-formaten bij gekomen.

Juist omdat het gebruik van deze mobiele apparaten zo is toegenomen is het van groot belang dat je website het op alle schermen lekker doet.

Enter: responsive design.

Responsive design is een methode waarbij het design zich aanpast aan medium waarop het getoond wordt.

Als je van een groot naar een klein scherm gaat, zal je bepaalde concessies moeten doen. Gewoon het scherm in z’n geheel verkleinen zoals de iPhone doet, geeft meestal niet het gewenste resultaat. Responsive design lost dit op.


Toon de juiste informatie

Een mooie afbeelding over de volle breedte van de site als ‘hero’ kan heel goed werken om een sterke indruk achter te laten.

Echter bij een mobiele telefoon werkt dat averechts: de mooie grote plaat wordt verkleind getoond en doordat het laden ervan lang duurt, wordt je site als traag ervaren: weglaten dus.

Wat wil je wel tonen in de mobiele versie? Dat hangt er vanaf maar logische informatie is je telefoonnummer, adresgegevens en mogelijk een routebeschrijving.

Denk na over in welke gevallen mensen je site met een mobiele telefoon bekijken en wat ze op dat moment willen weten. Je telefoonnummer? Het laatste nieuws? Waar is het eigenlijk precies? Dat soort dingen.


Layout aanpassingen

Naast het gewoon weglaten van informatie kun je natuurlijk ook je layout aanpassen. Hier zijn een aantal mogelijkheden:

  • Verdelen van het menu over meerdere regels.
  • Verkleinen van plaatjes.
  • Afknippen van plaatjes. Geeft vaak een mooier effect dan gewoon verkleinen. Zie bijvoorbeeld hieronder.
  • Elementen onder elkaar plaatsen in plaats van naast elkaar. Dit zie je vaak bij zoekresultaten met een fotootje. Op een groot scherm kunnen twee of meer kolommen met foto’s naast elkaar getoond worden. Op een klein scherm verschuift dit naar slechts één kolom.

Waar moet je aan denken als designer?

Responsive design begint bij de eerste stap in het design-proces: wat ga je eigenlijk tonen? Deel de inhoud van je pagina's op in onderdelen en orden die naar prioriteit. Handig is om een overzicht te maken van de elementen op je pagina met wat je daarmee wilt doen per device/schermtype:


Tenslotte nog twee tips voor als je met responsive design aan de slag gaat:

  • Touchscreen devices zoals smartphones en tablets hebben geen mouse-over. Zorg dus dat je design hier niet van afhankelijk is; of in ieder geval zorg dat je design hier niet van afhankelijk is.
  • Zorg dat je, je plaatjes in dubbele resolutie hebt voor de nieuwe retina-schermen op zowel iPhone als iPad. Je maakt dan optimaal gebruik van de hoge resolutie. Een conventie is om retina-plaatjs de 'postfix' @2x te geven dus: imagename@2x.png. Je kunt CSS Media-queries gebruiken of CSS om het juiste plaatje te serveren. Zie voor meer 'in depth' informatie: http://www.kylejlarson.com/blog/2012/creating-retina-images-for-your-website/.



Eat your own dog food

Natuurlijk ontkomen wij bij Oberon zelf ook niet aan responsive design. Als je dit artikel of een van de andere artikelen uit deze reeks online bekijkt, zie je dat de layout zich aanpast aan de breedte van je browser. Plaatjes en lettertypes worden kleiner en voegen zich naar het device.

HP

Hans-Peter Harmsen

MANAGEMENT

Oprichter en managing director; verantwoordelijk voor grote accounts en strategie.

E-mail:
hph@oberon.nl
Telefoon:
+31 654 337 275

“We maken samen met onze klanten betere online producten, zowel voor het web als in mobiele apps”

Meer informatie op Oberon.nl