Passer vous les tests de « responsive »?:
https://search.google.com/test/mobile-friendly?hl=fr
Et puis? Si la réponse est non, vous êtes à la bonne place.
Le « responsive » aujourd’hui, c’est primordial!
Depuis quelques années, le web a vécu un changement relativement subtil, mais très important. Nous sommes entré dans l’ère des sites réfléchis en mobile first, soit en pensant au version téléphones et tablette avant tout.
Le « responsive », ou les sites web adaptatifs de leur nom français peu utilisé, sont plus fluides dans leur manière de s’afficher dans des écrans de différentes tailles. Par exemple, un site web créer avec le « responsive » en tête fonctionne aussi bien sur un gros écran d’ordinateur de 7680 par 4320 pixels que sur un petit téléphone intelligent de 360 par 640 pixels.
Les gens utilisent de plus en plus leur téléphone pour aller sur internet et délaisse leur ordinateur de bureau. Le responsive est donc primordial pour avoir un bon site que les utilisateurs pourront utiliser confortablement en tout temps. En plus, Google place les sites bien responsive plus haut dans les recherche web!
Il y a plusieur manières de créer un site web « responsive » et plusieurs outils pour y arriver:
Utiliser une plateforme de création web
Les plateformes de création de sites web en ligne, tel que WordPress créent de base des sites presque 100% adaptatifs. C’est donc une bonne alternative simple à utiliser pour avoir un site web fait pour s’adapter à tous les écrans facilement.
Flexbox
Le flexbox peut être codé dans le css d’un site. Il sert à donner une direction, ou un comportement, à un élément du site qui sera effectué automatiquement lorsqu’il juge que l’écran n’est plus assez grand pour rester où il a été codé originalement. Les multiples paramètres qui peuvent être appliqués aux éléments ayant une classe ou un id utilisant un flexbox rendent cette manière de coder très performante.
Voici plus d’informations sur le sujet du flexbox:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/ (anglais)
Medias Queries
Les medias queries sont des indications personnalisées généralement placés dans un fichier css secondaire nommé responsive.css. Ils peuvent par contre êtres mis dans n’importe quelle feuille de style et tout-de-même fonctionner parfaitement, mais cela est une pratique moins organisée. Ils servent à donner des indications css précises à un élément quand la fenêtre de navigation est à une certaine grandeur choisies par le créateur du site. Personnellement, je conseils de donner au site un media querie par grandeurs de navigateur les plus utilisées au monde, et d’ajouter d’autres medias queries si nécessaire pour régler des détails hors de ces grandeurs. Ils peuvent également servir à réparer quelques bogues possibles du flexbox.
Voici plus d’informations sur le sujet du flexbox:
https://www.w3schools.com/csS/css3_mediaqueries_ex.asp (anglais)
Utiliser des grandeurs relatives
Les unités de grandeurs relatives (%, em, rem, ex, …) sont habituellement plus performants pour créer des sites « responsive » puisque les éléments changent de grandeurs selon la grandeur de la fenêtre de navigation utilisée. Ils peuvent être contrôlés par des maximums et des minimums de largeur (max-width / min-width) ou de hauteur (max-height / min-height) indiqués en grandeurs absolues (px, in, mm, …). Les grandeurs polices par exemple, sont par contre presque toujours absolues.
Voici plus d’informations sur le sujet du flexbox:
https://www.w3schools.com/css/css_units.asp (anglais)
Utiliser des positions et alignements relatifs
Il existe des codes css fait pour placer des éléments dans l’écran selon une certaine position pouvant être fixe peu importe comment la page est ouverte (« absolute ») et d’autres permettant aux éléments de se placer et de suivre le site automatiquement. Ces codes css étaient par contre déjà utilisés avant l’arrivée du « responsive » puisque les comportements des éléments les utilisant peuvent être codés différemment même dans une page complètement statique.
Voici plus d’informations sur le sujet des positions et alignements relatifs:
css position: https://www.w3schools.com/css/css_positioning.asp (anglais)
css float: https://www.w3schools.com/css/css_float.asp (anglais)
css inline block: https://www.w3schools.com/css/css_inline-block.asp (anglais)
css align: https://www.w3schools.com/css/css_align.asp (anglais)
Outils de développement des navigateurs
Les navigateurs web ont aujourd’hui des outils de développement intégrés qui sont très utiles à la création de sites adaptatifs. Ils permettent aux utilisateurs de l’outil de voir comment le navigateur exécute le code de son site, ainsi que tester des codes sans réellement changer le site.
Voici comment les ouvrir:
Chrome: Clic droit de la souris dans la fenêtre du navigateur web / inspecter
Firefox: Clic droit de la souris dans la fenêtre du navigateur web / examiner l’élément
Autres outils utiles
Voici un site vous donnant la grandeur exacte de votre navigateur web:
http://howbigismybrowser.com/ (anglais)
Voici un site vous donnant les pourcentages d’écrans les plus utilisés:
http://gs.statcounter.com/screen-resolution-stats (anglais)
Voici un outil google vous permettant de savoir si votre site est bien « responsive »:
https://search.google.com/test/mobile-friendly?hl=fr
Voici deux sites pour s’assurer de ne pas avoir d’erreurs dans son code:
html: https://validator.w3.org/#validate_by_upload (anglais)
css: https://jigsaw.w3.org/css-validator/#validate_by_upload
Êtes-vous prêt à utiliser votre site « responsive »?