
IN DEZE HANDLEIDING:
- 1 Responsive webdesign website op verschillende apparaten
- 2 Responsive website laten maken
- 3 Mobile first webdesign in 2025
- 4 Voorwaarden responsive web design
- 5 Min/Max breedte hoogte gebruiken CSS width height clamp
- 6 Vloeiende responsive typografie clamp viewport vw rem
- 7 Links over typografie tekst letters & webdesign
- 8 Meer handleidingen over responsive en WordPress
- 9 Responsive WordPress thema’s en plugins
- 10 Responsive Thema’s, gratis
- 11 Responsive Plugins
- 12 Infographic responsive ontwikkelingen
Responsive webdesign website op verschillende apparaten
Een website met een responsive webdesign past zich qua vormgeving automatisch aan op het gebruikte apparaat en zijn bijbehorende schermformaat.
Het aantal apparaten, platformen en browsers blijft dagelijkse toenemen. Al deze apparaten moeten websites goed weergeven en dat is waar de kracht van responsive webdesign ligt. Een responsive webdesign past zich automatisch aan, aan de schermgrootte van de laptop, tablet of mobiel zonder hier een aparte site voor te ontwikkelen.
Responsive Design maakt gebruik van Media Queries. Heel simpel gezegd houdt dit in dat bij het opvragen van een website, de database herkent welk toestel (pc, tablet of mobiel) dit is. Op basis van deze resultaten wordt dan de juiste site getoond die past bij toestel. Met de groei naar mobiel die de komende jaren verwacht wordt, is het steeds belangrijker om hiermee rekening te gaan houden.
In 2013 bereikten we het punt waarop meer mobiel gesurft wordt dan via de normale pc. Dus dient de noodzaak zich aan om websites op basis van mobiel gebruik te gaan bouwen. Een WordPress website met een responsive thema is een prima oplossing.

Responsive website laten maken
Het laten maken van een responsive website betekent dat je eerst start met een functioneel ontwerp. Je moet weten hoe alles eruit komt te zien. Waar komen buttons en headers?
Met het functioneel ontwerp zorg je ervoor dat er een duidelijke schets ontstaat van alle belangrijke functies op jouwe responsieve website. Zo weet je precies wat wij voor jou gaan bouwen als de technische realisatie fase begint.
Dit resulteert altijd in minder kosten voor meerwerk, minder miscommunicatie en weinig uitloop qua planning en gemiste deadlines.
Mobile first webdesign in 2025
We zijn inmiddels op het punt beland waarop verreweg de meeste websites op mobiel of smartphone bekeken worden. Het ontwerpproces kun je daarom omkeren. Maak je WordPress website in eerste instantie voor je mobiel. Zie de afbeelding hieronder:

