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

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

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