Le document discute de l'importance du design web responsive et de son impact sur le référencement SEO. Il souligne que Google préfère les sites responsives pour un meilleur crawl et une maintenance simplifiée, tout en précisant que cela ne garantit pas un meilleur classement. Les meilleures pratiques pour une conception efficace et rapide sont également abordées, en insistant sur l'optimisation des images et l'utilisation de media queries.

1. 4 J U I N 2 0 1 5
R E S P O N S I V E W E B D E S I G N :
D U D E S I G N A U C O D E
S E O - F R I E N D LY
H T T P S : / / W W W . Y O U T U B E . C O M / W A T C H ? V = O Z J J R I C 1 F 2 S

2. L E R E S P O N S I V E
C ’ E S T Q U O I ?
T O U T L E M O N D E E N P A R L E ,
M A I S …

3. C E N ’ E S T PA S …
m.monsite.com

4. R É P O N S E D U D I C O
« Un site responsive s’adapte à tout type d’appareil, de manière
transparente pour l’utilisateur,
en conservant une expérience de lecture et de navigation
optimale. »

5. P O U R Q U O I
L E R E S P O N S I V E ?
A L E X Y S O U C I E T

6. L ’ e n j e u d u m o b i l e
• Exemple du contexte mobile au sein
d’un des sites de Lagardère Active :
60%
40%
Répartition de l’audience
Destkop + Tablette Mobile
>50%de recherches sur Google se font sur mobiles*
*Source : Annonce faite au Google AdWords Performance Summit

7. L e s « u p d a t e s » d e G o o g l e
7
On s’y attendait depuis longtemps !
2013 :
Google annonce qu’à l’avenir, la compatibilité mobile pourrait devenir un critère
de classement
2014 :
Avertissements sur les technologies non supportées
Arrivée du label Mobile-friendly
Avertissements compatibilité mobile dans GWT
Outil de test de compatibilité
Source: http://searchengineland.com/winners-losers-google-mobilegeddon-219786

8. L e s n o u v e a u x c r i t è r e s m o b i l e s
• 21 avril 2015 : Annonce faite par Google au sujet de la prise en compte de la
compatibilité mobile d'une page web comme critère de pertinence de son
moteur mobile
• Un déploiement finalisé…1 mois après  Un impact peu perceptible
(beaucoup de turbulences dans les serps liées également à d’autres updates)
• Ce qui a réellement changé pour l’instant : (en France)
– Des serps mobile encore très peu différentes des serps desktop
• Rappel des critères pris en compte pour définir si une page est mobile-friendly:
• Eléments tactiles trop proches
• Petite taille de police
• Fenêtre d’affichage non configurée (META VIEWPORT)
• Utilisation de contenu Flash
• La taille du contenu qui n’est pas adaptée à la fenêtre d'affichage
• Le prochain update de son « algorithme mobile » est déjà prévu : il se
nommerait PLATYPUS (ornithorynque)
• Prise en compte des interstitiels
• Temps de chargement des pages

9. S t r a t é g i e m o b i l e : l e s c o n f i g s
• Google supporte ces 3 configurations :
• …mais Google a sa petite préférence. 9
Quelque soit la configuration choisie, des consignes spécifiques éditées par Google :
https://developers.google.com/webmasters/mobile-sites/
Dynamic Serving Responsive Design Site mobile dédié

10. L e r e s p o n s i v e r e c o m m a n d é p a r
G o o g l e
10
• Pourquoi le responsive est la solution préconisée par Google ?
• Un crawl unique  gain ressources et temps pour Google
• Signaux des liens plus clairs
• Sa seule contrainte est dans sa compréhension du code source (à
la recherche du css particulier pour le mobile)
• Mais en aucun cas le RWD procure un boost de classement :
10
https://productforums.google.com/forum/#!topic/webmasters/EABYGTWbJAQ/discussion
“We do not rank responsive web design sites better than sites using other
configurations (separate site for mobile or dynamic serving)”

11. I n t é r ê t p o u r l e S E O
11
• Outre les intérêts de lisibilité multi device et de maintenance
commune :
• Une solution recommandée par Google
• Un crawl unique
• Pas de redirection à gérer
• La capitalisation sur une seule URL (pas de dilution des signaux)
11
TOUT
EN UN !

12. L a s o l u t i o n i d é a l e ?
1212

13. L e s r i s q u e s
131313
S’adapter à tous les formats ça peut devenir lourd…
Le principal problème : le temps de chargement lié
principalement au poids des images

14. L e s r i s q u e s
1414
• Risques sur les performances :
• Chargement des éléments superflus (ce qui ne s’affiche pas pour une
version)
• Poids de l’image en format desktop sur le mobile
• Une taille trop réduite pour l’image de référence
14
Source : trilibis.com: seul 21% des 155 sites testés se chargent en moins de 4 secondes
DÉGRADATION DE LA PERFORMANCE :
• effective (loading time)
• ressentie (start to render / time to render / speed index)
TAUX DE REBOND ÉLEVÉ
IMPACT NEGATIF
SUR LE SEO

15. B e s t p r a c t i c e s
1515
• Pas de restrictions de crawl sur les css et js et images
• Utilisation de la META "viewport"
• Utilisation de l’élément <picture> pour spécifier des images différentes en
fonction des caractéristiques de l'appareil
• https://developers.google.com/web/fundamentals/media/images/images-in-markup#art-direction-in-
responsive-images-with-picture
• RESS = Responsive + Server Side Components
• http://adaptive-images.com/
• TIPS :
– les images de plus grandes résolutions prennent le pas sur des résolutions plus faibles
– les images comprises dans (a href, picture srcset, img src, …) sont bien interprétées par
Google
Source : http://www.trilibis.com/snowio.jsp
Just add SNOW.IO to your webserver and your responsive site will
automatically serve an image optimized for the target device

