Responsive Design: niet alleen kleiner!

In een wereld waarin we steeds meer gebruik maken van kleine schermen van smartphones en tablets vergeten we vaak één ding. Ze worden ook steeds groter. Naast een smartphone en tablet beschikken we steeds vaker over beeldschermen met resoluties van 1920px of hoger. En dat heeft te vaak gevolgen voor de weergave van een website. En wees eerlijk, zo’n 27 inch scherm verdient het om volledig gevuld te worden met een oogstrelende website, in plaats van te verdrinken in witruimte. Of nog erger, gevuld te worden met herhalende achtergrondjes.

What is up

Veel designers lijken vast te zitten aan de 960px brede webdesigns, een breedte die de standaard is geworden doordat we gebruik maken van grids. Het heeft zelfs lang geduurd voor er überhaupt resoluties hoger dan 1024×768 waren, met als logisch gevolg dat onze layouts deze breedte niet konden overschrijden.

De ellende is begonnen nadat we massaal besloten onze mobiele apparaten te gebruiken om het web te betreden. Al vrij snel waren we het erover eens dat grote designs op kleine schermen resulteren in een beroerde user-experience. De meest voor de hand liggende oplossing lag in het gebruik van een website van 960 pixels in combinatie met responsive design voor de weergave op mobiele apparaten.

Mobile First of Mobile Last?

Maar je kunt het ook omdraaien. Natuurlijk zijn mobiele apparaten niet meer weg te denken uit het internetlandschap, maar dat geldt net zo goed voor de big-ass schermen die we thuis en op kantoor hebben staan. En voor die schermen nemen wij het vandaag op. Met gepaste trots introduceren we u de Mobile Last Strategie. Niet voor ieder project geschikt, maar een prachtige oplossing als je nét even wat anders wilt.

Het voelt vreemd om eerst te designen voor de grootst mogelijke resolutie, omdat dit iets is wat we als ontwerpers niet gewend zijn. Maar het is natuurlijk een uitermate interessante statement. Begin zo groot mogelijk en schaal dit terug naar een mobiel formaat. Hierbij komen flexibele indelingen van pas. Dit is een indeling die in procenten en em’s is opgebouwd.

We kijken het beste naar een scherm in een hoek van 30 graden. Dit betekent dat je bij een groter scherm verder weg zit. Doordat je meer afstand hebt tot de monitor kun je dus stellen dat de website ook groter kan. Het eerste waar we aan denken is het opschalen van de lettertypes zodat deze nog steeds goed gelezen kunnen worden. In plaats van een lettertypetje 16 gooien we er gewoon een 24 of groter tegen aan. Dit komt de leesbaarheid ten goede en vult gelijk een groot gedeelte van het scherm. De fontsize kunnen we flexibel maken door de fontsize in procenten en em’s te voeren:

[css]
/*Definieer de begin waarde*/

html {
font-size: 100%;
}

body {
font-size: 0.875em; /*14px*/
}
/*Vergroot wanneer de tijd er rijp voor is*/

@media only screen and (min-width: 768px) {
body {
font-size: 1em; /*16px*/
}
}
[/css]

Voorbeeld Mobile Last

Op dit moment zijn we bezig met een design volgens de Mobile Last Strategie. Hieronder vind je een aantal screenshots van de website voor VMS. Zoals je ziet kunnen we gebruik maken van grotere foto’s en is er op strategische plaatsen gekozen voor witruimte. Zo maken we optimaal gebruik van de mogelijkheden van een groter scherm. De opbouw van de code zullen we in een volgende post delen.