Het web is niet meer

Het web is niet meer. Althans, niet meer zoals het vroeger was.

Vroeger, toen moesten er allemaal trucs uit gehaald worden om ervoor te zorgen dat een website op verschillende (versies van) browsers het goed deed en er goed uitzag. Vroeger, eind jaren 90 en begin 2000, toen de browser wars in volle gang waren en je als sitebouwer moest weten welke feature op welke versie van welke browser bestond. Vroeger, toen je meer tijd kwijt was om een website er op elke browser goed uit te laten zien dan met het hele design en ontwerp van de site zelf. Vroeger, toen iedereen alleen nog maar een browser had op zijn PC. Of hooguit een WAP browser op je mobiele telefoon die je niet gebruikte omdat het zo traag was en de sites zo slecht.

Vroeger was alles beter….

De tijden zijn veranderd. Het web verandert mee. Het web zoals het was, is niet meer(!)

Het bouwen voor een versie van een browser behoort tot het verleden. Geen browser sniffing meer nodig, dat zou iedereen wel moeten beseffen. Tegenwoordig is het voldoende om te checken op features.

Nu zijn er heel andere problemen, die gelukkig gepaard gaan met goede oplossingen. En als alle sitebouwers weten en gebruik maken van deze oplossingen, dan ziet de toekomst van het web er heel zonnig uit.

Welke problemen zijn er dan? De meeste browsers houden zich goed aan de W3C standaarden. Er zijn er wel die voorop lopen en features ingebouwd hebben die nog niet tot een (officiële) W3C standaard behoren, maar dat zijn kleine problemen die met wat extra typen op te lossen zijn (bijvoorbeeld het stylesheet element ‘column-count‘ heet in FireFox ‘–moz-column-count’ en in WebKit browsers zoals Chrome en Safari ‘–webkit-column-count’. Die moeten dus in een stylesheet alle drie vermeld worden, wil het op de meeste browsers goed werken).

Het grote probleem van vandaag (en morgen) is dat je website niet alleen meer bekeken wordt op een PC met een scherm van 1024×768 of 1366×768 (meest populair een paar jaar terug en in 2013 nog goed voor 33% van de PC’s) of nog groter (nu ruim 40% van de PC’s), maar ook steeds meer op mobiele apparaten. Deze hebben vaak schermen niet breder dan 320 points (nee, geen pixels!). En, wat vaak vergeten wordt, ze werken niet met een muis! Dat betekent dus dat de links en knoppen die gebruikt worden eigenlijk minstens 40 points breed en hoog moeten worden om goed aantapbaar te zijn.

Gelukkig zijn er technieken beschikbaar om met deze problemen om te gaan: HTML5, CSS3 en JavaScript. Samen bieden ze diverse mogelijkheden om op basis van afmetingen en resolutie van het scherm het design van de site aan te passen, zodat dezelfde site op een PC met groot scherm of op een mobiel met een (relatief) klein scherm goed leesbaar is en goed werkt. Een webdesign benadering die gebruik maakt van deze mogelijkheden is Responsive webdesign. Deze term is bedacht door Ethan Marcotte in 2010. Het houdt in dat de website zich aanpast aan de omgeving waarin deze getoond wordt met behulp van flexibele grids, flexibele afbeeldingen en CSS3 media queries.

Responsive webdesign werkt met relatieve eenheden (percentages en ems) in plaats van absolute eenheden als pixels. Hierdoor wordt de breedte en hoogte van de elementen aangepast aan de breedte (en eventueel hoogte) van het scherm. Zo kunnen bepaalde elementen bij een breed scherm naast elkaar staan en bij een smaller scherm onder elkaar door gebruik te maken van float in het stylesheet.

Ook werkt Responsive webdesign zoals gezegd met CSS3 media queries. Hiermee kunnen stijlen afhankelijk gemaakt worden van het medium dat gebruikt wordt. Dus voor een scherm kleiner dan 400 points breed kunnen stijlen gedefinieerd worden die bepaalde plaatjes verkleinen of bepaalde elementen onzichtbaar maken.

De ideeën en de technieken zijn er dus, maar het vraagt wel een hele andere manier van denken over een website. Mijn mening is dat er niet begonnen moet worden met hoe een site er uit moet zien, maar welke content getoond moet worden. Dus ga uit van de content. Hier biedt HTML5 ook hele goede ingangen omdat hier niet meer de presentatie voorop staat, maar de betekenis. Oftewel je kan in HTML5 aangeven dat iets belangrijk is, of dat het een header, footer, navigatie of een figuur is, maar je doet geen uitspraak over de presentatie in de HTML (dus geen <B> om iets belangrijk en dikgedrukt te krijgen). De presentatie wordt geheel geregeld door stylesheets en eventueel JavaScript.

