breekpunten pixels reponsive webontwerp telefoon smartphone tablet desktop computerscherm responsieve lay-out

Wat zijn breekpunten bij responsive webdesign?

Breekpunten zijn belangrijk bij responsive webdesign. Dit is een benadering van webdesign waarbij de web developer streeft naar de beste webervaring voor een breed scala aan apparaten (van desktop computerschermen tot mobiele telefoons). Het ontwerp van een responsive website schaalt mee met de afmetingen van een scherm, zonder in te leveren op leesbaarheid van tekst of bruikbaarheid van de interface van de gebruiker.

De breekpunten in een responsieve lay-out vertegenwoordigen de verschillende browserbreedten in pixels. Met behulp van breekpunten kun je je ontwerp in verschillende browserbreedten visualiseren en testen hoe de objecten op een pagina reageren op wijzigingen in browserbreedten.

Breekpunten toevoegen aan website

Standaard bevat een nieuwe site in een breekpunt voor desktops. Deze worden bepaald door je WordPress thema. Meestal is de pixelbreedte 960. Je kunt nu de lay-out voor deze breedte gaan ontwerpen. Wanneer het ontwerp is voltooid, kunt u een voorvertoning van de lay-out bekijken bij verschillende breedten. Wanneer je dit doet, kun je de breedte waarop het ontwerp breekt zien en opslaan. Je kunt bijvoorbeeld zien wanneer een tekstregel in twee delen wordt gesplitst of wanneer afbeeldingen in een rij verticaal worden gestapeld. Dit zijn de breedten die extra breekpunten nodig hebben. Na het toevoegen van de vereiste breekpunten kun je het ontwerp aanpassen, zodat de objecten netjes worden weergegeven.

Aan het einde voegt je WordPress thema voor elk breekpunt een bijbehorende code voor een media-query aan je webpagina toe. Dit is een CSS3-module die toestaat dat de weergegeven inhoud zich aanpast aan de verschillende schermgrootten. De meeste moderne browsers kunnen de media-query’s interpreteren die overeenkomen met de breekpunten. Wanneer gebruikers je WordPress pagina op diverse apparaten weergeven, kiezen de browsers de meest geschikte mediaquery en de bijbehorende ontwerplay-out om aan gebruikers weer te geven.

Meest gebruikte breekpunten op 480, 768, 1024, 1280 pixels


In het onderstaande voorbeeld heb ik het lettertype van de hoofdtitel aangepast aan de breedte van het scherm. Vervang die regel code door uw eigen set CSS-regels voor elk reactief breekpunt. Zorg ervoor dat uw layout er goed uitziet voor elk eindpuntresolutie. Merk op dat we de enige schermconditie hebben toegevoegd aan elke media query. Dat komt omdat WordPress-thema’s een apart CSS-stijlenblad gebruiken voor het afdrukken van webpagina’s. De enige schermtoestand voorkomt dat het responsieve stylesheet het printstijlsheet beïnvloedt.



/* Klein ------------------------------- */
@media only screen
and (max-width : 480px) {
/* jouw CSS stijlen */
h1 { font-size: 32px; }
}

/* Medium - tablet --------------------- */
@media only screen
and (min-device-width : 481px)
and (max-device-width : 768px) {
/* jouw CSS stijlen */
h1 { font-size: 28px; }
}

/* Groot - laptop ---------------------- */
@media only screen
and (min-device-width : 769px)
and (max-device-width : 1280px) {
/* jouw CSS stijlen */
h1 { font-size: 24px; }
}

/* Groot - groot beeldscherm ----------- */
@media only screen
and (min-width : 1281px) {
/* jouw CSS stijlen */
h1 { font-size: 20px; }
}


Nog een voorbeeld


/* Beeldschermen breedte 1366px or above */

h1 { font-size: 36px; }

/* Tablets landscape, oudere desktop monitors */

@media only screen and (min-width: 1024px) and (max-width: 1365px) {
h1 { font-size: 32px; }
}

/* Tablets portrait, grote display smartphones landscape mode */

@media only screen and (min-width: 768px) and (max-width: 1023px) {
h1 { font-size: 28px; }
}

/* Smartphones landscape mode */

@media only screen and (min-width: 421px) and (max-width: 767px) {
h1 { font-size: 24px; }
}

/* Smartphones portrait mode */

@media only screen and (max-width: 420px) {
h1 { font-size: 20px; }
}

Tips breekpunten

responsive design Interessant detail; tegenwoordig begin je met webontwerp meestal met mobiel:

Google hanteert de volgende breekpunten voor interface ontwerp:

Handleiding mobiele breekpunten

1stwebdesigner.com/responsive-design-breakpoints