Voorwaarden responsive web design
Er zijn 5 elementen die we moeten kunnen aanpassen om echt multiflexibel te zijn en te kunnen spreken van responsive web design.
Structuur
Op een smartphone heb je niets aan een 3-koloms website want daar is gewoonweg geen ruimte voor. Een 1-koloms is hier perfect op zijn plaats. Een laptop kan dit weer perfect aan. Op een tablet kan je kiezen tussen een horizontale of verticale layout. En op een groot scherm kan je zelfs overwegen om je content te verspreiden over 4,5 of meer kolommen zodat je meer de lay-out van bv. een krant benadert. Door de grote hoeveelheid ruimte (vanaf een resolutie 1920 x 1200 pixels) blijft het alsnog overzichtelijk.
Het is dus van belang om de “breakpoints” te bepalen, het moment waarop de layout mag switchen van de ene structuur naar de andere. Maar dit zal enerzijds deels bepaald worden door de inhoud en vormgeving van je site. En anderzijds van de schermresoluties die voorhanden zijn.
Typografie
Niet alle lettertypes zijn even geschikt om op een klein scherm te lezen. Ideaal is dat we een font kiezen dat voor grote en kleine schermresoluties geschikt is maar dat is niet altijd even evident. En als we weten dat de meeste bezoekers op een doorsnee scherm zullen kijken gaan we dat mooie font (dat perfect bij onze klant zijn lay-out past) toch niet opzij laten liggen?
Min/Max breedte hoogte gebruiken CSS width height clamp
IN DEZE HANDLEIDING:1 Min/Max breedte en hoogte gebruiken in CSS2 min-breedte / min-hoogte in pixels3 max-breedte / max-hoogte in procent4 min-breedte / max-hoogte met clamp en CSS5 Voorbeeld min max clamp6 Font-size min max clamp Min/Max breedte en hoogte gebruiken in CSS Zelfs als u net begint met CSS, hebt […]
Vloeiende responsive typografie clamp viewport vw rem
Met vloeiende typografie kun je lettertypegrootten maken die zich aanpassen voor beter lezen in elk schermformaat (desktop, tablet, mobiel).
Links over typografie tekst letters & webdesign
Een overzicht van interessante artikelen over typografie, tekst en letters. Niet direct voor beginners. Voor de echte liefhebber van goede typografie.
Beelden
Dankzij wat javascripting is het mogelijk om de beelden te laten meeschalen met de beschikbare ruimte. Niet te groot (anders wordt het wazig) maar ook niet te klein. Eventueel laten we ze gewoon weg op een klein scherm zodat ze de inhoud niet in de weg staan. Vb.: https://ie.microsoft.com/testdrive/HTML5/CSS3MediaQueries/
Grafische elementen
Het heeft geen zin om op een smartphone een mooi bewerkte foto als achtergrond te tonen. Dit is nefast voor de bandbreedte van een smartphone en veel te druk op zo’n klein schermpje. Idem voor alle decoratieve elementen in je website. ‘Keep it clean and simple!’ Op een groot scherm kan je je weer permitteren dat deze meer is uitgewerkt dan voor bijvoorbeeld een tablet. Kwestie van al die ruimte mooi in te vullen.
Functionaliteit
Een flashmovie met een inschrijvingsformulier zal niet werken op een ipad en is niet gebruiksvriendelijk op een smartphone. Een kalender met veel data en selectiemogelijkheden heeft geen nut op een smartphone maar wel op een gemiddeld tot groot scherm. Selecteer de functionaliteit die nuttig is voor de gebruiker en decimeer diegene die in een bepaalde situatie niet relevant zijn.
Meer handleidingen over responsive en WordPress
- Beste beeldscherm monitor resolutie 4k pc Mac windows
- WP Bakery Builder tips geavanceerde responsive trucs
- Pro Responsive typografie lettergrootte CSS vw vh vmin
- Mobiele test tools responsive website telefoon tablet
- Kolom maken in WordPress handleiding Gutenberg blokken
- Responsive Breakpoints pixels mobiel Tablet desktop
Zinvolle links over responsive
Test je site op verschillende resoluties:
https://responsinator.com
https://mattkersley.com/responsive
Responsive WordPress thema’s en plugins
Responsive Thema’s, premium
- Kadence WordPress thema review voordelen nadelen
- Avada WordPress thema review test handleiding Builder
- The7 WordPress thema review handleiding Envato template
- Divi wordpress thema page builder review en test
Meer responsive WordPress thema’s en plugins
https://themeforest.net/search?utf8=✓&term=responsive
https://www.dessign.net/premium-themes/
https://smashinghub.com/25-best-responsive-wordpress-themes-2012.htm
https://www.tripwiremagazine.com/2012/09/responsive-wordpress-themes.html
Responsive Thema’s, gratis
https://www.dessign.net
https://www.hongkiat.com/blog/free-responsive-wordpress-themes/
https://designtuto.com/10-free-responsive-wordpress-themes-september-2012/
Responsive Plugins
https://wordpress.org/extend/plugins/wp-fluid-images/
https://wordpress.org/extend/plugins/fitvids-for-wordpress/
https://wordpress.org/extend/plugins/wordpress-mobile-pack/
https://wordpress.org/extend/plugins/style-my-gallery/
https://wordpress.org/extend/plugins/responsive-twentyten/
https://wordpress.org/extend/plugins/respondjs/
https://wordpress.org/extend/plugins/wp-mobile-detector/
https://wordpress.org/extend/plugins/wapple-architect/
https://wapple.net/signup/wordpress
https://wordpress.org/extend/plugins/soliloquy-lite/
https://wordpress.org/extend/plugins/responsive-video/
https://wordpress.org/extend/plugins/responsive-select-menu/
https://wordpress.org/extend/plugins/tinynav/
https://wordpress.org/extend/plugins/youtube-embed/
Cursus of training volgen over Responsive webdesign voor WordPress
- WordPress Designcursus ontwerp en vormgevingstraining
- Online WordPress cursus volgen op afstand vanuit huis
- Designcursus WordPress voor ontwerpers en vormgevers
- WordPress Bootcamp all-in one spoedcursus
Infographic responsive ontwikkelingen
