Votre site est-il "Responsive"

Votre site est-il Adaptatif ?

Nous entendons de plus en plus parler de site "responsive".  Mais qu'est-ce que cela signifie ?

 

 

Passer du temps à créer le plus beau site du monde ne sert à rien s'il n'est pas lisible sur une grande majorité des écrans.

Déjà que quand nous parlons d'affichage de site à l'écran, et c'est encore plus vrai pour les sites "e-commerce", les résultats de l'affichage sont parfois surprenant selon que vous utilisiez un navigateur comme Internet Explorer, Mozilla Firefox, Safari, etc.

Images qui changent de tailles, polices de caractères différentes, alignement des textes totalement aléatoires, voire même des modules entiers qui disparaissent.

Mais ce sujet sera traité dans un autre post.

Ce qui nous occupe aujourd'hui est la compatibilité de l'affichage de votre site avec les différents "matériels".

Car de plus en plus votre site sera consulté au départ d'écrans de tailles différentes.
Je ne veux pas seulement dire ici la largeur de vos écrans PC (20, 23, 27 pouces..), mais également la "tenue" (horizontale - verticale) et la taille des terminaux portables.

Dans les grandes lignes on peut résumer les affichages actuels comme suit:

  • les écrans traditionnels, quasi toujours en mode "paysage"  (exemples: 1024x768 px, 1280x1024, 1440x900, 1920x1080)
  • les tablettes, qui sont utilisées parfois en mode portrait, parfois en mode paysage
  • les smartphones, que nous nous amusons à basculer sans-cesse de portrait en paysage.. et inverse

Mettre en production un site "responsive" (adaptatif) signifie simplement qu'il sera confortable à utiliser suffisamment lisible sur ces différents appareils, tant en mode portait que paysage.


Comment vérifier si votre site est "responsive" sans devoir vous ruiner à acheter un appareil de chaque type, de chaque marque ?

Tout simplement en le testant.
Et pour ce faire, je vous conseille fortement le site responsivetest.net  - Testing responsive web design in various situation

Il est très simple à manipuler.
Voici quelques exemples et explications, sur base de notre site www.askit.pro

 Responsive Ecran

  • A - Introduire l'URL du site que vous souhaitez tester
  • B - Cliquer sur l'icône qui représente le matériel à simuler (écran fixe, écran de portable, tablette, smartphone)
  • C - Vous pouvez utiliser cette touche "Rotate" pour passer de Paysage à Portait (et inverse)
  • D - Optionnellement, vous pouvez forcer les dimensions d'un écran (en pixels)

Votre site s'affiche, dans l'exemple ci-dessus, comme s'il était vu par un écran normal (fixe)

 

Un détail très intéressant, celui concernant le point "B" ci-dessus.
En effet, lorsque vous cliquez sur une icône, par exemple celle d'une tablette, un sous-menu s'affiche pour vous proposer les principales tablettes du marché (Apple, Samsung, Amazon...)

Responsive changement

 En un simple clic, vous pouvez simuler l'affichage de votre site sur une tablette Galaxy Tab 10.1 (ci-dessous)

Responsive Tablette Samsung galaxy tab 10.1

Vous constatez que le site répond bien, car tout est correctement centré, et le menu a été transformé pour être plus petit et répondre aux nouveaux standards des menus des tablettes et smartphones (représentés par ces 4 lignes horizontales)

Remarquez également que le texte sur fond bleu (Vous êtes une PME...) s'ajuste automatiquement en passant sur 2 lignes, que les miniatures des 4 derniers posts ont été réduites.

Poussons encore le test plus loin et simulons son affichage sur un Ipad 5, tenu verticalement.

Voici ce que cela donne (j'ai inclus 3 copies d'écrans dans l'image ci-dessous en bougeant l'ascenseur vertical)

Responsive sur Ipad 5 de Apple

Tout est parfaitement lisible.
Et si je clique sur un post (post = article), lui aussi s'affiche correctement.

Dans l'informatique, si votre projet atteint 90% de son objectif, soyez en satisfait.
Ne cherchez pas à atteindre la perfection, à vouloir absolument que tout soit à 100% parfait.
Cela vous prendrait énormément de temps, vous coûterait beaucoup d'argent.. pour un résultat qui ne changerait pas.

Pour bien vous montrer la différence, nous avons effectué le même test avec un site totalement différent et qui compte des centaines de milliers de clics par mois: marmiton.org.

J'espère qu'ils ne m'en voudront pas trop.
Car je suis un habitué de leur site que je trouve très intéressant (sur PC) :)

Voici la page d'accueil "recettes" du site.

Recettes de Marmiton.org

Vous pouvez y remplir les 6 cases (fond blanc) pour effectuer des recherches de recettes avec tel ou tel ingrédient.
Très utile si vous n'avez pas d'idée et que vous y encodez ce qu'il vous reste dans votre frigo.

Mais, dans votre cuisine, avez-vous un PC ?

Probablement que non.
Mais bien votre smartphone.

Voyons ce que donne cet affichage sur Ipad 5.

