Responsive WordPress websites maken zonder CSS: dit is nieuw in WordPress 7.1

Een website kan er op een groot computerscherm perfect uitzien en op een smartphone compleet uit elkaar vallen.

Voor webdevelopers is dat niets nieuws. We gebruiken al jaren media queries om bijvoorbeeld lettergroottes, marges, padding en layouts voor verschillende schermformaten aan te passen.

Met WordPress 7.1 verandert daar iets interessants aan.

WordPress heeft namelijk responsive styling rechtstreeks aan de Block Editor toegevoegd. Hierdoor kun je bepaalde stijlen voor desktop, tablet en mobiel afzonderlijk instellen, zonder daarvoor zelf CSS-mediaqueries te hoeven schrijven.

Voor eenvoudige websites maakt dat responsive webdesign een stuk toegankelijker. Voor developers biedt het tegelijkertijd nieuwe mogelijkheden binnen theme.json.

Maar betekent dit dat we binnenkort helemaal geen responsive CSS meer nodig hebben?

Niet helemaal.

Wat is responsive webdesign eigenlijk?

Responsive webdesign betekent simpel gezegd dat een website zich aanpast aan het scherm waarop deze wordt bekeken.

Een bezoeker met een 27-inch monitor heeft bijvoorbeeld veel meer beschikbare ruimte dan iemand die dezelfde website op een smartphone bekijkt.

Op desktop kun je drie of vier kolommen naast elkaar plaatsen. Op mobiel wil je diezelfde elementen meestal onder elkaar zetten.

Hetzelfde geldt voor zaken als:

• lettergroottes;
• witruimte;
• afbeeldingen;
• navigatie;
• knoppen;
• kolommen;
• uitlijning.

Een goede responsive WordPress website schaalt daarom niet simpelweg alles kleiner, maar past de complete presentatie aan het beschikbare scherm aan.

Hoe deden we dit tot nu toe?

Developers lossen dit traditioneel op met CSS-mediaqueries.

Bijvoorbeeld:

.example {
    padding: 60px;
}

@media (max-width: 782px) {
    .example {
        padding: 30px;
    }
}

@media (max-width: 480px) {
    .example {
        padding: 20px;
    }
}

Daar is technisch gezien niets mis mee. Sterker nog: bij uitgebreid maatwerk webdevelopment zullen media queries voorlopig gewoon nodig blijven.

Het nadeel is dat iemand zonder kennis van CSS dergelijke aanpassingen moeilijk zelf kan uitvoeren.

Pagebuilders zoals Elementor hebben daarom al jaren responsive controls.

De standaard WordPress Block Editor liep op dit gebied achter.

WordPress 7.1 brengt daar verandering in.

Responsive styles zijn nu onderdeel van WordPress

Met WordPress 7.1 kunnen responsive stijlen worden ingesteld voor verschillende schermformaten.

Daarbij kunnen stijlen zowel globaal voor een bepaald blocktype als op individuele blocks worden toegepast.

Je kunt bijvoorbeeld een Group-block op desktop veel ruimte geven en die ruimte op mobiel verkleinen.

Of een grote heading op desktop prominent weergeven, terwijl je op mobiel een kleinere lettergrootte gebruikt.

Het grote verschil is dat deze logica nu onderdeel wordt van WordPress zelf.

Desktop, tablet en mobiel

WordPress werkt hiervoor met verschillende viewports.

Standaard worden onder andere de volgende breakpoints gebruikt:

Mobiel: 480 pixels

Tablet: 782 pixels

De normale styling van een block fungeert als desktop/default-styling. Voor mobiel en tablet kunnen vervolgens afwijkende waarden worden ingesteld.

Een developer kan deze breakpoints bovendien via theme.json aanpassen.

Dat laatste is interessant.

Want een website hoeft zich natuurlijk niet precies bij 480 of 782 pixels anders te gedragen.

Het ontwerp bepaalt uiteindelijk waar een layout daadwerkelijk moet omschakelen.

Responsive styling met theme.json

Voor developers wordt het nog interessanter doordat responsive styles ook onderdeel zijn geworden van theme.json.

Een vereenvoudigd voorbeeld:

