SlideShare une entreprise Scribd logo
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
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 …
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. »
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
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
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
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
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é
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)”
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 !
L a s o l u t i o n i d é a l e ?
1212
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
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
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 r e n c e ?
1616Dynamic Serving Site mobile dédié
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
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 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…
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 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
M I S E E N PA G E
M I S E E N PA G E
M I S E E N PA G E
M I S E E N PA G E
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
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 R A M E W O R KS
• 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
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
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
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
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
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
E T A U S S I …
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

Contenu connexe

Tendances

Quel ROI attendre d'un projet de création de pages AMP ?
Quel ROI attendre d'un projet de création de pages AMP ?Quel ROI attendre d'un projet de création de pages AMP ?
Quel ROI attendre d'un projet de création de pages AMP ?Semrush France
 
Un site web responsive en une heure
Un site web responsive en une heureUn site web responsive en une heure
Un site web responsive en une heureRaphaël Goetter
 
Seocamp2016 : javascript et indexation, où en est-on ?
Seocamp2016 : javascript et indexation, où en est-on ?Seocamp2016 : javascript et indexation, où en est-on ?
Seocamp2016 : javascript et indexation, où en est-on ?Madeline Pinthon
 
Atelier wp seo bordeaux par alternat
Atelier wp seo bordeaux par alternatAtelier wp seo bordeaux par alternat
Atelier wp seo bordeaux par alternatmaurice LARGERON
 
"Responsive Design" : Pourquoi et comment y aller ?
 "Responsive Design" : Pourquoi et comment y aller ? "Responsive Design" : Pourquoi et comment y aller ?
"Responsive Design" : Pourquoi et comment y aller ?WebSchool Orléans
 
Seocamp Bayonne - JS et SEO
Seocamp  Bayonne - JS et SEOSeocamp  Bayonne - JS et SEO
Seocamp Bayonne - JS et SEOErlé Alberton
 
Le responsive design : adapter ses contenus aux formats mobiles
Le responsive design : adapter ses contenus aux formats mobilesLe responsive design : adapter ses contenus aux formats mobiles
Le responsive design : adapter ses contenus aux formats mobilesBig5media
 
2018 le seo à l heure du mobile first index
2018 le seo à l heure du mobile first index2018 le seo à l heure du mobile first index
2018 le seo à l heure du mobile first indexPhilippe YONNET
 
Nouvelles architectures de sites web et SEO
Nouvelles architectures de sites web et SEONouvelles architectures de sites web et SEO
Nouvelles architectures de sites web et SEOPhilippe YONNET
 
Responsive Web Design : best practices et retour d'expérience de Backelite et...
Responsive Web Design : best practices et retour d'expérience de Backelite et...Responsive Web Design : best practices et retour d'expérience de Backelite et...
Responsive Web Design : best practices et retour d'expérience de Backelite et...Idean France
 
Le Edge SEO : comment faire du SEO dans le Cloud quand tout le reste a échoué
Le Edge SEO : comment faire du SEO dans le Cloud quand tout le reste a échouéLe Edge SEO : comment faire du SEO dans le Cloud quand tout le reste a échoué
Le Edge SEO : comment faire du SEO dans le Cloud quand tout le reste a échouéPhilippe YONNET
 
Responsive Web Design - Enjeux, Solutions, Méthodologie
Responsive Web Design - Enjeux, Solutions, MéthodologieResponsive Web Design - Enjeux, Solutions, Méthodologie
Responsive Web Design - Enjeux, Solutions, Méthodologieekino
 
Les critères de qualité de vos pages web selon Google
Les critères de qualité de vos pages web selon GoogleLes critères de qualité de vos pages web selon Google
Les critères de qualité de vos pages web selon GooglePhilippe YONNET
 
Petit Déj' "Ergonomie et SEO" organisé par Use Age le 26 Septembre 2013
Petit Déj' "Ergonomie et SEO" organisé par Use Age le 26 Septembre 2013Petit Déj' "Ergonomie et SEO" organisé par Use Age le 26 Septembre 2013
Petit Déj' "Ergonomie et SEO" organisé par Use Age le 26 Septembre 2013Use Age
 
Tuniseo 2017 année charnière pour le SEO ?
Tuniseo  2017 année charnière pour le SEO ?Tuniseo  2017 année charnière pour le SEO ?
Tuniseo 2017 année charnière pour le SEO ?Philippe YONNET
 
Core web vitals - Webinar Neper du 3 décembre 2020
Core web vitals - Webinar Neper du 3 décembre 2020Core web vitals - Webinar Neper du 3 décembre 2020
Core web vitals - Webinar Neper du 3 décembre 2020Philippe YONNET
 
