Het mobiele web: responsive en mobiele websites voor tablets en smartphones

Meer en meer mensen maken gebruik van het wereldwijde web op een smartphone of tablet. Zodoende groeit het aantal mobiele websites flink. Logisch, want bezoekers willen een website, ook op hun mobiele apparaat, graag prettig ervaren. Echter, zijn het niet alleen bezoekers die eisen stellen, ook partijen als Google hechten steeds meer waarde aan een mobiel of responsive design.

Mobiele website: ontwerp voor smartphone en tablet

Dat betekent dus, dat het alsmaar belangrijker wordt om ervoor te zorgen dat je website goed werkt (en er goed uitziet) op zulke mobiele apparaten. Dat kan soms lastig zijn, omdat er veel verschillende apparaten zijn die elk hun eigen opties kennen. In dit artikel leg ik uit, wat je moet weten over mobiele websites en hoe je zelf aan de slag kunt met het bouwen van een website met een responsive design.

Een korte geschiedenis van het mobiele web

De vroege prehistorie van het mobiele web werd gevormd door WAP, een verzameling protocollen waarmee GSM-telefoons gebruik konden maken van het Internet. De onderdelen van WAP werkten volledig anders dan de rest van het wereldwijde web, en waren volstrekt incompatibel; waar gewone websites gebruik maken van HTML, moesten WAP-websites geschreven worden in het (veel beperktere) WML. Waar sitebouwers normaal GIF-afbeeldingen zouden gebruiken, hadden veel telefoons met WAP alleen maar verstand van een speciale Wireless Bitmap-indeling die alleen zwart-wit begreep. In plaats van JavaScript was alleen WMLScript beschikbaar, een variant zonder objecten of arrays.

Erg veel non-commerciële diensten werden er niet aangeboden via WAP. Het systeem was, ondanks alle goede zorgen van de bedenkers, traag, beperkt, en duur. Gebruikers bleven weg en zonder gebruikers waren webbouwers niet bereid om een hele verzameling nieuwe (en vaak beperkte) technologieën te leren.

Van mobiele website naar responsive

Tegenwoordig zijn mobiele apparaten snel genoeg om eigenlijk alle websites goed te kunnen tonen. Het is dus niet meer nodig om een speciale, losse, mobiele versie van een site bij te houden. In plaats daarvan kun je één site bouwen die er op elk apparaat goed uitziet. Een belangrijk onderdeel daarvan is dat je kunt (of eigenlijk moet) reageren op de grootte van het scherm van de gebruiker.

Mobiele website: responsive design

Voordat we dieper in gaan duiken op responsive design, dus hoe je een siteontwerp bouwt dat reageert, eerst een kort stukje over de uitdagingen van mobiel ontwerp.

Uitdagingen voor een mobiele website

Een goed mobiel ontwerp maken voor je site is niet moeilijk, maar er zijn een aantal zaken waarmee je rekening moet houden. Zoals bij de start van ieder ontwerp, is het verstandig om vooraf over deze zaken na te denken.

Wensen en eisen

Internetgebruikers hebben weinig geduld, en mobiele internetgebruikers zijn al helemaal haastig. Bij het ontwerpen van een mobiele website is het belangrijk om na te gaan wat de gemiddelde bezoeker graag wil hebben, weten of krijgen.

Stel dat je de eigenaar bent van een taartenwinkel. Dan is het een goed idee om je openingstijden binnen zo weinig mogelijk klikken bereikbaar te maken. Je andere inhoud – de lange geschiedenis van de winkel, die generaties lang van vader op zoon over ging, bijvoorbeeld – zijn óók interessant, maar als iemand al onderweg is naar je zaak zijn openingstijden belangrijker.

Mobiele website: voorbeeld van bakker

Aan de andere kant is het van belang dat de mobiele versie of weergave van je site niet minder inhoud of functionaliteit heeft dan de volledige versie. Dat iemand de site bezoekt op een mobiel apparaat is een goede indicatie dat de persoon onderweg is, maar het hoeft niet zo te zijn. Iemand kan ook met een tablet op de bank zitten, bijvoorbeeld om tegelijk jouw site te bezoeken en naar de laatste aflevering van Heel Holland Bakt te kijken. De roemruchte historie van je winkel moet dus nog wel bereikbaar zijn.

