Adapter un site web pour les périphériques mobiles grâce aux CSS
mardi 11 octobre 2011
Créer une version d’un site spécialement pour les mobiles ce n’est pas compliqué.
En fait, c’est très simple. En utilisant seulement quelques lignes de code, il est possible de repenser toute l’organisation d’un site Web, et d’offrir un superbe affichage sur les smartphones. Pour cela, on fait appel au viewport, à la balise @media, et surtout à quelques principes d’ergonomie qui vont changer la vie de votre site Web.
Dans ce cas précis, je m’intéresse essentiellement à l’iPhone, car c’est le périphérique mobile le plus répandu aujourd’hui (2011) mais c’est surtout un choix personnel. J’explique étape par étape dans cet article comment j’ai adapté mon site Web à l’iPhone, et comment vous pouvez l’adapter à votre propre usage.
Le Viewport
La première chose à faire est de configurer le viewport de votre page. Pour cela, il suffit simplement de rajouter le code suivant dans la partie head de la page HTML :
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Pour plus de détails sur cette fonctionnalité, voyez la documentation Apple à ce sujet.
Le mot clé @media
Le mot clé CSS @media est appelé Media Queries par le W3C.
Il permet de faire des tests dans un fichier CSS, et d’exécuter du code uniquement si certains critères sont remplis. Ce qui nous intéresse ici c’est la possibilité de choisir ce qui sera affiché en fonction de la résolution de l’écran qui affiche le site. Voici le code source:
@media screen and (max-device-width: 480px),
screen and (max-width: 480px) {
...
}
Le code CSS pour matcher l'iPhone
A l’intérieur des deux crochets, tout le code CSS ne sera exécuté que si :
- Le support est un écran (grâce à
@media screen) - La largeur maximale est de 480px (propriétés
max-device-widthetmax-width)
Ce code fonctionne aussi bien sur mobile que sur un ordinateur ordinaire, vous pouvez tester dès maintenant en réduisant la taille de la fenêtre : arrivé à 480 pixels, l’affichage va changer et c’est la version mobile qui sera affichée. Ceci permet de réaliser des tests directement sur la machine de développement.
Une transformation petit à petit
C’est cette seconde approche que je préconise dans cet exemple. En effet, la plupart des sites devraient disposer d’un site mobile spécialement optimisé pour ce support, et qui va tirer pleinement partie de cette spécificité. Mais le plus souvent, les équipes n’ont pas le temps ou les moyens de ses consacrer à cette tâche, car l’utilisation du Web sur mobile n’est pas encore au même niveau que la navigation « traditionnelle » sur ordinateur, et que cela n’entraine pas une plus-value à court terme. Et bien justement, la méthode que je décris ici est très rapide à mettre en œuvre, et permet d’optimiser l’affichage d’un site et l’ergonomie de sa navigation à très court terme.
Une simplement mesure de précausion
Voici un petit bout de code CSS qui fait des merveilles ! Il limite automatiquement la largeur maximum des images et des objets, et des autres éléments externes à la page, pour que tout rentre dans la largeur de l’écran.
img, object, embed, video, iframe { max-width: 100%; }
Avec ça, plus besoin de se soucier de l’overflow.
C’est une propriété extrêmement intéressante pour un affichage sur mobile.
Les principaux conteneurs
Je vais commencer par m’intéresser à la homepage du site. Il est possible d’identifier quatre zones principales :
- Le menu en rouge,
qui se trouve dans la div
#sidebar, et qui est positionné en CSS en marge à droite ; - La grande image de la homepage en vert, qui se
trouve dans la div
#welcomeicon, et qui est positionnée dans la colonne principale de gauche ; - Les trois petits encarts
en jaune,
qui correspondent aux div ayant la classe
.bigthreecol, et qui sont positionnés à la suite de la zone verte ; - Enfin, la zone de contenu
en bleu, qui correspond
à la balise
#content, et qui est positionné à la suite de la zone jaune.
Le site est composé de quatre zones principales
Je vais donc devoir revoir l’organisation de ma page pour l’adapter à la navigation sur périphériques mobiles. En général, on choisi d’agencer la page pour que l’utilisateur fasse défiler le contenu de haut en bas (sur l’axe des ordonnées). Pour simplifier les choses, on va désigner « l’organisation de ma page » par le mot « gabarit ».
Je dois donc réussir à transformer mon gabarit « normal » (à gauche sur la figure ci-dessous) en gabarit spécial « mobile » (au centre sur la figure ci-dessous). Pour cela, je choisi de placer le menu en haut de page (ce qui est le plus courant) et de ne plus afficher les 3 colonnes.
Le problème, c’est que dans mon code HTML, la div #sidebar
qui correspond au menu se trouve à la fin du document (à droite sur la figure
ci-dessous). Je vais donc avoir besoin d’une astuce pour placer cette div en
haut de la fenêtre sans avoir à toucher à mon code HTML.
A gauche c'est mon site avec les styles normaux, composé de quatre zones. A droite, c'est la position des balises HTML correspondantes. Le problème c'est d'arriver à composer un layout à défilement vertical, avec le menu en haut de page.
L’astuce est très simple :
- Eloigner la zone verte du bord supérieur de la fenêtre, en utilisant la propriété CSS « margin-top ».
- Placer la div du menu en haut, en la positionnant en « absolute », et compenser la hauteur de la marge avec la propriété « top ».
On modifie la position des calques en CSS
Voyons maintenant comment tout cela fonctionne en CSS. Comme expliqué ci-dessus, on utilise le mot clé @media pour cibler uniquement la résolution de l’iPhone.
Le premier travail à faire est de réinitialiser tout le positionnement des div qui composent le gabarit de la page.
/* iPhone layout */
@media screen and (max-device-width: 480px),
screen and (max-width: 480px) {
/* reset */
#page, #wrapper, #main, #sidebar, #top, #content {
display: block;
clear: both;
width: 100%;
margin: 0;
padding: 0;
float: none;
position: relative;
}
div.bigthreecol { display: none; }
}
Ce code CSS, qui ne concerne que petites résolutions, réinitialise le positionnement des div qui composent le gabarit de la page. Les 3 petites colonnes sont masquées.
A ce stade, on commence à y voir plus clair. Ensuite, je corrige la position du menu comme expliqué un peu plus haut.
#wrapper { margin-top: 190px; }
#sidebar { position: absolute; top: -180px; left: 0; padding: 0 1%; width: 98%; }
Le bloc #sidebar est positionné en haut de la page
Enfin, je rajoute un peu de marge au contenu pour qu’il ne touche pas les bords de l’écran.
#content { margin: 0 1%; width: 98%; }
Une légère marge de chaque côté du contenu donne un meilleur rendu sur iPhone.
Le menu
L’étape suivante, c’est de faire un menu qui soit utilisable sur mobile. En effet, pour que l’utilisateur arrive à l’utiliser convenablement, un menu doit avoir les propriétés suivantes :
- Affichage des liens en boutons, suffisamment larges pour être activités par le doigt ;
- Un espace suffisant entre les boutons, pour éviter les accidents ;
- Un comportement clairement identifiable pour l’événement
a:active, pour confirmer à l’utilisateur que son action a bien été prise en compte.
Pour le site evolya.fr, j’ai adopté un design simple et rapide qui rempli les conditions précédentes. Les liens du menu s’affichent désormais sous la forme de petits boutons qui s’enchainent à la ligne, et dont la bordure de gauche et légèrement épaissie. Ces liens se trouvent toujours en haut de la page pour standardiser la navigation.
Le menu classique à la verticale est remplacé par des boutons inline.
Le code suivant modifie l’affichage des liens du menu :
#sidebar li, #sidebar ul {
display: inline;
padding: 0;
margin: 0;
line-height: 30px;
}
#sidebar li a {
background-color: #eee;
padding: 3px 8px;
font-size: 1.3em;
border-left: 4px solid #ddd;
}
#sidebar li a:active {
background-color: #666;
color: #fff;
}
Notez que les liens ont un comportement très marqués pour l’événement a:active.
Les tableaux
Pour afficher les tableaux convenablement sur mobiles, il faut repenser légèrement le concept pour que tout rentre dans une petite largeur. La solution la plus astucieuse, je vous la donne ici mais je ne retrouve plus le lien de celui qui l’a trouvé. Comme certaines images valent plus que des mots, voici ce que ça donne :
Affichage des tableaux sur mobile.
Toutes les cellules du tableau sont affichées les unes en dessous des autres. En CSS, on spécifie le label à afficher à côté de la cellule.
@media screen and (max-device-width: 480px),
screen and (max-width: 480px) {
/* Table layout for small screen */
table, thead, tbody, th, td, tr {
display: block;
}
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
body table tr {
border: 1px solid #ccc;
width: auto !important;
}
body table td {
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
width: auto !important;
}
td:before {
position: absolute;
top: 6px;
left: 6px;
width: 30%;
padding-right: 10px;
white-space: nowrap;
}
/* Noms de colonnes */
#table-users td:nth-of-type(1):before {
content: "ID";
}
#table-users td:nth-of-type(2):before {
content: "Last name";
}
#table-users td:nth-of-type(3):before {
content: "First name";
}
...
}
Les noms de colonnes se trouvent dans le code CSS.
Les autres éléments
Il est fort probable que vous ayez plein d’autres modifications à faire pour adapter tous les éléments graphiques de votre site. Pensez notamment aux formulaires, qui ne s’insèrent jamais comme il faut. Vous devez peut-être aussi avoir à supprimer des éléments car ils ne peuvent pas s’afficher convenablement, ou parce qu’ils n’apportent pas de plus-value à la navigation sur mobile.
Le résultat
Cette technique permet de rendre un site compatible iPhone très rapidement. C’est son principal avantage. En plus, c’est une technique qui n’est pas dépendante du type d’appareil utilisé, mais de la résolution de l’écran d’affichage. Il est donc tout à fait possible de mettre en place plusieurs comportements pour différentes résolutions. Par exemple :
- En dessous de 481 pixels j’affiche le gabarit mobile ;
- En dessous de 1025 pixels j’affiche un gabarit compacté ;
- Au dessus de 1024 pixels, c’est le gabarit « normal » qui est affiché.
Vous trouverez à la fin de ce document une liste de lien traitant de cette problématique sous l’appellation « responsive layout ».
Le site s'affiche maintenant très bien sur l'iPhone.
Commentaires
This is a very nice idea, I’m going to do this from now on. Thanks!
Il semble que les media-queries de CSS 3 ne soient pas reconnues par les anciens navigateurs tels que IE8. Par contre IE9 ça va.
Il y a des solutions alternatives pour certaines propriétés (comme shadow ou opacity) comme CSS3pie.
Vraiment bien présenté. Merci !
Pourquoi s’adapter au web mobile ?
Cette présentation est une bonne approche de l’évolution du web mobile et des...
http://bit.ly/9fr2C9
Bonjour
J'ai bien aimé votre article, ça a l'air très simple et rapide.
Un point important qu'il faut préciser, c'est d'ameliorer la lisibilité sur mobile:
- augmenter la contraste, pas des choix de couleurs
- augmenter les espaces, les interlignes
- pas de texte en dessous de 10px
Autre chose dont vous ne parlez pas ici, c'est optimiser les images pour améliorer le téléchargement des pages.
Bonjour,
@Paul C. : Effectivement la lisibilité est un paramètre très important, qui se corrigera aussi avec les CSS. Par contre, je n'aborde dans cet article que la partie "graphique et ergonomie", pas l'optimisation.
Bonjour comment on peux faire pour tester si on n'a pas d'iphone ?
@Hdfhdfh : le code CSS que je met dans l'article fonctionne aussi bien sur un portable que sur un pc normal. Il suffit de redimensionner la fenêtre pour voir le changement. Pour avoir le rendu le plus proche de l'iPhone il faut mieux utiliser Safari. Par contre, ce ne sera jamais exactement pareil que sur l'iPhone.
Enfin, Apple propose un SDK pour iPhone avec un émulateur.
C'est un très bon article, et surtout complet.
Merci.
Pour valider "iphone" sur Safari faire
Menu "Page Active" en haut à droite
Option "Développement"
Sous-menu "Agent d'utilisateur"
Choisir "Safari iOS --- iPhone"
A refaire à chaque lancement de safari
Pour info
A+
Marc
Ps: Très bon article même en 2012 ;o)
Bonjour,
J'ai mis en place le code pour les tableau. Mais je rencontre un problème au niveau des noms des colonnes.
A la place de marquer :
#table-users td:nth-of-type(1):before { content: "ID"; }
Est ce qu'il serait possible de récupérer le nom de la colonne qui est présent dans le th du tableau
Plus clairement quelque chose comme cela :
#table-users td:nth-of-type(1):before { content: "th:nth-of-type(1)"; }
Je possède plusieurs tableau sur mes sites et un système comme celui là serai extrêmement intéressant.
Merci de votre aide.
Ju48: Bonjour,
Ce n'est malheureusement pas "encore" possible en CSS, il faudrait rajouter une surcouche JavaScript pour le faire.
Par contre, depuis cet article, je suis tombé sur d'autres manières plus performantes pour ajouter du responsive layout sur les tableaux.
Le mieux que j'ai trouvé se trouve en bas de cette page : http://css-tricks.com/responsive-da...
J'espère que vous trouverez votre bonheur
Ted
super
mais j'ai testé sur IE 8 et la démo ne marche pas
Marche sur Firefox mais les boutons de liens restent en ligne avec barre de défilement...
merci qd même
ne marche pas sur IE 8. Une solution
merci pour ce tuto... Vraiment bien.
Why visitors stipl make usee oof to read ndws pappers when iin thiks technologicawl
globe thee whole thing iis acccessible onn web?
Fastgidious replies inn returrn of thus ixsue wifh resal arguments and describing everything concerning that.
Thanks for sharing youir thoughts on Article csss css3 html5 iphone mobile responsive
layout viewport. Regards
WOW just what I was searching for. Came
here bby searching ffor 8082
Good day I am so glad I foundd your site, I really found you
byy error, while I was researching on Yahoo for sometghing else, Regazrdless I
amm heree noow and would just like to ssay thans a lot for a
remarkable post and a all round exciting blog (I also
love the theme/design), I don't have time tto look ober iit all at thee moment buut I have saved it andd also addded your RSS feeds, so when I have time I will be back tto resad much more,
Please ddo kee up the excellent job.