L’avenir du web mobile passe par le responsive design

L’avenir du web mobile passe par le responsive design

Face à la montée en puissance des téléphones intelligents et des tablettes numériques, il ne fait plus aucun doute que les entreprises doivent prendre le virage mobile. Il n’existe néanmoins aucun consensus sur la marche à suivre pour s’y rendre: certains privilégient la création d’une application dédiée, alors que d’autres investissent dans une version mobile de leur site. Cette dernière avenue est très souvent la plus indiquée, mais là encore, il y a divers niveaux de qualité ou de sophistication. Plusieurs hôteliers au Québec optent présentement pour un simple ‘plug-in’, solution pré-programmée qu’on personnalise au minimum, et qui répond aux besoins essentiels du mobinaute. Il s’agit d’une bonne solution, à court terme. Mais compte tenu des investissements requis pour mettre à jour votre site internet, notamment au niveau de la gestion des contenus, ne serait-il pas mieux de trouver une solution qui puisse répondre simultanément aux diverses plateformes numériques de votre marque?

QU’EST-CE QUE LE RESPONSIVE WEB DESIGN?

Une solution plus complexe mais nettement plus élaborée et fidèle à votre image de marque en ligne est celle offerte par le responsive web design. (En bon français, on parle de conception de sites web adaptatifs)

Comme on peut le voir dans cette infographie, le responsive web design revient essentiellement à créer une seule suite de contenus, tant en termes de textes, d’images ou de photos, selon une seule grille conceptuelle pour l’utilisateur, i.e. onglets, barres de navigation. La grande différence est que les contenus s’adaptent selon l’appareil sur lequel a lieu la consommation, ainsi que les interfaces utilisées : ordinateur de bureau, ordinateur portatif, tablette numérique ou téléphone intelligent. Peu importe la taille de votre écran, vous aurez ainsi droit à la même grille visuelle, mais il y aura forcément une priorisation effectuée selon que vous soyez sur un ordinateur ou sur un téléphone intelligent, que vous le regardiez à l’horizontale ou à la verticale: certaines polices peuvent être réduites, des colonnes changeront de place selon la programmation qui sera faite, etc.

UNE VERSION MOBILE, C’EST BIEN…

Site internet standard de l'Hôtel Le Président

Site internet standard de l’Hôtel Le Président

Prenons l’exemple de l’Hôtel Le Président, à Sherbrooke. Voici un établissement qui a rapidement compris l’importance de prendre le virage mobile. Selon le directeur de l’établissement, cité dans le journal Les Affaires, près de 25% du traffic en ligne provient d’ailleurs dorénavant d’appareils mobiles.

Le site mobile de l'Hôtel Le Président

Le site mobile de l’Hôtel Le Président

Il faut toutefois constater que leur version mobile en est une de base, une solution en marque blanche achetée de la firme Eko-Mobi au début 2012. (NOTE: Rien à redire contre la solution Eko-Mobi, au contraire, l’ayant proposé et mis en application auprès de clients actuels)

Pour plusieurs établissements hôteliers, une telle solution satisfait aux besoins de base des mobinautes. On y retrouve les quatre ou cinq éléments les plus sollicités: l’information sur les chambres, les tarifs, l’emplacement de l’hôtel, et les coordonnées pour contacter l’établissement. Certaines solutions proposent soit le click-to-call, où le mobinaute appuie sur le bouton pour être mis en lien directement avec l’hôtel ou sa centrale d’appel, soit le click-to-book, où le bouton mène directement à une solution de réservation en ligne (toujours adaptée au mobile, il va sans dire). Comme plusieurs hébergements au Québec et en France travaillent avec l’engin de réservation ReservIT de Softbooker, cette dernière a d’ailleurs dû développer une solution mobile qui s’intègre à cette approche.

Les avantages de ce type de site mobile:

  • Aucun frais de programmation ou de développement;
  • Solution la moins dispendieuse sur le marché. Vous pouvez développer une telle version mobile de votre site pour moins de 500$!
  • Simplicité et rapidité dans la gestion et mise en ligne.

Les inconvénients de cette approche:

  • En raison de la personnalisation limitée qu’offre une telle solution, on voit peu de liens, visuellement parlant, entre le site web régulier et la version mobile.
  • Il s’agit d’une plateforme indépendante. Si vous changez des contenus sur votre site web, vous devez penser d’aller faire les changements aussi sur la version mobile. Pour un hôtel ou une destination qui gère plusieurs promotions qui changent souvent, ça peut devenir problématique.
  • L’expérience sera ‘correcte’ sur le téléphone intelligent mais plutôt ordinaire sur une tablette numérique. Un mobinaute qui souhaite en savoir un peu plus sur votre hôtel ou votre destination risque de rester sur sa faim. Ou pire, d’aller voir ailleurs!

