Responsive Webdesign

optimalisering voor verschillende devices

De mogelijkheid voor internetgebruikers om met allerhande apparaten websites te bezoeken,

vereist dat er bij de bouw van de websites rekening wordt gehouden met die diversiteit. Het

ontwerpen voor deze verschillende apparaten met toegang tot internet maakt dat we rekening

moeten houden met verschillende schermgroottes. Websites die anders tonen op de verschillende

apparaten zijn responsive.

Wanneer we een website responsive maken, hebben we rekening te houden met verschillende

schermformaten, navigatietechnieken en andere restricties. Naast dat we een website kunnen

optimaliseren voor smartphones, kunnen we ook beter de tabletgebruikers bedienen en groter

denken wanneer het op desktopschermen aan komt.

Schermresoluties Wanneer we het hebben over responsive webdesign is het van belang de gebruikte schermresoluties

van de doelgroep van de te bouwen website in het oog te hebben. Als we afgaan op de gegevens van

Google Analytics van OnzeTaal.nl (de website heeft een bezoekersaantal van 700.000 per maand,

februari 2013), dan heeft het desktop scherm van 1024 bij 768 pixels duidelijk afgedaan. Het gros van

de bezoekers gebruikt schermen met een resolutie vanaf 1280 pixels breedte.

Daarnaast zien we dat de website veel middels smartphones bezocht wordt. Deze smarpthones

hebben schermen met een resolutie van 320 pixels (oudere smartphones) tot wel 1280pixels

(nieuwere smartphones) breed. Overige mobiele apparaten zijn de tablets, welke een resolutie

hebben van 1024 pixels bij de eers te generaties tot 1280 pixels en hoger in de nieuwere generatie

tablets.

Kort:

- ontwerpen voor desktop 1024 x 768 is verouderd

- mobiele apparaten nemen de overhand op internet

Techniek, viewport en media queries Bij het toepassen van responsive webdesign is specifieke techniek vereist. Hierbij gaat het om een

combinatie van de Viewport meta-tag in de header van betreffende html en Media queries in de CSS.

Viewport

De viewport is de rechthoek van je scherm waarbinnen een gedeelte van de website zichtbaar is. Bij

responsive design hebben we te maken met verschillende groottes van deze viewport. De website

kan hierbinnen schalen/zoomen. In sommige gevallen kan dat de website dusdanig verkleinen dat er

elementen slecht zichtbaar worden. Middels de Viewport meta-tag kunnen we hier invloed op uit

oefenen. De Viewport meta-tag ziet er als volgt uit en is te vinden in de head van de html:

Wanneer een website flexibel moet zijn en zicht moet kunnen aanpassen aan de verschillende

formaten van de apparaten is het aan te raden de volgende content voor de viewport te gebruiken:

Daarnaast kan het zo zijn dat het niet wenselijk is dat een website automatisch verkleind bij het

gebruik van mobiele apparaten zoals een smartphone. Om dit te voorkomen kan de volgende

content aan de viewport toegevoegd worden:

Wanneer je een mobiele variant van een website maakt, maak je deze zo dat schalen/zoomen niet

nodig is. Om het zoomen door de gebruikers met een touchscreen tegen te gaan kan de voglende

content aan de viewport worden toegevoegd:

Deze drie waarden vormen samen een goede basis voor het gebruik van de viewport meta-tag bij

responsive webdesign:

<meta name="viewport" content="">

content="width=device-width"

content="initial-scale=1"

content="maximum-scale=1"

<meta name="viewport" content="width=device-width, initial-scale=1,

maximum-scale=1">

Kort:

- gebruik bovenstaande viewport meta-tag in de head van de html

Media queries

Met CSS kan de website visueel worden opgemaakt. CSS biedt de mogelijkheid om dit voor

verschillende schermgroottes anders te doen, door in het CSS-bestand onderscheid te maken tussen

de verschillende scherm- en apparaatgroottes. Dit kan met de Media query:

Bovenstaande media query kan op verschillende manier binnen één CSS-bestand worden toegepast

en kan er verschillend uit zien naar gelang er gestyled wordt voor smartphones, tablets of

verschillende formaten desktops.

Kip of het ei, desktop- of mobile first

Welk device als uitgangspunt wordt genomen voor het ontwerp van de website is afhankelijk van het

specifieke project en de bijbehorende doelgroep. Hier moet in de conceptfase van de website over

nagedacht worden. Media queries maakt het mogelijk om te ontwerpen voor smartphones en van

daaruit naar desktops te ontwikkelen, maar ook andersom. Dit document benaderd media queries

