Waarom werkt mijn responsive website toch niet goed op mobiel?

Omdat responsive alleen zegt dat de indeling meeschaalt, niet dat de site bruikbaar is. Dat zijn twee verschillende dingen, en het verschil verklaart vrijwel alle klachten die wij hierover krijgen.

De zes dingen die wij het vaakst tegenkomen:

1. Dezelfde zware afbeeldingen als op desktop. De foto schaalt visueel netjes mee maar het bestand van drie megabyte gaat gewoon over een mobiele verbinding.
2. Alles laden en daarna verbergen. Blokken die op mobiel met CSS worden weggehaald, zijn wel opgehaald. Je betaalt de laadtijd voor inhoud die niemand ziet.
3. Te kleine klikvlakken. Iconen en menu-items die met een muis prima aan te klikken zijn en met een duim niet. WCAG hanteert 24 bij 24 pixels als ondergrens; voor duimbediening is 44 realistischer.
4. Tabellen die niet passen. Een prijstabel met zes kolommen wordt op een telefoon een horizontale schuifbalk die niemand opmerkt.
5. Formulieren zonder het juiste toetsenbordtype. Een telefoonnummerveld dat het letterklavier opent, kost je invullingen.
6. Vaste balken die het halve scherm vullen. Een header, een cookiemelding en een chatknop samen laten soms nog een derde van het scherm over voor de inhoud.

Punt 1 en 2 raken direct je Core Web Vitals. Punt 3 raakt je toegankelijkheid. Punt 4, 5 en 6 raken je conversie zonder dat je er iets van terugziet in een meting, want mensen haken af zonder te klagen.