Hoewel het verschil steeds kleiner wordt, zijn draadloze internetverbindingen over het algemeen nog steeds trager dan het internet thuis. Bovendien wordt mobiel internet vaak afgerekend per MB, al dan niet van een beperkte databundel per maand. Het is dus belangrijk dat je site snel laadt, want sneller is beter. Natuurlijk is de laadsnelheid afhankelijk van de verbinding van je bezoeker, van je webhostingprovider en van hoe je site is ingericht. Tevens is het van belang om slim om te gaan met welke stijlen en afbeeldingen je gebruikt.

Sofwarebeperkingen

Ondanks dat mobieltjes, tablets en andere apparaten tegenwoordig snel genoeg zijn om zelfs ingewikkelde websites goed te laten zien, is het nog steeds zo dat er beperkingen zijn aan wat je softwarematig kunt doen.

Met name oudere mobieltjes zullen je website bezoeken met de versie van het besturingssysteem die toen modern was. Telefoons die een paar jaar oud zijn draaien vaak verouderde versies van Android en iOS, en daar bovenop verouderde versies van de Android-browser en Safari. Op de site caniuse.com kun je zien welke functies er precies door welke versies van welke browsers worden ondersteund. Bovendien wordt aangegeven hoeveel procent van de internetgebruikers de functie die je wilt gebruiken ondersteunen. De CSS-declaratie box-shadow bijvoorbeeld, wordt door alle mobiele browsers begrepen, terwijl de onofficiële text-stroke-functie alleen door de WebKit-familie (Safari, Android Browser en Chrome) wordt ondersteund.

Een speciaal geval is Adobe Flash. Over het algemeen kun je er niet van uitgaan dat mobiele apparaten, zowel Android als iOS, ondersteuning hebben voor Flash. Als je site op Flash gebaseerd is, dan zul je waarschijnlijk meer werk moeten verrichten om het geschikt te maken voor mobiele apparaten.

Hardwarebeperkingen

Telefoons worden niet alleen steeds sneller, maar ook steeds groter. Toch zal een apparaat voor onderweg altijd een kleiner scherm hebben dan een PC. Dat betekent dat er minder op één scherm past: minder tekst, minder afbeeldingen en minder knoppen.

Dat bijna alle telefoons tegenwoordig aanraakschermen (touchscreens) hebben, betekent tevens dat alle onderdelen waarop geklikt moet kunnen worden, dus bijvoorbeeld knoppen en links, niet te klein uitgevoerd moeten worden.

Mobiele website: knoppen

Houd er altijd rekening mee dat niet iedereen een gigantisch toestel, perfect zicht en dunne vingers heeft. Bouw dus een veiligheidsmarge in. Als je daarvoor budget hebt, is het een idee om de goedkoopste, kleinste smartphone die je kunt vinden aan te schaffen en vervolgens met die telefoon te proberen je site te gebruiken. Een gratis alternatief is de hulpmiddelen voor ontwikkelaars van Google Chrome, die verderop in dit artikel aan bod komen.

Je eigen site mobiele website ontwerpen

Een goede mobiele site bouwen is dus niet triviaal. Hieronder staan twee eerste stappen die je kunt doen om je site mobiel-vriendelijker te maken.

Viewport tag

Mobieltjes moeten ook websites kunnen laten zien die niet speciaal voor apparaten ontworpen zijn. Daarom proberen ze standaard een ‘gewone’ computer na te doen door websites te schalen en de tekst eventueel iets te vergroten. Deze techniek zorgt ervoor dat de algehele lay-out van de meeste ‘gewone’ sites meestal wel blijft werken. Als je dit blogartikel bijvoorbeeld opent op een smartphone zul je zien dat de letters veel te klein zijn om te lezen, maar het ontwerp van de pagina in ieder geval te zien is.

Als je je site wél geschikt hebt gemaakt voor mobieltjes is dat schalen natuurlijk niet de bedoeling. Je kunt aangeven dat je je site op ‘ware grootte’ wilt laten zien door een meta-tag als deze in de <head>-tag van je site te zetten:

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

