Month: December 2012

In een eerdere post schreef ik al dat het in het kader van responsive design het logisch lijkt niet alles client side op te lossen. Niet veel later leerde ik via @nielsvanmidden dat deze techniek RESS genoemd wordt. Voluit spreekt men dan van Responsive Design + Server Side Component.

Responsive images

In websites gebruikte afbeeldingen leek mij interessant om nader te bekijken. Ter illustratie een voorbeeld:

Een website geoptimaliseerd, of maximaal getoond, voor een breedte van 960 pixels. Zo’n site heeft bijvoorbeeld een header images van 960 x 300 pixels. Wordt deze website nu op een mobiele telefoon bekeken, dan wordt de header d.m.v. css op 100% schermbreedte gezet. De mobiel in portret view geeft de header dus afgebeeld als 320 x 100 pixels. Wordt deze afbeelding nu d.m.v. css (media queries) herschaald, dan wordt eerst de volledige afbeelding op de telefoon gedownload, de hardware van de telefoon herschaalt deze vervolgens. Was een afbeelding van 320 x 100 pixels van de server gedownload, dan was dit sneller gegaan en de gebruiker had minder dataverkeer verbruikt.

Mogelijke oplossing

Server side wordt het gebruikte device bepaald. Vervolgens stuurt de server de afbeelding van de juiste afmeting. Voor de oplossing ga ik uit van een willekeurige webserver (LAMP) waarbij alle afbeeldingen in één directory staan. Bijvoorbeeld /images/ (subdirs toegestaan). Middels Mod rewrite stuur ik alle request /image/* naar mijn script (ti.php):

RewriteEngine On
RewriteCond $1 !=ti.php
RewriteRule ^(.*)$  /image/ti.php


In ti.php wordt het device bepaald. Afhankelijk van het device rendeert ti.php de juiste afbeelding. ti.php kent de oorspronkelijke REQUEST_URI. Het script kan de opgevraagde afbeelding openen, herschalen en renderen. Qua device zou je bijvoorbeeld kunnen splitsen op mobiele telefoons, tablets en desktops. Voor mobiele telefoons hoeft een afbeelding dan niet breder dan 480 pixels te zijn (???).

Het bepalen van een device kan gebeuren met Mobile Detect.

Voordeel van deze oplossing dat je deze op elke website server kunt installeren los van het CMS dat gebruikt wordt. Enige dat je feitelijk hoeft te doen is de files uploaden naar je directory met afbeeldingen. Dat gaat dan om een .htaccess bestand, ti.php en de Mobile Detect files. Er zijn ook geen wijzigingen nodig aan je html.

Deze oplossing werkt in theorie, in de praktijk zijn er ook enkele nadelen.

Te weinig profijt

Veel sites hebben weinig hele grote afbeeldingen, voor veel sites betreft het alleen de header. Hoewel er altijd winst is, kunnen de voordelen gering zijn. Voor een website met veel foto’s, die ook op desktop foto’s herschaalt middels css (of width i/d img tag) zou de winst daarentegen wel enorm kunnen zijn.

Landscape / portret view

Mobiele telefoons hebben meestal een landscape en portret view. Bij het wisselen tussen de landscape en portret view wordt de pagina niet herladen, afbeeldingen kunnen middels css wel opnieuw schalen. Voor images die je getoond wilt hebben met 100% van de schermbreedte betekent dit dus, dat de afbeelding die je laat laden minimaal een breedte moet hebben gelijk aan de maximale schermbreedte in de landscape view.
Vervolgens heb ik bijvoorbeeld gekeken naar: http://twitter.github.com/bootstrap/scaffolding.html#responsive “Supported devices”. Dan blijkt er eigenlijk een overlap tussen telefoons en tablets met een breedte tussen de 480 en 767 pixels. Dat zijn grote telefoons of kleine tablets.
Onduidelijk is of Mobile Detect nauwkeurig genoeg is om te bepalen of een device valt onder bijvoorbeeld maximaal 480px breed (landscape).
Zie hiervoor ook: Obtaining max device width. Indien de bepaling niet strikt genoeg is zou je voor elke telefoon voor de zekerheid moeten uitgaan van 767 pixels, een steeds geringer verschil met de originele 960 pixels.

A Simple Device Diagram for Responsive Design Planning laat zien dat er feitelijk maar één breakpoint mogelijk is. Dit breakpoint ligt dan bij 480px.

The MobileESP Project  is een andere library om devices te detecteren. MobileESP is beschikbaar voor PHP, Java, ASP.NET (C#), Python (voor Django), Ruby en Classic ASP (VBscript). Tevens is er een javascript versie en een api beschikbaar. Via MobileESP zou, mogelijk niet heel strikt, een onderscheid gemaakt kunnen worden tussen telefoon en tablets met een scherm tot 7inch en een groep met schermen tot 8inch. 7inch schermen zouden een resolutie hebben van 480×800. Via deze route zou je een breakpoint op 800 pixels kunnen bepalen.

Alternatief

Alternatief zou kunnen zijn om de server side Mobile Detect te vervangen door een client side javascript detectie. Voorbeeld is te vinden op https://github.com/filamentgroup/Responsive-Images. Eerste nadeel van deze methode lijkt dat je de images pas kunt laden nadat de pagina geladen is. In het genoemde voorbeeld wordt ook  met maar één breakpoint gewerkt. Het onderscheid is dus groot of klein. Probleem met de landscape en portret view blijft bestaan.