Hoe ik mijn WP theme responsive heb gemaakt

Enkele weken geleden zat ik, zoals elk jaar, weer een avondje als eindwerkjury aan Lessius Mechelen studentenprojecten te beoordelen. 1 van de groepen had een mini-onderneming met als 1 van de activiteiten het responsive maken van WordPress websites. Een mooie stimulans om deze website eens responsive te maken (met mijn beperkte css-kennis).

Responsive design?!?

Via responsive design ga je ervoor zorgen dat je website op verschillende apparaten toch steeds de content gaat tonen aan de bezoeker op de meest leesbare manier voor de bezoeker. Dus ipv. een aparte mobile-website, ga je ervoor zorgen dat je website schaalt naar het scherm van de bezoeker.

Om het belang van responsive design voor websites even te duiden, heb ik een mobile Dashboard in mijn Google Analytics account gemaakt. Hieronder de mobile data voor de eerste jaarhelft van 2012.
mobile

  • Gemiddeld dus +2000 bezoekers/maand, die via een mobile apparaat (smartphone of tablet) deze bezoeker binnenkomen.
  • Voornamelijk tablet-bezoekers, maar toch in totaal een 1000 smartphone-bezoekers.
  • Elke maand een duidelijk stijging van het aantal mobiele bezoekers.
  • Apple is en blijft KING op mobile vlak.

WP theme responsive maken

Op in totaal 2-3 avondjes tijd heb ik deze theme grotendeels responsive gemaakt voor smartphone-gebruikers (tot max-width 480pixels). Voor tablet-gebruikers ben ik er nog niet helemaal uit, daar ikzelf met onze 2 tablets (asus transformer en ipad2) graag ook steeds de volledige websites van een website bezoek en niet de uitgeklede versie.

Er zijn verschillende manieren om je WP-website responsive te maken. Hieronder laat ik de child theme optie zien. Voor andere manieren verwijs ik naar google.

Child theme aanmaken

  • Maak een nieuwe folder aan in je themes folder.
  • Maak een leeg style.css bestand aan in deze nieuwe folder.
  • Kopieer eventueel alle nodige images/js-bestanden vanuit je hoofdtheme naar de folder van je nieuwe child-theme.

style.css bewerken

Volgende aanzet staat er in mijn nieuwe childtheme style.css bestand. Dit is zeer belangrijk dat dit de start is van het bestand.
Mijn childtheme heeft de naam multiscreen en mijn hoofdtheme is Quest, dus vervang deze zaken door jou theme-namen.

/*
Theme Name: Multiscreen
Theme URI: http://www.dailybits.be/
Description: Child theme for the Quest
Author: Herman Maes
Author URI: http://www.dailybits.be/
Template: Quest
Version:0.1.0
*/

@import url(“../Quest/style.css”);

CSS3 Media queries

Via zogenaamde Media queries kan je nu css-code enkel voor bepaalde toestellen/resoluties gaan doorgeven naar de bezoeker. Alle css-codes, die mijn theme gebruikt om mijn website te gaan opbouwen, heb ik hier naartoe gekopieerd en de width-property beginnen aanpassen.

@media screen and (max-width : 480px) {
body {
margin:0 auto;
padding:0px 0px 0px 0px;
background:#F9F8F4 top center no-repeat ;
font-family:Arial, Tahoma, verdana, Century gothic,Tahoma,sans-serif;
font-size:13px;
}

#top {
height:180px;
margin:auto;
width:100%;
background:#fff;
border:2px solid #efece5;
}

@media screen
and (min-width : 481px) {

}

css-Tips

Hieronder enkele handige stukjes css-code, die je kan gebruiken om alles responsive te gaan maken.

1. Alle afbeeldingen laten schalen naar de browser-resolutie

img,
img[class*=”align”],
img[class*=”wp-image-“] {
max-width: 100%;
height: auto;
}

2. Alle youtube/vimeo/slideshare-content laten schalen naar de browser-resolutie

iframe, object, embed{
width: 100%;
height: auto;
}

3. Een bepaalde css-blok niet tonen
Ik kies er bijvoorbeeld voor om smartphone-bezoekers de sidebar niet te tonen, daar deze vol staat met traag ladende elementen.

.sidebar{
display: none;
}

header aanpassing

Tijdens het testen liep ik tegen wat problemen met IE9 en firefox. Volgende 2 regels dien je toe te voegen in het header.php bestand van je hoofdtheme.

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

De viewport-regel gaat ervoor zorgen dat de browsers in Iphone/Android smartphones niet automatisch gaan inzoomen/uitzoomen. Het hele verhaal kan je hier vinden: viewport-metatag.

Testen testen testen…

Daarna is het vooral testen testen en nog eens testen.

Voor je jou wijzigingen kan zien, dien je dit nieuwe child theme te activeren in je wordpress admin-interface (bij Weergave-Theme’s). Ik heb ondertussen een staging-versie van Dailybits, zodat ik alle zaken rustig heb kunnen testen tot een aanvaardbaar niveau, voordat ik de wijzigingen op dailybits.be zelf heb losgelaten.

Er zijn vele online tools te vinden, die je kunnen helpen bij het testen, zoals de responsinator.com waar je een handige online weergave van je website krijgt in verschillende apparaten.

Ik heb zelf nog wel wat foutjes in het responsive design gevonden, zo is er blijkbaar geen oplossing voor adsense-blokken (die getoond worden op oudere blogposts) en ook omtrent een tablet-versie ben ik nog wat zelf aan het testen.

Ondervind je problemen bij je (mobiel) bezoek aan dailybits, laat deze dan zeker na in de comments, zodat ik ze kan oplossen.

Hieronder hoe deze website er nu uitziet op mijn Android smartphone en Android Asus tablet.


Gerelateerde berichten

Herman Maes - online marketeer seo freelancer

Herman Maes

Online marketeer en (tech)blogger sinds 2002. Zelfstandige in bijberoep met Daily Bits sinds 2012. Overdag SEO/Hubspot/Marketing Technology Teamlead en thuis de papa van een zoon en een dochter.

2 comments

Submit a comment

Het e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *