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.

De meest gebruikte breekpunten voor webdesign in 2021 zijn:

• 480 pixels
• 768 pixels
• 1024 pixels
• 1280 pixels

Breekpunten toevoegen in webdesign en wordpress websites

Breekpunten toevoegen in webdesign en wordpress websites kan door media queries toe te voegen. Bijvoorbeeld:

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

<br>
/* 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) {<br> h1 { font-size: 20px; }<br> }<br>

Handleidingen media query en responsive webdesign

Tips breekpunten

responsive design Interessant detail; tegenwoordig begin je met webontwerp meestal met mobiel. Dit heet Mobile First:

Google hanteert de volgende breekpunten voor interface ontwerp:

Handleiding mobiele breekpunten

1stwebdesigner.com/responsive-design-breakpoints

Breekpunt WordPress page builder (beaver / elementor)

Elke page builder heeft zijn eigen breekpunten. Deze veranderen ook nog eens om de zoveel jaar. Bekijk voorbeelden:
Responsive breekpunten Beaver Builder
Breekpunten Elementor Builder

Breekpunt WordPress thema (Astra)

Elk WordPress thema heeft zijn eigen breekpunten. Deze veranderen ook nog eens om de zoveel jaar. Bekijk voorbeelden:
Responsive breekpunten Astra Thema
Responsive breekpunten Divi
Responsive breekpunten Avada

Breekpunt WordPress thema en Page builder combineren

Elk WordPress thema en elke page builder heeft dus zijn eigen breekpunten. Het werkt het beste om deze gelijk te trekken. Soms gaat dit makkelijk en soms heel lastig in de functions php.
Het makkelijkst werkt het om het in de page builder aan te passen.

Beaver builder met Astra

Laat Astra zoals het is en pas Beaver Builder aan naar 920 in plaats van 992. Dit doe je bij de algemene instellingen van beaver.

Beaver builder met Elementor

Breekpunten aanpassen met CSS in Root met Variabelen

Voor gevorderden. Helaas kun je de breekpunten niet aanpassen met CSS met de root en variabelen. Lees hier waarom:
bholmes.dev/blog/alternative-to-css-variable-media-queries/