Wat komt na mobile-first? Multi-form-factor 2026

TL;DR Mobile-first was correct toen mobiel 60% werd. In 2026 wordt content op 6+ form-factors getoond: phone (40%), desktop/laptop (35%), foldable phones (5%), tablets (10%), smart-watches (samengevat <1%, maar groeit), AR-glasses (Apple Vision Pro segment), auto-schermen (CarPlay/Android Auto). Voor MKB betekent dat: design ontwerpen voor inhoud, niet voor scherm. Container queries + fluid typography zijn de basis.

Waar mobile-first vandaan kwam

Term komt van Luke Wroblewski (boek 2011). Idee: ontwerp eerst voor de meest beperkte context (smartphone), bouw daarna omhoog naar desktop. In 2014 werd het Google's officiële richtlijn. Vanaf 2018 ging Google "mobile-first indexing" doen — ze indexeren primair de mobiele versie van je site.

Dat klopte. In 2014-2024 was mobiel de dominante én groeiende form-factor. Een MKB-site moest mobiel eerst werken.

Waarom mobile-first nu te beperkt is

Data 2026 (NL-context):

Phone (smartphones): 40-50% van traffic — vroeger 60%+
Desktop/laptop: 30-40% — stabiel hoger geworden in B2B
Tablet: 8-12%
Foldable phones: 3-7% (Samsung Galaxy Z Fold/Flip groeit gestaag)
Smart-watch: <1% maar groeiend voor specifieke acties (afspraak maken, contact)
AR/VR-glasses: Apple Vision Pro, Meta Quest — niche maar voor specifieke MKB-categorieën relevant
Auto-displays: CarPlay/Android Auto — voor lokale dienstverleners zinvol (wanneer ben je open?)

Mobile-first behandelt alle niet-mobiele form-factors als afwijking. In 2026 zijn ze samen 50%+ van het verkeer.

Wat dan wel?

Drie principes die mobile-first vervangen:

1. Content-first

Ontwerp niet voor schermbreedte. Ontwerp voor inhoud: wat moet bezoeker zien, in welke volgorde, op welke prioriteit. Pas dán bepalen hoe het op verschillende form-factors past.

2. Fluid typography

CSS `clamp(min, ideal, max)` voor font-sizes. Niet meer "16px op mobiel, 18px op desktop" — wel "fluide tussen 16-22px afhankelijk van viewport". Werkt voor elk form-factor.

3. Container queries (sinds 2023 universeel)

Component-level responsive design. Een product-card past zich aan op zijn eigen container, niet op de viewport. Voor MKB betekent dat: dezelfde card-component werkt in 3-koloms-grid op desktop én in 1-kolom op mobiel zonder mediaqueries.

Concrete impact voor MKB-sites

Wat ik (Lorenzo) nu standaard meeneem

Container queries voor alle component-onderdelen
Fluid typography met `clamp()` — geen vaste breakpoints meer
Foldable-friendly layouts (geen fixed-width componenten)
Print-stylesheet voor contact-pagina's (mensen printen nog steeds adressen)
Smart-watch-vriendelijke contact-pagina (alleen tel + adres + openingstijden zichtbaar boven de fold)
OG-meta voor messaging-apps (link-previews op WhatsApp/Slack)
`color-scheme: light dark` voor automatische dark-mode adaptatie

Wat ik NIET specifiek meeneem voor MKB

VR-glasses-specifieke layouts. Apple Vision Pro doelgroep voor lokale MKB nog te klein.
Auto-display-versies. Tenzij je hovenier/elektricien direct vanuit auto-display wil laten contacteren — dan wel.
Custom watchOS-app. Voor MKB-info-sites geen ROI.

Foldable phones — relevanter dan je denkt

Samsung Galaxy Z Fold/Flip is in 2026 ~7% van Android-verkeer in NL (was 1% in 2022). Het opent extra design-vraagstukken: wat als bezoeker mid-scroll de telefoon openvouwt? Layout moet meegroeien zonder content-verschuiving. Container queries lossen dit native op.

Wat het kost voor MKB

Voor nieuwe builds: niets extra. Container queries en fluid typography zijn moderne CSS, gratis. Voor refresh van bestaande sites: typisch 1-3 uur extra werk (€80-€240). Voor de meeste sites de moeite waard — Lighthouse-score verbetert ook door het simplifiëren.

Bij DesignCheck zit multi-form-factor in elke rebuild standaard. Zie prijzen: refresh €1.995 / rebuild €3.995.

Test je eigen site op multi-form-factor

Drie snelle tests:

