Conseils pour réaliser son site en responsive design
Concevoir un site web capable de s'adapter à la volée à la taille de l'écran du terminal utilisé pour le consulter, que ce soit depuis un ordinateur de bureau, une tablette, un smartphone ou une télévision connectée. Tel est le défi du Responsive Web Design.
Voici les conseils dont vous avez besoin pour penser responsive.
- Restez simple: Les design trop élaborés, qui comportent une quantité superflue de JavaScript ou de Flash, ne font pas bon ménage avec les tablettes ou les smartphones. Appuyez-vous plutôt sur une base épurée, à partir d’HTML5, de feuilles de style facilement modifiables.
- Respectez les dimensions d’écran des utilisateurs: Utilisez les Media Queries pour que votre présentation s’adapte automatiquement à celle de l’écran.
- Soyez flexible: Le moyen le plus simple d’adapter sa présentation à tous les formats d’écran est d’utiliser des colonnes, qui peuvent s’agencer les unes par rapport aux autres. Pensez aussi que les utilisateurs de tablettes, comme de smartphones, peuvent tourner leur écran : vos colonnes doivent suivre le mouvement !
- N’oubliez pas les images: Les images aussi doivent se résoudre à se présenter dans un plus petit format. Il n’y a rien de plus désagréable pour un utilisateur que d’être obligé de scroller pour faire défiler l’intégralité d’une simple photo !
- Fixez des limites: Il faut que le design s’adapte à l’écran, mais ce n’est pas une raison pour étirer des colonnes de manière ridicule. Indiquez toujours des dimensions maximales et minimales pour chaque zone.
- Pensez relativité: Dans votre feuille de style, vous avez établi la police des caractères, la taille des photos, des blocs, avec une hiérarchie entre tous ces éléments. Il faut donc que ces différences se ressentent quelle que soit la présentation finale.
- Réfléchissez à la linéarité: Sur l’écran d’un ordinateur, vous disposez de nombreuses colonnes ou placer vos éléments. Sur un portable, ces colonnes s’aligneront les unes en dessous des autres. Pour éviter que le contenu le moins important apparaisse en haut de page, définissez dès le départ l’ordre des blocs, de manière linéaire.
- Allez à l’essentiel: Certains blocs n’auront d’ailleurs aucune raison d’apparaître dans un contexte mobile, car ils ne seront pas utilisés : faites-les disparaître.