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.

Mobile first webdesign in 2023

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 en hoogte gebruiken in CSS width height clamp
• Vloeiende responsive typografie clamp viewport vw rem
• Links over typografie tekst letters & webdesign

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 wordpress resolutie 4k pc Mac windows
• WP Bakery Builder geavanceerde tips trucs, responsive & mobiel
• Responsive Breakpoints Mobiel Tablet desktop aantal pixels
• Responsive typografie lettergrootte CSS tekst vw vh vmin vmax
• Breekpunten pixels reponsive design telefoon smartphone tablet desktop
• Kolommen maken in WordPress handleiding Gutenberg blokken

---

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

• Blocksy WordPress thema review Gutenberg speciaal
• Kalium | WordPress thema review test Envato template
• The7 | WordPress thema review handleiding Envato template
• Divi wordpress thema page builder review test elegant themes template

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
• Cursus WordPress op maat beginners & gevorderden
• WordPress Bootcamp all-in one spoedcursus
• Designcursus WordPress voor ontwerpers en vormgevers

---

---

Infographic responsive ontwikkelingen