Open Chrome DevTools, zet device-emulator op "Galaxy Z Fold" met de scharnierlijn aan. Klopt je layout?
Zoom in op je site tot 200%. Werkt nog steeds alles? (WCAG-vereiste, zie EAA)
Test op een echte tablet in landscape. Veel sites werken alleen in portrait.

Of vraag de gratis DesignCheck-audit — daarin checken we expliciet op meerdere form-factors en sturen screenshots van wat waar fout gaat.

Wat dit betekent voor je vindbaarheid

Google's "mobile-first indexing" gaat eind 2026 vervangen worden door "responsive-first indexing" — sites die op meerdere form-factors goed werken krijgen voorkeur. MKB-sites die nu alleen mobiel-optimaal zijn (en niet desktop of foldable) zakken in ranking. Reken door wat dat kost.

FAQ — multi-form-factor voor MKB

Moet ik nu mijn site herbouwen?

Niet als hij goed werkt op de drie meest voorkomende form-factors (phone, tablet, desktop). Wel als hij ergens breekt — dan eerst die scherm-categorie fixen.

Wat met Apple Vision Pro?

Voor B2C luxe-segment relevant (interieur, mode), voor lokaal MKB niet. Apple's Safari op Vision Pro toont normale websites — geen aparte versie nodig.

Werken container queries overal?

Sinds februari 2023 in alle moderne browsers. ~95% van NL-bezoekers ondersteunt het. Voor de 5% met oudere browsers: graceful degradation via fallback-mediaqueries.

Bouwen jullie multi-form-factor standaard mee?

Ja. Elke rebuild (€3.995) krijgt container queries, fluid typography en getest op phone/tablet/desktop/foldable. Refresh (€1.995) als de bestaande basis bruikbaar is.

Container queries: de techniek die responsive design fundamenteel verandert

Container queries (officieel @container in CSS) werken anders dan media queries. Een media query reageert op de viewport — de breedte van het hele browser-venster. Een container query reageert op de breedte van de directe parent-container. Dat klinkt klein, maar het verandert de architectuur van responsive design totaal. Een product-card die op desktop in een 3-koloms-grid staat en op tablet in een 2-koloms-grid, hoefde vroeger media queries voor te bevatten — terwijl het echte signaal niet de viewport was maar de beschikbare ruimte van de card zelf.

In de praktijk schrijf je nu: @container (min-width: 320px) { .card-title { font-size: 1.5rem; } }. De card-component werkt overal — in een sidebar, in een grid, in een full-width hero — zonder dat je per gebruik aparte breakpoints schrijft. Voor MKB-sites met meerdere herhalende componenten (productcards, news-items, team-leden) bespaart het tientallen regels CSS en maakt het de code beter onderhoudbaar over de jaren heen.

Browserondersteuning is sinds februari 2023 volledig in Chrome, Safari en Firefox. In 2026 is 96-97% van wereldwijd webverkeer gedekt. Voor de paar procent restant werken oudere mediaqueries als fallback — graceful degradation, niet kapotte layouts.

Fluid typography met clamp(): van breakpoints naar bereiken

Vaste font-sizes per breakpoint zijn voorbij. De moderne aanpak gebruikt clamp(min, ideal, max) in CSS. Voorbeeld: font-size: clamp(1rem, 0.95rem + 0.5vw, 1.5rem);. Dit zegt: gebruik minimaal 16px, ideaal de fluide berekening op basis van viewport-breedte, maximaal 24px. Tussen die uiteinden schaalt de tekst geleidelijk mee met de viewport. Geen sprongen op 768px of 1024px — gewoon vloeiend.

Het effect op MKB-sites is direct merkbaar. Tekst voelt op een grote desktop niet ineens te klein, op een kleine telefoon niet ineens te groot, en op een tablet ergens tussenin. De kop van een homepage die op een 4K-scherm 56px is en op een telefoon 32px voelt op beide harmonieus omdat de transitie organisch verloopt in plaats van via sprongen. Voor wereldwijd MKB met internationale bezoekers op verschillende schermtypes is dit het verschil tussen "werkt overal acceptabel" en "ziet er overal goed uit".

Foldables, tablets en de scharnier-uitdaging

De vouwbare telefoon is in 2026 geen niche meer. Samsung Galaxy Z Fold/Flip, Google Pixel Fold, Honor Magic V — bij elkaar 7-9% van Android-traffic wereldwijd in 2026. Voor MKB-sites speelt één concreet probleem: wat gebeurt er met je layout wanneer iemand de telefoon mid-sessie openvouwt? De viewport verdubbelt in breedte op 200 milliseconden, en zonder container queries krijgt de gebruiker een visuele schok.

