Responsive web design : 7 articles et des outils
Le responsive web design (RWD) – se traduit par l’expression « design web adaptatif ». Un site web au design responsive est en principe adapté à tous types d’écrans : écrans d’ordinateurs de bureau comme aux écrans d’appareils mobiles – smartphones et tablettes tactiles quel que soit leur système d’exploitation.
Certains diront que c’est un sujet qui fait le buzz, rien de plus. D’autres comme moi s’attachent plutôt à des faits, plusieurs études prouvent en effet que depuis ces dernières années la démocratisation du mobile a un impact sur les visites des sites web. Il faut donc réagir, créer un design adaptatif et de qualité.
7 articles à ce sujet
Je propose aujourd’hui une sélection de quelques articles très récents et intéressants sur ce thème. La plupart des articles ont été publiés ce mois-ci et proviennent de blogs.
Le Web Design Responsive expliqué à tous
Tout d’abord qu’est-ce que ça signifie ? L’agence Axome nous propose une infographie – inspirée du site Dot Com Infoway. Axome explique que c’est une technique qui consiste à adapter le design et le contenu d’un site à plusieurs supports : ordinateur de bureau, portable, smartphone, tablette tactile. Axome ajoute qu’il vous permet d’éviter de créer une application pour chaque système ou plusieurs sites pour chaque écran.
Concevoir vos interfaces graphiques en flat design
Est-ce que le flat design est le style de design graphique qui s’adapte le mieux au design responsive ? Il est simple, minimaliste et contribue à la rapidité d’affichage des pages depuis le mobile. Après Microsoft, Google et Apple l’ont adopté. Comme le dit Usaddict dans son article le flat design n’est pas LA solution graphique. Les tests soumis à des utilisateurs permettent d’identifier quel est le style qui s’adapte le mieux à eux. Et il y a des règles à respecter – interaction, traitement de la couleur, l’aération, etc. Vous pouvez lire l’article de Usaddict qui parle de conception d’interface graphique en flat design.
Le RWD ou comment améliorer l’expérience utilisateur
Dans son article publié dans Le Cercle Les Echos Frédéric Ravetier, Directeur de projets Anyware Services (éditeur du CMS Ametys), souligne son importance en France. D’après une étude de Médiamétrie plus de 23 millions d’utilisateurs français ont déjà accédé à Internet via leur appareil mobile en 2012. Pour offrir une meilleure expérience utilisateur l’auteur indique que le design adapté aux mobiles est une solution de plus en plus plébiscitée en entreprise. Il y précise des avantages et des limites, notamment au niveau du développement du design.
Responsive Webdesign – présent et futur de l’adaptation mobile
Quelles sont les possibilités actuelles d’optimisation de sites web pour les mobiles ? Openweb en parle dans une longue traduction d’article publié par Stéphanie Walter, designer web et graphique, dans le fameux site Smashingmagazine.com. L’article s’intitule The state of responsive web design et il a été publié au mois de mai 2013. Quelle est la meilleure possibilité d’optimisation des images pour les sites mobiles ? Les images en JPEG progressif sont-elles mieux que les images JPEG classiques pour améliorer l’expérience utilisateur ? Quelle mise en page faut-il appliquer ? Quelle navigation RWD appliquer ? Faut-il transformer la navigation en listes déroulantes ? Dans cet article il y a des réponses pour aujourd’hui et pour demain. Le RWD est une technique qui se cherche encore, dans l’idéal il faut créer un contenu adapté à tous types de mobiles.
Étude : seulement 9% des sites web sont Responsive Web Design
Les sites web non optimisés pour les mobiles risquent de perdre des visites fait remarquer le site Referenceur.be. En effet, Icebreaker Consulting a déclaré que près de la moitié des mobinautes (40%) quitteraient un site web non optimisé pour le smartphone ou la tablette tactile. Aujourd’hui la part des entreprises qui optimisent leur site web pour les mobiles reste encore faible.
E-commerce et responsive design : l’état des lieux
Dans le blog de My Client is Rich l’auteur Ben Jung présente ses avantages au niveau du prix, de la maintenance, de l’expérience utilisateur et du référencement naturel (SEO). L’article fournit ensuite quelques astuces pour améliorer l’efficacité d’un site e-commerce adapté aux appareils mobiles.
Testez votre RWD design avec Firefox
Pas de mobile en main ? Pas de problème, vous pouvez utiliser le navigateur Firefox pour tester votre site web. Il suffit d’aller dans l’onglet Outils > Développeur web > Vue adaptive et le tour est joué. Firefox vous propose différentes tailles d’écran, c’est très bien fait. Merci à Jacques Monnard pour l’astuce publiée sur le blog du Centre NTE.
Des outils
Pour tester le design d’un site web vous pouvez aussi utiliser quelques outils en ligne comme Responsinator ou bien Screenfly de Quirktools.
Google a lancé un outil qui permet de créer des animations graphiques, des images engageantes et interactives – basées sur le HTML5 – et qui peuvent s’exécuter dans n’importe quel appareil mobile : https://www.google.com/webdesigner/
Voici un site web qui publie toutes les tailles d’écrans :
