“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