Avoir un site web mobile avec le webdesign responsive

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.

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.

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 ».