BT
x Votre opinion compte ! Merci de bien vouloir répondre au sondage InfoQ concernant vos habitudes de lecture !

Recommandations pour créer un Site Web Adaptatif

par Abel Avram , traduit par Hadrien Pierart le 16 juin 2014 |

Cet article regroupe plusieurs recommandations pour créer des sites web qui s'adaptent à la taille des écrans et à leur forme.

Pendant la semaine QA TechWeek 2014, David Walker, un responsable technologie chez QA, a présenté différentes recommandations pour la création de sites web adaptatifs lors de la session Passez à l'adaptatif avec Foundation (Going Responsive with Foundation). Walker a détaillé plusieurs façons de créer des sites web pour applications mobiles, en partant d'un existant pour ordinateur : Les applications natives – une pour chaque OS mobile, le HTML5 embarqué – avec PhoneGap ou un équivalent, les filtres au niveau du serveur – avoir des sites web pour ordinateurs et mobiles différents et rediriger entre les 2.

Après les pour et contre de chacune de ces méthodes, Walker a présenté le RWD (Responsive Website Design) qui consiste en la création d'un site web unique dont la mise en page, le format et le contenu s'adaptent dynamiquement en fonction du terminal, via une combinaison de CSS, HTML5 et JavaScript. Les avantages principaux du RWD sont la réduction de la duplication de code/contenu et d'avoir un site web évolutif qui supportera les futurs terminaux. En revanche : cela requiert une très bonne connaissance de CSS et JavaScript, certaines ressources peuvent être trop grosses pour les réseaux mobiles ou peuvent nécessiter des polyfills pour d'anciens navigateurs.

Pour être capable de créer un design adaptatif, Walker recommande plusieurs choses :

  • Créer une mise en page fluide. Toutes les largeurs de containeurs doivent être définies comme des pourcentages du viewport du navigateur.
  • Utiliser les Media Queries CSS3. Des styles différents pourront être utilisés pour différents types de médias –screen, print, TV, etc.- et différents paramètres de médias –width, height, color, resolution, etc.
  • Utiliser des images fluides. La taille des images doit être ajustée, pour ne pas être supérieure à la largeur maximale de l'écran du terminal.

Pour décider quel style appliquer en fonction du type de média, il faut définir les largeurs qui nécessitent des styles différents. Par exemple, www.time.com utilise plus de 40 styles associés à différentes media queries. On peut les voir grâce à l'extension Chrome Responsive Inspector. Grâce à tous ces styles, le contenu de time.com se réorganise dans le navigateur sur les différents terminaux pour permettre une navigation sans défilement horizontal.

Selon Walker, faire du RWD nécessite également :

  • Optimiser les images pour différents terminaux et différentes vitesses de connexion
  • Modifier les modes de navigation pour des interfaces mobiles
  • Modifier le style des liens et boutons pour être mieux adapté au tactile
  • Redimensionner dynamiquement les polices pour mieux fonctionner sur différentes résolutions d'écrans
  • Charger le contenu en fonction du besoin, sans le cacher de l'écran
  • Fournir des versions retina des images

Walker explique aussi comment créer des sites web adaptatifs avec Foundation, un framework open source orienté design adaptatif. Une autre solution est d'utiliser Bootstrap, un framework initialement développé par Twitter.

Bonjour étranger!

Vous devez créer un compte InfoQ ou cliquez sur pour déposer des commentaires. Mais il y a bien d'autres avantages à s'enregistrer.

Tirez le meilleur d'InfoQ

Donnez-nous votre avis

Html autorisé: a,b,br,blockquote,i,li,pre,u,ul,p

M'envoyer un email pour toute réponse à l'un de mes messages dans ce sujet
Commentaires de la Communauté

Html autorisé: a,b,br,blockquote,i,li,pre,u,ul,p

M'envoyer un email pour toute réponse à l'un de mes messages dans ce sujet

Html autorisé: a,b,br,blockquote,i,li,pre,u,ul,p

M'envoyer un email pour toute réponse à l'un de mes messages dans ce sujet

Discuter

Contenu Éducatif

Rien ne serait possible sans le soutien et la confiance de nos Sponsors Fondateurs:

AppDynamics   CloudBees   Microsoft   Zenika
Feedback Général
Bugs
Publicité
Éditorial
InfoQ.com et tous les contenus sont copyright © 2006-2014 C4Media Inc. InfoQ.com est hébergé chez Contegix, le meilleur ISP avec lequel nous ayons travaillé.
Politique de confidentialité
BT