Adaptive layout for the mobile web
Yoan Blanc — Sat 31 October 2009 — Cascaded StyleSheet, iPhone, Mobile, Opera, Webkit
One web, is still in the air and we, as web developers, are still hoping that it will be the case. Nowadays, phones are getting better and better and the need of doing a specific version of any website if, as I see it, fading away. When someone tells you: “Hey, I need an iPhone/Android/Pre/Maemo app (or maybe an Opera/Vodafone widget) for my website!” I would try to show her/him that, at a very small cost, a well done website can be adapted to those devices.
If the iPhone marketshare is quite big, other platforms are emerging. The cool side is that they are built on Webkit as well, like: Android or Palm Pre. Less powerful phones might run Opera mini which has also a very good support of web standards. I’ll try to show simple things you can do to give your website a better experience everywhere without building multiple versions of it.
The biggest problem, the width. On the desktop side, it’s commonly assumed that 1024x768 is the standard. This is why the ~960px width layout is so common (take Yahoo!, Facebook, LinkedIn, …). My opinion is that netbooks will gain some marketshare too and it also weight the fact that one size fits all will be outdated in the next years.
Devices might use HVGA 480x320 (iPhone, Pre, HTC Dream) or QVGA 320x240 or maybe bigger or smaller. The iPhone comes with a feature to control the viewport, which might be supported by the others (like Opera) or not.
<meta name=viewport
content="width=320; user-scalable=1;">
Like Daniel Glazman said during Paris Web 2009, please don’t prevent the user to scale in/out. This is totally non-standard and there is a standard way of doing that. It’s called media-queries.
<link href="small.css"
media="handheld, only screen and (max-device-width: 480px)"
rel="stylesheet"
type="text/css">
This stylesheet gonna be applied on handheld devices and others with a very narrow screen (smaller than 480px in this case) and it enables to do cool things like :
- going with a liquid layout instead of a fixed or elastic one;
- linearizing multiple-columns layout (
float:none);
- hiding unnecessary stuffs (like you already do in your print stylesheet of course);
- resizing big picture (
max-width: 100%);
- making small things bigger, so you can click them more easily (like tiny icons);
- taking into account that there is no
:hover state on a touch screen;
- and many more…
Such small screen cannot take advantages of the two dimensions, like a usual monitor does, so a linear (in the Y-axis of course) layout is preferred.
They are of course many, more issues that can be addressed like the iPhone file-size cache limitation, bandwidth reduction, HTTP calls,… I wouldn’t focus on those until you get an audience worth doing so. If it’s not your target of course.
I won’t throw the baby with the bathwater and native applications are good if you need to do specific things with the device itself or require specific performances. Phones offer, or will offer, access to the address book, the camera, the geo-localization,… Most of those require specific actions which aren’t completely specified/implemented yet, like OMTP Bondi or W3C itself.
The best platform to test that is OSX, simply because the iPhone SDK won’t work elsewhere. Testing with the Android emulator or Opera Mini can be done on any platform. Mozilla promised to release soon a version of Fennec targeting the Maemo platform which is already using Gecko. By the way, the N900 looks awesome! To develop it, simply activate that stylesheet for everyone, so no media-queries.
It very easy to start adapting a website to smaller devices and may even force you to have a better grid structure. Maybe not yet a business advantage, but sooner or later it will.
Un seul web (“One Web”) a été usé et re-usé lors du dernier Paris Web. C’est une idée ou un espoir qui plane depuis toujours il me semble. Avec la démocratisation des appareils nomades permettant de consulter le véritable web (ni WAP, ni i-mode). Le réflexe actuel me semble être : « il faut que je fasse réaliser une application iPhone/Android/Pre (ou un widget Opera/Vodafone) pour mon site ». Dans ce cas, je présenterais ce qu’il est possible de faire avec l’existant, et ce qui nécessiterait une application native.
Si le monde du mobile est une jungle encore plus dense que ce qu’on expérimente avec les navigateurs usuels. Les acteurs principaux se divisent entre Webkit (iPhone, Android, Palm Pre, …) et Opera (avec Opera mini). Des moteurs de rendu connus (entre autres) pour leur support de qualité des standards. Des outils existent pour éviter de produire plusieurs versions d’un même site.
Le pas premier à franchir est qu’il est assumé aujourd’hui que 1024x768 est le minimum syndical. Pour preuve le nombre de sites reposant sur cette largeur là, de manière fixée. L’arrivée des netbooks va, j’espère tendre vers un parc informatique encore plus hétérogène et une fin progression de la taille unique.
Pour revenir à nos moutons, nombre d’appareils ont un écran dit HVGA (demi-VGA, 320x480) ou QVGA (quart-VGA, 320x240). C’est pourquoi vous verrez souvent la ligne suivante :
<meta name=viewport
content="width=320; user-scalable=1;">
Un élément propriétaire à l’iPhone, qui force la largeur à 320px et dans ce cas autorise le zoom utilisateur. Comme l’a souligné Daniel Glazman lors de sa présentation (ou devrais-je dire show) en novembre dernier, désactiver cette fonctionnalité est un non-sens. D’autres navigateurs peuvent supporter cet attribut là, je pense notamment à Opera.
Mais, la boîte-à-outils du W3C n’est pas en reste, avec les media-queries qui permettent de cibler un navigateur selon des spécification techniques :
<link href="small.css"
media="handheld, only screen and (max-device-width: 480px)"
rel="stylesheet"
type="text/css">
Comme dans ce cas, la largeur maximale en pixels de l’appareil. Donc si l’appareil est plus petit que 480px de large, la feuille de style est appliquée. Feuille qui permet de faire tout un tas de choses intéressantes :
- passer à une mise en forme fluide, et non plus fixée ou élastique ;
- linéariser des colonnes ;
- masquer ce qui sert de décoration
- limiter la taille maximale des images, par exemple ;
- agrandir certains éléments pour pouvoir les sélectionner avec de gros doigts (sur un petit écran) ;
- prendre en compte qu’il n’y a pas d’effet de survol sur un écran tactile ;
- et tout un tas d’autres…
Il y a plusieurs autres points à prendre en considération si l’audience se servant d’appareil nomade est assez importante. Une version adaptée, ne saura certainement pas contenter tous les usagers. C’est à mes yeux un investissement faible et qui amène forcément un plus qualitatif, passer de deux dimensions à une seule implique que la logique de base soit bonne.
Pour ne pas jeter le bébé avec l’eau du bain, il y a un intérêt à l’option application native, pour ne serait-ce qu’au niveau des performances. Plus spécialement dès qu’il s’agit d’intéragir avec l’appareil lui-même, comme consulter le carnet d’adresse, l’appareil photo ou le GPS. Des solutions au sein du navigateur arrivent tant via le W3C qu’OMTP Bondi pour citer ceux que je connaisse.
En matière de test, tout est testable depuis partout, sauf pour l’iPhone où le SDK nécessite le système d’exploitation OS X. L’émulateur Android offre différentes géométries d’écran, ce qui est intéressant. Opera mini est disponible en ligne. Pour parler un peu de Mozilla, Fennec devrait arriver pour le N900 (Maemo utilisant déjà Gecko) d’ici peu. Sinon, en activant la feuille de style comme une autre permet de faire un premier test également. Il y a de quoi s’amuser à améliorer l’expérience utilisateur de nos sites sur ces appareils là. C’est vraiment ludique à faire, même en tant que non-possesseur de ce type d’appareils là.
