Responsive

responsive design wordpress

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


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?

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.: http://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.


Zinvolle links

Test je site op verschillende resoluties:
http://responsinator.com
http://mattkersley.com/responsive


Thema’s en Plugins

Responsive Thema's

Responsive Thema’s, premium

http://demo.wpbakery.com/?theme=sphere
http://themeforest.net/search?utf8=✓&term=responsive
http://www.dessign.net/premium-themes/
http://smashinghub.com/25-best-responsive-wordpress-themes-2012.htm
http://www.tripwiremagazine.com/2012/09/responsive-wordpress-themes.html

Responsive Thema’s, gratis

http://www.dessign.net
http://www.hongkiat.com/blog/free-responsive-wordpress-themes/
http://designtuto.com/10-free-responsive-wordpress-themes-september-2012/

Responsive Plugins

http://wordpress.org/extend/plugins/wp-fluid-images/
http://wordpress.org/extend/plugins/fitvids-for-wordpress/
http://wordpress.org/extend/plugins/wordpress-mobile-pack/
http://wordpress.org/extend/plugins/style-my-gallery/
http://wordpress.org/extend/plugins/responsive-twentyten/
http://wordpress.org/extend/plugins/respondjs/
http://wordpress.org/extend/plugins/wp-mobile-detector/
http://wordpress.org/extend/plugins/wapple-architect/
http://wapple.net/signup/wordpress
http://wordpress.org/extend/plugins/soliloquy-lite/
http://wordpress.org/extend/plugins/responsive-video/
http://wordpress.org/extend/plugins/responsive-select-menu/
http://wordpress.org/extend/plugins/tinynav/
http://wordpress.org/extend/plugins/youtube-embed/


Infographic

responsive design wordpress