{
    "styles": {
        "blocks": {
            "core/group": {
                "spacing": {
                    "padding": {
                        "top": "3rem"
                    }
                },
                "@mobile": {
                    "spacing": {
                        "padding": {
                            "top": "1rem"
                        }
                    }
                }
            }
        }
    }
}

De Group-block krijgt in dit voorbeeld standaard 3rem padding aan de bovenkant.

Op mobiel wordt dat 1rem.

Je hoeft daarvoor dus niet afzonderlijk een stylesheet met een media query te maken. WordPress kan deze responsive stijl vanuit het designsysteem verwerken.

Waarom is dit belangrijk?

Op het eerste gezicht lijkt dit vooral een handige verbetering van de editor.

Maar er zit een groter idee achter.

WordPress probeert steeds meer ontwerpinstellingen onderdeel te maken van één centraal designsysteem.

In plaats van een combinatie van:

WordPress → thema → pagebuilder → custom CSS → extra plugins

kan steeds meer styling rechtstreeks vanuit WordPress en het thema worden geregeld.

Dat kan websites uiteindelijk eenvoudiger maken om te onderhouden.

En juist goed onderhoudbare websites zijn belangrijk wanneer een website jarenlang moet blijven functioneren. Bij ons websiteonderhoud komen we regelmatig websites tegen waarbij styling verspreid staat over het thema, plugins, pagebuilders én losse CSS.

Hoe minder verschillende lagen nodig zijn, hoe overzichtelijker het beheer wordt.

Minder afhankelijk van pagebuilders?

Hier wordt het interessant.

Elementor, Divi, WPBakery en andere pagebuilders werden jarenlang gebruikt omdat de standaard WordPress-editor veel ontwerpfunctionaliteit simpelweg niet had.

Gutenberg heeft die achterstand de afgelopen jaren steeds verder verkleind.

We hebben inmiddels onder andere:

• flex- en grid-layouts;
• Global Styles;
• patterns;
• spacing controls;
• responsive styling;
• interactieve states;
• steeds uitgebreidere theme.json-mogelijkheden.

WordPress 7.1 voegt daar bovendien styling voor bijvoorbeeld hover-, focus- en active-states aan toe.

Voor eenvoudige websites wordt het daardoor steeds realistischer om een complete website te bouwen zonder zware pagebuilder.

Betekent dit het einde van Elementor?

Nee.

Pagebuilders bieden nog altijd veel functionaliteiten die verder gaan dan wat WordPress Core standaard aanbiedt.

Voor complexe layouts, animaties en specifieke workflows kunnen ze nog steeds een prima keuze zijn.

Maar de afweging verandert wel.

Wanneer WordPress zelf voldoende mogelijkheden biedt, is het niet altijd logisch om een extra pagebuilder te installeren.

Iedere extra laag brengt namelijk code, updates, afhankelijkheden en potentiële compatibiliteitsproblemen met zich mee.

Dat sluit aan bij iets waar we eerder over schreven: een snelle website begint niet bij zoveel mogelijk plugins, maar bij een goede technische basis.

Lees hierover ook onze blog over server-side optimalisatie voor WordPress.

Responsive design gaat verder dan alleen schermbreedte

Er zit wel een belangrijke kanttekening aan de nieuwe functionaliteit.

Een website responsive maken betekent niet simpelweg:

Desktop 60px padding → mobiel 20px padding.

Je moet ook kijken naar de daadwerkelijke gebruikerservaring.

Een knop die op desktop perfect werkt, kan op mobiel bijvoorbeeld te klein zijn om comfortabel aan te raken.

Een tabel met tien kolommen kan technisch responsive zijn, maar alsnog onbruikbaar worden op een smartphone.

En een afbeelding die op desktop mooi naast een tekst staat, kan op mobiel misschien beter boven de tekst worden geplaatst.

Daarom blijft professioneel webdevelopment meer dan alleen instellingen aanklikken in WordPress.

De techniek maakt responsive design gemakkelijker. Het ontwerp bepaalt uiteindelijk hoe die techniek moet worden toegepast.

Performance speelt ook een rol

Mobiele optimalisatie gaat bovendien niet alleen over vormgeving.