…MAIS UN SITE EN RESPONSIVE DESIGN, C’EST ENCORE MIEUX!

D’aucuns s’entendent sur l’importance d’avoir un site web riche en contenus pertinents, où les textes, photos et vidéos viennent s’appuyer sur une ergonomie et un design simple et efficace pour l’utilisateur. Vous mettez d’ailleurs une foule d’autres sections qui contribuent au positionnement avantageux de votre hôtel, attrait, événement ou restaurant: l’historique de l’entreprise, les choses à faire ou à voir, contribution sociale, salle de presse, etc. Tous ces éléments contribuent à façonner votre image de marque en ligne. Pourquoi ne peut-on pas avoir droit à une expérience aussi riche et satisfaisante via son smartphone ou sa tablette?

Mon blogue, version mobile (responsive design, à l'horizontale)

Mon blogue, version mobile (responsive design, à l’horizontale)

C’est justement le révolution que propose le responsive design. Au courant de l’été 2012, mon blogue a d’ailleurs passé sous le bistouri et il est aujourd’hui adaptable selon l’appareil sur lequel vous le lisez.

Mon blogue, version mobile (responsive design, à la verticale)

Mon blogue, version mobile (responsive design, à la verticale)

Pour un site ou un blogue assez simple, il existe des ‘plug-ins’ comme sur WordPress, par exemple. Dans mon cas, j’ai préféré consulter les professionels de la firme Evollia, à Québec, avec qui j’avais déjà travaillé lors de la migration de ce site vers sa plateforme actuelle (Genesis).

Comprenons-nous bien: il ne s’agit pas d’une mode passagère. Plusieurs entreprises ont été lentes à prendre le virage web au tournant du millénaire et encore aujourd’hui, près de 50% des PME québécoises n’ont pas de site internet! Tant qu’à prendre le virage mobile, aussi bien le faire en intégrant les contenus au sein d’une approche unifiée, tout en faisant vivre votre image de marque de façon cohérente sur les différents interfaces.

C’est d’ailleurs le pari que font de plus en plus d’entreprises en tourisme, notamment le bulletin et portail d’information TourismExpress, qui lançait sa nouvelle interface plus tôt cette année, ou encore HotellerieJobs, site d’emplois en tourisme, qui vient d’annoncer une refonte basée sur le responsive design.

TourismExpress

Site de TourismExpress, sur iPad (à la verticale)

Site HotellerieJobs, sur iPad (à l'horizontale)

Site HotellerieJobs, sur iPad (à l’horizontale)

Je vous invite d’ailleurs à consulter le babillard créé par Mathieu Bruc sur Pinterest, répertoriant certains des meilleurs sites e-tourisme conçus en responsive design.

Vous connaissez d’autres exemples d’entreprises touristiques qui ont pris le virage en mode responsive design? N’hésitez pas à commenter dans la section ici-bas, afin d’enrichir la discussion à ce sujet.

Frederic Gonzalo
Écrit par Frederic Gonzalo

Conférencier et stratège cumulant plus de 19 années d'expérience en marketing et communications touristiques. Consultant depuis le début de 2012, j'offre des services de planification stratégique et formation en médias sociaux & mobile pour petites et grandes entreprises. Contactez moi à frederic@gonzomarketing.biz

10 comments
Olivier Devillers
Olivier Devillers

Cet article est très intéressant mais je ne suis pas totalement convaincu sur la prédiction. Le départ de toute communication en ligne est le service rendu à l'utilisateur et, à partir de là, et seulement à partir de là il faut trouver les meilleures solutions techniques. Or, en situation de mobilité la connexion est souvent de mauvaise qualité, sans compter les tarifs de roaming/ de data qui peuvent être prohibitifs (surtout pour les étrangers). Sur mobile, il faut donc aller à l'essentiel et c'est souvent le but des (bonnes) applis. Cest aussi la vocation de la solution Ekomobi présentée ci-dessus. Le site web avec un contenu et des services adaptés à tous les publics, à tous les contextes, à toutes les situations... j'ai de sérieux doutes.

Sébastien Giroux
Sébastien Giroux

Bonjour Frédéric, Je suis totalement d'accord avec toi sur le responsive. Les entreprises qui peuvent s'offrir un site "responsive", c'est l'idéal. Cependant, plusieurs entreprises ont des budgets assez restreints pour la mise en place de tels sites. C'est pourquoi nous avons créé la solution Ekomobi. Bonne nouvelle cependant, nous avons déjà amélioré l'affichage sur tablettes et ce n'est qu'un début.  Nos clients auront bientôt accès à des fonctionnalités vraiment "responsives". Pour le look, je vous invite à regarder ces 2 exemples. Je crois que le lien avec le site principal est assez évident. www.voltdesign.com  versus  voltdesign.ekomobi.com www.hoteleiffelseineparis.com versus  eiffeltowerhotel.ekomobi.com Donc comme vous le dites, compte tenu de l'investissement requis, la solution Ekomobi est certainement préférable à l'inaction. Sébastien Giroux CTO, Ekomobi

Steph Roy
Steph Roy

Très instructif ce dernier billet M. Gonzalo! Est-ce que cette tendance est remarquée dans d'autres industries ou organisations que celles touristiques? Avez-vous noté des exemples dans le milieu de l'éducation par exemple?

Frederic Gonzalo
Frederic Gonzalo

Bonjour Olivier et merci du commentaire. Effectivement, une solution comme celle d'Ekomobi répond à certains besoins, notamment lorsqu'on est sur la route et qu'on accède à de l'information via un appareil mobile. Mais voilà, il appert que de plus en plus de gens consomment et font de la recherche touristique en amont du processus décisionnel... via un appareil mobile. Ceci inclut notamment les tablettes digitales. On imagine donc la personne chez elle, ou en marge d'un match de soccer du petit, à consulter des sites d'hôtels ou de destination via son smartphone ou sa tablette. C'est surtout à ce niveau qu'un site en responsive design devient un atout, compte tenu que l'image de marque y est cohérente, toute l'info s'y trouve au même titre, et qu'on ne "sacrifie" pas de contenu simplement parce qu'on a voulu concocter une solution réduite pour smartphone. Je suis donc d'accord que sur mobile on doit souvent à aller à l'essentiel, dans des contextes précis. Mais avec la pénétration de masse de ces appareils comme outil de communication, on en vient à développer une utilisation qui n'est pas que dans le "dernière minute". C'est en ce sens que je demeure convaincu du bien-fondé pour les entreprises de prendre le virage vers le responsive design plus tôt que tard...

Frederic Gonzalo
Frederic Gonzalo

Salut Sébastien, Bien content de te lire ici sur mon blogue. Tu marques un bon point en référant aux budgets de certaines entreprises pour qui effectivement une solution comme celle d'Ekomobi fait l'affaire. C'est d'ailleurs ce que je souligne dans le billet, et comme tu le sais nous l'avons implanté auprès de clients en commun. Je vois néanmoins certains sites hôteliers qui ont un superbe design et une ergonomie sophistiquée, puis la version mobile qui détonne par ses quelques fonctionnalités et un look & feel distinct, voire trivial, comme pour plusieurs autres hôteliers qui utilisent une application similaire. Bien content de voir les deux exemples que tu mentionnes, comme quoi il y a de l'espoir d'améliorer les solutions de base pour les établissements qui ne veulent, ou ne peuvent, prendre le virage du responsive web design. L'important est effectivement de prendre conscience de la révolution mobile, et de prendre les bonnes décisions en fonction des budgets et priorités propres à chaque entreprise. Merci du commentaire. Frédéric

Frederic Gonzalo
Frederic Gonzalo

Bonjour Stéphanie, Le responsive web design est une tendance lourde, mais plusieurs industries sont lentes à s'y adapter. Dans le domaine de l'éducation je viens de faire une brève recherche via mon iPhone, et les sites visités n'étaient pas mobile-friendly: Harvard, MIT, McGill, Université Laval. Pas surprenant, d'une certaine façon, car le milieu de l'éducation est habituellement plus conservateur, plus traditionnel. Voici par contre le top 20 des meilleurs sites développés en responsive design en 2012: http://socialdriver.com/2012/07/20-best-responsive-websites/ (En passant: on y retrouve le cas de figure d'une université: Lancaster University) Frédéric

Marc Aubé
Marc Aubé

Luke Wrobleski, qui était VP du design chez Yahoo! a écrit le livre "Mobile First" au sujet de ce problème de connectivité et de bande passante limitée sur le mobile. Il y a un fort coût associé à chacune des requêtes sur les réseaux mobiles, on parle d'environ 200 milli-secondes en moyenne de latence. Hors, un site web traditionnel peut facilement avoir de 80 à 100 requêtes au serveur pour charger une seule page. Pour chacun de ces allez-retours au serveur, il y a donc une pénalité de 1/5 de seconde. Et comme les navigateurs mobiles ne supportent que 5 à 10 requêtes en parallèle, on voit rapidement que l'utilisateur paie le prix d'un site mal conçu, même si "responsive". La solution proposée est un site web "mobile-first". Au lieu de l'approche "top-down" utilisée en ce moment en responsive web design, on devrait plutôt développer "bottom-up" en partant du plus petit dénominateur. Le plus petit n'étant pas toujours les smartphones comme le iPhone ou les téléphones Android mais aussi des fois des feature-phones comme les Motorola ou Nokia. Il faut donc connaitre sa clientèle mobile et faire des choix. Le site mobile devrait donc être adapté au "desktop" et pas l'inverse. La taxe de performance tombe ainsi sur le plus fort. Cette technique a l'avantage d'être à l'épreuve de la multitude d'appareils et de résolutions qui verront le marché dans le futur, car on ne développe plus un site que pour quelques résolutions mobiles et tablette. Cela nous oblige aussi à mettre de l'avant seulement le contenu pertinent, car bien souvent, si la fonctionnalité se fait couper sur la version mobile, est-elle vraiment nécessaire sur le site "desktop"? Peut-être, mais encore là il faut savoir quel contenu la clientèle consome sur chacune des plateformes, se poser des questions et faire des choix.

Frederic Gonzalo
Frederic Gonzalo

Commentaire plus que pertinent, Marc. Tes connaissances sont clairement plus poussées que les miennes sur les aspects techniques de l'approche mobile-first, j'apprécie donc d'autant plus tes remarques à ce sujet. Un gros merci! Frédéric P.S. Si tu es intéressé à rédiger un billet à titre de blogueur invité sur ce site, n'hésite surtout pas à me contacter à frederic@gonzomarketing.biz :-)

