responsive webdesign : du design au code SEO-friendly La vidéo de la présentation est disponible ici https://www.youtube.com/watch?v=pCono5RAAyk

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