Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

Design web Responsive

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

Techniques

Outils

Exemples

 

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : wakka27, flexbox, Goofy, Chokri
 Dernière mise à jour par : wakka27,