vanuit de laatste genoemde variant: eerst desktop, dan smartphones/tablets. Of deze richting de

voorkeur geniet moet wellicht per project afgewogen worden.

Desktop

Als we een website responsive maken, kunnen we de huidige desktopschermen beter benutten dan

door te blijven steken op het al oude 1024 pixels brede formaat. Ontwerpen voor een meer

schermvullende website dus. Dit kan bijvoorbeeld 1140 pixels breed zijn, of zelfs fullscreen. Er kan

gekozen worden voor meer rust, witruimte en groter fontgebruik, of juist het zichtbaar maken van

meer content binnen het venster.

Als er is bepaald of een website in bijvoorbeeld 1140 pixels, fullscreen of om bepaalde redenen toch

op 1024 pixels breedte wordt ontworpen kan er hiervoor in het CSS document default gestyled

worden. Dit is de basis, hiervoor zijn geen media queries nodig.

@media only screen and ()

Kort:

- bepaal wat de basisbreedte van de website is

- voor deze basis zijn geen media queries nodig

Tablet

Wanneer de basis/default van de website gestyled is, kan er via media queries aanpassingen worden

gedaan voor de tablet. Voor de tablet is het niet nodig een volledig ‘andere’ website te tonen, maar

volstaat een aantal aanpassingen. Deze aanpassingen kunnen in de CSS worden ingevoerd onder de

volgende media query:

Schermresolutie: device pixels versus css pixels

Tablets, zeker de nieuwere generatie tablets, hebben een hogere schermresolutie dan in de media

query hierboven benoemd. Dat deze media query toch effect heeft op deze tablets komt door het

verschil in pixel interpretatie. CSS pixels is namelijk anders dan device pixels.

Wanneer een tablet een schermresolutie heeft van 2048x1536 pixels betekend dit dat het scherm

van dit tablet scherper is dan de een tablet van een oudere generatie met een schermresolutie van

1024x768 pixels. De afmetingen van het scherm blijven dus het zelfde, maar het aantal pixels per

inch verschilt (pixel density).

CSS pixels rekent met de afmetingen van het scherm en houd geen rekening met de pixel density.

Vandaar dat bovengenoemde media query opgebouwd met ‘device-width’ en ‘device-height’ werkt

voor alle tablets.

Swipe in plaats van scroll, geen parallax

Bij de tablet en alle andere touch devices moet rekening gehouden worden met de andere manier

van scrollen, of beter gezegd: swipen. Deze techniek zorgt voor een ander effect van verticaal (of

horizontaal) over de website bewegen. Dit heeft als gevolg dat gebruikte technieken zoals parallax

niet goed tot hun recht komen. Aangeraden wordt deze technieken op de tablet niet toe te passen.

@media only screen

and (min-device-width: 768px)

and (max-device-width: 1024px) {

Oriëntatie: portrait en landscape

Bij het stylen van de website voor tablet moet rekening gehouden worden met de verschillende

oriëntaties van het apparaat. De tablet kan in portrait (hoogte > breedte) of in landscape (hoogte <

breedte) positie gehouden worden. Als we landscape als uitgangspunt nemen en aanpassingen willen

doen voor potrait allen, dan kan de volgende media querie worden gebruikt:

Er hoeft geen verschil te bestaan tussen de portrait en de landscape varianten van de website. Wel

wenselijk is dat de website schaalt/uitzoomt naar het formaat van de portrait oriëntatie van de

tablet. Om dit in combinatie met de eerder genoemde viewport meta-tag voor elkaar te krijgen is de

volgende CSS nodig:

Middels aanpassing van bovenstaande CSS kan worden bereikt dat de website naar wens schaalt.

Tablets detecteren met jQuery

Wanneer een tablet wel een hogere schermresolutie heeft maar geen hogere pixel density, neemt

het aantal CSS pixels wel toe. In dat geval valt de tablet buiten bovengenoemde media queries en

moet de tablet op een andere manier gedetecteerd worden.

Dit kan gedaan worden met een jQuery snippet, waarmee kan worden gedetecteerd of er gebruik

wordt gemaakt van een bepaalde mobiel apparaat. Als er een mobiel apparaat gedetecteerd is, kan

er via jQuery een class worden toegevoegd aan de html, zodat via CSS specifiek daarvoor gestyled

kan worden. Een voorbeeld-snippet om Android devices te detecteren:

}

Zie http://www.jquery4u.com/mobile/detect-mobile-devices-jquery/ voor de overige snippets.

Kort:

- gebruik de specifieke media query om de website voor tablets te optimaliseren

