SudOuest.fr est un quotidien régional appartenant au Groupe Sud-Ouest, représentant plus de 299 000 exemplaires distribués chaque jour, 2e plus gros tirage français derrière Ouest France.

Avant la refonte, le site sudouest.fr comptabilisait 450 000 vues par jour, dont 15% de visites en provenance des mobiles. Le site n’était pas responsive et il n’y avait pas de charte graphique clairement établie.

Objectifs

Un site plus moderne
Augmenter les visites
Créer un univers de marque cohérent
Diminuer le taux de rebond mobile et tablette
Mettre en place un Espace Abonnés payant

Contraintes

Ce projet présentait, en plus des contraintes habituelles, les difficultés suivantes:

  1. Les templates livrés devaient utiliser le langage Smarty
  2. La structure du site étant amenée à évoluer, le client devait pouvoir recomposer des pages lui-même. Nous devions donc livrer un template par bloc dans la page
  3. La partie Back-office étant gérée par une société tierce, nous n'avions aucun controle sur le format des données retournées par le serveur. En particulier, il était impossible de demander au serveur des contenus spécifiques selon la cible (mobile ou desktop)
  4. Nous devions supporter Internet Explorer 8 et d'anciennes versions d'Android (2.x, 3.x)
  5. Les performances devaient rester raisonnables même sur ces terminaux obsolètes.

Technologies

Nous avons fait le choix de nous appuyer sur des technologies robustes et reconnue: Ruby, Middleman, Haml, CoffeeScript et Sass

Middleman nous a permis de découper le projet en "partiels", tout en reconstruisant dynamiquement les différentes pages du site. Le code des templates était donc factorisé (ce qui permet aujourd'hui de simplifier la maintenance), et ensuite recombiné de façon automatique pour monter des pages entières (en utilisant du contenu récupéré via l'API mobile du site)

CSS

Pour un projet totalement Responsive, le CSS est au coeur de la démarche.

De la même façon, le choix de Sass nous a permis de rationnaliser le développement des feuilles de styles. Par exemple, cela nous a permis de créer des fichiers de tests exposant toutes les déclinaisons possibles de certains styles, afin de pouvoir les valider facilement (exemple ci-dessous avec les variatons de styles de boutons)

JS

Nous avons souhaité privilégier l’amélioration progressive et la dégradation élégante

Ici, aucun framework et un minimum de polyfills ont été employés. Au final nous avons utilisé jQuery et Modernizer ainsi qu'un système de widgets responsive “maison“.

IE8 peut poser certaines difficultés lors de l'intégration. Plutôt que d'alourdir les feuilles de styles et les scripts JS pour essayer d'obtenir un résultat équivalent aux navigateurs modernes (en pénalisant de fait les autres navigateurs, et sans résultat garanti), nous avons préféré dégrader l'affichage de façon maitrisée et cohérente. L'UX reste acceptable pour les utilisateurs de IE8, et optimale pour les autres.

Bilan

Quelques mois après le lancement, le bilan est le suivant:

+20% d'augmentation du traffic
+300% de visites depuis les terminaux mobiles
96% d'opinions positives lors de l'enquête de satisfaction

Cette refonte a ouvert de nouvelles perspectives sur le site. De nombreuses améliorations sont au programme cette année.