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.