Adapter son site aux mobiles : comment faire un bon Responsive Web Design ?

Article rédigé par CERA Interactive, le

Aujourd’hui, de plus en plus d’utilisateurs surfent sur le web par des moyens variés. L’enjeu majeur pour les créateurs de site, est d’adapter visuellement le contenu afin de faciliter l’expérience utilisateur, d’une part, mais aussi de favoriser le référencement d’autre part.




Article vu 1087 fois.




Naviguer sur le web depuis smartphones, tablettes, Smart TV, frigidaires... Ce n’est pas de la science-fiction, c’est la réalité de 2015. La configuration du travailleur cherchant une information sur internet depuis son PC de bureau est une image obsolète. Aujourd’hui, la « ménagère » cherche sa recette sur tablette depuis sa cuisine, les voyageurs cherchent leurs itinéraires depuis leur arrêt de bus, les fans de séries affichent les informations détaillées de leurs acteurs préférés sur leur TV connectée.

Construire un site, c’est avant tout penser aux personnes qui vont le consulter. Il est impossible en 2015 de se dire que les utilisateurs seront forcément assis bien sagement devant leur écran d’ordinateur.


Le web avant les smartphones

L’histoire des résolutions

Lorsqu’Internet a commencé à coloniser les foyers, la majorité des internautes avaient sensiblement une connexion assez lente (au regard de ce qui se fait aujourd’hui) et un écran d’ordinateur 4/3, avec une résolution standard de 800*600 ou bien 1024*768. Telles étaient les « normes ». Sur les sites des années 1998, vous trouverez d’ailleurs encore des mentions « optimisé pour une résolution 1024*768 ».

Lorsqu’on affiche ces sites sur un écran actuel, on constate que cela ne convient plus du tout, car ils se basent sur d’anciennes normes.

Aujourd’hui, les résolutions d’écran sont multiples. Que l’on parle d’écran 14 pouces, 15 pouces, 17 pouces... le problème va au-delà. En effet, il ne s’agit plus d’écrans 4/3, mais d’écrans 16/9èmes voire 16/10èmes. On constate alors que le ratio hauteur/largeur n’est plus du tout le même.


L’histoire des navigateurs

Un second point pour comprendre ce qui nous amène à la problématique d’aujourd’hui, concerne les navigateurs. Les navigateurs à l’origine du web grand public comptaient Internet Explorer, Netscape, AOL, mais tous fonctionnaient de manière à peu près similaire. En somme, les contenus internet disponibles rendaient un affichage correct, acceptable, lisible, quelle que soit la plateforme PC ou Macintosh.

Maintenant nous devons compter avec les principaux navigateurs : Internet Explorer toujours, mais aussi FireFox et Chrome qui se partagent la vedette, puis une multitude d’autres navigateurs qui se partagent le marché : Opéra, Safari, Iphone Safari, Android, BlackBerry, Symbian, Lynx ! Chacun ayant bien évidemment ses petites propriétés.


Les feuilles de style CSS

Nous en arrivons au cœur du problème : les feuilles de style CSS. Ces petits fichiers de code informatique sont intrinsèquement liés aux sites web. Si vous enlevez le style, la page web est affichée en texte brut. C’est totalement indigeste pour un utilisateur, mais ça ne change pas radicalement les choses pour les robots, quoique : nous verrons pourquoi c’est important en termes de référencement tout à l’heure.


feuille de style CSS
Facebook avec feuille de style CSS

sans feuille de style CSS
Facebook sans feuille de style CSS


Le CSS a aussi évolué par des normes successives : CSS2 puis CSS3, ajoutant des effets et des fonctionnalités de plus en plus puissantes. Ainsi, la mise en forme de style CSS ne se contente plus de mettre en page, de colorier une zone ou de souligner un texte : il est désormais possible uniquement en CSS d’animer une page (faire la rotation d’un élément, agrandir, rétrécir...), de remplir des zones avec des dégradés de couleur, d’ajouter des effets de perspective avec des ombres sur le texte ou les images... bref un cocktail d’effets plus impressionnants les uns que les autres.

Le rendu est évidemment sublime sur les navigateurs récents, mais totalement incompatible avec les anciennes configurations.


Le web pour les smartphones

Venons-en au fait. Le Responsive Web Design en quelques mots, consiste à rendre adaptable votre contenu à tout type de terminal, c’est-à-dire : s’affranchir des notions de navigateur et de taille d’écran. Votre site affiché sur un écran de PC aura l’air d’avoir été créé pour un ordinateur ; votre site sur un écran de tablette donnera l’impression d’avoir été fait pour tablette, votre site sur un écran de mobile donnera l’impression d’avoir été pensé pour les utilisateurs de mobile, etc.