L'IA dans l'algorithme de Google - Matin neperien 7 juillet 2021
L'IA dans l'algorithme de Google - Matin neperien 7 juillet 2021L'IA dans l'algorithme de Google - Matin neperien 7 juillet 2021
L'IA dans l'algorithme de Google - Matin neperien 7 juillet 2021Philippe YONNET
 
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...Peak Ace
 
Webperf : par où commencer ? - SEOGoodVibes
Webperf : par où commencer ? - SEOGoodVibesWebperf : par où commencer ? - SEOGoodVibes
Webperf : par où commencer ? - SEOGoodVibesMadeline Pinthon
 

Tendances (19)

Quel ROI attendre d'un projet de création de pages AMP ?
Quel ROI attendre d'un projet de création de pages AMP ?Quel ROI attendre d'un projet de création de pages AMP ?
Quel ROI attendre d'un projet de création de pages AMP ?
 
Un site web responsive en une heure
Un site web responsive en une heureUn site web responsive en une heure
Un site web responsive en une heure
 
Seocamp2016 : javascript et indexation, où en est-on ?
Seocamp2016 : javascript et indexation, où en est-on ?Seocamp2016 : javascript et indexation, où en est-on ?
Seocamp2016 : javascript et indexation, où en est-on ?
 
Atelier wp seo bordeaux par alternat
Atelier wp seo bordeaux par alternatAtelier wp seo bordeaux par alternat
Atelier wp seo bordeaux par alternat
 
"Responsive Design" : Pourquoi et comment y aller ?
 "Responsive Design" : Pourquoi et comment y aller ? "Responsive Design" : Pourquoi et comment y aller ?
"Responsive Design" : Pourquoi et comment y aller ?
 
Seocamp Bayonne - JS et SEO
Seocamp  Bayonne - JS et SEOSeocamp  Bayonne - JS et SEO
Seocamp Bayonne - JS et SEO
 
Le responsive design : adapter ses contenus aux formats mobiles
Le responsive design : adapter ses contenus aux formats mobilesLe responsive design : adapter ses contenus aux formats mobiles
Le responsive design : adapter ses contenus aux formats mobiles
 
2018 le seo à l heure du mobile first index
2018 le seo à l heure du mobile first index2018 le seo à l heure du mobile first index
2018 le seo à l heure du mobile first index
 
Nouvelles architectures de sites web et SEO
Nouvelles architectures de sites web et SEONouvelles architectures de sites web et SEO
Nouvelles architectures de sites web et SEO
 
Responsive Web Design : best practices et retour d'expérience de Backelite et...
Responsive Web Design : best practices et retour d'expérience de Backelite et...Responsive Web Design : best practices et retour d'expérience de Backelite et...
Responsive Web Design : best practices et retour d'expérience de Backelite et...
 
Le Edge SEO : comment faire du SEO dans le Cloud quand tout le reste a échoué
Le Edge SEO : comment faire du SEO dans le Cloud quand tout le reste a échouéLe Edge SEO : comment faire du SEO dans le Cloud quand tout le reste a échoué
Le Edge SEO : comment faire du SEO dans le Cloud quand tout le reste a échoué
 
Responsive Web Design - Enjeux, Solutions, Méthodologie
Responsive Web Design - Enjeux, Solutions, MéthodologieResponsive Web Design - Enjeux, Solutions, Méthodologie
Responsive Web Design - Enjeux, Solutions, Méthodologie
 
Les critères de qualité de vos pages web selon Google
Les critères de qualité de vos pages web selon GoogleLes critères de qualité de vos pages web selon Google
Les critères de qualité de vos pages web selon Google
 
Petit Déj' "Ergonomie et SEO" organisé par Use Age le 26 Septembre 2013
Petit Déj' "Ergonomie et SEO" organisé par Use Age le 26 Septembre 2013Petit Déj' "Ergonomie et SEO" organisé par Use Age le 26 Septembre 2013
Petit Déj' "Ergonomie et SEO" organisé par Use Age le 26 Septembre 2013
 
Tuniseo 2017 année charnière pour le SEO ?
Tuniseo  2017 année charnière pour le SEO ?Tuniseo  2017 année charnière pour le SEO ?
Tuniseo 2017 année charnière pour le SEO ?
 
Core web vitals - Webinar Neper du 3 décembre 2020
Core web vitals - Webinar Neper du 3 décembre 2020Core web vitals - Webinar Neper du 3 décembre 2020
Core web vitals - Webinar Neper du 3 décembre 2020
 