Recettes marmiton sur Ipad

Vous constaterez facilement...

  • qu'une fenêtre popup (en blanc) vient s'afficher en premier plan, rendant le fond de l'écran invisible,
  • que vous ne savez pas accéder aux recherches,
  • que tout l'écran est coupé: il faut utiliser l'ascenseur horizontal (du dessous) pour voir la partie droite du moteur de recherches
  • si vous affichez une recette en détail, vous ne voyez jamais l'image ni le texte en entier...

Bref... un exemple à ne pas suivre.

Mais je suis certain que les informaticiens de Marmiton mettent les bouchées doubles (fun) pour améliorer cela et rendre ma comparaison totalement obsolète.

 

Si vous faites développer une boutique e-commerce, si votre site doit faire peau-neuve... pensez à l'adaptabilité.
Pensez à le rendre "responsive".

 

Dernières News

Déclaration d'impôts belge, l'absurdité à tous les étages

3 juillet 2017
Déclaration d'impôts belge, l'absurdité à tous les étages

Quand l'état belge se fout de ses citoyens. Dans de nombreux pays, la simplification administrative permet au citoyent de progressivement tenter de s'accomoder des outils proposés par l'état. En Belgique,...

Yoast SEO pour WordPress

20 juin 2017
Yoast SEO pour WordPress

  Créer son blog en moins d'une heure.   (Bernard Eben - Editions Eyrolles)   L'extension Yoast SEO pour WordPress.   S’il est un sujet important pour un blog, c’est...

En e-commerce, ne pas tester peut vous côuter très cher.

20 novembre 2016
En e-commerce, ne pas tester peut vous côuter très cher.

Les nouvelles versions, les modules ne sont pas toujours fiables. Bien souvent, vous vous dites: "La nouvelle version de mon logiciel d'e-commerce est disponible, elle m'intéresse, vite installons-la !" Mais...

Un projet IT sans analyse vous coûte 4 à 5 fois plus cher

1 janvier 2016
Un projet IT sans analyse vous coûte 4 à 5 fois plus cher

L'informatique des grandes entreprises. Dans le monde des grandes entreprises, il est totalement inconcevable de débuter un nouveau projet informatique sans passer par une série de phases telles que l'analyse...

Impact d'un blog sur vos ventes.

19 novembre 2015
Impact d'un blog sur vos ventes.

L'article ci-dessous est extrait du châpitre 2 de mon nouveau livre "Comment créér un blog en moins d'une heure" (Eyrolles - 11/2015). L'impact d'un blog dépasse de plus en plus...

L'importance des images en e-commerce

25 octobre 2015
L'importance des images en e-commerce

  La frustration de l’achat en ligne. Essayez de vous remémorer votre dernière visite dans un magasin de vêtement. Un vrai, disposant d’une élégante vitrine, deux ou trois adorables vendeuses...

Créer son blog en moins d'une heure - Bernard Eben

27 août 2015
Créer son blog en moins d'une heure - Bernard Eben

Créer son blog en moins d'une heure. L'alimenter, l'améliorer, le promouvoir. (Bernard Eben - Editions Eyrolles) Introduction. L’objectif de cet ouvrage est de vous accompagner dans la création de votre...

Blog sous WordPress en support au nouveau livre sur les blogs

21 août 2015
Blog sous WordPress en support au nouveau livre sur les blogs

Créer son blog avec WordPress (manuel). Fin 2015 paraitra, aux éditions Eyrolles, mon nouveau livre « Créer son blog en moins d’une heure – L’alimenter, l’améliorer, le promouvoir ». Dans...

E-commerce, les 3 éléments incontournables pour réussir.

17 mai 2015
E-commerce, les 3 éléments incontournables pour réussir.

La réussite n'est pas le fruit de l'approximation. Trop souvent les e-commerçants se plaignent de résultats qui ne sont pas à la hauteur de leurs espérances. Ils estiment avoir mis...

Votre page d'accueil est comparable à la guerre des restaurants de Top Chef.

11 mai 2015
Votre page d'accueil est comparable à la guerre des restaurants de Top Chef.

  Source et droits de cette image: Top Chef 2015  RTL et M6. L'ergonomie d'un site e-commerce est primordiale. Top Chef, la guerre des restaurants. Pour ceux qui ne connaissent...

E-commerce, la description produit qui vous fait gagner.

4 mai 2015
E-commerce, la description produit qui vous fait gagner.

  Mettez toutes les chances de votre côté. Il peut y avoir de multiples raisons pour lesquelles un site ne donne pas envie d'acheter. Dans un précédent article "E-Commerce, votre...

The Voice, ou comment une stratégie marketing pourrait influencer les résultats.

31 mars 2015
The Voice, ou comment une stratégie marketing pourrait influencer les résultats.

Des surprises étonnantes. Ce 30 mars 2015, l’émission « The Voice Belgique » nous a réservé quelques surprises étonnantes.Pour rappel, il s’agissait des premiers « live ». Pour chaque «...

Partenaire