of 49 /49
4 JUIN 2015 RESPONSIVE WEBDESIGN : DU DESIGN AU CODE SEO-FRIENDLY HTTPS://WWW.YOUTUBE.COM/WATCH?V=OZJJRIC1F2S

Les jeudis de la découverte

Embed Size (px)

Text of Les jeudis de la découverte

Page 1: Les jeudis de la découverte

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

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

C E N ’ E S T PA S …

m.monsite.com

Page 4: Les jeudis de la découverte

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

POURQUOILE RESPONSIVE ?

A L E X Y S O U C I E T

Page 6: Les jeudis de la découverte

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

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

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

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

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

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

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

1212

Page 13: Les jeudis de la découverte

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

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

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

Page 16: Les jeudis de la découverte

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

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

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

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

B R I E F

Page 21: Les jeudis de la découverte

Z O N I N G

Page 22: Les jeudis de la découverte

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

Page 23: Les jeudis de la découverte

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

Page 24: Les jeudis de la découverte

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

C O LO N N E S

Bootstrap : 12 colonnes natives, fusionnables

Page 26: Les jeudis de la découverte

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

M I S E E N PAG E

Page 28: Les jeudis de la découverte

M I S E E N PAG E

Page 29: Les jeudis de la découverte

M I S E E N PAG E

Page 30: Les jeudis de la découverte

M I S E E N PAG E

Page 31: Les jeudis de la découverte

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

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

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

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

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

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

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

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

Page 39: Les jeudis de la découverte

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

Page 40: Les jeudis de la découverte

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

Page 41: Les jeudis de la découverte

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

Page 42: Les jeudis de la découverte

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

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

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

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

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

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

E T A U S S I …

Page 49: Les jeudis de la découverte

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