Vous avez sûrement déjà navigué de nombreuses fois sur votre smartphone. Les sites internet ne s’adaptent pas toujours aux écrans. Ça vous énerve et moi aussi. Je vais vous expliquer ce que les informaticiens ou vous (peut-être) auriez dû penser.
 |
Diverses tailles d'écran
Auteur: Muhammad Rafizeldi
|
Le marché mondial
Sur le marché mondial, il existe une multitude de tailles d’écran. Cela va de la télévision (eh oui certaine personne navigue sur leur télé) jusqu'au smartphone. Je sais que la minorité aimerait que je parle de l’adaptation du design sur votre bel écran plat. Malheureusement, enfin heureusement, je ne dispose pas de cette fonction, mais je possède bel et bien un smartphone. Saviez-vous d’ailleurs que 78% des Suisses âgés entre 15 et 74 ans possède un smartphone en 2016. Donc pensez à la masse de personnes qui surfent sur les sites avec un téléphone portable. C’est énorme.
 |
Graphique montrant la répartition des smartphones dans les âges
Auteur: Comparis.ch |
Pourquoi s'adapter
Je vais prendre mon cas. En règle générale, si le design n'est pas adapté à l’écran de mon smartphone, je passe ma route. Je n’aime pas et je n'ai pas envie de naviguer de gauche à droite pour lire le contenu. C'est dérangeant et le pire c'est que ça existe encore. J’espère que vous ne me contredirez pas. Pour illustrer mes propos, je vous mets deux captures d'écran d’online shop que j’ai prises sur mon smartphone.
 |
| Deux captures d'écrans d'online shop Gauche: probikeshop.ch, Droite canyon.com Auteur: Peter |
Maintenant c’est à vous. Du tac au tac, sur quel site achèteriez-vous un vélo ? C'est peut-être une mauvaise question, vous n’êtes surement pas à fond dans le vélo comme je le suis... Mais on peut clairement remarquer plusieurs choses. Sur l’image de droite, le design est sobre, simple, beau et surtout adapté à mon smartphone. Les boutons et le texte sont lisibles. L’image ne déborde pas. Sur l'image de gauche, je n’arrive pas à lire sans zoomer… le design est plus compliqué et surchargé. Dommage.
Comment s'adapter ?
C’est pour cela que les informaticiens ou vous-mêmes devez penser aux diverses tailles d’écran. Et pour gérer les cas, il existe deux moyens : faire un site mobile dédié ou faire un design qui s’adapte aux écrans (responsive design).
Un responsive design à un net avantage, il n’y a pas besoin de refaire un site, on adapte seulement le design. Et pour ça, la version 3 de CSS a de chouettes fonctions (les Media Queries). Pour faire simple, cette fonction permet de limiter l’impact des lignes CSS par rapport à la largeur, la hauteur ou la couleur de l’affichage. Et le tout, sans modifier le contenu, juste en adaptant le design. Dit comme ça, c’est une solution magique… Mais, l’adaptation du design est source de complexité. La deuxième solution, faire un site dédié, est relativement lourde. Car cela implique de réécrire votre site web. Je ne pense pas que cela vous enchante.
Pour conclure, je conseil l’utilisation, non je recommande l’utilisation du RESPONSIVE DESIGN. Bientôt, je ferai un article sur le responsive design pour vous l'expliquer en détail. Merci de nous avoir lu. Peter
Sources
www.comparis.ch , consulté en 2016
www.developer.mozilla.org , consulté en 2016
