Responsive WordPress

© www.vleemo.be

Vroeger paste een webpagina in een venster van 800 pixels breed. De hoogte deed er niet toe omdat scrollen de nodige ruimte bood. Soms was de inhoud, bijvoorbeeld een afbeelding, breeder. Dan moest er ook horizontaal worden gescrold. Nu moeten we alles schalen zodat het past in de (kantelende) beeldschermen.

Vroeger nam een webpagina automatisch de breedte van de browser aan. In een WordPress header staat tegenwoordig iets als:
<meta name=”viewport” content=”width=device-width,initial-scale=1.0″>
· width=device-width · stelt de breedte van de pagina op de breedte van het scherm.
· initial-scale=1.0 part · zet de in-uitzoom factor op de browser standaard.

Reeksen en breekpunten

Er is een grote verzameling mogelijke schermbreedtes. Dan is er ook nog de schermbreedte van een apparaat (max-device-width) en van het browserscherm (max-width). Het browser scherm kan nooit breder zijn dan het apparaat, wel smaller.

Voor de vormgever is de verzameling breedtes in verschillende reeksen in te delen:

© DavidGilbertson

De beeldschermmaten moeten nooit een breekpunt zijn maar binnen een reeks vallen.

Media queries

Via media queries worden de voorwaarden vastgesteld die bepalen welke css- stijldefinities gelden zijn.

Bijvoorbeeld:

  • @media only screen and (max-width: 602px) = phones staand (Nexus 7 = 600 breed)
  • @media only screen and (min-width: 603px) = phones liggend + tablets staand
  • @media only screen and (min-width: 900px) = tablets liggend
  • @media only screen and (min-width: 1200px) = computerscherm
  • @media only screen and (min-width: 1800px) = ontwerpers en vormgevers

Hoe meer reeksen, des te nauwkeuriger de vormgeving. En des te meer werk. 😉

Meten = weten

Hoe weet je op welke beeldschermen jouw bezoekers je site bekijken?
Via de statistieken van je site.

  • plugin CountPerDay geeft wel de gebruikte browsers weer maar niet de schermmaten
  • plugin WP Statistics geeft wel de gebruikte browsers en besturingssystemen weer maar niet de schermmaten
  • plugin GADWP geeft in het dashboard geen informatie over gebruikte beeldschermen. Wie gebruik maakt van Google Analytics Suite kan deze data wel vinden: Mobiel/ Apparaten/ Verder…/ Schermresolutie
  • … aanvullingen zijn welkom …

Veel providers, waar jouw websites zijn gehost, hebben statistieken over servergebruik ter beschikking.

Kijk verder

Vragen, opmerkingen?

* = verplicht veld