Comment faire du Responsive Web Design ?


Méthode n°1 : fixer les tailles de site

Cette méthode consiste à mettre votre site dans un « bloc » d’une taille fixe de X pixels bien définis. Ainsi, le contenu est comme figé à 960 pixels par exemple, et seul le fond s’agrandit pour combler les trous. La méthode « taille fixe » revient à faire comme si le responsive web design n’existait pas. La conception du site ne change pas, et vous vous remettez entièrement à l’interprétation du terminal de l’utilisateur !


En termes de résultats
  • Sur un smartphone : le site apparait tout petit ou bien il est tronqué sur le côté droit
  • Sur un écran haute résolution (Smart TV HD) : le site apparait décentré, collé sur le côté gauche de l’écran, et entouré de « vide ».

Avantages
Facile, il n’y a rien à faire !

Inconvénients
Résultats totalement hasardeux


Faire attention à :
Ne pas être trop exigent sur le résultat...


Exemples
Site Ecran 4/3 1024*768 Smartphone Ecran TV
patrouille-shop sur un ecran de pc sur un ecran de portablesur un ecran de tv
limmomalin sur un ecran de pc sur un ecran de portable sur un ecran de tv
midobras sur un ecran de pc sur un ecran de portable sur un ecran de tv

Méthode n°2 : adapter le site en pourcents

La pratique est de dire en langage CSS que le contenu = 100% de l’écran. Ancienne technique loin des problématiques RWD actuelles, cela peut fonctionner si le graphisme du site n’a pas besoin d’être très « léché ».


En termes de résultats
  • Sur un smartphone : le texte prendra beaucoup plus de place en hauteur et les images seront décalées
  • Sur un écran haute résolution (Smart TV HD) : le texte apparaitra sur une ligne ou deux seulement. Il apparaîtra de nombreuses zones vides dans le contenu. Les images risquent d’être pixellisées et déformées.

Avantages
Facile, il n’y a rien à faire !

Inconvénients
Résultats esthétiquement hasardeux


Faire attention à :
Ne pas se préoccuper trop des utilisateurs de smartphones...


Exemples

Site Ecran 4/3 1024*768 Smartphone Ecran TV
avetco sur un ecran de pc sur un ecran de portable sur un ecran de tv
pharminterim sur un ecran de pc sur un ecran de portable sur un ecran de tv

Méthode n°3 : transformer les ordinateurs en smartphones

Pourquoi s’embêter ? puisque tout le monde est mobile aujourd’hui, autant développer un site qui aura la même apparence sur écran d’ordinateur que sur PC.


En termes de résultats
  • Sur un smartphone : le texte et les images seront impeccabless
  • Sur un écran haute résolution (Smart TV HD) : ou bien sur un écran standard, les boutons, textes et images auront l’air énorme, comme si on vous prenait pour un benêt qui ne sait pas viser un bouton.

Avantages
Facile, il n’y a rien à faire !

Inconvénients
Renvoie une image dégradante au bon père de famille


Faire attention à :
Ne pas se préoccuper trop des utilisateurs d’ordinateur traditionnel...


Exemples

Site Ecran 4/3 1024*768 Smartphone Ecran TV
getbootstrap sur un ecran de pc sur un ecran de portable sur un ecran de tv
bing sur un ecran de pc sur un ecran de portable sur un ecran de tv

Méthode n°4 : détecter le navigateur

Avec la méthode PHP $_SERVER['HTTP_USER_AGENT']; il est possible de savoir sur quel navigateur se trouve votre utilisateur. Si le nom du navigateur contient iphone, android, blackberry, etc, il est alors facile d’ordonner au site de charger une feuille de style CSS « mobile.css ». Si le navigateur ne contient pas ces termes, alors on chargera la feuille de style « standard.css ». La feuille CSS mobile pourra contenir des dimensions en pourcentage et des tailles de textes en EM plutôt qu’en pixels, toutes ces petites astuces pour rendre la navigation agréable quel que soit le support.

Avec cette méthode, qui se passe en amont de la construction de la page sur l’ écran de l’utilisateur, on peut aussi déterminer des règles, notamment en terme de chargement de scripts ou des images de taille différentes.


En termes de résultats
  • Sur un smartphone : le résultat est comme vous l’avez demandé, si vous avez correctement codé l’affaire.
  • Sur un écran haute résolution (Smart TV HD) : idem

Avantages
Le résultat est impeccable à condition de savoir coder correctement

Inconvénients
Un peu long à mettre en place ; risque d’omettre certains navigateurs


