Nous créons & référençons votre site internet
pour seulement 39,00 HT/mois

Avoir un site web mobile avec le webdesign responsive

Lorsque l'on navigue sur son smartphone ou sur sa tablette et que l'on cherche un site web, il arrive que : soit l'affichage ne soit pas optimal, soit qu'il y est simplement un refus d'affichage. Ceci provient de l'architecture web design de la page et par conséquent du site web, qui a été prévu pour un affichage sur moniteur de grande taille en format large (paysage ou à l'italienne). Pour contourner cet écueil et faire apparaître correctement le site web sur mobile, il existe deux solutions. La première consiste à créer deux voire trois sites web différents adaptés aux diverses conditions d'affichage. C'est une solution lourde et chère à créer et à gérer. Elle optimise l'affichage mais est très mal « vue » par les moteurs de recherche, à commencer par Google. En effet ceux-ci n'aiment pas voir les mêmes contenus sous deux (ou plus) adresses IP. La seconde consiste à créer une « enveloppe » de contenu réactif (responsive en anglais) à la taille et à la position de l'écran. Cela est possible grâce à trois éléments.

  • Les médias quéries (sorte de moteurs intelligents) qui vont identifier la nature du terminal, et commander le choix de l'affichage.
  • Les feuilles de style CSS qui organisent l'affichage dynamique en fonction de la taille et du positionnement du terminal (vertical ou horizontal).
  • Enfin les points de rupture (taille en pixels ou en pourcentages) qui font basculer l'affichage grâce aux différentes CSS.
Le responsive web design est donc la solution qui a été adoptée majoritairement pour adapter les sites web sur mobile ou sur les autres différents terminaux.


La navigation sur mobile révolutionne les habitudes web

Sans rentrer dans les statistiques, il suffit de regarder autour de soi pour constater l'usage permanent qui est fait des terminaux mobiles pour naviguer sur internet. Dans les transports, en voiture, au café... une question que l'on se pose, une information que l'on entend, une envie soudaine d'achat... et c'est vers son smartphone ou sa tablette que l'on se tourne, c'est pour cela que posséder un site internet responsive design est devenu une obligation pour les entreprises. Pourtant lorsque l'on est chez soi ou au bureau, l'affichage sur grand écran (ordinateur HD, voire télévision 4 K) est privilégier pour la navigation, les achats ou le visionnage des vidéos.

D'autre part, et nous n'en sommes qu'aux débuts, le règne des objets connectés a commencé, avec obligatoirement des écrans des multiples tailles et positionnements (de la montre, à l'affichage mural), de définitions toujours plus poussées, et aussi progressivement la mise à disposition de bandes passantes qui se rapprochent de celles de l'internet fixe. Tous ces paramètres imposent aux webdesigners de trouver des solutions qui conjuguent l'affichage multi formats, la légèreté du code et la non-duplication de contenus sur deux ou trois adresses IP. L'adaptabilité des sites web sur mobile également appelée responsive web design est la solution la plus pertinente qui conjugue tous ces éléments pour relever le défi. C'est le choix qu'ont fait de nombreux éditeurs de sites, à l'image de Viaduc dont l'ensemble des créations web répondent aux normes responsives.


S'adapter à ces changements grâce au responsive design

Depuis le début d'internet, de nombreuses évolutions sont intervenues qui ont obligé les webdesigners, à trouver de nouveaux outils et techniques, pour adapter les sites web : sites dynamiques (PHP et bases de données MySQL,...), CSS et maintenant le design responsive pour les smartphones et tablettes. Comme il a été indiqué plus haut ce dernier, moyennant l'ajout de quelques lignes de code supplémentaires, permet de positionner et de dimensionner le contenu des pages (les blocs) en fonction des caractéristiques d'affichage du terminal. Il est à noter aussi que, toujours moyennant quelques lignes de code, il est possible de supprimer ou faire apparaitre des éléments tels que les menus en fonction de la place disponible.

Concrètement le responsive design consiste à créer trois ou quatre maquettes de présentation en CSS (le design), chacune adaptée à une plage de format d'affichage. Puis d'indiquer avec du code (le responsive) les différentes corrections à faire pour que les éléments s'ordonnent sur l'écran, après que les medias queries aient détectées les caractéristiques du terminal. À ce niveau se pose un problème concernant le poids des éléments (photos, vidéos, animations) qui vont être envoyés vers les mobiles, car la bande passante en 3 G n'est pas encore suffisante pour afficher rapidement des éléments prévus pour ordinateurs. Aussi a-t-on trouvé une parade avec le « mobile first » ou mobile en premier.


Les deux grands principes des sites mobiles

Avec l'apparition des affichages sur mobile, la plupart des webdesigners ont pensé le responsive du plus grand vers le plus petit, technique connue sous le nom de dégradation (l'on construit un site pour un affichage normal qui est ensuite réduit pour les mobiles). Le gros inconvénient de cette solution (de facilité ?), est que les médias quéries téléchargent d'abord la version grand format, puis celle destinée au portable. D'où rallongement des délais et création de nombreuses « scories », qui encombrent les mémoires des smartphones et tablettes déjà passablement encombrées. L'autre solution est de penser du plus petit vers le plus grand. C'est le principe du « mobile first ». Dans ce cas les medias queries ne téléchargeront que les éléments prévus pour l'affichage en taille réduite, avec pour corolaire un gain de temps appréciable et un téléchargement « propre ». Lorsque l'on possède déjà un site web normal et que l'on souhaite passer en responsive, il est tout à fait possible de l'adapter. Mais cela occasionnera bien souvent des petits bugs d'affichage et des problèmes supplémentaires dans la gestion du site. La meilleure solution est de repartir du matériel brut (le contenu) et de construire le site web en « mobile first ».