Met container queries en fluid typography wordt dat een non-event. De layout vloeit mee naar de nieuwe breedte, content blijft op zijn plek, geen herstart van scroll-positie. Het is technisch geen extra werk — je krijgt het cadeau wanneer je modern bouwt.

Voor tablets in landscape ligt het anders. Veel sites werken alleen in portrait omdat de hamburger-menu-overlay onlogisch wordt bij een breedte van 1180 pixels. Onze regel: test elke pagina op iPad Pro landscape (1366 bij 1024 effectief) en check of de navigatie als horizontaal menu werkt in plaats van als overlay-burger.

Vervang vaste breakpoints door fluid typography met clamp()
Gebruik container queries voor herhalende componenten in plaats van media queries
Test je site op iPad Pro landscape — vaak breekt navigatie daar
Open je site op foldable-emulatie en check of openvouwen geen layout-schok geeft
Voeg color-scheme: light dark toe voor automatische dark-mode op systeem-niveau
Schrijf een print-stylesheet voor je contact-pagina — mensen printen nog adressen
Optimaliseer je homepage voor smart-watch-previews (eerste 240 tekens van meta-description)
Houd je OG-meta-image op 1200 bij 630 pixels voor optimale messaging-previews
Test je site met 200% browser-zoom — werkt alles nog of breekt de layout
Vermijd fixed-width componenten — gebruik max-width en min(100%, breedte) in plaats
Werk in rem-eenheden in plaats van px voor alle typografie en spacing
Gebruik logische CSS-eigenschappen (block-size, inline-size) voor internationale layouts
Audit je site jaarlijks op nieuwe form-factors die boven 3% van je traffic uitkomen
Stel een minimum-target van 320px viewport-breedte als ondergrens voor je design
Bewaak performance over alle form-factors — een trage tablet is geen excuus voor 4MB-pagina's

SEO en multi-form-factor: wat Google in 2026 echt prioriteert

Google's mobile-first indexing is sinds 2020 volledig uitgerold en blijft in 2026 nog steeds de primaire indexering-modus. Wat verandert is de weging van responsiveness in de Page Experience-signalen. Een site die op tablet-portrait of foldable-landscape breekt scoort meetbaar lager op Core Web Vitals omdat layout-shifts toenemen bij viewport-veranderingen. Voor SEO betekent dat: een goede multi-form-factor-aanpak verbetert je CLS-score (Cumulative Layout Shift), en dat is sinds 2021 een directe ranking-factor.

Voor onze klant Keurmeesters telt dit concreet. Het BAG-formulier moet werken op een Android-telefoon van een woningeigenaar op locatie én op een desktop van een woningcorporatie-medewerker. Dezelfde URL, geen aparte mobiele site, geen redirect — alleen container queries en fluid typography. Resultaat: één set crawl-data voor Google, één SEO-strategie, geen duplicate-content-risico.

Moet ik een aparte mobiele site of m-subdomain hebben?

Nee. Sinds 2018 raadt Google sterk af. Een responsive site op één URL is technisch beter en SEO-vriendelijker. Een m-subdomain veroorzaakt vaak duplicate-content-issues.

Welke breakpoints gebruiken jullie nog?

Bij voorkeur geen vaste, alleen fluid-systemen. Wanneer toch nodig: een ondergrens voor mobiel (320-360px) en een bovengrens voor desktop (1280-1440px). De tussenliggende ruimte vloeit met clamp en container queries.

Werken container queries met oudere CMS-templates?

Vaak niet zonder aanpassing — oudere thema's gebruiken nested media queries. Bij refresh kan een herstructurering nodig zijn. Houd rekening met enkele uren herwerk per herhalende component.

Wat doe je vandaag?

Test je homepage in Chrome DevTools op Galaxy Z Fold met scharnier-lijn aan
Vervang vaste font-sizes door clamp-waarden voor je drie meest gebruikte tekst-niveaus
Schrijf één container query voor je meest herhalende component
Voeg color-scheme: light dark toe aan je root-CSS
Test je navigatie op iPad-portrait én iPad-landscape voor je deployt

Verder lezen

Wij bouwen MKB-sites in container queries en fluid typography als baseline. Voor Keurmeesters levert dat een formulier op dat naadloos werkt van smartphone-on-site tot desktop-woningcorporatie. Bekijk de prijzen of vraag een gratis audit aan.

Door Lorenzo Ruisi — DesignCheck Mijdrecht. Laatst bijgewerkt 16 mei 2026.