16. E t l a c o n c u r r e n c e ?
1616Dynamic Serving Site mobile dédié

17. D E S I G N D ’ U N
S I T E R E S P O N S I V E
A U R E L I E N N A U W E L A E R S

18. E N E X E M P L E S
http://www.liquidapsive.com/
• Statique : tout en tailles fixes, à l’ancienne
• Liquide : un gabarit, tout en pourcentages
• Adaptative : plusieurs gabarits, à tailles fixes
• Responsive : plusieurs gabarits, en pourcentages

19. E N P R AT I Q U E , C ’ E S T…
• Une grille fluide, exprimée en pourcentages
• Des contenus flexibles
• Des media queries
• « mobile first » et « enrichissement progressif »
• Selon les cas : du JS, du jQuery, du RESS…

20. B R I E F

21. Z O N I N G

22. Z O N I N G , D É C L I M O B I L E

23. D U B R I E F A U Z O N I N G

24. L A R G E U R D E C O N T E N E U R
Quelle largeur pour la maquette ?
• Standard Bootstrap : 960
• Contraintes des formats pub (ELLE : 1000)
• Standards de tailles d’écran (Gulli : 1200)
• Choix esthétique

25. C O LO N N E S
Bootstrap : 12 colonnes natives, fusionnables

26. R E C Y C L E R S E S C O LO N N E S
Desktop Tablette Mobile
12 col 8 col 4 col
8 col 4 col

27. M I S E E N PA G E

28. M I S E E N PA G E

29. M I S E E N PA G E

30. M I S E E N PA G E

31. D U C Ô T É D E L ’ I N T É G R AT I O N
S T E V E N L E B O L L O C H

32. C o m m e n t : M e d i a Q u e r i e s
• Le responsive Web Design est la combinaison du design
fluide préexistant et des possibilités des Media Queries
CSS3
• mediaQueries CSS2 :
@media screen {
body { font-size:100%;}
}
@media print {
body { font-size:15px;}
#aside { display : none ; }
}
@media handheld{…}

33. C S S 3 M e d i a Q u e r i e s
• media types : braille, embossed, handheld, print,
projection, screen, speech, tty, tv, et… all
• Nouvelles caractéristiques :
– Width / height,
– device-width/device-height ,
– orientation,
– aspect-ratio,
– device-aspect-ratio,
– Resolution (dpi)
– color (bits), color-index (num), monochrome
(bits/pixels), scan, grid

34. U t i l i s a t i o n :
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}

35. F R A M E W O R KS
• Twitter Bootstrap
• Foundation
• Elasticss
• Blueprintcss
• Knacss
• Gridless
• Simple-grid
• golden-grid-system

36. B o n n e s p r a t i q u e s
• Mobile first
• Pas de « device specific breakpoint »
• « Device driven breakpoints »
• Au-delà de l’intégration: touch UI, RESS, Ajax

37. C a s d ' é c o l e : B o o t s t r a p
• Grille d'intégration de sites sur 12 colonnes ( configurable )
• layouts utilisables entre 4 breakpoints prédéfinis (configurables)
– col-xs- : 0 à 768px
– col-sm- : 768 à 991px
– col-md- : 992 à 1199px
– col-lg- : 1200px et au-delà
– Exemple : bootstrap.css

38. B o o t s t r a p G r i d 1

39. B o o t s t r a p G r i d 1

40. B o o t s t r a p G r i d 2

41. B o o t s t r a p G r i d 2

42. C S S l i n k s
http://getbootstrap.com/css/
http://getbootstrap.com/customize/
http://foundation.zurb.com/
http://elasticss.com/
http://knacss.com/
http://blueprintcss.org/
http://unsemantic.com/
https://github.com/thatcoolguy/gridless-boilerplate
http://thisisdallas.github.io/Simple-Grid/
https://github.com/jonikorpi/Golden-Grid-System

43. D U C Ô T É D E L A
P U B L I C I T E
D I D I E R S T E G E R

44. L A P U B L I C I T E D A N S U N M O N D E
R E S P O N S I V E P A R F A I T
Dans un monde parfait qui n’existe pas encore
Toutes les publicités seraient en responsive

45. L A P U B L I C I T E D A N S L E M O N D E
D ’ A U J O U R D ’ H U I
C’est la publicité ADAPTATIVE
L’ad server gère la complexité et diffuse la création
À la bonne taille
Au bon format

46. P O U R A L L E R
P L U S L O I N
C L I Q U E - M O I F O R T

47. Q U E LQ U E S L I E N S
• Une introduction sur Alsacréations
• Plein d’exemples sur mediaqueri.es
• Des ressources sur This is responsive
• Les grilles de Bootstrap
• Standards de tailles d’écrans sur W3C
• Calculer ses propres grilles avec gridcalculator.dk
• Deux livres de référence : Responsive Web Design d’Ethan
Marcotte, et Mobile First de Luke Wroblewski
• Implémentation basique RWD pour images
• Découvrir le RESS
• Solution : Adaptive images et RWD
• Bible de toutes les techniques d’images

48. E T A U S S I …

49. M E R C I D E V O T R E AT T E N T I O N
P R O C H A I N E É D I T I O N :
J E N K I N S :
I N T É G R A T I O N C O N T I N U E ,
P O U R Q U O I F A I R E ?
2 5 J U I N 2 0 1 5