Furor Teutonicus blog | over | volg | teuto | lyme | archief | doneer | todo
🕰️
  ⬩  
✍️ Evert Mouw
  ⬩  
⏱️ 7 min

Responsief webontwerp

“Doe mij snel een website”, zei de PR manager. “Doe maar in dezelfde stijl als onze reclamefolder.” En zo werd de website een flauwe afspiegeling van drukwerk.

De webdesigner kreeg het zweet op zijn voorhoofd. Al die verschillende browsers, schermen en apparaten, met ook nog ’s verschillende instellingen — en de site moet er natuurlijk wel overal hetzelfde uitzien!

Vreselijk dus.

Ja, echt doodzonde. Want waarom zou een tekst of een afbeelding of een pagina er overal hetzelfde uit moeten zien? Op een grote 30 inch monitor zie ik een scherp genomen foto graag lekker groot. Maar op een klein scherm zal die foto verkleind geschaald moeten worden, anders moet je wel heel veel scrollen om de hele foto te zien.

Hoe dit allemaal ontstond

De bedenkers van het WWW (World Wide Web) en de HTML standaard (Hypertekst Markup Language) waren niet dom. Hun “opmaaktaal” was een praktische mix van hoofdzakelijk twee soorten elementen:

De leek vraagt: hoe zien die HTML tags eruit? Zo ongeveer:

<h3>Hoe dit allemaal ontstond</h3>
<p>De bedenkers van het WWW

Het idee was dat je een tekst een goede structuur kon geven met kopjes (headers) e.d. De browser zou er dan wel voor zorgen dat de tekst op een voor jouw apparaat handige manier getoond zou worden. Er waren wel wat simpele opmaaktags, maar die waren niet bedoeld om tot in detail een soort digitale folder te maken. Het idee was dus eigenlijk: je maakt een logische tekst en misschien ziet ie er op verschillende computers anders uit, maar dat is oké.

Structuur en opmaak liepen flink door elkaar, waardoor de HTML code soms wat onoverzichtelijk werd.

En de opmaak zelf was ook nog wat primitief. De grootte van letters en afbeeldingen werd vaak in pixels (px) opgegeven. Later kwamen er de relatieve eenheden zoals percentages en de em. Maar voor afbeeldingen bleef het lastig, omdat foto’s en dergelijke vaak zgn. raster-images (bitmaps) zijn, met een vast aantal pixels. Echt schaalbare afbeeldingen zijn de zgn. vectorafbeeldingen. Op het internet is vooral SVG (Scalable Vector Graphics) populair. Maar Microsoft bleef een hele tijd achter lopen waardoor het een tijd lang niet goed op gang kwam.

Tenslotte begonen stylesheets in de vorm van CSS (Cascading Style Sheets) aan een forse opmars. Daarmee kon eindelijk de structuur en de opmaak goed gescheiden worden. Bovendien werd het gebruik van een centrale, gestandaardiseerde opmaak voor een website veel gemakkelijker. Als je bijvoorbeeld alle H1 kopjes (kop niveau 1) rood en cursief (italics) wilt hebben, dan zet je dit in het centrale CSS bestand:

H1 {
  color: Red;
  font-style: italic;
}

Voor schaalbare afbeeldingen, animaties, spelletjes en video’s werd vaak gebruik gemaakt van Flash. Helaas, Flash is niet open-source, het is geen webstandaard, het is niet altijd snel, niet alle apparaten worden ondersteund, maar het werkte voor de meerderheid. Tot Steve Jobs de tijd rijp achtte om het monster te verslaan — terecht, want er zijn nu prima alternatieven voor Flash.

Maar wat bleef, was de “het moet op drukwerk lijken” aanpak. Veel websites zijn nog steeds zo gemaakt dat ze helemaal uitgaan van een bepaalde grootte van het scherm. De opmaak is niet flexibel. Op een klein scherm, bv. een smartphone, zijn zulke sites lastig te bekijken. Foto’s zijn te groot of je moet veel scrollen. Maar ook op een groot scherm komt zo’n site vaak niet tot zijn recht. Ach ja, de PR man is tevreden als hij op zijn standaard PC ziet dat het er gelikt uitziet, en de webdesigner krijgt zijn geld.

En toen kwam de de mobiele revolutie

Het begon met netbooks zoals de EeePC, iPhones, iPads, en andere smartphones en tablets. Geen enkel scherm was nog hetzelfde. Een nieuwssite werd de ene keer gelezen op een PC met een 17 inch monitor, en even later weer met een smartphone met een miniem schermpje.

De tijd van de reclamedrukwerkmafia komt ten einde. De oorspronkelijke ontwerpers van het WWW zouden gelijk krijgen: je moet teksten vooral goed structureren, en de presentatie (opmaak) aan de browser (en het apparaat, device) overlaten.

