Mobile-first versus desktop-first
Begrijp het verschil tussen mobile-first- en desktop-first-ontwerpstrategieën.
Mobile-first versus desktop-first is een gratis CSS Academy-les op CoddyKit. Dit is les 1 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject CSS Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus CSS Academy bevat in totaal 4 lessen.
Wat is responsief ontwerp?
Responsief webontwerp maakt lay-outs die zich aanpassen aan elk schermformaat, van kleine smartphones tot grote desktopmonitors, met behulp van vloeiende rasters, flexibele afbeeldingen en CSS-mediaquery's.
Mobile-firstontwerp
Bij een mobile-first-benadering schrijf je eerst de basis-CSS voor kleine schermen. Daarna gebruik je mediaquery's met min-width om geleidelijk meer mogelijkheden toe te voegen voor grotere schermen.
<p style="font-size:0.85em;color:#888;margin:0 0 6px;">Narrow (default) preview — driven by the real CSS below:</p>
<nav class="nav" style="display:flex;gap:8px;background:#4f8cff11;border:1px solid #4f8cff;padding:8px;margin-bottom:16px;">
<a href="#">Home</a><a href="#">Products</a><a href="#">About</a>
</nav>
<p style="font-size:0.85em;color:#888;margin:0 0 6px;">Static reference for the ≥768px (tablet+) row layout (not driven by the media query):</p>
<nav style="display:flex;flex-direction:row;gap:8px;background:#4f8cff11;border:1px solid #4f8cff;padding:8px;">
<a href="#">Home</a><a href="#">Products</a><a href="#">About</a>
</nav>Desktop-firstontwerp
Bij een desktop-first-benadering schrijf je eerst de basis-CSS voor grote schermen. Daarna gebruik je mediaquery's met max-width om deze aan te passen voor kleinere schermen.
<aside class="sidebar" style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Sidebar — width: 100% below 768px (this preview is narrow, so the override is already visible)</aside>Waarom mobile-first de voorkeur heeft
Voordelen van mobile-first:
- Dwingt je inhoud te prioriteren: wat is het belangrijkst op kleine schermen?
- Progressieve verbetering — begin eenvoudig en voeg complexiteit toe
- Betere prestaties — mobiel laadt alleen de basisstijlen, geen overschrijvingen
- Sluit aan bij de realiteit dat het meeste webverkeer mobiel is
De cascade en mobile-first
Mobile-first werkt natuurlijk samen met de CSS-cascade. Basisstijlen worden eerst geladen; overschrijvingen voor grotere schermen komen later met mediaquery's. Daardoor zijn er minder conflicten over CSS-specificiteit.
Inhoud als uitgangspunt
Vraag je vóór je CSS schrijft af: welke inhoud heeft een mobiele gebruiker nodig? Structureer je HTML en basis-CSS rond het antwoord. Op grotere schermen verbeter je de ervaring in plaats van alles opnieuw op te bouwen.
Progressieve verbetering versus geleidelijke versobering
Progressieve verbetering (mobile-first): begin met een functioneel minimum en voeg daarna verbeteringen laag voor laag toe. Geleidelijke versobering (desktop-first): bouw eerst een volledig uitgeruste versie en pas die daarna aan voor kleinere schermen. Progressieve verbetering is over het algemeen robuuster.
Aanraakdoelen versus klikdoelen
Mobiele gebruikers gebruiken hun vingers, niet een nauwkeurige muisaanwijzer. Een mobile-firstontwerp leidt vanzelf tot grotere aanraakdoelen, minimaal 44x44px, en voldoende ruimte tussen interactieve elementen.
<button>Tap target (min 44x44px)</button>Navigatiepatroon
Mobile-firstnavigatie begint meestal als een hamburger- of uitschuifmenu en wordt op grotere schermen uitgebreid tot een zichtbare navigatiebalk:
<p style="font-size:0.85em;color:#888;margin:0 0 6px;">Narrow (default) preview — driven by the real CSS below:</p>
<button aria-label="menu" style="margin-bottom:8px;">☰ Menu</button>
<div class="nav-links" style="gap:12px;background:#4f8cff11;border:1px solid #4f8cff;padding:8px;margin-bottom:16px;">
<a href="#">Home</a><a href="#">Products</a><a href="#">About</a>
</div>
<p style="font-size:0.85em;color:#888;margin:0 0 6px;">Static reference for the ≥768px (desktop) visible nav bar (not driven by the media query):</p>
<div style="display:flex;gap:12px;background:#4f8cff11;border:1px solid #4f8cff;padding:8px;">
<a href="#">Home</a><a href="#">Products</a><a href="#">About</a>
</div>Typografie volgens mobile-first
Stel eerst comfortabele, leesbare lettergroottes in voor mobiel en schaal ze daarna op voor grotere schermen:
<p style="font-size:0.85em;color:#888;margin:0 0 6px;">Narrow (default) preview — driven by the real CSS below:</p>
<h1>Mobile heading (1.75rem)</h1>
<p style="font-size:0.85em;color:#888;margin:16px 0 6px;">Static reference for the ≥1024px (desktop) size (not driven by the media query):</p>
<h1 style="font-size:3rem;">Desktop heading (3rem)</h1>Vloeiend versus adaptief
Responsief ontwerp kan zijn:
- Vloeiend: gebruikt relatieve eenheden en past zich soepel aan elk formaat aan
- Adaptief: schakelt op specifieke breekpunten tussen vaste lay-outs
De moderne beste aanpak combineert beide: vloeiend binnen breekpunten en verschillende lay-outs op de breekpunten.
Korte controle
Samenvatting
Bij mobile-firstontwerp schrijf je basisstijlen voor mobiel en gebruik je min-width-query's om deze voor grotere schermen uit te breiden. Dit stimuleert het prioriteren van inhoud, betere prestaties en sluit aan bij moderne verkeerspatronen. Progressieve verbetering vanaf kleine schermen levert robuustere en beter onderhoudbare responsieve ontwerpen op.
Leer CSS met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 40
- Lessen
- 159
Veelgestelde vragen
Is de les “Mobile-first versus desktop-first” gratis?
Ja — de volledige tekst van “Mobile-first versus desktop-first” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus CSS Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus CSS Academy bevat in totaal 4 lessen.
Wat leer ik in “Mobile-first versus desktop-first”?
Begrijp het verschil tussen mobile-first- en desktop-first-ontwerpstrategieën. Je oefent met CSS Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met CSS Academy te beginnen?
Ervaring vooraf is niet nodig. CSS Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 4.
Hoe lang duurt de les “Mobile-first versus desktop-first”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over CSS Academy?
Ja. Elke les over CSS Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Mobile-first versus desktop-first
- Vloeiende breedtes met percentages
- Patronen met min-width en max-width
- Responsive afbeeldingen en het picture-element