Responsive WordPress website

Er zijn verschillende mogelijkheden om je WordPress website toegankelijk te maken voor mobiele telefoons. Dit artikel legt uit welke mogelijkheden er zijn en hoe je deze kan toepassen.

1. Niets doen.

Dit is wellicht niet het meest sexy advies, maar wel eentje die het overwegen waard is. In het venster van je mobiele telefoon wordt je website klein getoond. Een terugkerende bezoekers kent je website en kan met inzoomen zijn/haar doel snel bereiken. Alle andere oplossingen geven mobiel een andere weergave van de website. Ook niet verkeerd, maar persoonlijk houd ik er van als ik bij bedrijfswebsites de originele website op mijn mobiel te zien krijg. Voor websites met nieuws is het een ander verhaal. Daar wil ik persoonlijk wel dat het nieuwsitem het hele scherm vult.

2. Kies voor responsive design

Erg populair momenteel is responsive design. Bij Responsive Design staan de onderdelen van je website niet vast, maar in verhouding tot elkaar. De website is schaalbaar en past zich aan op de grootte van je scherm. Op een volledig scherm worden bijvoorbeeld vier blokjes naast elkaar getoond. Op een tablet, 2 x 2 blokjes en op een mobiele telefoon 4 x 1 blokje. Het menu wordt vaak een dropdown in mobiele schermen. Met responsive design krijg je dus een lange website, waar je veel met je duim naar onder moet scrollen om de hele website te zien. Responsive websites zien er vaak mooi uit op mobiele devices. Aandachtspunt is wel de usability van responsive design op telefoons. De meeste actuele WordPress themes hebben een responsive Layout.

3. Installeer een plugin

Een andere mogelijkheid is om een plugin te installeren die een alternatieve website toont op mobiele telefoons. Deze oplossing is makkelijk en praktisch. Mobiele website worden ook snel ingeladen. Nadeel is wel dat de vormgeving helemaal verandert. Een aantal populaire plugins zijn:

  • WPTouch
  • WordPress Mobile Pack
  • Jetpack; Jetpack is een plugin van Automattic, het bedrijf achter WordPress. Het biedt diverse extra functionaliteiten, waaronder een mobiel theme. De mobiele website van Sowmedia wordt gegenereerd door deze plugin.

4. Installeer een mobiel theme

De themes werken samen met je gewone theme. Plugins en themes lijken wat dit betreft technisch op elkaar. Voordeel van een mobiel theme boven een plugin is dat je bij mobiele themes meestal meer kan aanpassen wat betreft layout. Hieronder een selectie van mobiele WordPress themes.

  • Isa schreef:

    Er zitten best wat mooie thema’s bij! Is optie 4 wat jij zou aanraden, of denk je dat een plugin al genoeg zou zijn?

  • Erwin van Ginkel schreef:

    Wij gebruiken met veel plezier Wow Mysite theme. Daar hebben we de beste ervaring mee.

  • Wat voor advies zou je geven om http://www.modemanagement.nl Google Mobiel Proof te maken?

  • Beste Cor,

    In dat geval zouden we je adviseren om een responsive thema te kopen en te gebruiken.

    Succes!

  • Ik voor mij eens over # 2. Responsive website zijn zeer aan te passen aan de afmetingen van smartphones en tabbladen. Bedankt voor de goed lezen!

  • Petra van Zadelhoff-Verboven schreef:

    Hallo,

    Het thema op mijn website is zelf gebouwd en dus geen kant een klaar gekocht thema. Het is een tijd lang responsive geweest maar nu ineens niet meer. Als ik mijn site op een tablet of een gsm bekijk, ziet alles er raar uit. Zinnen zijn afgebroken, foto’s staan volledig rechts waardoor half zichtbaar, header past niet in het scherm. Graag advies óf en zo ja hoe dit is op te lossen.

    Alvast bedankt!
    Petra
    http://Www.thecozycavaliers.nl

  • Beste Petra,
    Ik heb ook geen standaardoplossing. Je kan in dit geval toch het beste even contact opnemen met de maker van het thema.

  • Hein Meurs schreef:

    Ik heb al een WordPress-app op mijn iPhone en daarmee tot voor kort ook gewoon mee kunnen werken, maar sinds ’n week kan ik er niet meer in komen. Iemand een idee waarom en hoe dat te repareren?

  • Marlies Appelman schreef:

    NOg even een korte aanvulling. Of hij is wel responsive, maar vergis ik me hierin? De naam van tekst en tekening valt weg, maar verder valt alles wel binnen beeld en er staat dat snaps wel responsive hoort te zijn…

  • Steve Lock schreef:

    Hoi Marlies,

    WpTouch maakt je thema niet responsive: het maakt een mobiele website naast je desktop template. Het is dus ook niet zo dat je template mee-schaalt wanneer je je scherm kleiner maakt.

  • Piet Marisael schreef:

    We gebruiken child-theme gebasseerd op theme twenty-eleven met o.a. de plugin Jetpack
    De site is opgebouwd uit enkele pagina’s, echter het leden-gedeelte is met links een menu gedeelte (2de menu als sidebar).
    Maak ik de site beschikbaar voor mobile met jetpack dan is het leden-menu echter altijd zichtbaar, ook voor de non-members of niet ingelogde bezoekers.
    Hoe los ik dit nu op?
    De boven 2 andere genoemde plugin’s bieden geen oplossing.

  • edensan schreef:

    Hoi,

    Ik heb zoekvelden die met een dropdownstructuur werken ik trek mn haren uit mn hoofd want als ik ze aantik op mn mobiel gaan ze naar beneden en direct weer naar boven.

    alle oplossingen zijn alleen op menu’s gericht en niet op velden
    het heeft met :hover te maken maar waar en hoe?.. om gek van te worden.. 😀

    jij enig idee?

    grt

  • Steve Lock schreef:

    Hoi Edensan,

    Welke plugin of thema gebruik je voor je zoekvelden? Je zou eens contact op kunnen nemen met de ontwikkelaar om te vragen of ze de techniek ook voor mobiele apparaten geschikt kunnen maken.