Adapter un site web pour les périphériques mobiles grâce aux CSS

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-width et max-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 :

  1. Le menu en rouge, qui se trouve dans la div #sidebar, et qui est positionné en CSS en marge à droite ;
  2. 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 ;
  3. 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 ;
  4. 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 :

  1. Eloigner la zone verte du bord supérieur de la fenêtre, en utilisant la propriété CSS « margin-top ».
  2. 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 :


Commentaires

1. Ermant jeudi 10 novembre 2011

This is a very nice idea, I’m going to do this from now on. Thanks!

2. Nicolas Andeli samedi 12 novembre 2011

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.

3. Loïc Savard samedi 12 novembre 2011

Vraiment bien présenté. Merci !

4. elizonline samedi 12 novembre 2011

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

5. Paul C. samedi 12 novembre 2011

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.

6. Evolya.fr dimanche 13 novembre 2011

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.

7. hdfhdfh lundi 14 novembre 2011

Bonjour comment on peux faire pour tester si on n'a pas d'iphone ?

8. Evolya.fr samedi 19 novembre 2011

@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.

9. Étienne Mersan lundi 5 décembre 2011

C'est un très bon article, et surtout complet.
Merci.

10. marco95 lundi 12 mars 2012

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)

11. Ju48 jeudi 11 octobre 2012

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.

12. evolya.fr jeudi 11 octobre 2012

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

13. cooltrane vendredi 30 novembre 2012

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

14. cooltrane mardi 4 décembre 2012

ne marche pas sur IE 8. Une solution
merci pour ce tuto... Vraiment bien.


About the Author

Ted Marklor est un web designer, un web developer et un génie de la nature. Transcendant le web depuis bientôt 15 ans, Ted est une source d’inspiration et de conseil pour toute une génération de jeunes programmeurs. Le Web 2.0, c’est lui. Dans la vie, il aime aussi faire des avions en papier, s’inventer des pseudonymes et une vie de winner, et surtout parler de lui à la troisième personne. Ça se fait en ce moment sur les blogs…


Ajouter un commentaire

Le code HTML est affiché comme du texte et les adresses web sont automatiquement transformées.