Cette page fournit un aperçu de certaines des techniques principales nécessaires pour concevoir des sites web qui fonctionneront bien sur les appareils mobiles. Si vous cherchez des informations sur le projet Firefox OS de Mozilla, consultez la page Firefox OS. Des détails sur Firefox pour Android pourraient également vous intéresser.
Cette page est divisée en deux sections, conception pour les appareils mobiles et développement multinavigateur. Consultez également le guide de Jason Grlicky mobile-friendliness pour les développeurs web.
Les appareils mobiles ont des caractéristiques physiques assez différentes des ordinateurs portables ou de bureau. Leurs écrans sont généralement plus petits, évidemment, mais ils changent aussi automatiquement l'orientation de l'écran entre portrait et paysage lorsque l'utilisateur les tourne. Ils disposent généralement d'écrans tactiles pour les manipuler. Des API comme la géolocalisation ou l'orientation de l'appareil ne sont pas toujours gérées sur un ordinateur ou y sont beaucoup moins utiles, alors qu'elles donnent aux utilisateurs mobiles de nouvelles manières d'interagir avec votre site.
Le Responsive Web Design est un terme pour un ensemble de techniques permettant à votre site web d'adapter sa disposition lorsque son environnement change ; en particulier la taille et l'orientation de l'écran. Parmi ces techniques :
La balise meta viewport indique au navigateur d'afficher votre site à l'échelle appropriée pour l'appareil de l'utilisateur.
Pour utiliser un écran tactile, vous devrez travailler avec les évènements DOM Touch. Vous n'aurez pas la possibilité d'utiliser la pseudo-classe CSS :hover et devrez concevoir les éléments cliquables comme les boutons de manière à prendre en compte le fait que les doigts sont plus gros qu'un pointeur de souris. Consultez cet article concernant la conception pour écrans tactiles.
Vous pouvez utiliser la media query -moz-touch-enabled pour charger un style CSS différent sur un appareil tactile.
Pour aider les utilisateurs dont les appareils ont une bande passante faible ou coûteuse, vous pouvez optimiser les images en ne chargeant que celles qui sont appropriées pour la taille et la résolution de l'écran. Ceci peut se faire en CSS selon la hauteur, la largeur et la densité en pixels.
Il est également possible d'utiliser des propriétés CSS pour concevoir des effets visuels comme des dégradés et des ombres sans utiliser d'images.
Enfin, vous pourrez tirer partir des nouvelles possibilités offertes par les appareils mobiles, comme l'orientation et la géolocalisation.
Pour créer des sites web qui fonctionneront de manière acceptable sur différents navigateurs mobiles :
Par exemple, si vous prévoyez un fond avec dégradé de couleurs sur une zone de texte avec une propriété préfixée comme -webkit-linear-gradient, il est préférable d'ajouter les autres versions préfixées de la propriété linear-gradient. Si vous ne le faites pas, assurez-vous au moins que le fond par défaut offre un bon contraste avec le texte : de cette manière la page sera au moins utilisable dans un navigateur qui n'est pas visé par votre règle linear-gradient.
Consultez cette liste des propriétés spécifiques à Gecko, cette liste de propriétés spécifiques à WebKit, ainsi que le tableau de Peter Beverloo des propriétés spécifiques des moteurs de rendu des navigateurs.
Vous pouvez vous aider d'outils comme CSS Lint pour trouver des problèmes de ce genre dans votre code, et de préprocesseurs comme SASS et LESS pour produire du code multinavigateur.
Il est préférable que les sites web détectent des fonctionnalités spécifiques de l'appareil comme sa taille d'écran et ses capacités tactiles à l'aide des techniques listées ci-dessus, et s'y adaptent en conséquence. Mais parfois ce n'est pas possible et certains sites ont recours à la chaîne d'identification d'agent utilisateur (user agent) pour essayer de faire la distinction entre ordinateurs de bureau, tablettes et téléphones afin de servir un type de contenu différent à chaque type d'appareil.
Si vous faites cela, assurez-vous que votre algorithme est correct et que vous ne fournissez pas le mauvais type de contenu à un appareil parce que vous ne traitez pas la chaîne d'identification d'un navigateur particulier. Consultez ce guide d'utilisation de la chaîne user agent pour déteminer le type d'appareil.
Testez votre site web sur plusieurs navigateurs. Cela veut dire aussi tester sur plusieurs plateformes — au moins iOS et Android.