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
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
3. QUELQUES RAPPELS
4. La « situation de mobilité » : cela ne veut plus rien dire…
5. L’internet mobile a dépassé en usage
 l’internet desktop
6. Le Responsive Web Design 
 n’est pas la solution unique
7. • • UNE RÉALITÉ PLUSIEURS STRATÉGIES
8. STRATÉGIE RESPONSIVE RETRO-FITTING
9. On prend l’existant et on l’adapte pour le faire entrer dans le format mobile Crédit photo : zoetnet
10. Le contenu n’est pas adapté au mobile… gros soucis de performance à l’horizon ! Crédit photo : Chris Keating
11. STRATÉGIE MOBILE FIRST
12. Le contenu est accessible quelque soit la plateforme
13. Impose une réflexion globale 
 sur les contenus attendus et pertinents
14. Création d’une interface efficace adaptée aux contraintes du mobile
15. Au cœur du Mobile First : l’amélioration progressive Crédit photo : HannahLeePhotography
16. Crédit photo : Marcus Lyra STRATÉGIE RESPONSIVE M-DOT SITE
17. Un choix intéressant pour faciliter l’expérimentation et limiter la prise de risque Crédit photo : Paul
18. On met en ligne un site mobile-first HTML en parallèle du site desktop existant Crédit photo : Alan English CPA
19. Petit à petit, on développe les breakpoints du site mobile vers les écrans les plus larges Crédit photo : podluzny
20. Être prestataire dans ce type de projet : flexibilité, itération & vision long terme Crédit photo : Davy Landman
21. Budgétisation de ces projets : éviter que le projet cesse en cours de route
22. UNE STRATÉGIE MOBILE : CELA NE S’IMPROVISE PAS ! Crédit photo : David Kasparek
23. Prioriser ses contenus
 pour prioriser l’affichage
24. Réfléchir ses breakpoints 
 en fonction du contenu Crédit photo : Luc Legay
25. Quelle place pour les experts SEO dans ces projets ?
26. Définir des objectifs de performance pour trancher en cas de conflit : design / développement / SEO
27. RÉINVENTONS LES MODÈLES *
28. Gestion de projet : la fin du modèle en cascade
29. Au cœur du Responsive Web Design : la flexibilité et l’itération Crédit photo : timlewisnm
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
31. LA PUBLICITÉ EN LIGNE : TOUT CASSER POUR RECOMMENCER
32. Bannière, contenus, etc. : réfléchir cross-platform
33. La publicité ne doit pas entraver 
 l’accès aux contenus, surtout sur mobile
34. Adaptez vos choix publicitaires aux contraintes de vos utilisateurs
35. Crédit photo : Trevor Devine RESPONSIVE RÉFÉRENCEMENT &
36. SEO : Les experts, c’est vous ! Soyez en discussion permanente avec 
 les designers & développeurs Crédit photo : Ross Mayfield
37. Google aime le
 Responsive Web Design
38. Responsive Design is Google’s
 recommended design pattern. « »
39. POURQUOI GOOGLE AIME-T-IL LE RESPONSIVE WEB DESIGN ?
40. Une seule URL pour chaque contenu
41. Un seul code source identique pour toutes les situations
42. Cela réduit les erreurs de navigation Crédit photo : Tadson Bussey
43. Les stratégies content first ou mobile first mettent en avant votre contenu (et donc sa qualité ou pas ;) )
44. ENFIN, UN PETIT COUP D’ŒIL À L’ACTUALITÉ
45. Accelerated Mobile Pages : une fausse bonne idée ?
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