Wikia


Breakpoints-blogheader

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
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

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.

Around Wikia's network

Random Wiki