View
95
Download
0
Category
Preview:
Citation preview
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
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 …
C E N ’ E S T PA S …
m.monsite.com
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. »
POURQUOILE RESPONSIVE ?
A L E X Y S O U C I E T
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
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
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
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é
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)”
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 !
L a s o l u t i o n i d é a l e ?
1212
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
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
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
E t l a c o n c u r re n c e ?
1616Dynamic Serving Site mobile dédié
DESIGN D ’UNSITE RESPONSIVE
A U R E L I E N N A U W E L A E R S
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
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…
B R I E F
Z O N I N G
Z O N I N G , D É C L I M O B I L E
D U B R I E F A U Z O N I N G
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
C O LO N N E S
Bootstrap : 12 colonnes natives, fusionnables
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
M I S E E N PAG E
M I S E E N PAG E
M I S E E N PAG E
M I S E E N PAG E
DU CÔTÉ DE L’ INTÉGRAT ION
S T E V E N L E B O L L O C H
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{…}
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
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) {}
F RA M E W O R K S
• Twitter Bootstrap• Foundation• Elasticss • Blueprintcss• Knacss• Gridless• Simple-grid• golden-grid-system
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
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
B o o t s t r a p G r i d 1
B o o t s t r a p G r i d 1
B o o t s t r a p G r i d 2
B o o t s t r a p G r i d 2
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
DU CÔTÉ DE LA PUBL IC ITE
D I D I E R S T E G E R
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
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
POUR ALLERPLUS LO IN
C L I Q U E - M O I F O R T
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
E T A U S S I …
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
Recommended