Marc Aubé
Marc Aubé

L'approche "mobile-first" est aussi applicable pour les site existant qui se convertissent au responsive, c'est juste que la plupart des agences ne le font pas ainsi. Il y a peu de différences avec l'approche traditionnelle si ce n'est que l'ordre des "breakpoints" où le site adapte son "layout" doit être définit dans l'autre sens. Le design actuel du site doit donc être placé dans le dernier breakpoint. De cette façon, les mobiles n'ont pas à faire le rendu du site "desktop", ensuite de la version tablette et finalement le site mobile, on gagne sur la vitesse de rendu, sur la durée de la charge de la batterie, etc. Sinon, je pense aussi qu'on peut pousser l'exercice encore plus loin. L'état actuel du responsive est que quelques tailles d'appareils sont ciblées. Donc le site responsive a 3 ou 4 points d'inflexion souvent liés à la taille des écrans du iPhone, du iPad, d'un netbook et finalement d'u écran large. On se limite donc à ce qu'on connais, et c'est peu évolutif. On ne peut pas non-plus penser adapter son design à tous les appareils de cette façon, on n'arrivera jamais à suivre le rythme avec la multitude de mobiles, télévisions, consoles de jeux qui verront le jour. On peut se libérer de la contrainte des dimensions d'appareils en utilisant une longueur de ligne idéale pour la lecture plutôt qu'une largeur d'écran comme "breakpoint". On sait depuis des centaines d'années dans l'imprimé qu'une longueur de ligne optimale pour la lisibilité se situe entre 50 et 75 caractères. On peut donc programmer notre "layout" pour changer quand la lecture devient plus difficile plutôt qu'à une certaine largeur d'écran. On appèle ça "content-out", plutôt que la méthode traditionnelle du "canvas-in" dans le web. On obtient de cette façon une lecture optimale sur tous les appareils actuels mais aussi ceux qui apparaitront dans le futur...sans avoir à refaire de changements. Il y a matière à réflexion ...

Frederic Gonzalo
Frederic Gonzalo

Excellent commentaire, Marc. Et je suis plutôt d'accord. L'approche Mobile-First est particulièrement intéressante pour les organisations qui n'ont pas encore de site internet (si, si, il en existe encore plusieurs...) ou celles qui s'apprêtent à procéder à une refonte majeure. J'avais justement un client il y a quelques mois qui devait mettre de l'avant un site pour un nouvel établissement hôtelier, mais la peur du changement et le facteur "inconnu" de l'approche mobile-first ont prévalu, malheureusement. Tant le responsive-design que le mobile-first sont à considérer en fonction des clientèles cibles et du type d'appareil susceptible d'être en dominance au courant des 2-3 prochaines années pour une entreprise, car de toute façon c'est à peu près l'espérance de vie d'un site internet de nos jours avant de procéder à des changements. Et aussi compte tenu de l'évolution rapide des nouvelles technologies, surtout au niveau mobile.

Trackbacks

  1. […] Le responsive web design, vous connaissez? C'est la prochaine révolution pour les entreprises qui ont un site internet et qui veulent prendre le virage mobile.  […]