AI-design kapot op mobiel

Op je laptop ziet je site er goed uit. Op je telefoon schuift de pagina opzij, loopt de kop van het scherm en gaat het menu niet open. Dat is geen pech: AI-tools maken vaak dezelfde vier fouten. Hieronder staat hoe je ze vindt, hoe je elke fout repareert met de CSS erbij, en hoe je een AI-tool de reparatie laat doen zonder dat de desktopversie meeverandert.

Herken je dit?

AI-tools ontwerpen voor het scherm waarop jij kijkt

Een AI-tool laat zijn ontwerp zien in een venster op je laptop, en optimaliseert voor wat daar zichtbaar is. Dus komen er waarden in de code die op 1440 pixels kloppen: een container van precies 1200 pixels, een kop van 72 pixels, drie kolommen naast elkaar. De tool gaat uit van een muis, dus het menu opent als je eroverheen beweegt. Op een telefoon van 390 pixels breed heeft geen van die keuzes nog zin.

Nederlands maakt het erger. Een woord als “installatiebedrijf” of “onderhoudscontract” past op een telefoon niet in een kop van 72 pixels. De browser breekt het niet vanzelf af, dus het steekt buiten het scherm.

Zo vind je wat er misgaat

1. Bekijk de pagina in de apparaatweergave van je browser

Open in Chrome de ontwikkelaarstools met F12, of Cmd+Option+I op een Mac, en zet de apparaatweergave aan met Ctrl+Shift+M, of Cmd+Shift+M. Kies een breedte van 360 pixels. Safari en Firefox hebben een vergelijkbare weergave voor responsive ontwerp.

2. Zoek het element dat breder is dan het scherm

Schuift de pagina opzij, dan is er één element te breed. Dit stukje code in de console wijst het aan. Vraagt Chrome eerst om “allow pasting” te typen, doe dat.

document.querySelectorAll('*').forEach(function (el) {
  if (el.getBoundingClientRect().right > document.documentElement.clientWidth + 1) {
    console.log(el);
  }
});

3. Test op een echte telefoon

De apparaatweergave doet geen aanraking na zoals een vinger dat doet, en een telefoon heeft een adresbalk die in- en uitschuift. Open de site op je eigen telefoon. Tik op elk menu-item en elke knop, vul het formulier in en draai het scherm een keer.

Zo repareer je de vier bekende fouten

Vaste breedtes

Een container met een vaste breedte in pixels is op een kleiner scherm te breed. Geef hem een maximale breedte en laat hem daaronder meekrimpen.

/* was */
.container { width: 1200px; }

/* wordt */
.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 16px;
}
img, video { max-width: 100%; height: auto; }

Let ook op 100vw. Dat is de volle breedte inclusief de scrollbalk, en op een desktop is dat net breder dan de pagina. Gebruik 100%.

Koppen die te groot zijn

Laat de grootte van een kop meeschalen met het scherm, met een onder- en een bovengrens. Zet de taal van de pagina op Nederlands, dan kan de browser lange woorden op de goede plek afbreken.

<html lang="nl">

h1 {
  font-size: clamp(2rem, 5vw + 1rem, 4.5rem);
  line-height: 1.05;
  overflow-wrap: break-word;
  hyphens: auto;
  text-wrap: balance;
}

Menu’s die alleen op hover werken

Een telefoon heeft geen muis. Een submenu dat opent bij :hover, opent op een telefoon soms bij de eerste tik, soms nooit. Maak er een knop van die opent als je tikt of klikt; dat werkt op elk apparaat. Wil je het zweefeffect op desktop houden, zet het dan binnen @media (hover: hover).

<li>
  <button aria-expanded="false" aria-controls="sub-diensten">Diensten</button>
  <ul id="sub-diensten" hidden>
    <li><a href="/installatie/">Installatie</a></li>
    <li><a href="/onderhoud/">Onderhoud</a></li>
  </ul>
</li>

<script>
  document.querySelectorAll('button[aria-controls]').forEach(function (knop) {
    knop.addEventListener('click', function () {
      var open = knop.getAttribute('aria-expanded') === 'true';
      knop.setAttribute('aria-expanded', String(!open));
      document.getElementById(knop.getAttribute('aria-controls')).hidden = open;
    });
  });
</script>

Maak tikdoelen groot genoeg. Apple houdt 44 bij 44 punten aan als minimum, met ruimte ertussen. Meer over toetsenbord, focus en contrast staat in is je AI-design toegankelijk.

Een pagina die zijwaarts schuift

Heb je met de code uit stap 2 het te brede element gevonden, repareer dan dat element. Meestal is het een vaste breedte, een negatieve marge, een tabel of een decoratief vlak dat buiten zijn kolom is geplaatst. Zet geen overflow-x: hidden op de body om het te verbergen. Dan schuift de pagina niet meer, maar het element is nog steeds afgesneden, en elementen met position: sticky blijven niet meer staan. Moet het toch, gebruik dan overflow-x: clip.

Laat een AI-tool het repareren, met grenzen

Een vage opdracht als “maak het responsive” laat de tool ook de desktopversie herschrijven. Zeg wat er mis is en wat moet blijven.

Maak deze pagina bruikbaar vanaf 360 pixels breed.
- Geen vaste breedtes in px op containers: width 100% met een max-width.
- Koppen met clamp(); lang="nl" en hyphens: auto voor lange woorden.
- Submenu’s openen met een knop op tikken, niet met :hover.
- Geen overflow-x: hidden. Zoek het element dat te breed is en repareer dat.
- Verander niets aan de weergave boven 1024 pixels.

Veelgemaakte fouten

Wanneer je hulp nodig hebt

Is het meer dan een paar regels CSS, omdat het ontwerp nooit voor een telefoon bedoeld was, dan ontwerpen wij de mobiele versie erbij als we je AI-design omzetten naar een echte website. Wil je het hele ontwerp laten nakijken, op mobiel en op de rest, dan is AI-design laten verbeteren de plek. Speelt het ook in Google, lees dan AI-website niet gevonden in Google. Alles over van ontwerp naar website staat bij de AI-gidsen over design.