Le design pour la presse

Retour d'expérience sur la refonte du site Sud Ouest et Midi Libre par Renaud Forestier (DA) et Cédric Néhémie (dev).

http://www.reuno.fr/
https://twitter.com/cedricnehemie

Transcript

1. DB Talks #7 Salut ;)
2. LE DESIGN POUR LA PRESSE
3. @reuno Directeur Artistique GSOi
 Illustrateur Freelance RENAUD FORESTIÉ
4. 1 - CONTEXTE
5. GROUPE SUD OUEST 8 quotidiens payants
 2 quotidiens gratuits
 2 chaînes de TV
 1000 livres
 
 600.000 ex / jour + hebdomadaires, magazines…
6. 2400 salariés
 80 sites d’activité
 
 385 millions de CA (2013) GROUPE SUD OUEST
7. LES INTERNETS 6 sites principaux :
 SO, ML, INDEP, REP, CL, CPA + applis
 + hebdos
 + gratuits
 + annonces etc… ! Par mois :
 
 40M de visiteurs uniques
 100M de pages vues / mois

8. 2 - REFONTE DE SUDOUEST.FR
9. SUDOUEST.FR V4 En 2012 : Entre 400k et 500k VU/j 15% des visites mobiles Pas responsive Pas de charte
10. Un site “plus moderne” “Augmenter les visites” Espace abonnés payant Diminuer le taux de rebond mobile/tablette Créer un univers de marque cohérent LES OBJECTIFS
11. SUDOUEST V4
12. LES AUTRES
13. LES AUTRES
14. LES AUTRES
15. LES AUTRES
16. CONSTAT Layouts très semblables 2 colonnes (2/3 - 1/3) 1000px de large / centré
17. PARFAIT Alors on a qu’à faire un site en 1200px de large au moins (nos users ont de grands écrans), avec plein d’images, genre big picture. Et puis ce serait tout épuré genre Vanity Fair et aussi ce sera super.
18. La pub. AH NON
19. LA PUB Partout.
20. LA PUB Charte Le pays magique du “premier écran”
21. PROTOTYPE Wireframe fonctionnel Développement rapide Facile à modifier Responsive DEMO
22. DESIGN
28. APPLI
29. POST LAUNCH Hausse des visites +20% Hausse des pages vues sur mobile / tablette : +300% Enquête de satisfaction : 96% d’opinions positives Refontes / upgrades prévues !
30. 2 - REFONTE DE MIDILIBRE.FR
32. MIDILIBRE V2 En 2012 : Entre 300k et 400k VU/j 15% des visites mobiles Pas responsive Pas de charte Le site doit sortir dans 3 mois
33. = behind_the_scene do ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! Who am I ? ! Cédric Néhémie Front end engineer @3print.fr MIDI LIBRE V3
34. LES BESOINS ★En sortie : templates smarty des différents blocs, css et js minifiés et gzippés. ★Durant le développement : pages de maquettes en html avec du vrai contenu (pas de lorem ipsum), serveur local pour des itérations rapides.
35. LES CONTRAINTES ★Impossible de faire tourner le site actuel en local ★Pas de documentation sur les variables accessibles dans les templates, on va découvrir tout ça à la fin : ne pas se fermer de portes ★Le design n’est pas définitif, certains changement peuvent (et vont) survenir durant le développement ★Installation et déploiement rapide, on veut pouvoir modifier et montrer le résultat rapidement
36. PLUS DE CONTRAINTES ★Site totalement responsive ★Aucun contrôle sur ce que le serveur renvoi, pas de détection mobile vs desktop ★Support d’Internet Explorer 8 et de vieux devices android (2.x, 3.x) ★Les performances doivent rester raisonnables même sur ces terminaux obsolètes
37. CHOIX TECHNOLOGIQUE ★Ruby : versatile, dynamique ★Middleman : simple et rapide à utiliser ★CoffeeScript, Haml et Sass : on navigue en terrain connu
38. DÉMARRAGE
39. ★Monter une première page ★Extraire les parties qui vont être réutilisées dans des partiels (header, footer, etc.) ★Monter une autre page ★Extraire les éléments communs dans des partiels de plus en plus généralistes ★Rinse & repeat = PARTIALS_EVERYWHERE
40. ONE PARTIAL TO RULE THEM ALL 1.Le fichier de la page (home, topic, etc.) 2.Des partiels de zoning (bloc sport, culture, etc.) 3.Des partiels de structure (rivière, ventre, sidebar, etc.) 4.Des partiels de contenu (article en ligne, en colonne, dans la sidebar, etc.) 5.Des partiels de détails (tags, metas, boutons, etc.)
41. CSS Tester, tester, tester et encore tester
42. ★Concevoir pour les standards et faire des passes de vérifications pour la compatibilité ★Séparer les styles en fichiers par fonctionnalités ★Créer des fichiers de tests mettant en scène les différentes variations de ces styles ★Utiliser ces fichiers de tests pour s’assurer de la compatibilité CSS
46. En plus de simplifier les tests, ces fichiers peuvent servir de guide pour quelqu’un intervenant à posteriori
47. SASS LOOPS ★Construire des listes avec les différentes variations pour chaque propriété ★Boucler sur ces listes afin de générer les styles concrets ★Extraire les invariants dans des placeholders que chaque variation étendra
48. JS ★Progressive enhancement & graceful degradation ★Pas de gros framework ★Un minimum de polyfills = jQuery + Modernizr + système de widgets responsive maison
49. UTILISATIONS DES WIDGETS ★Applique le widget X sur tout les éléments qui correspondent au sélecteur Y et qui n’ont pas déjà été traité ★Fait ça à chaque fois qu’un évènement A, B ou C survient ★Mais uniquement lorsque la taille de l’écran est inférieure à 667 pixels widgets ‘X’ , ’Y’, on: ‘A B C’, media: { max: 667 }
50. INTERNET EXPLORER ★IE8 est le nouvel IE6 : pas de media queries, pas d’ES5, lent et debugging laborieux ★Ne pas chercher à être 100% compatible ★Certains polyfills peuvent couter plus cher que ce qu’ils rapportent ★Shame.js & Shame.css : Ne polluez pas les bons clients avec les béquilles d’IE ★IEVMs à la rescousse pour les tests
51. SMARTY ★Généré à partir des templates Haml ★Le Haml doit pouvoir continuer à être exécuté dans le serveur local = Helpers Haml maison évaluant des expressions PHP simples en Ruby et générant l’équivalent Smarty lors du build
52. SUR LE SERVEUR LOCAL Sortie Smarty désactivée Sortie Smarty activée
53. END ! MERCI :)