Responsive webdesign

Afdrukken

responsive webdesign door ethan-marcotteNaast html5 was ‘Responsive webdesign’ hét buzzwoord van 2011 in webdesign-wereld. Ik had al het een en ander gelezen over deze manier om websites te ontwerpen, maar gisteren ben ik er dan toch eindelijk aan toegekomen het boek ‘Responsive webdesign’ van Ethan Marcotte (de bedenker van de term) te lezen. Ik heb het in één ruk uitgelezen. Interessante materie en heel duidelijk uitgelegd. Marcotte schrijft ook heel grappig. Ik begrijp best dat zijn boek binnen korte tijd zo populair is geworden.

Over schermbreedtes

Oké maar wat is het nu eigenlijk: Responsive webdesign? De vraag voor welke schermresolutie een website moet worden gebouwd, staat vaak centraal bij de ontwikkeling van een nieuwe site. Deze vraag is steeds lastiger te beantwoorden. De laatste jaren worden schermen niet alleen groter (denk internettelevisie) maar ook kleiner (iPhone, tablets, mobiele telefoon). Responsive webdesign biedt een oplossing voor dit duivelse dilemma.

De website reageert

Als een website is gebouwd volgens de principes van ‘responsive webdesign’, passen de afmetingen zich aan aan het medium. De vormgeving van de website reageert dan als het ware op de omgeving waarin deze wordt bekeken. Nog steeds abacadabra? Laat ik het eens illustreren aan de hand van een vormgeving van een bestaande website die volgens de principes van responsive webdesign is gebouwd. ( Helaas geen ontwerp uit eigen portfolio, maar dat komt nog wel).

Responsive webdesign

In het ontwerp hierboven zie je eigenlijk drie verschillende schermontwerpen. Het eerste ontwerp laat zien hoe de website getoond wordt op een breed scherm. De tweede is het ontwerp voor een tablet en het laatste ontwerp is geschikt voor een smartphone. Het is duidelijk dat behalve de breedte, ook de afbeeldingen en de content in de pagina verschillen.

De basis van responsive webdesign

Het ontwerpen en bouwen van flexibele websites is mogelijk door het toepassen van drie basisprincipes:

  1. Een flexibel grid
  2. Flexibele media
  3. Media Queries
Laten we deze principes eens onder de loep nemen. 

1. Het flexibele grid

“Nasty, evil pixels. We hates them!”

Bij het ontwikkelen van een website is het doorgaans goed gebruik om met behulp van Photoshop eerst een grafisch ontwerp te maken. Deze mockup geeft een goede indruk hoe de website er op het scherm uit komt te zien. Bij het bouwen is het dan de kunst om deze afbeelding 1:1 te vertalen naar html en css. ‘Pixelperfect’ is hierbij een veelgebezigde term.

Nu, bij responsive webdesign worden alle pixels overboord gezet! De grootte van de elementen in het ontwerp (marges, padding, widths en heights) worden uitgedrukt in percentages; de grootte van de fonts in zogenaamde ems (proportioneel aan de standaard fontgrootte van de browser). Het is de kunst om alle maten in het grafisch ontwerp proportioneel te maken. Zo krijg je een website die volledig schaalbaar is. Als het scherm breder wordt, rekt de website mee.  

Het gaat een beetje ver om in deze blog gedetailleerd in te gaan op de vraag hoe je de juiste percentages en ems kunt berekenen. Ethan Marcotte legt in zijn boek aan de hand van de formule 'target:context=result' heel duidelijk uit hoe je pixels kunt omzetten naar schaalbare eenheden. Als je een heel boek lezen een stap te ver vindt gaan, kan je ook dit artikel van Marcotte lezen. Hierin vat hij de basisprincipes van het ‘fluid grid’ kort samen.

2. Flexibele media

Het tweede fundament van responsive webdesign is het schaalbaar maken van afbeeldingen (en andere media zoals video). Afbeeldingen in een website hebben doorgaans vaste afmetingen. Als een website schaalbaar wordt gebouwd, is het niet wenselijk dat een afbeelding niet meerekt. Dus ook de afmetingen van de media moeten proportioneel worden gemaakt.

Media zijn iets lastiger te schalen dan pixels. Het begint simpel. Alle media krijgen in de stylesheet een maximale breedte van honderd procent. Op deze manier schalen ze mee met hun container (met behoud van aspect ratio). Voor de webbouwers onder ons: de style ziet er zo uit:

object,
img,
embed,
video {
            max-width: 100%;
            }

Maar dan wordt het lastiger. Al snel duiken er problemen op:

Marcotte geeft bij elk probleem ook een mogelijke oplossing maar het is duidelijk dat voor het schaalbaar maken van media iets meer creativiteit nodig is dan bij het wegwerken van pixels.

Laadtijd

Een speciale zorg bij afbeeldingen en andere media is de laadtijd. Als je een grote schaalbare afbeelding gebruikt in een website dan moet de browser deze laden. Dit is waarschijnlijk geen probleem op je pc thuis, maar op een smartphone zorgt het voor onnodige wachttijd en ergernis. Op de website van Smashing Magazine vond ik hiervoor een elegante oplossing van Filament Group. Met behulp van een combinatie van javascript en html (alle bestanden staan op Github) wordt aan de hand van de schermresolutie een kleine of grote versie van een afbeelding geladen.