Met deze tag zeg je tegen mobiele browsers dat je ze je site niet hoeven te schalen. Er zijn nog een aantal andere opties mogelijk, waaronder een optie waarmee je zoomen kunt uitschakelen. Een goede bron voor alles over de viewport tag is MDN, de ontwikkelaarssite van Mozilla.

Media queries

Het was altijd al mogelijk om in CSS specifieke stijlen voor specifieke apparaten te laten gelden. Zo kon je bijvoorbeeld een aparte stylesheet maken voor schermen, met media='screen', en een stylesheet voor printers, met media='print'. De meeste sites met een donkere achtergrondkleur voegden bijvoorbeeld een print-stylesheet toe om hun bezoekers inkt te besparen.

Draagbare internetapparaten kregen een eigen categorie, handheld. Handhelds – wat later smartphones werden – waren in die tijd nog lang niet zo ver als nu. Stylesheets die voor alle handhelds waren geschreven, maakten sites dus zo klein en eenvoudig mogelijk, waardoor ze er niet goed uitzagen op apparaten die ook maar iets groter of capabeler waren. Smartphones gingen uiteindelijk stylesheets met media='handheld' negeren.

Alle draagbare apparaten in één vergaarbak stoppen, bleek dus niet handig. Het liefst zou je niet selecteren op wat voor ‘soort’ apparaat iemand gebruikt, maar op echte kenmerken, zoals hoe groot het scherm is, en of het scherm rechtop staat of gedraaid is. Dat kan met media queries, speciale media-velden met daarin zulke kenmerken.

<link rel="stylesheet" href="rsc/all.css" media="screen">
<link rel="stylesheet" href="rsc/tablet.css" media="only screen and (min-width: 768px)">
<link rel="stylesheet" href="rsc/desktop.css" media="only screen and (min-width: 1024px)">
<link rel="stylesheet" href="rsc/print.css" media="print">

In dit voorbeeld zouden alle browsers, dus zowel mobiel als ‘vast’, de stijlen in all.css gebruiken. De meeste tablets hebben, wanneer ze rechtop staan, minimaal een schermbreedte van 768 pixels, wat niet toevallig precies de resolutie is van de eerste iPad, en zouden dus ook tablet.css laden. Desktops en laptops hebben over het algemeen nog veel grotere schermen dan dat en zouden dus zowel all.css, tablet.css als desktop.css gebruiken.

Een opzet zoals in dit voorbeeld is een goed idee als je mobile-first ontwerpt, dus als je begint met een site ontwerpen die er goed uitziet op het kleine schermpje van een smartphone en dan stijlen toevoegt die ervoor zorgen dat de site er goed uit blijft zien op grotere schermen. Als je al een bestaande site hebt, dan zul je misschien andersom willen werken, en juist stijlen willen toevoegen die ervoor zorgen dat de site werkt op kleinere schermen. In dat geval zou je max-width gebruiken in plaats van min-width.

Zoals je ziet is het is mogelijk om restricties te combineren met ‘and’. Combineren is immers mogelijk: zo kun je een stylesheet hebben die alleen moet gelden als de breedte van het scherm tussen twee waarden ligt en het scherm bovendien rechtop staat. De meeste media queries zijn niet zo ingewikkeld. Meestal zijn media queries met alleen min-width of max-width is wel voldoende om zinnig onderscheid te maken tussen telefoons, tablets, en desktopcomputers.

Als laatste kun je media queries ook opnemen in het CSS-bestand zelf, door een @media-blok om je stijlen heen te zetten. Om de tekst op je site alleen op mobieltjes kleiner te maken schrijf je bijvoorbeeld:

@media (max-width: 767px) {
    body {
        font-size: small;
    }
}

Let op! De breedte in pixels die je opgeeft in je media query wordt gemeten in CSS-pixels, wat niet precies hetzelfde hoeft te zijn als het aantal pixels dat het scherm daadwerkelijk heeft. Het Retina-scherm van de nieuwste iPad heeft fysiek een breedte van 1536 pixels, maar geeft die breedte door als 768 pixels.

