Responsive webdesign voor WordPress websites

Tips, handleidingen en informatie voor responsive websites. Deze websites passen zich automatisch aan aan het formaat. Zowel desktop als mobiel of tablet.

Logo cursus traing wordpress

Responsive webdesign voor WordPress websites

responsive design wordpress

Responsive webdesign website op verschillende apparaten

Een website met een 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 design wordpress

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

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


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

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



Infographic responsive ontwikkelingen

responsive design wordpress

Wil je meer details over Responsive webdesign voor WordPress websitesof info?

Wil je meer weten? Veel bezoekers met interesse in Responsive webdesign voor WordPress websites bekeken ook de onderstaande handleidingen:


[aw_icon icon="icon: graduation-cap" color="#0ba1bf" text_color="#333333" size="28" shape_size="20" radius="36" text_size="16" margin="0px 1px 1px 0px" url="https://www.cursuswp.com/groepscursus-wp-beginners-basis-training-workshop/" target="blank"][/aw_icon]

Training of cursus ontwerp en vormgeving

WordPress design en vormgeving

Leer hoe je je WordPress website beter en kan ontwerpen en vormgeven in de speciale designcursus:
Design en ontwerpcursus voor WordPress

WordPress Bootcamp

Leer hoe je je WordPress site mooier kan maken en vormgeven in de WordPress Bootcamp spoedopleiding:
Design en ontwerp in WordPress Bootcamp

[aw_icon icon="icon: question" color="#0ba1bf" text_color="#333333" size="28" shape_size="20" radius="36" text_size="16" margin="0px 1px 1px 0px" url="https://www.cursuswp.com/groepscursus-wp-beginners-basis-training-workshop/" target="blank"][/aw_icon]

Info over Responsive webdesign voor WordPress websites

Neem vrijblijvend contact op met Arthur als je nog vragen hebt over ontwerp, Responsive webdesign voor WordPress websites en WordPress webdesign.

WordPress designer

Arthur Wentzel, web-designer

06 20 83 05 83

Scroll naar boven