Mobiele bezoekers hebben vaker te maken met een minder snelle internetverbinding en apparaten met minder rekenkracht dan een moderne desktopcomputer.

Een responsive website moet daarom óók snel zijn.

Denk bijvoorbeeld aan:

• geoptimaliseerde afbeeldingen;
• zo min mogelijk onnodige JavaScript;
• caching;
• efficiënte CSS;
• snelle hosting;
• goede Core Web Vitals.

WordPress 7.1 heeft op mediagebied een interessante verbetering gekregen: verwerking zoals het comprimeren, verkleinen en genereren van thumbnails kan in de browser plaatsvinden. Dat verlaagt de belasting van PHP en de server. De release voegt daarbij ondersteuning toe voor onder andere AVIF en HEIC.

De onderliggende webhosting blijft uiteraard net zo belangrijk voor de uiteindelijke prestaties.

Praktijkvoorbeeld: een hero op desktop én mobiel

Stel dat we een hero-sectie maken.

Op desktop bestaat deze uit twee kolommen:

Links: een grote titel, tekst en call-to-action.

Rechts: een grote afbeelding.

Op een breed scherm ziet dat er uitstekend uit.

Maar op een telefoon blijft misschien maar 360 pixels breedte over.

Een goede mobiele variant kan dan bijvoorbeeld:

• de afbeelding onder de tekst plaatsen;
• de titel verkleinen;
• padding verminderen;
• de knop over de volledige breedte tonen;
• overbodige decoratieve elementen verbergen.

Een deel van die aanpassingen kan met de responsive mogelijkheden van WordPress 7.1 rechtstreeks vanuit de editor worden geregeld.

Voor ingewikkeldere situaties blijft maatwerk CSS beschikbaar.

En dat is eigenlijk precies zoals het hoort.

De editor voor het normale werk, code voor het maatwerk.

Moet je bestaande website nu aangepast worden?

Niet noodzakelijk.

Een bestaande WordPress-website wordt niet ineens slecht omdat WordPress nieuwe responsive mogelijkheden heeft gekregen.

Gebruik je bijvoorbeeld Elementor en werkt je website uitstekend op desktop, tablet en mobiel? Dan is er geen reden om alles opnieuw te bouwen alleen vanwege deze functionaliteit.

Bij een nieuwe website is het daarentegen wel interessant om opnieuw te kijken hoeveel externe tooling daadwerkelijk nodig is.

En bij een bestaande website die slecht werkt op mobiele apparaten, is het sowieso verstandig om de responsive weergave eens onder de loep te nemen.

Dat kan onderdeel zijn van regulier websiteonderhoud en optimalisatie.

WordPress ontwikkelt zich snel

Responsive styling is slechts één onderdeel van een veel grotere ontwikkeling binnen WordPress.

De editor wordt steeds krachtiger, WordPress krijgt uitgebreidere designmogelijkheden en ook AI wordt steeds dieper in het platform geïntegreerd.

Over dat laatste schreven we onlangs uitgebreid in onze blog over AI in WordPress.

De richting is in ieder geval duidelijk: steeds meer functionaliteit waarvoor vroeger plugins, pagebuilders of maatwerkcode nodig waren, wordt onderdeel van WordPress zelf.

Conclusie

WordPress 7.1 maakt een belangrijke stap op het gebied van responsive webdesign.

Dat betekent niet dat CSS of professionele webdevelopment ineens overbodig wordt. Voor complexe websites en maatwerk blijven die juist belangrijk.

Maar voor veel dagelijkse aanpassingen wordt de drempel een stuk lager.

En daar zit wat mij betreft de grootste winst.

Een WordPress-website hoeft niet uit steeds meer plugins, pagebuilders en losse oplossingen te bestaan. Hoe meer we met een goede basis kunnen oplossen, hoe eenvoudiger een website uiteindelijk te onderhouden is.

Wil je weten of jouw website goed presteert op desktop én mobiel, of ben je toe aan een nieuwe WordPress-website? Bekijk onze mogelijkheden voor webdevelopment, websiteonderhoud en webhosting of neem vrijblijvend contact op met DSGWeb.