Content en semantiek kunnen dus geheel gescheiden worden van de presentatielaag. Dit heeft grote voordelen bij het aanpakken van het grote probleem van vandaag (en morgen): veel verschillende schermgroottes en resoluties. Met JavaScript kan de interactielaag aangepast worden aan de mobiele apparaten. Deze werken immers niet met een muis! Je kan dus niet gebruik maken van het feit dat de gebruiker zijn muis over een element op je website beweegt, maar je kan wel weer gebruik maken van allerlei andere interacties die niet met een muis kunnen, zoals vegen of tappen met 2 vingers.

De scheiding tussen content/semantiek, presentatie en interactie heeft nog meer voordelen:

  • Zoekmachines kunnen beter indexeren, omdat ze verschil zien tussen de echt belangrijke teksten, en teksten voor navigatie en minder belangrijke teksten (zogenaamde aside)
  • De inhoud (content) is makkelijk aan te passen door iemand zonder veel verstand van HTML
  • Een andere presentatie vorm is makkelijker te verwezenlijken
  • De interactie is aan te passen aan nieuwe mogelijkheden, zoals bijvoorbeeld voorlezen of stembesturing

Responsive webdesign gaat uit van de website in zijn geheel, waarbij elementen verkleind of uitgezet worden als het scherm te klein is voor alles. Dit heeft als nadeel dat alle HTML, plaatjes en javascript geladen moeten worden, ook op een mobiel met slechte netwerk verbinding. Een andere benadering is mobile first: ontwerp/bouw voor het kleinste scherm (een mobiel) en voeg elementen toe naarmate het scherm groter wordt. Dit heeft als nadeel dat de wat minder capabele browsers (oude versies of bij mensen die bijvoorbeeld javascript uit hebben staan) alleen de mobiele versie zien.

Ik denk dat een derde manier de beste oplossing is: ga niet uit van de hele site en verklein of laat weg (responsive webdesign) en ga ook niet uit van het kleinste scherm (mobile first), maar ga uit van de inhoud: content first. Hoe zou dat kunnen werken:

  • Bij ontwerp en bouw wordt uitgegaan van de content
  • De content die belangrijk is, wordt eerst in betekenisvolle blokken opgebouwd. Hier kan prima HTML5 voor worden gebruikt. Content die niet altijd (dus niet op elk apparaat) getoond wordt, wordt nog buiten beschouwing gelaten. Denk hierbij aan aside blokken of sommige navigatie blokken. De volgorde van de blokken moet logisch zijn, maar de correcte plaatsing op het scherm gebeurt later.
  • Plaatjes of video kunnen ook geplaatst worden, maar niet op hele hoge resolutie.
  • Om de content nog toegankelijker te maken zou gebruik kunnen worden gemaakt van microdata en ARIA attributen
  • Met stylesheets en media queries wordt de presentatie van de blokken gemaakt voor verschillende schermgroottes. Hier kunnen de technieken van responsive webdesign goed gebruikt worden. Er wordt bij deze stap al rekening gehouden met extra content, zoals asides.
  • Met javascript kan nu de extra inhoud en/of betere versies van plaatjes of video ingeladen worden. Bijvoorbeeld, er kan op een groot scherm een aside geladen worden. Ook kunnen de hoge resolutie versies van plaatjes ingeladen worden, als het doelsysteem dit toelaat (denk aan of het scherm het aan kan en of de netwerkverbinding goed genoeg is)
  • Met javascript kan een extra interactie laag aangebracht worden, bijvoorbeeld voor ondersteuning van swipen of tappen met meerdere vingers voor mobiel, maar ook voor mouseovers voor de desktop.

Alle extra content kan met technieken als media queries en javascript geladen worden, zodat webbrowsers die daar geen capaciteit voor hebben, er ook niet mee belast worden.

Content first vereist een andere manier van websites ontwerpen en bouwen. Maar de technieken zijn voor een groot deel bij de meeste webbrowsers al beschikbaar. Oudere webbrowsers worden ook goed getoond, maar hebben wellicht minder functionaliteit. Het belangrijkste, namelijk de content, wordt goed afgebeeld.

Op naar een zonnige toekomst!

PS: na het schrijven van deze blog kwam ik erachter dat de term “content first” al eerder werd gebruikt. Zeker de moeite waard om ook deze artikelen te lezen, waarbij de invalshoek net anders is:
http://www.frankwatching.com/archive/2012/10/09/van-mobile-first-naar-content-first/
http://www.frankwatching.com/archive/2013/08/16/content-first-van-responsive-design-naar-dynamische-website/
http://www.marketingfacts.nl/berichten/content-first-bij-de-nieuwe-responsive-website-van-ing-commercial-bank
http://www.lukew.com/ff/entry.asp?1430