Faire attention à :
Tester correctement sur différentes plateformes, car on ne peut évidemment pas tester avec un navigateur PC standard...


Exemples
Site Ecran 4/3 1024*768 Smartphone Ecran TV
igorlaszlo sur un ecran de pc sur un ecran de portable sur un ecran de tv

(Variante de détection de navigateur avec Javascript et non PHP)


Méthode n°5 : baliser le site pour les périphériques mobiles

Décréter d’office que le site doit passer partout et coder en fonction son CSS et son HTML.

La balise <meta name="viewport" content="width=450, initial-scale=1.0"> sera obligatoirement présente, et dans le CSS seront déjà prévu des media queries .

Les media queries sont des styles CSS qui redéfinissent les styles CSS initiaux en fonction de critères spécifiques. Par exemple :

@media only screen and (max-width:780px) {
  body{margin:0px; font-size:1em}
 #header{min-width:auto;}
 #section{min-width:auto;}}

Ici, les styles body, #header et #section sont redéfinis si l’écran a une taille inférieure à 780 pixels de large.


En termes de résultats
  • Sur un smartphone : le résultat est comme vous l’avez demandé, si vous avez correctement codé vos media-queries.
  • Sur un écran haute résolution (Smart TV HD) : idem

Avantages
Le résultat est impeccable à condition de savoir coder correctement

Inconvénients
Difficulté de trouver un joli compromis en fonction de toutes les tailles existantes
Ne permet pas l’ajout ou le retrait de fonctionnalités spécifiques


Faire attention à :
Tester en changeant la taille de votre fenêtre de navigateur et en changeant le zoom afin de bien voir toutes les configurations possibles. Il faudra parfois réécrire les styles CSS avec l’attribut !important pour que la règle prenne bien effet.


Exemples
Site Ecran 4/3 1024*768 Smartphone Ecran TV
uvm sur un ecran de pc sur un ecran de portable sur un ecran de tv
tasef sur un ecran de pc sur un ecran de portable sur un ecran de tv

Méthode n°6 : utiliser un plug-in magique

Modernizr, Bootstrap... ces outils se basent généralement sur des technologies alliant Script (javascript, jquery) et CSS ; c’est-à-dire que ces plugs-in vont être rajoutés, inclus sur toutes vos pages, pour calculer en temps réel quelle est la taille de l’écran de l’internaute et afficher une version différente de votre site. Le système fonctionne quasiment tout seul : copier, coller, hop c’est fini. Le travail est encore plus simple lorsqu’il s’agit d’activer ces modules sur une plateforme de type wordpress ou drupal par exemple.

Au chargement de la page, Modernizr parcourt les données de l’utilisateur pour détecter caractéristiques; Il crée ensuite un objet JavaScript avec les résultats, et ajoute des classes CSS spécifiques à l'élément HTML. Modernizr se base sur plusieurs ressources externes .js et .css avec un chargement conditionnel.

Bootstrap est un Framework CSS se basant sur un système de colonnes, orienté application web initialement prévu pour les développeurs qui n’ont aucune idée d’esthétique. Au fil des utilisations, il a été détourné au profit de webdesigners peu scrupuleux ne voulant plus se casser la tête et faire du des sites plus rapidement (donc plus rentables).


En termes de résultats
  • Sur un smartphone : efficacité redoutable mais navigation ralentie
  • Sur un écran haute résolution (Smart TV HD) : pas de changement.

Avantages
Facile rapide et pas cher !

Inconvénients
Lourd en poids même avec un CSS minifié ; gourmand en ressources ; sale en terme de code HTML. Difficile à customiser


Faire attention à :
Ne pas rendre un travail trop propre, le client risquerait de voir la différence...


Exemples
Site Ecran 4/3 1024*768 Smartphone Ecran TV
gsuez sur un ecran de pc sur un ecran de portable sur un ecran de tv
hotelaanbiedingen sur un ecran de pc sur un ecran de portable sur un ecran de tv

Méthode n°7 : développer un deuxième site pour mobile ou une web app

Fureur des débuts de la mobilité web, le développement de sites mobiles ou d’applications mobiles consiste à créer une deuxième plateforme totalement différente de la première. C’est oublier les personnes qui ne savent pas télécharger des applications et faire une croix sur certaines fonctionnalités pour en ajouter d’autres, spécifiquement mobiles (géolocalisation, mouvement...) . Il s’agit plus d’une extension de site, totalement différente du site original.


En termes de résultats
  • Sur un smartphone : efficace, nouvelles fonctionnalités
  • Sur un écran haute résolution (Smart TV HD) : pas de changement.

Avantages
Tout est nickel sur smartphone, et même plus !

Inconvénients
Risque de perdre un certain public ; ne prend pas en compte la navigation TV


Faire attention à :
Ne pas restreindre trop la cible des utilisateurs.


Exemples
Site Ecran 4/3 1024*768 Smartphone Ecran TV
facebook sur un ecran de pc sur un ecran de portable sur un ecran de tv


Certaines méthodes peuvent être combinées pour optimiser les résultats.

Vous l’aurez compris, il existe de nombreuses méthodes pour adapter ses sites aux écrans et périphériques des utilisateurs finaux. Certains prétendent faire du Responsive Web Design qui n'en n'est pas, qui d’apparente plutôt à de la rustine collée de manière hasardeuse sur un code qui n’est pas vraiment prévu pour cela à la base.

La meilleure méthode pour faire un bon RWD est donc celle qui donnera le meilleur aspect visuel, confortable pour l’utilisateur : navigation et fonctionnalités, tout en restant optimisée en temps de chargement.


Comment tester l’efficacité de son Responsive Web Design ?

De nombreux outils sur le net permettent d’émuler, c’est-à-dire de simuler, la navigation sur un téléphone portable ou sur un autre écran. Ces outils ne sont pas toujours fiables ou performants, et peuvent réserver de mauvaises surprises.

NB : Les captures d’écran présentées ci-dessus, pour des raisons techniques, ont été effectuées en émulation. Il se peut qu’elles ne représentent pas fidèlement la réalité.


La meilleure méthode consiste à tester en cas concret, c’est-à-dire à afficher votre site sur :

PC
Mac

Safari
Chrome
Firefox
Internet Explorer

Ecran 15 pouces
Ecran 20 pouces*
...

Smart TV

 

Ecran 94 cm
Ecran 119 cm
...

Smartphone

Android
Apple IOS

Ecran de 3.8 à 6 pouces

Tablette

Android
Apple IOS

Ecran de 7 pouces à 12 pouces


Certaines agences web poussent leurs tests jusqu’à tester la navigation avec les X dernières versions de Internet Explorer, les X dernières versions de Chrome, sur les X dernières versions de Windows. Déjà, pour un ordinateur, les tests sont extrêmement nombreux.

Si vous avez effectué tous ces tests, vous avez couvert la majorité de vos utilisateurs !


En quoi le Responsive Web Design favorise le référencement ?

En soi, le design n’a rien à voir avec le référencement. Cependant, il est important de ne pas être tout à fait catégorique sur ce point.

En effet, les robots des moteurs de recherche, qui indexent les sites dans les résultats, se fichent pas mal que le fond de votre page soit vert ou bleu. Ceci dit, ils commencent à prendre en compte la présence ou non des éléments, ainsi que leur position dans le code.

Si vous adaptez votre site pour tous les utilisateurs, vous aurez forcément plus de visiteurs et ils passeront plus de temps à consulter votre site. D’autre part, Google est capable aujourd’hui, de détecter si votre site est adapté mobile ou pas (taille des boutons de navigation adaptés à la taille des doigts : au moins 35px, texte écrit plus gros, etc...). Si votre site est « mobile friendly », le moteur de recherche vous mettra en avant dans ses résultats de recherche lorsqu’un internaute effectue une recherche depuis son téléphone.

De fil en aiguille, votre positionnement remonte grâce au retour indirect du Responsive Web Design par rapport à vos utilisateurs.

Sources


Article rédigé par Emilie C.
Adapter son site aux mobiles : comment faire un bon Responsive Web Design ?

Réagir ?

Envoyez-nous vos réactions et commentaires via notre page Contact !


Dernières actualités...

Référencement : l’influence des réseaux sociauxJouer à Pokemon Go : c'est possible en France !STRASBOURG : Les endroits où se rendre pour la fête de la musique (2016) ECONOMIE - Un souffle de crise dans les CHR

En direct



Avis aux webmasters

rose d'or

Vous pouvez recopier cet article sur votre site en indiquant que la source vient de CERA Interactive, par exemple en faisant un lien de la manière suivante :

<p> Article <a href="http://www.cera-interactive.fr"> CERA Interactive </a> : <a href="http://www.cera-interactive.fr/cera-strasbourg/actu-web_150410-responsive-web-design"> Adapter son site aux mobiles : comment faire un bon Responsive Web Design ? </a> </p>


⇐ Retour aux actualités CERA Interactive
illustration de l'article CERA

Adapter son site aux mobiles : comment faire un bon Responsive Web Design ?

Des questions à ce sujet ?

Contactez-nous ! rose d'or

Vous aimez cette page ? Partagez-la sur les réseaux sociaux !




Copyright© 2010-2018 CERA Interactive - Tous droits réservés.