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.
Ce projet présentait, en plus des contraintes habituelles, les difficultés suivantes:
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)
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)
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.
Quelques mois après le lancement, le bilan est le suivant:
Cette refonte a ouvert de nouvelles perspectives sur le site. De nombreuses améliorations sont au programme cette année.