Les pièges du Responsive Web Design

Cet article a été publié il y a 8 ans 9 mois 27 jours, il est donc possible qu’il ne soit plus à jour. Les informations proposées sont donc peut-être expirées.

Avec Google qui a modifié son algorithme pour les recherches mobiles pour privilégier les sites « mobile-friendly », la tendance « Responsive » a le vent en poupe comme jamais. Étant en plein dedans pour la création du nouveau thème de mon application de collection (histoire de me débarrasser notamment de JavaScript), je suis tombé sur un article instructif sur la « mode » actuelle.

Une fois de plus, c’est une traduction. J’y peux rien, je trouve aucun article dans notre belle langue ou presque sur ce genre de sujets, à croire que les français soit ont la science infuse — et je dois pas être français –, soit les français sont trop cons pour partager leurs savoirs — et je dois pas être français non plus dans ce cas. Dernier cas possible, je sais pas chercher, mais là, bizarrement, j’ai des doutes.

Il y a bien plus dans le design responsive que des dispositions fluides et quelques « @media queries ». En fait le design responsive signifie une toute nouvelle façon d’approcher le web design. Voici quelques pièges à éviter pour votre prochain projet.

La taille des appareils

Ne restez pas centré sur les dimensions d’écran les plus courantes aujourd’hui. Elles changeront demain. Et puis encore le surlendemain. Pour créer un site porté vers le futur, ne vous focalisez pas sur les points de cassure où votre design change, mais sur ce qui se passe entre ces points.

Si vous optez pour une approche « mobile-first » vous pouvez commencer à construire votre interface pour le plus petit écran que vous comptez supporter. Puis simplement élargir la fenêtre du navigateur jusqu’à ce que le design s’écroule. Vous insérez un point de cassure à ce moment-là et corrigez les choses dans une @media query. Rincez, répétez.

Faites en sorte de fournir une expérience utilisateur optimale sur les tailles d’écran entre les plus populaires aujourd’hui et vous serez à peu près certain de satisfaire également les utilisateurs de demain.

La vitesse

Le responsive design tourne autour de l’excellence de l’expérience utilisateur pour les utilisateurs mobiles. Si votre site n’est pas rapide, peu importe que votre contenu s’affiche super bien sur un petit écran ou comment vos images s’adaptent, parce que personne ne restera pour le voir.

Rendez votre site rapide avant tout autre chose. Créez un « budget » performance et accrochez-vous à ça. Utilisez Webpagetest.org pour être sûr que votre site est rapide même sur de la 3G. Portez une attention particulière au « speed index » qui vous dit combien de temps ça prend pour que vos utilisateurs voient votre contenu.

Les images

Rien n’accélérera votre site plus que la réduction de la taille de vos images. Le nouvel élément HTML Picture sera supporté par plusieurs navigateurs plus tard dans l’année et en attendant il y a un polyfill sous la forme de PictureFill.

Je suggère d’utiliser PictureFill comme ça vous pourrez opérer la transition à <picture> de manière fluide quand ça plus largement supporté, mais il y a d’autres méthodes, commes les images adaptatives.

Une mécanique d’images responsive est obligatoire.

Ne cachez pas le contenu

C’est difficile d’afficher tout ce que l’utilisateur veut sur des petits écrans. Il peut être tentant de masquer quelques fonctionnalités sur les appareils mobiles – Surtout pas ! Vos visiteurs mobiles s’attendent à pouvoir faire tout ce dont ils ont besoin de faire. Ne les pénalisez pas juste par ce qu’ils utilisent un petit écran.

C’est ce qui rend le responsive design difficile – afficher tout ce dont les utilisateurs ont besoin sur un si petit espace est un challenge. Ne faites pas le pari de cacher des choses, analysez des UI bien établies pour trouver l’inspiration et faites plein de tests pour voir comment les utilisateurs interagissent avec votre site.

Ça demandera sûrement plus de travail, mais donner à vos utilisateurs ce qu’ils recherchent les convertira en clients contents.

Ne réinventez pas la roue

Le responsive design est déjà difficile, ne le rendez pas encore plus dur à tout réinventer. Si vous utilisez WordPress, partez d’une base solide avec un squelette responsive de TemplateMonster. Et pensez à lire les meilleurs conseils et quelques bibliothèques de motifs.

À propos de l’auteur : Scott Gilbertson est l’auteur de Build a Better Web with Responsive Design. Il écrit à propos de responsive design, HTML, CSS, et plus sur longhandpixels.net.

Pour information, l’article original se trouve à cette adresse. J’ai décidé de le partager parce que je suis en plein dedans pour le redesign de Collect. Et que j’éprouve beaucoup de difficultés…