Le responsive dans le web
L'activité d'un site web est constamment remise en question. C'est encore plus le cas depuis l'avènement du "mobile-first" et l'indexation des site-web par Google en 2021. La navigation sur smartphone devient donc un incontournable de sa présence sur le web.
Votre site internet doit être très facile à manipuler sur mobile
Si des éléments de votre site sont difficile à atteindre, c'est que votre site web n'est pas réfléchi en mobile-first. Pire, peut-être que certains éléments sont inaccessibles, voire que le site entier ressemble en tout point au site sur sa version écran de bureau (desktop) mais qu'il est tout petit sur un écran de téléphone. Alors votre site web n'est tout simplement pas responsif !
CSS responsive exemples
Le site web qui est responsive est donc réfléchi pour s'afficher d'abord correctement sur un plus petit écran.
Testez la navigation sur cet écran pour voir comment défile le site web de mon client urbanoe.fr sur un smartphone.
Comment rendre mon site responsive ?
Il n'y a aucune secret. Pour rendre un site web responsive, il faut connaître et manipuler le langage CSS en profondeur et intervenir sur la mise en page de certains éléments de contenus. C'est l'une des compétences de l'intégrateur web ou du développeur front-end.
Le principe des medias queries
Le principe est simple : vous définissez tout d'abord ce qu'on appelle des points de rupture. Ce sont les largeurs d'écran où un changement d'apaprence devra apparaître. Typiquement, ils correspondent aux différentes largeurs d'écrans : les écrans de bureau, les écrans de tablettes et les écrans de smartphones.
Par exemple :
.CSS styles.css
@media only screen and (max-width : 480px) {
/* ici le code css adapté aux mobile de - 480px de large */
}
Ici on dit que à partie des écrans de maximum 480px de largeur, alors les règles css suivantes entre en jeu.
Le mobile-first, qu'est ce que c'est ?
Concevoir un site web en "mobile-first", cela veut dire réfléchir l'apparence et la navigation de votre site internet pour petits écrans en priorité, puis l'adapter pour les écrans de bureau ensuite.
C'est tout le travail du métier de concepteur designer UI. Le concepteur designer conçoit le site web et rend l'interface agréable à visiter et à manipuler. On parle de designer UI, pour Designer user Interface.
Bien sûr, il est possible de partir de la version écran de bureau, pour aller vers une version mobile. Cela nécessitera aussi une petite refonte de vos contenus notamment en ce qui concerne leur mise en page.
Comment rendre mon site web mobile-first
Si votre site internet n'est pas encore adapté pour les écrans de petites tailles, les mobiles par exemple, il est encore temps d'agir. L'avantage d'un site web par rapport aux éléments imprimés, c'est sa maniabilité. Et oui ! Un site web est conçu pour vivre et reste modifiable selon les besoins spécifiques du moment, de la technologie, et/ou de l'actualité.
Modifions votre site web afin de le rendre responsive. Allons même jusqu'à concevoir une navigation et une apparence particulière pour les smartphones et les tablette.
L'impact du mobile-first sur le SEO
Première chose à savoir, Google crawle la version mobile de votre site web avant celle de la version desktop depuis 2016. Autrement dit, sans version mobile vous perdez du terrain dans le référencmeent sur les moteurs de recherche. Attention, il n'existe pas 2 indexation différente mais bien une seule. Une version responsive est donc indispensalbe pour tout site web.
Si votre site web est pensé mobile-first, vous proenez donc une longueur d'avance en terme de SEO.