L'IA dans l'algorithme de Google - Matin neperien 7 juillet 2021
L'IA dans l'algorithme de Google - Matin neperien 7 juillet 2021L'IA dans l'algorithme de Google - Matin neperien 7 juillet 2021
L'IA dans l'algorithme de Google - Matin neperien 7 juillet 2021
 
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
 
Webperf : par où commencer ? - SEOGoodVibes
Webperf : par où commencer ? - SEOGoodVibesWebperf : par où commencer ? - SEOGoodVibes
Webperf : par où commencer ? - SEOGoodVibes
 

En vedette

Relations street art, graffiti & collectivités locales - R. Cordat
Relations street art, graffiti & collectivités locales - R. Cordat Relations street art, graffiti & collectivités locales - R. Cordat
Relations street art, graffiti & collectivités locales - R. Cordat Rébecca Cordat
 
Developper une Strategie de Contenu - Conférence AxeNet SMX 2013
Developper une Strategie de Contenu - Conférence AxeNet SMX 2013Developper une Strategie de Contenu - Conférence AxeNet SMX 2013
Developper une Strategie de Contenu - Conférence AxeNet SMX 2013Guillaume Eouzan
 
Atelier national de restitution sur le foncier rural dans la zone affectée pa...
Atelier national de restitution sur le foncier rural dans la zone affectée pa...Atelier national de restitution sur le foncier rural dans la zone affectée pa...
Atelier national de restitution sur le foncier rural dans la zone affectée pa...Global Water Initiative - West Africa
 
Curriculum vitea 2015 mon c.v
Curriculum vitea 2015   mon c.vCurriculum vitea 2015   mon c.v
Curriculum vitea 2015 mon c.vJoël Bourgoin
 
Fsn205 detection mensongeentrevuecognitive
Fsn205 detection mensongeentrevuecognitiveFsn205 detection mensongeentrevuecognitive
Fsn205 detection mensongeentrevuecognitiveSteph Cliche
 
Gfv vesta-tbd
Gfv vesta-tbdGfv vesta-tbd
Gfv vesta-tbdGFV Vesta
 
Derecho laboral asignacion uno
Derecho laboral asignacion unoDerecho laboral asignacion uno
Derecho laboral asignacion unoPedro Morales
 
Le monde des machines
Le monde des machinesLe monde des machines
Le monde des machinesMarisev
 
Camille MERTZ & Aurore DUPONT d’APREMONT -
Camille MERTZ & Aurore DUPONT d’APREMONT - Camille MERTZ & Aurore DUPONT d’APREMONT -
Camille MERTZ & Aurore DUPONT d’APREMONT - MBA ESG
 
Dossier de production groupe n°143
Dossier de production groupe n°143Dossier de production groupe n°143
Dossier de production groupe n°143Mickael Nora
 
Guide utilisateur africa-it
Guide utilisateur africa-itGuide utilisateur africa-it
Guide utilisateur africa-itAfrica-it
 
Desartsonnants en mots sons et images
Desartsonnants en mots sons et imagesDesartsonnants en mots sons et images
Desartsonnants en mots sons et imagesDesarts Sonnants
 
La pluralité de la presse et des lignes éditoriales-Magazines- attentats Char...
La pluralité de la presse et des lignes éditoriales-Magazines- attentats Char...La pluralité de la presse et des lignes éditoriales-Magazines- attentats Char...
La pluralité de la presse et des lignes éditoriales-Magazines- attentats Char...Nathalie Barbery-Vannier
 

En vedette (20)

Relations street art, graffiti & collectivités locales - R. Cordat
Relations street art, graffiti & collectivités locales - R. Cordat Relations street art, graffiti & collectivités locales - R. Cordat
Relations street art, graffiti & collectivités locales - R. Cordat
 
Developper une Strategie de Contenu - Conférence AxeNet SMX 2013
Developper une Strategie de Contenu - Conférence AxeNet SMX 2013Developper une Strategie de Contenu - Conférence AxeNet SMX 2013
Developper une Strategie de Contenu - Conférence AxeNet SMX 2013
 
Atelier national de restitution sur le foncier rural dans la zone affectée pa...
Atelier national de restitution sur le foncier rural dans la zone affectée pa...Atelier national de restitution sur le foncier rural dans la zone affectée pa...
Atelier national de restitution sur le foncier rural dans la zone affectée pa...
 
Curriculum vitea 2015 mon c.v
Curriculum vitea 2015   mon c.vCurriculum vitea 2015   mon c.v
Curriculum vitea 2015 mon c.v
 
