Pour répondre aux besoins des utilisateurs finaux, les concepteurs et les développeurs modifient leurs stratégies pour offrir une meilleure expérience à tous.
Désormais, même si vous surfez sur le web sur votre téléphone ou votre tablette (ou les deux), le contenu reste net et facile à lire. Il existe de nombreux conseils pour commencer votre voyage vers le responsive design, mais nous avons décidé de réduire ces conseils à quelques points fondamentaux, ainsi que les pièges courants du responsive design et comment les éviter.
Les bases du Responsive Design
Commencez par un modèle existant : Au lieu de partir de zéro, gagnez du temps et utilisez un modèle ou une mise en page HTML5 ou CSS3 existante comme base de votre site. Cela vous permet de vous lancer directement dans le processus de conception réactive sans perdre de temps à faire en sorte que le site se charge correctement.
De plus, si vous avez un client qui demande quelque chose qui dépasse le cadre de ce qui est possible dans un cadre réactif, vous pouvez facilement expliquer pourquoi (et montrer où) vous vous écartez de sa demande.
La conception réactive commence par la fenêtre d’affichage. Il s’agit de la fenêtre du navigateur, et le fait de la définir à une taille spécifique affectera l’affichage de chaque page de votre site réactif. Si vous souhaitez concevoir un site pour les appareils mobiles, réglez-le sur 480 x 800 px. Pour les tablettes, réglez-la sur 768 x 1024 px. Pour les ordinateurs de bureau et les ordinateurs portables, le paramètre par défaut de 1024 x 768 px est généralement le plus approprié.
Utilisez les requêtes média : Les requêtes média sont des déclarations conditionnelles CSS3 qui vous permettent d’indiquer à un navigateur Web comment et quand appliquer les styles CSS en fonction de certaines conditions ou événements.
Dans le cas présent, nous utilisons les media queries pour demander au navigateur d’afficher une feuille de style spécifique en fonction de la taille de la zone d’affichage du navigateur. Cela nous permettra de développer une seule feuille de style qui sera utilisée par tous les navigateurs.
Ne vous fiez pas aux feuilles de style CSS spécifiques aux appareils : Évitez autant que possible d’utiliser les CSS spécifiques aux appareils. Avec l’avènement du responsive web design, il n’est plus nécessaire de styliser les éléments avec des propriétés spécifiques aux appareils et souvent ces propriétés causent plus de problèmes qu’elles n’en résolvent.
Si certaines propriétés peuvent encore être utiles, évitez les unités absolues (comme px et pt) pour le dimensionnement des éléments. Utilisez plutôt des unités relatives comme em ou rem ; il est ainsi plus facile d’adapter votre conception si vous décidez de modifier les tailles d’affichage ultérieurement.
Utilisez « min-width » et « max-width ». Il s’agit d’un autre moyen de spécifier la taille exacte de la fenêtre d’affichage. Par exemple, vous pouvez utiliser « min-width : 600px ; max-width : 800px ; » pour définir une plage min et max pour le viewport :
Évitez les positionnements fixes : En responsive design, il n’y a qu’une seule mise en page, évitez donc d’utiliser des éléments à positionnement fixe car ils apparaîtront à des endroits différents sur différents appareils.
Utilisez des images pour la fixation de l’arrière-plan : Si vous modifiez l’attachement d’arrière-plan d’un élément, celui-ci peut se comporter différemment sur différents appareils. Par exemple, en remplaçant background-attachment:fixed par background-attachment:scroll, l’élément s’étire et remplit toute la zone d’affichage du navigateur sur un appareil mobile.
Utilisez toujours un clearfix ou un positionnement relatif si vous appliquez un positionnement fixe : Si vous avez un élément fixe qui doit être redimensionné, alors vous devriez toujours utiliser mettre une marge supplémentaire (ou encore mieux, toutes) autour de lui. De cette façon, vous saurez toujours exactement où va le contenu, car il y aura toujours de l’espace en dehors de ses limites réelles.
Évitez les tableaux pour la mise en page, utilisez des divs et des spans pour la mise en page : Une bonne façon d’éviter le rafraîchissement des tableaux est d’utiliser des divs ou des spans pour la mise en page, puis de ne placer vos lignes qu’à l’intérieur de ceux-ci. Vous disposerez ainsi d’un seul document HTML qui servira de base à l’ensemble de votre conception réactive.
Utilisez les transitions CSS3 : La propriété de transition vous permet de modifier en douceur l’état d’un élément entre deux états. Par exemple, un effet de fondu peut être utilisé pour faire apparaître ou disparaître des éléments lorsqu’ils défilent à l’écran, tandis que les animations peuvent animer un élément lorsqu’il sort de l’écran.
Utilisez plusieurs points d’arrêt : Maintenant que votre contenu est adapté à la fenêtre d’un certain appareil, envisagez de créer plus d’un point d’arrêt pour votre conception. Par exemple, si vous avez un panier d’achat, vous devez vous assurer qu’il tiendra sur l’écran d’un iPhone.
Parlez aux gens, pas aux appareils : Restez fidèle à la règle générale de dimensionnement du responsive design : « le contenu d’abord, la conception ensuite. » Si les gens ne peuvent pas lire votre contenu parce qu’il est trop petit ou trop grand, ils auront du mal à naviguer sur votre site et seront donc moins incités à y rester.
Prévoyez l’écran par défaut : Le responsive design ne concerne pas seulement la taille de votre écran. Si vous avez affaire à un ordinateur portable ou à un écran de bureau haut de gamme (comme sur un Macbook Pro), vous devez être sûr que votre site fonctionnera correctement et sera beau. Ainsi, lorsque vous planifiez l’écran par défaut, assurez-vous qu’il mesure au moins 1 280 x 800 px, mais vous pouvez même aller jusqu’à 1 920 x 1 200 px si vous le souhaitez.
Choisissez les images et les vidéos en fonction de la prise en charge par le navigateur : La plupart des sites réactifs utilisent des requêtes multimédias dans leurs fichiers CSS afin de permuter dans un HTML différent selon que certains styles CSS sont pris en charge ou non par un navigateur. Donc, avant de vous approcher de votre fichier CSS pour commencer à ajouter des requêtes média et différents styles, jouez avec différents navigateurs (comme Safari et Firefox) et voyez si tout semble correct.
Il existe de nombreux autres conseils, mais ceux-ci devraient vous aider à démarrer. Consultez également le document Responsive Design of The Future pour en savoir plus sur la manière dont Google contribue à faciliter l’affichage des sites Web sur toutes les tailles d’écran.
L’essor du design réactif dans l’entreprise
Même si le responsive web design est un sujet d’actualité depuis de nombreuses années, il n’est populaire que chez les consommateurs. Par conséquent, la majorité des dirigeants d’entreprise et des services informatiques ne sont pas conscients des avantages que peut leur apporter le responsive design.
Cependant, ils n’ont pas besoin d’en savoir beaucoup ; ils ont juste besoin de savoir que leur entreprise le fait et que leur site Web fonctionnera automatiquement sur une gamme de plus en plus large d’appareils.
En d’autres termes, les entreprises peuvent réussir en faisant simplement ce que tout le monde fait. Cela ne veut pas dire que l’entreprise ne doit pas essayer de profiter des avantages du RWD si cela a du sens. Cela signifie simplement que les entreprises peuvent avoir une très bonne base pour le RWD sans apporter trop de changements à la façon dont elles font des affaires aujourd’hui.
Nous espérons que ces ressources vous serviront de tremplin pour vos propres projets de responsive design !
