Responsive webdesign 1

We weten allemaal dat een klassieke website met een gsm bekijken niet altijd even comfortabel is. Zo moet je steeds inzoomen en scrollen om alles te kunnen lezen. Met de stijgende populariteit van tablet pc's en smartphones is het dringend tijd voor een oplossing. En die komt er in de vorm van responsive webdesign.

Go mobile

Bij responsieve webdesign komt het erop neer dat een website zich aanpast aan het medium waarmee het bekeken wordt. De laatste jaren werd er een aparte mobiele website ontwikkeld, maar dat brengt wel enkele nadelen met zich mee. Ten eerste loopt de ontwikkelingstijd snel op en zo ook het prijskaartje van uw website. Ook het feit dat alle data verspreid is over twee websites, één mobiele en één klassieke website, is voor zoekmachines niet optimaal. Nee, we moeten ervoor zorgen dat de website zich anders zal gedragen naargelang het toestel dat gebruikt wordt. En dat kunnen we doen met media queries.

Media Queries

Dankzij de komst van CSS3 kunnen we nu media queries gebruiken. Met media queries kan er bijvoorbeeld achterhaald worden welke breedte een toestel heeft. Zo verschilt de breedte van een iPhone met die van een iPad of een desktop pc.  Afhankelijk van de breedte kennen we custom css toe die enkel zal gebruikt worden voor dat toestel. Zo kunnen we m.a.w. CSS overschrijven om het verwachte resultaat te bekomen. Tijd voor een verduidelijkend voorbeeld.

Onderstaande media query zal enkel van toepassing zijn als de browserbreedte max. 800 pixels is.

@media screen and (max-width:800px){
	background-color:#fff;
}

Hetzelfde kan gedaan worden met een minimum waarde.

@media screen and (min-width:800px){
	background-color:#fff;
}

Maar er kan ook geopteerd worden om tussen twee waarden te kijken.

@media screen and (min-width: 600px) and (max-width: 800px) {
	background-color:#fff;
}

Om ervoor te zorgen dat media queries ook werken in iets oudere browsers, kun je dit stukje javascript includen.

Praktisch

Ik besloot om dit alles eens te toetsen aan een bestaand project. Ik ben gestart vanaf het 'Response' theme voor Fork CMS. Dit is, zoals de naam doet vermoeden, een theme dat werd ontwikkeld met responsive webdesign in het achterhoofd. Al snel ben ik beginnen sleutelen aan de media queries om dit te bekomen:

Je kunt dit zelf testen door je browservenster kleiner/groter te maken.

Ik ondervond dat er in het responsive theme omgekeerd gewerkt wordt dan wat ik eerst voor ogen had. Daar wordt er gestart vanaf een min. width en zo wordt er telkens uitgebreid naar nieuwe minimum breedtes. Zo deel je dus CSS over verschillende toestellen. Pretty clever! Maar wel iets moeilijker om te begrijpen vind ik.

Om ook alle afbeeldingen mee te laten schalen, heb ik dit nog toegevoegd (incl. ie8 fix):

img {
	max-width: 100%;
	height: auto;
	width: auto\9; /* ie8 */
}

Conclusie

Ik zal media queries in toekomstige projecten gebruiken waar het kan. Ik zal wel vanaf het ontwerp al rekening moeten houden met deze aanpak. Het is een nieuwe uitdaging voor zowel webdesigners als webdevelopers.