En deze keer doen we het een stuk beter. We hebben CSS. We hebben SVG. We hebben betere technieken om afbeeldingen automatisch te schalen, om tekstgrootte automatisch aan te passen aan de schermgrootte, en om afstanden en groottes in relatieve eenheden op te geven.

En we noemen het Responsive Web Design. Het was Ethan Marcotte in 2010 die als eerste die term gebruikte in een goed technisch artikel over de implementatie daarvan op het web. Eigenlijk was het een terugkeer naar het oude web, maar dan met gebruikname van een heleboel nieuwe technieken, inzichten en mogelijkheden.

Een paar voorbeelden

Foto’s automatisch kleiner maken

Neem bijvoorbeeld een foto. Je wilt ’m zo groot mogelijk op het scherm zetten, maar op een klein scherm moet ie automatisch verkleind worden weergegeven. Hoe doe je dat? Simpel:

img {
  max-width: 100%;
}

De eerste versie van het Web had nog niet zo’n max-width opmaaktruc. Maar alle moderne browsers hebben het. Ik maak er op deze website (FT) ook gebruik van. Natuurlijk is dit een WordPress site, en ik gebruik gewoon het mooie thema Mystique, maar daar kun je gewoon je eigen CSS code aan toevoegen.

Ghost, de opvolger van WordPress

Over WordPress gesproken — dat mag dan wel zo’n beetje de standaard zijn in software voor weblogs, echt responsief is het niet. Met wat moeite kom je wel in de richting, maar dan nog zit WordPress met een hoop oude inzichten en ontwerpkeuzes opgezadeld.

Een voormalig WordPress ontwikkelaar is begonnen met een nieuw project: Ghost. Ghost is responsief, maakt gebruik van Markdown, en is volgens Ars Technica al bruikbaar. Lees ook het artikel over Ghost op Ars.

De hele indeling aanpassen

Zo’n mooi menu aan de zijkant is leuk en aardig, maar op een mobiele browser heb je helemaal niet veel zijkant. Gewone monitoren zijn meer breed dan hoog, maar zo’n smartphone schempje is juist meer hoog dan breed.

Dus wat doe je? Je laat automatisch zo’n zijkant (in HTML 5 vaak een aside of een nav) verdwijnen of op een andere plaats vertonen. Een menu dat op een 17 inch scherm mooi aan de zijkant zit, kan beter boven de inhoud getoond worden als je een smartphone hebt.

responsive elements

Dat automatisch optimaal indelen kan dankzij modern CSS. Want CSS heeft tegenwoordig een media query.

<link rel="stylesheet" media="screen and (max-width: 480px)" type="text/css" href="/screen-small.css">

En dankzij die media query kun je dus voor een paar verschillende soorten schermen verschillende CSS bestanden opgeven. Heel handig. Zo kun je meteen lettergrootte, achtergrondafbeeldingen, en ga zo maar door veranderen.

Alles is relatief

Het idee is om zoveel mogelijk relatieve eenheden te gebruiken. Dus vermijd absolute eenheden zoals pixels (px) en lengte-eenheden zoals centimeters (cm). Goede relatieve eenheden zijn:

Per CSS3 zijn er viewport eenheden. De viewport is de grootte van het venster waardoor de gebruiker de webpagina ziet, oftewel hoeveel ruimte de browser heeft om de webinhoud te tonen.

Met viewport eenheden kun je heel veel, schrijven Chris Coyier en David Storey.

Het gebruik van vectorafbeeldingen zoals SVG is steeds interessanter. Met InkScape kun je rasterafbeeldingen converteren naar vectors. Maar met het max-width trucje kom je ook een heel eind!

Mijn eerste experiment: Elspeet.info

Voor het dorp waar ik woon heb ik een simpele, kleine website gemaakt. Het ding was na wat jaren achterstallig onderhoud wel aan een kleine update toe. Een goede kandidaat om responsief te maken!

Dus heb ik de site actueel gemaakt door valide HTML5 te gebruiken (met tags zoals aside, article, nav, etc.) en slimme CSS te gebruiken om de site responsief te krijgen. Verder op de achtergrond nog wat PHP zodat ik niet steeds opnieuw een footer voluit moet typen, hoewel dat met een statische website generator zoals Jekyll ook had gekund.

De opmaak moest daarbij vooral functioneel zijn, zonder veel franje, maar niet onprettig voor het oog. Eigenlijk had ik voor mijn handgemaakte websites altijd al dat principe en heb ik nooit meegedaan met de online reclamefoldermaffia. Oftewel, de oude versie kwam al een heel eind mee op allerlei diverse schermformaten. Maar de nieuwe versie is toch wel beter en flexibeler. Je kunt ’m vinden op www.elspeet.info. Probeer maar eens om je browservenster heel klein te maken, dan zie je wat responsief precies is.

Meer over responsief ontwerp


Deze blogpost werd in december 2022 overgezet van WordPress naar een methode gebaseerd op Markdown; het is mogelijk dat hierbij fouten of wijzigingen zijn ontstaan t.o.v. de originele blogpost.