Fsn205 detection mensongeentrevuecognitive
Fsn205 detection mensongeentrevuecognitiveFsn205 detection mensongeentrevuecognitive
Fsn205 detection mensongeentrevuecognitive
 
Gfv vesta-tbd
Gfv vesta-tbdGfv vesta-tbd
Gfv vesta-tbd
 
Derecho laboral asignacion uno
Derecho laboral asignacion unoDerecho laboral asignacion uno
Derecho laboral asignacion uno
 
Le monde des machines
Le monde des machinesLe monde des machines
Le monde des machines
 
Medio ambiente
Medio ambiente Medio ambiente
Medio ambiente
 
Camille MERTZ & Aurore DUPONT d’APREMONT -
Camille MERTZ & Aurore DUPONT d’APREMONT - Camille MERTZ & Aurore DUPONT d’APREMONT -
Camille MERTZ & Aurore DUPONT d’APREMONT -
 
Dossier de production groupe n°143
Dossier de production groupe n°143Dossier de production groupe n°143
Dossier de production groupe n°143
 
Guide utilisateur africa-it
Guide utilisateur africa-itGuide utilisateur africa-it
Guide utilisateur africa-it
 
Desartsonnants en mots sons et images
Desartsonnants en mots sons et imagesDesartsonnants en mots sons et images
Desartsonnants en mots sons et images
 
Pol 05-04
Pol 05-04Pol 05-04
Pol 05-04
 
presentacion
presentacionpresentacion
presentacion
 
Recetas fernando canales
Recetas fernando canalesRecetas fernando canales
Recetas fernando canales
 
La pluralité de la presse et des lignes éditoriales-Magazines- attentats Char...
La pluralité de la presse et des lignes éditoriales-Magazines- attentats Char...La pluralité de la presse et des lignes éditoriales-Magazines- attentats Char...
La pluralité de la presse et des lignes éditoriales-Magazines- attentats Char...
 
Retrouver les BU de Droit sur Internet - Licence en Droit
Retrouver les BU de Droit sur Internet - Licence en DroitRetrouver les BU de Droit sur Internet - Licence en Droit
Retrouver les BU de Droit sur Internet - Licence en Droit
 
Deber de computación
Deber de computaciónDeber de computación
Deber de computación
 
Atoz Tax Trends
Atoz Tax TrendsAtoz Tax Trends
Atoz Tax Trends
 

Similaire à Les jeudis de la découverte

HTML5mtl - 2012-02-22 - Responsive Web Design
HTML5mtl - 2012-02-22 - Responsive Web DesignHTML5mtl - 2012-02-22 - Responsive Web Design
HTML5mtl - 2012-02-22 - Responsive Web DesignFrédéric Harper
 
Mobile & Responsive Design: Rendez votre marque mobile
Mobile & Responsive Design: Rendez votre marque mobileMobile & Responsive Design: Rendez votre marque mobile
Mobile & Responsive Design: Rendez votre marque mobileWSI France
 
Responsive Web Design : back to basics
Responsive Web Design : back to basicsResponsive Web Design : back to basics
Responsive Web Design : back to basicsAlinoa
 
RWD - Back to Basics par Ruben Pieraerts
RWD - Back to Basics par Ruben PieraertsRWD - Back to Basics par Ruben Pieraerts
RWD - Back to Basics par Ruben PieraertsLa FeWeb
 
Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013Julien LE THUAUT
 
Comment se préparer au Mobile Index First de Google
Comment se préparer au Mobile Index First de GoogleComment se préparer au Mobile Index First de Google
Comment se préparer au Mobile Index First de GoogleKseo Conseil
 
Performances Web Mobile
Performances Web MobilePerformances Web Mobile
Performances Web MobileWilly Leloutre
 
Bien Démarrer avec le Responsive Web Design
Bien Démarrer avec le Responsive Web DesignBien Démarrer avec le Responsive Web Design
Bien Démarrer avec le Responsive Web DesignGreg Hoin
 
Réunion Club CML : Mobilité et Responsive design; définitions et enjeux
Réunion Club CML : Mobilité et Responsive design; définitions et enjeuxRéunion Club CML : Mobilité et Responsive design; définitions et enjeux
Réunion Club CML : Mobilité et Responsive design; définitions et enjeuxClub des Community Managers de Lyon
 
Design adaptatif / Mobilité
Design adaptatif / MobilitéDesign adaptatif / Mobilité
Design adaptatif / MobilitéAndré Dubreuil
 
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...SOAT
 
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...Peak Ace
 