Internet Explorer 8 en ouder kunnen niet omgaan met media queries. Het woordje ‘only’ zorgt ervoor dat browsers, die geen kaas gegeten hebben van media queries, de stylesheet negeren. In het voorbeeld met de link-tags hierboven zou dus alleen het all.css-bestand geladen worden.

Als je meer wilt weten over media queries is opnieuw MDN een goede bron. Heb je inspiratie nodig? Kijk dan eens op mediaqueri.es.

Je ontwerp testen

Wie al eens eerder een artikel van mij heeft gelezen, zal weten dat ik een groot liefhebber ben van de Developer Tools (of Ontwikkelaarshulpmiddelen in correct Nederlands) van Google Chrome. Die hulpmiddelen zijn ook hier weer goed te gebruiken. Of je nu net een responsive ontwerp voor je site hebt gemaakt, of je alleen maar wilt proberen hoe je site er uitziet op een bepaald apparaat: met de emulatiemodus kan je desktopbrowser net doen alsof het een mobieltje of tablet is. Het is zelfs mogelijk om een trage internetverbinding te simuleren.

Mobiele website: schermafbeelding van de Developer Tools

Open eerst de Developer Tools Device Mode door op Ctrl+Shift+M te drukken of door in Developer Tools op het icoontje te klikken dat er uitziet als een Google Nexus-telefoon. De browser zal je dan waarschijnlijk vragen de pagina te herladen. Als je dat gedaan hebt zie je jouw site ongeveer zoals een mobiele gebruiker dat zou zien. Welke telefoon er precies geïmiteerd wordt, kun je kiezen naast het kopje ‘Device’, en de trage internetverbinding simuleren kan bij ‘Network’.

Natuurlijk is het verstandig om een ontwerp dat er goed uitziet in de Developer Tools ook nog op een echt apparaat te testen. Een belangrijk verschil om in je achterhoofd te houden, is dat schermen van mobieltjes vaak scherper zijn (meer pixels per centimeter hebben) dan schermen van desktopcomputers. De weergave in Developer Tools zal dus vaak groter zijn dan de weergave op het echte apparaat.

De ontwikkelaarssite van Chrome heeft uitgebreide documentatie over Device Mode en een artikel over Remote Debugging, een manier om je telefoon te verbinden met Chrome om te helpen bij het testen.

Conclusie

Surfen over de digitale snelweg is aan het veranderen van een activiteit die je thuis aan het bureau doet, naar iets wat men altijd en overal wil kunnen doen. Helemaal als je een nieuwe site maakt, is het daarom verstandig om te bekijken hoe – en op welk apparaat – je site gebruikt gaat worden, en daarmee rekening te houden bij het ontwerpen.

Dit artikel is natuurlijk alleen maar een introductie. Als je verder wilt lezen heeft Google een serie erg goede artikelen, de Web Fundamentals-serie, die naast responsive design en media queries ook dieper ingaat op optimalisatie, oftewel hoe je ervoor zorgt dat je site snel op het apparaat van je bezoeker te zien is. Ook bieden ze de PageSpeed Insights-dienst aan, waarmee je een aantal van de uitdagingen hierboven automatisch kunt laten controleren. PageSpeed controleert met name de snelheid van je site, maar ook bijvoorbeeld het formaat van knoppen en teksten.

Zelf aan de slag?

Heb je nog geen (responsive) website, maar wil je wel graag aan de slag? Onze pakketten bieden alles voor de succesvolle start van jouw responsive of mobiele website. Je kunt direct aan de slag met bijvoorbeeld WordPress, dat eenvoudig te installeren is en waar je honderden (gratis) responsive themes voor kunt downloaden. Nieuwsgierig?

Start met WordPress →

Heb je een geweldig responsive ontwerp gemaakt of wil je websites van anderen bekijken? Kom eens langs op ons klantenforum en klik op Websitebeoordeling. We hebben ook een forum Scripting, waar je terecht kunt met al je vragen over CSS, media queries en mobiel ontwerp.

P.S. Wil je op de hoogte blijven van alle artikelen, updates, tips en trucs die verschijnen op ons blog? Dat kan! Via RSS, per e-mail, het liken op Facebook, het +1’en op Google+ of het volgen op Twitter.

Deel Deel Deel Deel

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *