Responsive Web Design : oui mais pas n'importe comment ! – SEO Camp Paris 2016

Conférence donnée dans le cadre du SEO Camp Paris 2016, à Paris, autour des problématiques des projets Responsive Web Design.

Le Responsive Web Design est devenu une part importante de nos projets web. Plus un seul site ne peut voir le jour sans une stratégie mobile minimale. À première vue, le Responsive Web Design paraît de plus en plus simple à produire grâce à nos nombreux outils pourtant un projet RWD est en réalité semé de nombreuses embuches.
Gestion de projet, impact sur le référencement, perception de la performance : Ensemble, partons à la découverte de celles-ci !

Cette présentation est mise à disposition selon les termes de la Licence Creative Commons Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International.

Transcript

1. RESPONSIVE WEB DESIGN :
   OUI, MAIS PAS N’IMPORTE COMMENT !
   Damien Senger · @iamhiwelo · SEO Camp’us 2016 · Paris
   

   View Slide

2. et ça, c’est moi :)
   Damien Senger
   je suis designer & développeur web
   je suis passionné par la typographie web & WordPress
   j’ai créé mon studio hiwelo. et je travaille chez Alsacréations
   @iamhiwelo
   

   View Slide

3. QUELQUES
   RAPPELS
   

   View Slide

4. La « situation de mobilité » :
   cela ne veut plus rien dire…
   

   View Slide

5. L’internet mobile a dépassé en usage

   l’internet desktop
   

   View Slide

6. Le Responsive Web Design 

   n’est pas la solution unique
   

   View Slide

7. • •
   UNE RÉALITÉ
   PLUSIEURS STRATÉGIES
   

   View Slide

8. STRATÉGIE
   RESPONSIVE RETRO-FITTING
   

   View Slide

9. On prend l’existant et on l’adapte
   pour le faire entrer dans le format mobile
   Crédit photo : zoetnet
   

   View Slide

10. Le contenu n’est pas adapté au mobile…
    gros soucis de performance à l’horizon !
    Crédit photo : Chris Keating
    

    View Slide

11. STRATÉGIE
    MOBILE FIRST
    

    View Slide

12. Le contenu est accessible
    quelque soit la plateforme
    

    View Slide

13. Impose une réflexion globale 

    sur les contenus attendus et pertinents
    

    View Slide

14. Création d’une interface efficace
    adaptée aux contraintes du mobile
    

    View Slide

15. Au cœur du Mobile First :
    l’amélioration progressive
    Crédit photo : HannahLeePhotography
    

    View Slide

16. Crédit photo : Marcus Lyra
    STRATÉGIE
    RESPONSIVE M-DOT SITE
    

    View Slide

17. Un choix intéressant pour faciliter
    l’expérimentation et limiter la prise de risque
    Crédit photo : Paul
    

    View Slide

18. On met en ligne un site mobile-first HTML
    en parallèle du site desktop existant
    Crédit photo : Alan English CPA
    

    View Slide

19. Petit à petit, on développe les breakpoints
    du site mobile vers les écrans les plus larges
    Crédit photo : podluzny
    

    View Slide

20. Être prestataire dans ce type de projet :
    flexibilité, itération & vision long terme
    Crédit photo : Davy Landman
    

    View Slide

21. Budgétisation de ces projets :
    éviter que le projet cesse en cours de route
    

    View Slide

22. UNE STRATÉGIE MOBILE :
    CELA NE S’IMPROVISE PAS !
    Crédit photo : David Kasparek
    

    View Slide

23. Prioriser ses contenus

    pour prioriser l’affichage
    

    View Slide

24. Réfléchir ses breakpoints 

    en fonction du contenu
    Crédit photo : Luc Legay
    

    View Slide

25. Quelle place pour les experts SEO
    dans ces projets ?
    

    View Slide

26. Définir des objectifs de performance
    pour trancher en cas de conflit :
    design / développement / SEO
    

    View Slide

27. RÉINVENTONS
    LES MODÈLES
    *
    

    View Slide

28. Gestion de projet :
    la fin du modèle en cascade
    

    View Slide

29. Au cœur du Responsive Web Design :
    la flexibilité et l’itération
    Crédit photo : timlewisnm
    

    View Slide

30. Le Responsive Web Design c’est aussi
    la fin de la sacro-sainte maquette web
    le pixel pe ect n’a plus aucun sens aujourd’hui…
    Crédit photo : visualpun.ch
    

    View Slide

31. LA PUBLICITÉ EN LIGNE :
    TOUT CASSER POUR RECOMMENCER
    

    View Slide

32. Bannière, contenus, etc. :
    réfléchir cross-platform
    

    View Slide

33. La publicité ne doit pas entraver 

    l’accès aux contenus, surtout sur mobile
    

    View Slide

34. Adaptez vos choix publicitaires
    aux contraintes de vos utilisateurs
    

    View Slide

35. Crédit photo : Trevor Devine
    RESPONSIVE
    RÉFÉRENCEMENT
    &
    

    View Slide

36. SEO : Les experts, c’est vous !
    Soyez en discussion permanente avec 

    les designers & développeurs
    Crédit photo : Ross Mayfield
    

    View Slide

37. Google aime le

    Responsive Web Design
    

    View Slide

38. Responsive Design is Google’s

    recommended design pattern.
    «
    »
    

    View Slide

39. POURQUOI GOOGLE AIME-T-IL LE
    RESPONSIVE WEB DESIGN ?
    

    View Slide

40. Une seule URL pour chaque contenu
    

    View Slide

41. Un seul code source identique
    pour toutes les situations
    

    View Slide

42. Cela réduit les erreurs de navigation
    Crédit photo : Tadson Bussey
    

    View Slide

43. Les stratégies content first ou mobile first
    mettent en avant votre contenu
    (et donc sa qualité ou pas ;) )
    

    View Slide

44. ENFIN, UN PETIT COUP D’ŒIL
    À L’ACTUALITÉ
    

    View Slide

45. Accelerated Mobile Pages :
    une fausse bonne idée ?
    

    View Slide

46. MERCI DE VOTRE ATTENTION :)
    Damien Senger

    @iamhiwelo
    hi@hiwelo.co
    Si vous avez aimé ce e conférence,
    je vous invite à suivre mon nouveau projet via Twi er :
    @WeAreRaccoon
    

    View Slide