Web Perf : par où commencer ? #SEOGoodVibes
Web Perf : par où commencer ? #SEOGoodVibesWeb Perf : par où commencer ? #SEOGoodVibes
Web Perf : par où commencer ? #SEOGoodVibesiProspect France
 
Responsive web design new14
Responsive web design new14Responsive web design new14
Responsive web design new14FullSIX Group
 
Performance Web : vers la speed update, un pas après l'autre
Performance Web : vers la speed update, un pas après l'autrePerformance Web : vers la speed update, un pas après l'autre
Performance Web : vers la speed update, un pas après l'autreSEO Camp Association
 
[Chambé-Carnet] Web Mobile : quelles opportunités, quels moyens ?
[Chambé-Carnet] Web Mobile : quelles opportunités, quels moyens ?[Chambé-Carnet] Web Mobile : quelles opportunités, quels moyens ?
[Chambé-Carnet] Web Mobile : quelles opportunités, quels moyens ?Chambé-Carnet
 
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)Raphaël Goetter
 
Les nouveaux challenges techniques pour le SEO
Les nouveaux challenges techniques pour le SEOLes nouveaux challenges techniques pour le SEO
Les nouveaux challenges techniques pour le SEOGroupe Neper
 

Similaire à Les jeudis de la découverte (20)

HTML5mtl - 2012-02-22 - Responsive Web Design
HTML5mtl - 2012-02-22 - Responsive Web DesignHTML5mtl - 2012-02-22 - Responsive Web Design
HTML5mtl - 2012-02-22 - Responsive Web Design
 
Plasticité2015 technovf
Plasticité2015 technovfPlasticité2015 technovf
Plasticité2015 technovf
 
Mobile & Responsive Design: Rendez votre marque mobile
Mobile & Responsive Design: Rendez votre marque mobileMobile & Responsive Design: Rendez votre marque mobile
Mobile & Responsive Design: Rendez votre marque mobile
 
Formation mobile-cross-platform
Formation mobile-cross-platformFormation mobile-cross-platform
Formation mobile-cross-platform
 
Responsive Web Design : back to basics
Responsive Web Design : back to basicsResponsive Web Design : back to basics
Responsive Web Design : back to basics
 
RWD - Back to Basics par Ruben Pieraerts
RWD - Back to Basics par Ruben PieraertsRWD - Back to Basics par Ruben Pieraerts
RWD - Back to Basics par Ruben Pieraerts
 
Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013
 
Comment se préparer au Mobile Index First de Google
Comment se préparer au Mobile Index First de GoogleComment se préparer au Mobile Index First de Google
Comment se préparer au Mobile Index First de Google
 
Performances Web Mobile
Performances Web MobilePerformances Web Mobile
Performances Web Mobile
 
Bien Démarrer avec le Responsive Web Design
Bien Démarrer avec le Responsive Web DesignBien Démarrer avec le Responsive Web Design
Bien Démarrer avec le Responsive Web Design
 
Réunion Club CML : Mobilité et Responsive design; définitions et enjeux
Réunion Club CML : Mobilité et Responsive design; définitions et enjeuxRéunion Club CML : Mobilité et Responsive design; définitions et enjeux
Réunion Club CML : Mobilité et Responsive design; définitions et enjeux
 
Design adaptatif / Mobilité
Design adaptatif / MobilitéDesign adaptatif / Mobilité
Design adaptatif / Mobilité
 
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...
 
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
 
Web Perf : par où commencer ? #SEOGoodVibes
Web Perf : par où commencer ? #SEOGoodVibesWeb Perf : par où commencer ? #SEOGoodVibes
Web Perf : par où commencer ? #SEOGoodVibes
 
Responsive web design new14
Responsive web design new14Responsive web design new14
Responsive web design new14
 
Performance Web : vers la speed update, un pas après l'autre
Performance Web : vers la speed update, un pas après l'autrePerformance Web : vers la speed update, un pas après l'autre
Performance Web : vers la speed update, un pas après l'autre
 
[Chambé-Carnet] Web Mobile : quelles opportunités, quels moyens ?
[Chambé-Carnet] Web Mobile : quelles opportunités, quels moyens ?[Chambé-Carnet] Web Mobile : quelles opportunités, quels moyens ?
[Chambé-Carnet] Web Mobile : quelles opportunités, quels moyens ?
 
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)
 
Les nouveaux challenges techniques pour le SEO
Les nouveaux challenges techniques pour le SEOLes nouveaux challenges techniques pour le SEO
Les nouveaux challenges techniques pour le SEO
 

Les jeudis de la découverte

  • 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