Veranderingen in de lay-out: Knikpunten en typografie

Hallo allemaal, het prototype voor een nieuwe lay-out van afgelopen jaar heeft veel feedback opgeleverd. Deze feedback was van groot belang en heeft ons enorm geholpen met het inzien van wat wel werkt en wat niet werkt. We blijven nog steeds doorgaan met het doorvoeren van verbeteringen, maar deze zullen één voor één in een langzamer tempo worden doorgevoerd zoals met de januari update. Het uiteindelijke resultaat zal hetzelfde blijven, het duurt alleen iets langer om daar te komen.

Het eerste punt op de lijst is het invoeren van knikpunten, samen met wat wijzigingen in de typografie. De typografiewijzigingen vinden alleen plaats op de grootste versie van de pagina, namelijk Desktop XL. Dit geldt voor schermen breder dan 1575 pixels.

Knikpunten[]

Met het introduceren van de knikpunten stappen we weer iets af van het systeem dat geïntroduceerd werd bij de "fluid"-lay-out. Met een beter voorspelbaar gedrag maken we de kans kleiner dat sommige sjablonen op een pagina breken of er vreemd uitzien. Ons doel hierbij is dat pagina's nog steeds goed kunnen schalen naar grotere schermen.

Knikpunt	Breedte inhoud	Schermbreedte (min)	Schermbreedte (max)	% van desktop- en tabletverkeer
Tablet portret	768px	768px	1023px	16%
Tablet landschap	1024px	1024px	1084px	50%
Desktop	1084px	1084px	1594px	50%
Desktop XL	1238px	1595px	∞	34%

Typografie[]

We willen onze focus leggen op de leesbaarheid en regellengte aan de hand van de maatstaven van de moderne UX (gebruikerservaring). Dit houdt in dat we de beleving laten passen bij het scherm. Zo zal de Desktop XL versie een groter lettertype krijgen samen met een grotere regelafstand. Zie de onderstaande tabel voor alle verhoudingen.

	Desktop / Tablet (lettergrootte / regelhoogte)	Desktop XL (lettergrootte / regelhoogte)
H1 - koptekst	28 / 28	34 / 34
H2 - koptekst	20 / 22	28 / 30
H3 - koptekst	17 / 22	22 / 24
H4 - koptekst, citaat	15 / 22	20 / 28
Tekst	14 / 22	16 / 26