Le responsive webdesign, le pourquoi de son succès et son avenir
Responsive design, design adaptive ou fluide, mobile first… les professionnels du web proposent beaucoup de techniques différentes afin d’adapter votre site internet aux mobiles, smartphones ou tablettes. Nous allons nous intéresser au “responsive” au sens large, rappelant les différentes techniques mises en oeuvre pour adapter votre site, pour finir sur cette nécessité d’aller plus loin et de s’adapter à nouveaux supports… SUSPENS !!!
Reprenons du début :
Qu’est ce que le responsive ?
Le responsive est un adjectif qualifiant un site ou une application informatique qui suggère que les objets qui le composent (images, textes…) s’adaptent à tous type de supports (ordinateur, tablette ou mobile), aussi bien dans la taille que la mise en page.
La définition officielle de “responsive” : Qualifie en anglais un site, une application ou un outil informatique dont le code répond à des normes lui permettant d’être adapté à tous types de supports (PC, tablettes, mobiles). Ainsi la taille des objets (photographies, textes, éléments visuels…) s’adapte à la taille de l’écran où ils sont visibles.
Source : https://www.linternaute.fr/dictionnaire/fr/definition/responsive/
Chez Bewizyu, nous accordons cette définition avec un peu plus d’exigences, un site responsive doit être facile d’utilisation, quelque soit la plateforme utilisée et surtout ERGONOMIQUE !
Pourquoi et comment rendre son site internet responsive ?
Nous n’allons tout de même pas vous faire l’affront de vous donner les raisons pour lesquelles il FAUT que votre site internet soit responsive… SI ? Bon, allez juste quelques petits rappels alors…
- Le pourquoi
Premièrement, il peut être compliqué de consulter un site internet classique sur un mobile, smartphone ou tablette. La police d’écriture est trop petite, les éléments se chevauchent, ou encore, une modale (ou popup/popin pour les intimes #privatejoke) est impossible à fermer pour accéder au contenu ou fonctionnalités du site. Tous ces inconvénients incitent les internautes à quitter votre site. Il faut donc que celui ci soit “lisible” et “agréable” sur ces différents supports.
Ensuite, votre cible et ses habitudes sont à prendre en compte. Les recherches sur mobile dépassent maintenant celles effectuées via un ordinateur de bureau !
En France, avec plus de 33,7 millions de mobinautes chaque jour, le smartphone est le premier écran pour se connecter au quotidien, d’après l’étude annuelle de Médiamétrie sur Internet. Au quotidien, 54% des internautes utilisent leur mobile. Environ 22 millions d’internautes surfent sur le web chaque jour via leur ordinateur et 12,6 millions via leur tablette. A noter également que 69% des internautes quotidiens se connectent via plusieurs écrans.
Source : https://www.journaldunet.com/ebusiness/le-net/1177887-repartition-du-trafic-internet-selon-les-devices-en-france/
Peu importe la taille du support, votre information doit être disponible, intègre et lisible partout.
Votre cible est complexe et multiple : âge, déplacement, métier… Prenez le temps de bien les évaluer afin de préconiser et adapter l’outil dont ils ont réellement besoin. Un audit UX peut d’ailleurs être très utile en amont afin de bien connaître les usages “réels” de votre site. (Hihi on sait faire chez Bewizyu)
Je vous conseille de lire l’article sur l’UX Design rédigé par ma collègue Aurélie qui vous ouvrira les chakras UX ! https://bewizyu.com/blog/ux-design-au-coeur-de-la-notoriete-et-de-engagement-utilisateur/
2. Au niveau design, comment ça marche ?
En design, nous avons l’habitude d’utiliser des grilles print ou web. Une grille est constituée de repères verticaux et/ou horizontaux (ou axes pour les puristes XD). Ces repères servent de cadre pour organiser sa page ou son contenu.
Les différents avantages d’utiliser une grille fluide prédéfinie :
- Pour les profils :
Le designer ne part pas dans “tous les sens”, le visiteur est habitué inconsciemment à voir cette organisation de page et trouvera plus facilement son contenu et le développeur n’aura pas à “bidouiller” le design pour que ça rentre dans la page.
- Pour le visuel :
Une harmonie entre espacements et blocs de contenus et un équilibre entre visuels et textes.
De nombreuses grilles existent et sont compatibles avec des frameworks d’intégration (Bootstrap Twitter par exemple). L’utilisation de ces frameworks permettent un gain de temps considérable (quand on a pas à réinventer la roue !). Il est très rapide d’obtenir des versions pour toutes les tailles d’écrans.
Pour chaque taille d’écran “populaire”, des points de rupture sont définis.
Il est courant, malgré ces fameuses grilles, que des maquettes par points de rupture soient réalisées afin d’ajuster la hiérarchie de contenus, le menu, les types d’intégration, la densité des éléments ou même le zoom.
Nous avons donc en général, 3 types de maquettes : desktop, tablette et mobile.
Aller plus loin avec ce super article sur les Grilles infinies (en anglais) : https://alistapart.com/article/the-infinite-grid/
3. Techniquement, ça donne quoi ?
- Pour les intégrateurs ou développeurs
Le CSS a grandement évolué et le domaine du positionnement a fait des avancées majeures ! Deux modèles de positionnement en particulier permettent d’intégrer les grilles : Flexbox et Grid Layout.
Pour aller plus loin sur ces modèles, l’article d’Alsacréation est parfait ! https://www.alsacreations.com/article/lire/1794-flexbox-ou-grid-layout.html
- Pour les autres ^^
Une unique URL et un contenu unique vous permettent de naviguer sur une page quelque soit les différents types de supports. C’est un gain de temps de prévoir du responsive sur votre outil digital. Pas besoin de créer un site pour chaque support : tout est inclus dans un seul site.
Ah et aussi ! Le SEO est défini par page unique, donc c’est bien pratique pour les référençeurs ou autres fous de keywords, title, descr et j’en passe !
4. Et Google, il en pense quoi ?
Ah notre ami Google pense surtout qu’il faut que les sites soient OPTIMISES. ! Il faut que votre site soit performant (temps de chargement, images et ressources appelées au bon moment…).
Ensuite, on le sait, le robot de Google se base maintenant sur le Mobile First Index. Le système de crawl et d’indexation de Google est effectué par un robot en version mobile et non ordinateur.
Informations officielles :
L’index mobile-first (MFI en anglais) est en place officiellement depuis le 26/03/2018, mais pour certains sites seulement (source) […]
Depuis le 1er juillet 2019, tout nouveau site (que Google ne connaissait pas encore) est géré avec l’index mobile-first (source).
Depuis cette annonce, Google recommande clairement d’opter pour la solution du responsive design afin d’utiliser la même URL, les mêmes contenus et les mêmes metadonnées quel que soit le type de support^^
N’hésitez pas à tester les deux outils d’optimisation mobile mis à disposition par Google :
https://search.google.com/test/mobile-friendly
https://developers.google.com/speed/pagespeed/insights/
L’avenir du responsive
C’est bon ? Vous avez vérifié que votre site était bien responsive et qu’il était utilisable sur les différents écrans ? C’était la BASE.
Chez Bewizyu, nous pensons que le responsive va évoluer avec les nouvelles technologies. Dans les 5 prochaines années, il y aura sans aucun doute de nouveaux usages avec l’arrivée de nouveaux supports tels que :
- Hybride Smartphone & Tablette
Smartphone pliables, étirables, extensibles ou encore enroulables… les constructeurs explorent beaucoup de possibilités et mise sur la R&D des écrans pour proposer de nouveaux usages. Le but étant de proposer une hybridation entre smartphone et tablette. Deux exemples intéressants sur l’écran pliable avec Samsung et Huawei en 2019 :
- Comme le dit si bien Samsung, il sera intéressant “… de pouvoir plier et déplier votre écran de smartphone au gré de vos besoins…”. Après 10 ans de recherche, le Samsung Fold, annoncé le 20 février 2019, réinvente le design mobile. Les détracteurs sont nombreux et pour cause, il possède des points faibles que l’on ne peut ignorer (poids, ergonomie quand il est fermé, multi-fenêtre qu’à la verticale..).
2. Dans la même veine, le Huawei Mate X, présenté lors du Mobile World Congress 2019 propose un autre type de pliage assez impressionnant, différent du Galaxy Fold. De nombreux points sont aussi à revoir pour ce modèle (pliure très visible, sensibilité des écrans, un bruit désagréable lors du dépliage..).
Quoi qu’il en soit ce nouveau type d’écran n’est pas à exclure pour le futur de nos smartphone (si un effort est mis sur le prix…). Le passage d’un smartphone à une tablette sera très impactant pour nos sites internet et nos applications, il va donc falloir s’adapter si toutefois ce type de support viendrait à s’affiner et s’ancrer dans nos foyers.
- Hybride Smartphone & Montre
D’autres types d’usages sont à prévoir avec la montre connectée. C’est un véritable succès qui prend de plus en plus d’ampleur (Historique dispo sur Wiki : https://fr.wikipedia.org/wiki/Smartwatch) et qui va sans nul doute changer nos habitudes avec cette hybridation Smartphone et Montre plus avancée. L’écran est aussi mis à l’honneur ici, plus précisément avec les écrans flexibles :
Nubia, firme chinoise ayant un partenariat avec le fameux Archos, a proposé une montre à écran flexible, toujours lors du Mobile World Congress 2019. Très impressionnante et futuriste, la montre Nubia Alpha est pour le coup un smartphone mais au format bracelet ! Bracelet assez conséquent, certes, mais qui ouvre réellement le champ des possibles.
- Hybride Smartphone & Autres
L’hybridation ne s’arrête pas aux tablettes et aux montres, de nombreux autres objets peuvent être “digitalisés” grâce à un écran. Tous les secteurs sont représentés : automobile, décoration, électroménager, santé… Les objets connectés arrivent sur le marché avec autant d’écrans sur lesquels il va falloir s’adapter. Deux exemples à suivre de près :
- La société FlexEnable propose des écrans flexibles pour tous types de supports, mais se concentre sur les objets connectés. Trois ans après la présentation d’un prototype de montre futuriste, la société est attendue en particulier, avec les écrans OLCD, et surtout sur son application dans le secteur de l’automobile et la santé.
Pour aller plus loin : https://www.ns-businesshub.com/transport/flexenable-olcd-displays/
2. Le miroir connecté est un exemple concret et accessible du besoin d’adaptation de nos sites et application. L’aménagement de nos intérieurs est de plus en plus digitalisé (et je ne parle même pas de domotique).
Beaucoup de technologies différentes permettent d’avoir une expérience optimisée : scanner, connexion avec nos assistants vocaux préférés, capteurs de mouvements, affichage unique selon l’utilisateur, enceintes, store d’applications…
Comparatif de miroirs accessibles : https://stylistme.com/comparatif-objets-connectes/miroir-connecte-comparatif
En conclusion
Cela ne fait aucun doute que ce type de supports va bientôt envahir nos intérieurs et nous obliger, nous, pauvres communicants d’adapter nos interfaces !
Il va donc falloir préparer son site responsive à toutes ses nouvelles formes d’affichage ou créer des applications dédiées ^^
Le CES 2020, qui s’est déroulé du 7 au 10 janvier dernier à Las Vegas, confirme bien que les écrans non pas dit leur dernier mot, la qualité est le maître mot et l’innovation technologique prend bien le pas sur les prochains objets proposés.
Sans parler du tactile, qui est aussi très présent dans le domaine des ordinateurs portables et des tablettes (type borne dans les magasins), et modifie aussi beaucoup nos usages. Affaire à suivre donc…
Toujours à l’affût des innovations techniques et d’usages, nous chez Bewizyu, on est prêts ! Ecrans flexibles, hybrides, avec ou sans Soli, et mille autres nouvelles possibilités (AR, VR, vocal…), on imagine déjà les futurs usages.
Une question nous porte, toujours : quelle valeur ajoutée pourrait apporter ces nouveaux produits ou services aux utilisateurs ? Alors on fait de la recherche, on se fait des sessions d’idéation, on POC, on teste, sur des projets clients ou pour notre propre plaisir !
👋 Bewizyu est une agence digitale spécialisée dans la conception d’interfaces digitales sur mesure ! N’hésitez pas à visiter notre blog pour y découvrir nos autres articles sur l’UX Design, Firebase, le DevOps…
Special Thanks to Aurélie & Grégory 🖖
Article original sur : https://bewizyu.com/blog/le-responsive-webdesign-le-pourquoi-de-son-succes-et-son-avenir/
