Media queries en afbeeldingen

Karel-Jan 12 augustus 2012

Resonsive design wint steeds meer terrein. Media queries zijn een krachtig middel om een web interface aan te passen aan de grootte van het browservenster. Voor de mobiele versie van een website wil je de gebruiker een zo’n intuïtief mogelijke gebruikersinterface bieden. Met behulp van responsive design kan je de mobiele versie van een website er anders uit laten zien dan bijvoorbeeld de desktop versie. Wat voor de mobiel echter nog een belangrijkere rol speelt, is de laadtijd. Mobiele browsers hebben in veel gevallen nog steeds te kampen met 3G verbindingen. Hier moet de mobiele website voor geoptimaliseerd worden.

Bij een recent project was de laadtijd van grote foto’s een belangrijk issue. In eerste instantie had ik gehoopt dat media queries hiervoor de oplossing boden. Na wat testen en onderzoek bleek dit echter niet de oplossing te zijn.

Tim Kadlec, de schrijver van Implementing Responsive Design omschrijft in het artikel Media Query & Asset Downloading Results op welke manier afbeeldingen gedownload worden bij het gebruik van media queries. Hier worden verschillende methodes toegelicht, maar bleken voor het project waar wij aan werkten niet geschikt.

wp_is_mobile to the rescue

Pronamic maakt gebruikt van WordPress, waardoor we eenvoudig gebruik kunnen maken van een server-side oplossing. Het voordeel van een server-side oplossing is dat je meer controle hebt over de website en niet afhankelijk bent van de browser van de bezoeker. WordPress heeft hier een niet-gedocumenteerde condational tag voor, namelijk wp_is_mobile. Deze functie kunnen we gebruiken om afbeeldingen met een lagere resolutie in te laden als de bezoeker de website met een mobiele browser bezoekt. Hoogstwaarschijnlijk is deze functie ook niet helemaal waterdicht, aangezien de functie niet alle mobiele browsers zal herkennen. Na wat afwegingen bleek dit voor ons op dit moment nog wel de beste oplossing te zijn.

Heb je vragen over responsive design of andere vragen gerelateerd aan dit artikel, laat even een reactie achter.

1 reactie

  1. Een responsive design waarbij blokken content zoals de sidebar weg worden gelaten ben ik niet perse fan van.

    Je kunt op de ipad en iphone namelijk prima browsen door dubbel te klikken op de content, zodat het schaalt naar je beeldscherm grootte. Als ik opeens delen van de navigatie mis voelt dat gewoon heel vreemd aan. Als er vervolgens geen optie wordt geboden om naar de full size versie te switchen is het zelf onwijs irritant (AT5.nl grrr)

Altijd op de hoogte blijven?