Maintenant que les utilisateurs du Web se servent de plus en plus d'appareils mobiles pour naviguer sur les sites web et pour leurs applications, les concepteurs et les développeurs web doivent s'assurer que leurs créations ont unbon rendu visuel et un bon fonctionnement aussi bien sur les appareils mobiles que sur les ordinateurs de bureau traditionnels. Concepteur de premier plan, Luke Wroblewski préconise la conception pour « mobiles d'abord » (article en anglais), plutôt que comme une réflexion venant après la conception pour les postes de travail. Que votre conception pour les appareils mobiles soit votre objectif principal ou un supplément sympa, vous pouvez utiliser la puissance des CSS pour vous assurer que le même contenu est accessible sur toutes les plateformes matérielles, des téléphones portables aux grands écrans haute définition.
Cette approche est connue sous le nom «Web design réactif ». Certaines de ses stratégies comprennent :
- Disposition liquide ou fluide : définir toutes les largeurs de conteneurs en termes de pourcentages de la fenêtre navigateur, afin qu'ils se déploient et se replient comme la fenêtre du navigateur change de taille.
- Les media queries : faire appel à différentes feuilles de style en fonction des capacités de l'écran utilisé, comme la taille, la résolution, le format et la profondeur des couleurs.
- Images fluides : définir les images pour qu'elles occupent au mieux la largeur maximale de l'écran.
Exigences minimales pour le Firefox Marketplace
Si vous soumettez une application sur le marketplace de Firefox pour Firefox OS ou Firefox pour Android, elle doit être adaptable aux tailles d'écran mobiles et à leur densité en pixels. Gardez à l'esprit que les plus petits écrans ne font que 320px par 480px. Une autre erreur courante est de ne pas reconnaître la densité de l'écran et puis ne pas ajuster la taille des polices et des cibles tactiles en conséquence. Pour plus d'informations, voir les critères d'examen du Marketplace.
Ressources
Aperçus
- Responsive Web design (en anglais), par Ethan Marcotte
- Guide du débutant du responsive Web design (en anglais), par Rick Petit
- Responsive Web design : ce que c’est et comment l’utiliser (en anglais), par Kayla Knight
- Conception Web multi-terminal : une évolution (en anglais), par Luke Wroblewski
- Responsive Design Workflow de Stephen Hay (livre, en anglais)
- Les principes fondamentaux du design adaptatif, par David Leuliette
Techniques
- Page de référence sur les requêtes de média CSS
- Requête de média pointer (en anglais), par David Walsh
- Requête de media CSS et utilisation de l’espace disponible (en anglais), par Chris Coyier
- Mise en forme liquide et facile (en anglais), par Russ Weakley
- Images fluides (en anglais), par Ethan Marcotte
- Conception pour les écrans tactiles (en anglais), par Chris Kemm
- Responsive Web Design Techniques, Tools and Design Strategies (en anglais), par l'équipe Smashing Editorial
Outils
- Vue adaptative de Firefox
Exemples
- Démos DevDerby des requêtes de média CSS
- 20 exemples fantastiques de l’utilisation des requêtes de média pour le reponsive Web design (en anglais), par Joshua Johnson
- Responsive Web design : 50 exemples et bonnes pratiques (en anglais)