Nouveau site en ligne : “ La Belle Régate ” en responsive web design

“La Belle Régate”, c’est un appartement de standing à Bénodet, disponible à la location à la semaine. Cet appartement haut de gamme, avec vue sur mer, propose des prestations de très haute qualité : cuisine aménagée et sur-équipée, grande terrasse équipée d’un spa… La Belle Régate c’est aussi une décoration chic, chaleureuse et contemporaine.

La Belle Régate

Le design du site a été conçu dans cet esprit. Il est donc sobre, sans fioriture. Un grand diaporama met en valeur le bel appartement qu’est La Belle Régate.

Niveau développement, il est à la pointe : Html 5, css3, responsive web design…

Pour ceux qui ne connaissent pas ce langage un peu bizarre, quelques explications s’imposent :

  • Le html 5 est la prochaine version du html — format de données conçu pour représenter des pages web — « Prochaine version » car elle en est encore au stade développement.
  • Le css3 est le dernier niveau opérationnel du css — langage informatique servant à styler les pages web — Il continue d’être enrichi par de nouvelles fonctionnalités, permettant de faire de plus en plus de choses, de plus en plus jolies, ergonomiques, efficaces.
  • Le responsive web design, quant à lui, est une méthode de conception de sites web, dans laquelle le design du site s’adapte en fonction du média (PC, smartphone, tablette…) que l’internaute utilise.

Prenons un cas concret, avec un site ayant la structure suivante :

Exemple de structure d'un site

Cette structure est parfaite pour être visualisée sur un ordinateur. Mais si on souhaite maintenant consulter cette même page sur un smartphone, ce sera possible mais avec quelques contraintes. Le texte sera trop petit, il faudra zoomer. Puis on change de page sur le site, on doit à nouveau zoomer. A cela s’ajoute le temps de chargement des pages, l’affichage des photos… Toutes ces contraintes ajoutées les unes aux autres rendent pénibles la navigation sur smartphone. Or, on sait que de plus en plus de personnes utilisent ce média pour naviguer sur internet, et la courbe n’est pas prête de s’arrêter…

Fort heureusement, des solutions existent !

  • La première est de faire pour un même site internet, deux structures. L’une spécialement conçue pour être lue sur ordinateur et l’autre pour être lue sur smartphone. Lorsque l’internaute va sur le site, un petit script détecte le média qu’il utilise et charge la structure correspondante. Cela implique de faire 2 structures indépendantes l’une de l’autre, avec chacune son propre code html et css.
  • La deuxième solution est de faire une seule structure — donc un seul code html — mais des styles différents selon le média que l’on utilise. Cette fois-ci, on ne touche qu’au code css en utilisant ce que l’on appelle les “médias queries” — ce sont des lignes de codes que l’on rajoute dans le fichier css — Cette technique est également appelée “Responsive web design”. Lorsque l’internaute se trouve sur un grand écran, le style adapté à un grand écran est utilisé, et lorsqu’il se trouve sur un petit écran, c’est le style adapté à un petit écran qui est utilisé. Et ainsi de suite…

La Belle Régate

La Belle Régate

Vous pouvez tester le responsive web design en allant sur le site La Belle Régate sur un ordinateur. A l’aide de votre souris, réduisez progressivement la fenêtre de votre navigateur. Sous vos yeux, vous voyez le site s’adapter en fonction de la taille de la fenêtre.

Une solution est-elle mieux qu’une autre ? Et bien, ça dépend…

Chacune des solutions a des avantages et des inconvénients, en terme de temps de travail, référencement, ergonomie, etc.

Comment choisir ? Pour choisir, il faut se mettre à la place de l’internaute. C’est lui que l’on veut séduire, attirer, garder et revoir. C’est pour lui que l’on fait tout ça. On ne fait pas ça pour sa gloire personnelle, pour être fier de soi ou pour faire plaisir à quelqu’un. On fait tout ça pour lui, cet être que l’on appelle “internaute” !

Laura Guégan

Le blanc qui séduit puis angoisse…

Le blanc, c’est l’absence, le vide.

L’absence qui fait mal, le vide qui fait peur, qui angoisse.

Et pourtant, en matière de communication, le blanc met en valeur ce qu’il comporte. Il met en exergue le contenu, ne lui nuit pas, c’est même tout le contraire. Le texte, les illustrations, les photographies apparaissent clairement, nettement… De même, le vide et l’espace apportent de l’air ; on respire pour mieux apprécier le reste. Le blanc permet au regard de circuler, le blanc guide l’œil. Le blanc, c’est aussi la pureté. Avec le blanc, on ne triche pas.

Tout cela pour dire que vous êtes nombreux, prospects, à nous contacter après consultation de notre site internet. Vous avez été séduit : “Ah oui, il est clair, on comprend tout de suite ce que vous faites… Eh ben nous, on voudrait un peu la même chose mais avec des trucs et des machins à la place de vos bottes, parapluie et compagnie”.

On commence à travailler une maquette. Elle plaît. “Il y a juste quelques éléments à ajouter”. On les ajoute et on se revoit. “Finalement, il faudrait aussi rajouter ceci cela…” Il faut mettre les titres en plus gros pour qu’ils se voient mieux, le texte en plus grand pour qu’il se voit mieux, les photographies en plus grand pour qu’elles se voient mieux… Et puis parfois, on finit même par changer de couleur de fond parce que “quelqu’un dans le service a dit que ça faisait “un peu triste””. Et nous dans tout cela ?

Ben nous dans tout cela, on vous prévient. On essaie de vous prévenir. Au départ, c’est juste un titre qui passe en plus grand. Nous, on se dit “Bon s’il n’y a que cela, ça ira”. Alors on le fait, on met le titre en plus grand. Mais après, ça continue… On vous alerte et puis arrive la formule de politesse : “Oui, oui, je vous entends bien, je vous comprends bien. Oui mais non, il faudrait mettre en plus grand”. Aïe.

Pourquoi une telle angoisse ? Au départ, notre maquette, c’est la maquette d’Expression. Petit à petit, le client se l’approprie. C’est très bien. Tant mieux. Mais l’angoisse monte : “Est-ce que c’est bien ? Est-ce que je vais vendre davantage avec cela? Est-ce que je ne vais pas choquer ? Ah et puis que font mes concurrents? Oh dis donc, ils ont mis du bleu eux, c’est bien le bleu aussi. On pourrait mettre un peu de bleu, c’est bien le bleu aussi non ?… ” Vous angoissez, alors vous vous éloignez du principe de communication qui est de se mettre dans la peau de la cible. Vous vous éloignez, vous oubliez vos objectifs de communication. Le fameux “Qu’est ce que j’ai envie que ressente ma cible?” devient “Qu’est ce que je pourrais ajouter, dire de plus, montrer encore?”. Aïe.

Vos angoisses sont certainement légitimes. Mais pensez à votre impression de départ, ce que vous avez ressenti quand vous, en tant que cible de communication – la nôtre ! – vous avez découvert le site internet d’Expression. Est-ce que votre réaction aurait été la même si on avait mis les textes en grand, les titres en grand, si on avait rajouter des encarts pour “boucher le trou” (on aurait pu, il y avait de la place…).

Cécile Le Meur