Le design pour la presse

2047741c55e56804e4d2ee28a072b78a?s=47 D&B Talks
April 28, 2014

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

2047741c55e56804e4d2ee28a072b78a?s=128

D&B Talks

April 28, 2014
Tweet

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

  23. None
  24. None
  25. None
  26. None
  27. None
  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

  31. None
  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
  43. None
  44. None
  45. None
  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 :)