- op de tablet tonen we de afgeleide van de originele website, geen compleet andere website

- gebruik geen parallax en sticky elementen op de tablet

- gebruik voor portrait dezelfde CSS, hanteer de html {zoom} om te schalen

- tablets/mobile devices kunnen ook via jQuery gedetecteerd worden

@media only screen and (min-device-width: 768px)

and (max-device-width: 1024px)

and (orientation: portrait) {

html {zoom:0.8;}

var isAndroid = /android/i.test(navigator.userAgent.toLowerCase());

if (isAndroid)

{

...

Smartphones

Voor smartphones geldt dat er bij de conceptfase van de website gekeken moet worden in hoeverre

content en ontwerp van de originele website gehanteerd moet blijven. Gebruikers die via een

smartphone een website bezoeken hebben over het algemeen andere wensen dan gebruikers die via

een tablet of desktop de website bezoeken. Denk alleen al aan het formaat van het scherm. Maar

ook de situatie waarin smartphones gebruikt worden: onder weg, in de trein, haast, et cetera.

Dit kan betekenen dat de website een volledig andere opbouw kan krijgen dan die van de

desktopvariant. Het is raadzaam hier ook tijdens het ontwerp van de desktopvariant rekening mee te

houden om moeilijkheden bij het stylen van de mobiele versie te voorkomen.

Voor smartphones geldt dat er een grote variatie is aan device resoluties. In dit huidige generatie

smartphones loopt dit op tot 1280 x 720 pixels. Met dit gegeven kunnen we de volgende media

query gebruiken specifiek voor smartphones:

Stylen met percentages

Websites op mobiel moeten met percentages gestyled worden, zodat het niet uit maakt of de

smartphone portrait of landscape georiënteerd is. De groottes van de elementen schalen dan

automatisch mee met het resizen van de viewport.

Box Sizing

Hierbij kan Box Sizing handig zijn. Met box sizing zorg je ervoor dat de toegepaste padding van een

element wordt ingesloten in de 100% width die meegegeven wordt aan een element. Zie: http://css-

tricks.com/box-sizing/. Voeg hiervoor deze CSS toe aan het element:

@media only screen

and (max-width: 720px) {

div {

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */

-moz-box-sizing: border-box; /* Firefox, other Gecko */

box-sizing: border-box; /* Opera/IE 8+ */

}

Portrait en landscape

Mochten er toch aanpassingen nodig zijn aan de portrait of de landscape variant van de mobiele

website, dan kan er middels volgende media query worden gestyled:

Kort:

- Style websites voor smartphones in percentages

- protrait en landscape kan met één media query worden bediend: @media only screen

and (max-width: 720px) {}

Elementen via CSS media queries ‘weglaten’? Wanneer via media queries elementen worden weggelaten worden deze nog wel in de html

ingeladen, maar alleen niet getoond middels ‘display:none’. Er kan hierbij worden afgevraagd of

dit wenselijk is, zeker bij het weglaten van sliders met grote, beeldvullende afbeeldingen. Deze

element kosten namelijk wel bandbreedte, ondanks dat ze worden ‘weggelaten’.

Wellicht is het verstandig om responsive websites niet uit te rusten met brute sliders en grote foto’s,

maar vraagt responsive om meer subtielere websites.

Server side device check middels php of plugin

Wanneer er server side gecheckt wordt, middles php of een EE-plugin, is het wel mogelijk om de

desktop variant van de website uit te rusten met sliders en grote foto’s. De betreffende html

daarvoor kan dan in het geval van mobile devices worden weggelaten voordat het wordt ingeladen.

@media only screen

and (max-width: 720px)

and (orientation: landscape) {

Compleet benodigde CSS voor responsive webdesign

/*

=======================================================================

LARGE SCREEN 1140px

=======================================================================

*/

@media only screen

and (min-width: 1280px) {

}

/*

========================================================================

TABLET (iPad etc)

========================================================================

*/

@media only screen

and (min-device-width: 768px)

and (max-device-width: 1024px) {

}

/*

========================================================================

TABLET portrait extension (iPad etc)

========================================================================

*/

@media only screen

and (min-device-width: 768px)

and (max-device-width: 1024px)

and (orientation: portrait) {

html {zoom:0.8;}

}

/*

========================================================================

SMARTPHONE

========================================================================

*/

@media only screen

and (max-width: 720px) {

}

/*

========================================================================

SMARTPHONE landscape extension

========================================================================

*/

@media only screen

and (max-width: 720px)

and (orientation: landscape) {

}

Viewport

http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-

tag/