Een teller op een telefoonscherm

De fysieke beperkingen van moderne mobiele apparaten veranderen wezenlijk hoe webindelingen zich gedragen en hoe elementen op elkaar inwerken. Een element dat op een breed bureaubladscherm perfect in verhouding oogt, kan makkelijk ernstige structurele problemen veroorzaken wanneer het in de smalle grenzen van een telefoonscherm geperst wordt.

Een externe afbeelding met vaste afmetingen inbouwen zet een star blok in een verder buigzame, vloeiende omgeving.

Is dat blok breder dan de beschikbare schermruimte, dan doorbreekt het de grenzen van de opmaak. Daardoor wordt de hele webpagina zijwaarts scrollbaar, en dat maakt tekst lezen bijzonder vervelend.

De balk die de pagina opzij laat schuiven

Het gebruikelijkste teken van een misplaatst plaatje op een mobiel apparaat is de plotselinge schuifbalk onder aan het browservenster. Weigert een afbeelding met vaste breedte te krimpen, dan maakt de browser er plaats voor door het virtuele doek voorbij de fysieke schermranden uit te breiden.

Probeert de lezer door een artikel omlaag te scrollen, dan wiebelt de tekst voortdurend naar links en rechts. Die onrust verpest het lezen en wekt de indruk van een kapotte, onprofessionele website.

Om dat te vermijden moet het gekozen ontwerp een maximumbreedte hebben die ruim onder de gewone breedte van een ouder telefoonscherm ligt. Een compact ontwerp uit de catalogus kiezen sluit het risico van onbedoelde uitbreiding volledig uit.

Cijfers die te klein zijn om te lezen

Een tweede belangrijk probleem ontstaat wanneer een plaatje tekst of cijfers bevat die zonder inzoomen niet te ontcijferen zijn. Een bureaubladscherm laat kleine letters comfortabel lezen, maar een telefoon die op armlengte gehouden wordt, vraagt om grotere, duidelijkere letters.

Zijn de cijfers in de afbeelding op gewone mobiele afmetingen onleesbaar, dan verliest het element zijn hele doel. Het verandert van een informatief gereedschap in een betekenisloze verzameling pixels.

Een ontwerp kiezen dat grote cijfers met hoog contrast voorrang geeft boven sierranden of achtergrondplaatjes is noodzakelijk. Het getal moet in één oogopslag te herkennen zijn, zonder een knijpgebaar om in te zoomen.

Waar hij op een smal scherm belandt

Ook de plaatsing van het element vraagt om een andere aanpak wanneer je voor mobiel gebruik optimaliseert. Zoals eerder besproken worden zijkolommen op smalle schermen doorgaans naar de onderkant van de pagina verbannen en onder de hoofdinhoud gestapeld.

Dat betekent dat een element in een zijkolom uiteindelijk vlak naast de elementen in de voettekst belandt. Bevatten beide gebieden starre plaatjes of brede tekstblokken, dan kunnen ze in die gestapelde opstelling botsen en ongelukkig overlappen.

Een nette, gecentreerde uitlijning binnen de voettekst biedt meestal de robuustste oplossing. Het element centreren zorgt dat het van beide schermranden even ver blijft, wat een evenwichtig, harmonisch beeld geeft dat zich feilloos aan elke schermstand aanpast.