3.Media queries

De schaalbare website vormt de basis van responsive webdesign. Toch is schaalbaarheid alleen geen garantie voor een perfecte website. Er is nog meer nodig om een website te maken die zich aanpast aan veranderende schermresoluties en apparatuur. Hier komen de media queries om de hoek kijken.

Media types als ‘screen’, ‘print’ en ‘handheld’ bestonden al in css 2. Media types maken het mogelijk om een website optimaal te tonen op verschillende media (papier, presentatie enzovoorts). Ze zijn echter niet fijnmazig genoeg om een website geschikt te maken voor alle apparaten die er tegenwoordig in omloop zijn.

Media queries kunnen als aanvulling op media types worden gebruikt om de fysieke kenmerken van een apparaat en browser te onderzoeken. Door te testen welke schermbreedte en/of toestel aanwezig is, wordt het mogelijk om afzonderlijke stylesheets te definiëren. Deze stylesheets zorgen ervoor dat de website er ook op een smartphone of een heel breed scherm picobello uitziet.

In onderstaand voorbeeld wordt de achtergrondkleur van een element (een paragraaf) grijs als de schermbreedte kleiner is dan 600 pixels (bijvoorbeeld van een iPhone).

@media screen AND (max-width: 600px) {

  p {

    background: #ccc;

  }

}

Wat gebeurt er in dit stukje code? Er wordt getest op het media type en de schermbreedte. Als het een beeldscherm is dat maximaal 600 pixels breed is, dan wordt de achtergrondkleur donkergrijs. 

Media queries zijn heel krachtig. Je kunt meerdere voorwaarden aan elkaar plakken.

@media screen AND (min-device-width: 480px) AND (orientation: landscape) {

            p {

                        background:#000;

            }

}

Dit stukje code test of het om een beeldscherm gaat voor alle apparaten van meer dan 480 pixels breed die in landschapsmodus worden vastgehouden. Als aan alle drie de voorwaarden wordt voldaan, is de achtergrondkleur van de paragraaf zwart.

Gevolgen voor vormgeving

Door media queries te gebruiken kan met behulp van stylesheets niet alleen de vormgeving maar ook de indeling van een webpagina veranderd worden. Dit kan heel handig zijn bij kleinere schermen. Door media queries te gebruiken kun je bepalen in welke volgorde de gebruiker de inhoud van jouw website te zien krijgt. In onderstaand voorbeeld wordt duidelijk dat de indeling en inhoud van de website per medium verschillen: plaatjes verdwijnen, de volgorde van teksten verandert en de navigatie krijgt een andere plek.

Robot or not 

Browserondersteuning

Het goede nieuws is dat media queries breed ondersteund worden. Internet Explorer (altijd het zorgenkindje) biedt ondersteuning vanaf versie 9. Een oplossing voor oudere browsers is het javascript css-mediaqueries.js op te nemen in je code. Als je alleen de maximale en minimale breedte wilt testen in je media queries, heb je genoeg aan een wat eenvoudiger script: respond.js.

Responsive content

Tot zover is het verhaal over responsive webdesign vrij technisch. Het is natuurlijk fantastisch als je met één website verschillende apparaten kunt bedienen. Er is echter ook een grote MAAR. Zoals ik al eerder aanstipte verandert bij responsive webdesign niet alleen de vormgeving maar ook de inhoud van de pagina. En dan komen de vragen want wat laat je wanneer zien? Hoe bepaal je wat voor een gebruiker het meest relevant is?  
De gebruikersbehoefte is afhankelijk van de omstandigheden. Iemand die in de trein zit op weg naar een sollicitatiegesprek is waarschijnlijk uitsluitend geïnteresseerd in het vinden van de juiste adresgegevens van jouw bedrijf, maar bekijkt diezelfde persoon jouw website op de bank thuis dan is hij waarschijnlijk op zoek naar andere informatie. Een flinke kluif dus voor interaction designers.

Mobile first

Een goede benadering bij het bepalen van de juiste content en functionaliteit voor verschillende apparaten is ‘mobile first’. Dit houdt in dat bij het ontwerpen wordt uitgegaan van de kleinste schermbreedte. Hierbij moeten de belangrijkste taken en informatie een prominente plaats krijgen. Vanuit deze basis wordt het ontwerp voor bredere schermen uitgewerkt. Een goede technische ondersteuning van deze benadering is het framework 320andup dat de technische vereisten van een mobiel apparaat als basis neemt en deze uitbouwt voor grotere schermen. Deze werkwijze heeft als groot voordeel dat de website op een mobiel apparaat uitstekend presteert omdat onnodige code niet wordt geladen.

Mijn volgende project

Op dit moment heb ik 2 opdrachten voor het ontwerpen en bouwen van een website. Ik sta te trappelen om deze te ontwikkelen aan de hand van de principes van responsive webdesign. Een heel leuke uitdaging! Ben benieuwd wat jij vindt van deze manier van ontwerpen. Zie jij nadelen? Of alleen maar voordelen?