Site Web Responsives, adaptatifs, fluides, liquides...

responsive design webLe Responsive Web design est une approche de conception Web qui vise à l'élaboration de sites offrant une expérience de lecture et de navigation optimales pour l'utilisateur quelle que soit sa gamme d'appareil (téléphones mobiles, tablettes, liseuses, moniteurs d'ordinateur de bureau).

Une expérience utilisateur "Responsive" réussie implique un minimum de redimensionnement (zoom), de recadrage, et de défilements multidirectionnels de pages.

(http://www.alsacreations.com)

Et pourquoi donc un site "Responsive" ?

responsive design web varEn 2014, il c'est vendu plus de tablettes, ordinateurs hybrides que d'ordinateurs portables...
Tout le monde ou presque dispose d'un smartphone plus ou moins évolué...
La 4G (un peu en retard en France) facilite la navigation nomade sur le Net et se démocratise...
Nous pouvons dorénavant surfer sur le Net depuis notre télévision HD...

Pour les seuls clients de Ghost et quelque soit le domaine d'activité, les statistiques de visite de leur site Internet en provenance des appareils nomades sont passées de 9.7% en 2013 à 23% en 2014 et cela ne semble pas vouloir se calmer...

Vous avez sûrement du faire la tentative de surf depuis votre téléphone sur des sites Internet "Classiques" c'est à dire avec un largeur fixe et des menus de navigations normaux?
Comme moi, vous avez du rapidement abandonner après une gymnastique digitale trop contraignante ou une ergonomie de navigation inadaptée.

Vous savez maintenant pourquoi ce nouveau (en fait pas tant que ça...) type de mise en page pour les sites Internet devient quasiment incontournable alors que depuis un décennie on se bornait à réaliser des sites Internet à largeur fixe que l'on faisait évoluer à la faveur de la taille et résolution moyenne de l'écran de nos chers visiteurs.

 

 Un site Web "fluide" pour qui?

googleNormalement pour tout nouveau site ou toute refonte de site, on doit vous proposer cette option car le nombre d'appareils nomades va avoir tendance à encore progresser et vous risquez de passer à coté d'un nombre croissant de visiteurs d'autant que si vous êtes un peu familier des outils pour webmaster que propose Google, vous avez du voir passer le message:
"Corrigez les problèmes d'ergonomie mobile détectés sur http://www.mon-site.com/"
"Nos systèmes ont testé xx pages de votre site et ont découvert que 100 % d'entre elles contiennent des erreurs majeures d'ergonomie mobile. Les erreurs présentes sur ces xx pages nuisent gravement à la bonne utilisation de votre site Web par les mobinautes. Ces pages ne seront pas considérées comme mobile-friendly (adaptées aux mobiles) dans la recherche Google, et seront affichées et classées en conséquence pour les utilisateurs de smartphones."

A priori dans un premier temps la visibilité de votre site ne sera sûrement pas impactée lors des recherches... Quoique ... Si votre site est indiqué "non mobile-friendly", vous aurez perdu une partie des "mobiles-visiteurs" et moins de visiteurs c'est moins de popularité donc un moins bon positionnement...
Ensuite, à court terme... Il sera sûrement question de la mise en place par GG d'une vraie pénalité pour ce type de site et peut être là il y aura un impact direct sur leur positionnement . A moins que le nombre de "mobiles-visiteurs" ne décline fortement à l'avenir...

Quelles solutions?

Tout d'abord vérifier que son site est terriblement "non-mobile-friendly", vous avez peut-être un smartphone mais sûrement pas la gamme complète de l'iOS au W8.1 en passant par les Androïds...
alors vous pouvez tester votre site en ligne sur un grand nombre de sites Internet (J'utilise www.responsinator.com) ce qui vous donnera un aperçu de l'ergonomie de votre site sur un grand nombre de supports.
Le but n'étant pas l'affichage correct de votre site (Ce qui est généralement le cas) mais son ergonomie, les scrolls horizontaux, la taille des menus, des champs de formulaire etc.

Ensuite bien réfléchir si votre activité peut se passer des "mobinautes" et des éventuelles bonifications appliquées à un site Internet "mobile-friendly" car l'investissement sera peut-être conséquent...

C'est décidé!!!

Il ne vous reste plus qu'à choisir la moins pire des solutions car de solution miracle et sûre à 100% de respecter la totalité les besoins ergonomiques des écrans de télévision jusqu'aux mini smartphones, je n'en connais pas trop qui soient économiquement utilisables...

Responsive? Adaptative? Liquide? Rien n'est jamais simple ...

Un design statique (ou fixe) se réfère à des dimensions figées (par exemple 960px) quelle que soit la surface de l'écran. C'est sûrement la mise en page actuelle utilisée pour votre site Internet.

Un site web Liquide (ou fluide) est un site web qui s'adapte généralement automatiquement à la taille de fenêtre, jusqu'à une certaine mesure mais sans modification de l'ergonomie de navigation ou améliorations propres au surf sur petit écrans tactiles.

Un design Adaptatif est une amélioration du design statique : les unités de largeur sont fixes, mais différentes selon la taille de l'écran. C'est à dire chaque taille (enfin presque) est prise en compte et la largeurs du site s'adapte à chaque pallier défini .

Un site web Responsive est une amélioration du design liquide permettant de modifier la ré-organisation de la page selon certains critères, pour s'adapter complètement à la taille d'écran, quel que soit le point de rupture et proposant des améliorations ergonomique (menu, formulaire...).

voirVoir www.liquidapsive.com qui vous permettra de visualiser ces modes de mise en page

Encore un écueil comment procéder...

Votre site est bien référencé, positionné dans les moteurs de recherche mais cruellement inadapté aux appareils mobiles?

Vous avez 3 solutions:

- Soit réaliser un site web dédié ce qui consiste à concevoir deux ou plusieurs sites différents selon le dispositif visé : un site principal (ça vous l'avez), un site pour smartphones, un site pour tablette...
Cette possibilité offre en théorie la possibilité d'affiner précisément la structure du site et ses contenus en regard du périphérique utilisé et d'optimiser ses fonctionnalités ergonomiques. Inconvénients: La maintenance de plusieurs versions de site et de plusieurs adresses web (moins facilement indexables par un moteur de recherche), des erreurs non négligeables de redirection vers chaque type de site en fonction du terminal utilisé et une veille technique en fonction de l'évolution du panel d'appareils mobiles à venir sans oublier des problèmes de duplication de contenu pouvant engendrer des pénalités par les moteurs de recherche .

- Soit faire développer une application native c' est un produit crée spécifiquement dans divers "langages" (iOS, Android, WindowsPhone) et qui se télécharge et se référence au sein d'un "Store" (AppStore, Google Play, Windows store).
C'est une solution financièrement conséquente (plusieurs milliers d'€) s'appliquant généralement à de gros ou de spécifiques projets que je ne cite que pour information et qui présente en plus pas mal d'inconvénients.

- Passer à une version "responsive" de votre site
La méthode du Responsive Web design apparaît comme une solution intéressante qui permet à votre site (unique) de s'adapter à tout type d'appareil de manière transparente pour l'utilisateur. Ses coûts de mise en œuvre et sa maintenance sont moins élevés mais elle nécessite de bonnes connaissances techniques. Cette solution bien qu'imparfaite car il est difficile de contourner les limites ergonomiques et de performances des navigateurs web reste tout de même la moins contraignante techniquement et financièrement...

Tout dépend encore du type de votre site Internet

- Soit il est codé "maison" ce que l'on appelle code propriétaire. Là il va falloir analyser au cas par cas, bien souvent même si la chose est techniquement réalisable elle correspond généralement à une refonte complète avec les impacts financiers qui y sont liés. Pour cette refonte j'utilise volontier une version "responsive" propulsée ou pas par un CMS (Gestionnaire de contenu) en étant très très méticuleux sur les problèmes de référencement liés aux changement d' URL.
- Soit votre site est réalisé grâce à une plateforme CMS connue (Joomla, Wordpress ...) la solution est un peu plus simple, il suffit si l'on peut dire de modifier/changer pour un template correspondant à ses nouveaux besoins. La mise en place est un peu technique et nécessite un appui professionnel mais on ne déplorera pas d'accidents collatéraux en se qui concerne le référencement de votre site web.

Et pour les nouveaux sites Internet?

La portabilité des sites Internet vers les appareils mobiles est aujourd'hui incontournable dans tous les projets web. Bien entendu faire du responsive, c'est… plus long que de ne rien faire et nécessite un petit investissement supplémentaire qui dépendra de la nature de votre projet mais compte tenu de l'évolution du parc d'appareils nomades, le "jeu en vaut vraiment la chandelle".

 

(inspiré par: www.alsacreations.com)