les jeudis de la découverte
TRANSCRIPT
![Page 1: Les jeudis de la découverte](https://reader036.vdocuments.mx/reader036/viewer/2022062320/55cb0220bb61eb807a8b4662/html5/thumbnails/1.jpg)
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 LYH 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
![Page 2: Les jeudis de la découverte](https://reader036.vdocuments.mx/reader036/viewer/2022062320/55cb0220bb61eb807a8b4662/html5/thumbnails/2.jpg)
LE RESPONSIVEC ’EST QUOI ?T O U T L E M O N D E E N P A R L E ,
M A I S …
![Page 3: Les jeudis de la découverte](https://reader036.vdocuments.mx/reader036/viewer/2022062320/55cb0220bb61eb807a8b4662/html5/thumbnails/3.jpg)
C E N ’ E S T PA S …
m.monsite.com
![Page 4: Les jeudis de la découverte](https://reader036.vdocuments.mx/reader036/viewer/2022062320/55cb0220bb61eb807a8b4662/html5/thumbnails/4.jpg)
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. »
![Page 5: Les jeudis de la découverte](https://reader036.vdocuments.mx/reader036/viewer/2022062320/55cb0220bb61eb807a8b4662/html5/thumbnails/5.jpg)
POURQUOILE RESPONSIVE ?
A L E X Y S O U C I E T
![Page 6: Les jeudis de la découverte](https://reader036.vdocuments.mx/reader036/viewer/2022062320/55cb0220bb61eb807a8b4662/html5/thumbnails/6.jpg)
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
![Page 7: Les jeudis de la découverte](https://reader036.vdocuments.mx/reader036/viewer/2022062320/55cb0220bb61eb807a8b4662/html5/thumbnails/7.jpg)
Le 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-friendlyAvertissements compatibilité mobile dans GWT Outil de test de compatibilité
Source: http://searchengineland.com/winners-losers-google-mobilegeddon-219786
![Page 8: Les jeudis de la découverte](https://reader036.vdocuments.mx/reader036/viewer/2022062320/55cb0220bb61eb807a8b4662/html5/thumbnails/8.jpg)
Le s n o u v e a u x c r i t è re 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
![Page 9: Les jeudis de la découverte](https://reader036.vdocuments.mx/reader036/viewer/2022062320/55cb0220bb61eb807a8b4662/html5/thumbnails/9.jpg)
S t r a t é g i e m o b i l e : l e s c o n fi 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/
Site dédié Distinction HTML
URL identique
version desktopwww.domaine.com
version mobilewww.domaine.com
2 sites distincts, le html change en fonction du
user-agent
Site adaptéDistinction CSS URL identique
version desktopwww.domaine.com
version mobilewww.domaine.com
1 seul site en web responsive, le site va s’adapter selon le
format du support
Site dédié Distinction HTML
URL différente
version desktopwww.domaine.com
version mobilem.domaine.com
2 sites distincts
Dynamic Serving Responsive Design Site mobile dédié
![Page 10: Les jeudis de la découverte](https://reader036.vdocuments.mx/reader036/viewer/2022062320/55cb0220bb61eb807a8b4662/html5/thumbnails/10.jpg)
Le re s p o n s i v e re 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)”
![Page 11: Les jeudis de la découverte](https://reader036.vdocuments.mx/reader036/viewer/2022062320/55cb0220bb61eb807a8b4662/html5/thumbnails/11.jpg)
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
TOUTEN UN !
![Page 12: Les jeudis de la découverte](https://reader036.vdocuments.mx/reader036/viewer/2022062320/55cb0220bb61eb807a8b4662/html5/thumbnails/12.jpg)
L a s o l u t i o n i d é a l e ?
1212
![Page 13: Les jeudis de la découverte](https://reader036.vdocuments.mx/reader036/viewer/2022062320/55cb0220bb61eb807a8b4662/html5/thumbnails/13.jpg)
Le 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
![Page 14: Les jeudis de la découverte](https://reader036.vdocuments.mx/reader036/viewer/2022062320/55cb0220bb61eb807a8b4662/html5/thumbnails/14.jpg)
Le 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
![Page 15: Les jeudis de la découverte](https://reader036.vdocuments.mx/reader036/viewer/2022062320/55cb0220bb61eb807a8b4662/html5/thumbnails/15.jpg)
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
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
![Page 16: Les jeudis de la découverte](https://reader036.vdocuments.mx/reader036/viewer/2022062320/55cb0220bb61eb807a8b4662/html5/thumbnails/16.jpg)
E t l a c o n c u r re n c e ?
1616Dynamic Serving Site mobile dédié
![Page 17: Les jeudis de la découverte](https://reader036.vdocuments.mx/reader036/viewer/2022062320/55cb0220bb61eb807a8b4662/html5/thumbnails/17.jpg)
DESIGN D ’UNSITE RESPONSIVE
A U R E L I E N N A U W E L A E R S
![Page 18: Les jeudis de la découverte](https://reader036.vdocuments.mx/reader036/viewer/2022062320/55cb0220bb61eb807a8b4662/html5/thumbnails/18.jpg)
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
![Page 19: Les jeudis de la découverte](https://reader036.vdocuments.mx/reader036/viewer/2022062320/55cb0220bb61eb807a8b4662/html5/thumbnails/19.jpg)
E N P RAT 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…
![Page 20: Les jeudis de la découverte](https://reader036.vdocuments.mx/reader036/viewer/2022062320/55cb0220bb61eb807a8b4662/html5/thumbnails/20.jpg)
B R I E F
![Page 21: Les jeudis de la découverte](https://reader036.vdocuments.mx/reader036/viewer/2022062320/55cb0220bb61eb807a8b4662/html5/thumbnails/21.jpg)
Z O N I N G
![Page 22: Les jeudis de la découverte](https://reader036.vdocuments.mx/reader036/viewer/2022062320/55cb0220bb61eb807a8b4662/html5/thumbnails/22.jpg)
Z O N I N G , D É C L I M O B I L E
![Page 23: Les jeudis de la découverte](https://reader036.vdocuments.mx/reader036/viewer/2022062320/55cb0220bb61eb807a8b4662/html5/thumbnails/23.jpg)
D U B R I E F A U Z O N I N G
![Page 24: Les jeudis de la découverte](https://reader036.vdocuments.mx/reader036/viewer/2022062320/55cb0220bb61eb807a8b4662/html5/thumbnails/24.jpg)
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
![Page 25: Les jeudis de la découverte](https://reader036.vdocuments.mx/reader036/viewer/2022062320/55cb0220bb61eb807a8b4662/html5/thumbnails/25.jpg)
C O LO N N E S
Bootstrap : 12 colonnes natives, fusionnables
![Page 26: Les jeudis de la découverte](https://reader036.vdocuments.mx/reader036/viewer/2022062320/55cb0220bb61eb807a8b4662/html5/thumbnails/26.jpg)
R E CYC 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
![Page 27: Les jeudis de la découverte](https://reader036.vdocuments.mx/reader036/viewer/2022062320/55cb0220bb61eb807a8b4662/html5/thumbnails/27.jpg)
M I S E E N PAG E
![Page 28: Les jeudis de la découverte](https://reader036.vdocuments.mx/reader036/viewer/2022062320/55cb0220bb61eb807a8b4662/html5/thumbnails/28.jpg)
M I S E E N PAG E
![Page 29: Les jeudis de la découverte](https://reader036.vdocuments.mx/reader036/viewer/2022062320/55cb0220bb61eb807a8b4662/html5/thumbnails/29.jpg)
M I S E E N PAG E
![Page 30: Les jeudis de la découverte](https://reader036.vdocuments.mx/reader036/viewer/2022062320/55cb0220bb61eb807a8b4662/html5/thumbnails/30.jpg)
M I S E E N PAG E
![Page 31: Les jeudis de la découverte](https://reader036.vdocuments.mx/reader036/viewer/2022062320/55cb0220bb61eb807a8b4662/html5/thumbnails/31.jpg)
DU CÔTÉ DE L’ INTÉGRAT ION
S T E V E N L E B O L L O C H
![Page 32: Les jeudis de la découverte](https://reader036.vdocuments.mx/reader036/viewer/2022062320/55cb0220bb61eb807a8b4662/html5/thumbnails/32.jpg)
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{…}
![Page 33: Les jeudis de la découverte](https://reader036.vdocuments.mx/reader036/viewer/2022062320/55cb0220bb61eb807a8b4662/html5/thumbnails/33.jpg)
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
![Page 34: Les jeudis de la découverte](https://reader036.vdocuments.mx/reader036/viewer/2022062320/55cb0220bb61eb807a8b4662/html5/thumbnails/34.jpg)
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) {}
![Page 35: Les jeudis de la découverte](https://reader036.vdocuments.mx/reader036/viewer/2022062320/55cb0220bb61eb807a8b4662/html5/thumbnails/35.jpg)
F RA M E W O R K S
• Twitter Bootstrap• Foundation• Elasticss • Blueprintcss• Knacss• Gridless• Simple-grid• golden-grid-system
![Page 36: Les jeudis de la découverte](https://reader036.vdocuments.mx/reader036/viewer/2022062320/55cb0220bb61eb807a8b4662/html5/thumbnails/36.jpg)
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
![Page 37: Les jeudis de la découverte](https://reader036.vdocuments.mx/reader036/viewer/2022062320/55cb0220bb61eb807a8b4662/html5/thumbnails/37.jpg)
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
![Page 38: Les jeudis de la découverte](https://reader036.vdocuments.mx/reader036/viewer/2022062320/55cb0220bb61eb807a8b4662/html5/thumbnails/38.jpg)
B o o t s t r a p G r i d 1
![Page 39: Les jeudis de la découverte](https://reader036.vdocuments.mx/reader036/viewer/2022062320/55cb0220bb61eb807a8b4662/html5/thumbnails/39.jpg)
B o o t s t r a p G r i d 1
![Page 40: Les jeudis de la découverte](https://reader036.vdocuments.mx/reader036/viewer/2022062320/55cb0220bb61eb807a8b4662/html5/thumbnails/40.jpg)
B o o t s t r a p G r i d 2
![Page 41: Les jeudis de la découverte](https://reader036.vdocuments.mx/reader036/viewer/2022062320/55cb0220bb61eb807a8b4662/html5/thumbnails/41.jpg)
B o o t s t r a p G r i d 2
![Page 42: Les jeudis de la découverte](https://reader036.vdocuments.mx/reader036/viewer/2022062320/55cb0220bb61eb807a8b4662/html5/thumbnails/42.jpg)
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
![Page 43: Les jeudis de la découverte](https://reader036.vdocuments.mx/reader036/viewer/2022062320/55cb0220bb61eb807a8b4662/html5/thumbnails/43.jpg)
DU CÔTÉ DE LA PUBL IC ITE
D I D I E R S T E G E R
![Page 44: Les jeudis de la découverte](https://reader036.vdocuments.mx/reader036/viewer/2022062320/55cb0220bb61eb807a8b4662/html5/thumbnails/44.jpg)
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 PA R FA I T
Dans un monde parfait qui n’existe pas encore
Toutes les publicités seraient en responsive
![Page 45: Les jeudis de la découverte](https://reader036.vdocuments.mx/reader036/viewer/2022062320/55cb0220bb61eb807a8b4662/html5/thumbnails/45.jpg)
L A P U B L I C I T E DA 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 tailleAu bon format
![Page 46: Les jeudis de la découverte](https://reader036.vdocuments.mx/reader036/viewer/2022062320/55cb0220bb61eb807a8b4662/html5/thumbnails/46.jpg)
POUR ALLERPLUS LO IN
C L I Q U E - M O I F O R T
![Page 47: Les jeudis de la découverte](https://reader036.vdocuments.mx/reader036/viewer/2022062320/55cb0220bb61eb807a8b4662/html5/thumbnails/47.jpg)
Q U E L Q 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
![Page 48: Les jeudis de la découverte](https://reader036.vdocuments.mx/reader036/viewer/2022062320/55cb0220bb61eb807a8b4662/html5/thumbnails/48.jpg)
E T A U S S I …
![Page 49: Les jeudis de la découverte](https://reader036.vdocuments.mx/reader036/viewer/2022062320/55cb0220bb61eb807a8b4662/html5/thumbnails/49.jpg)
M E RC I D E VO T R E ATT 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