Les jeudis de la découverte

399 vues

Publié le

responsive webdesign :
du design au code SEO-friendly

La vidéo de la présentation est disponible ici https://www.youtube.com/watch?v=pCono5RAAyk

Publié dans : Internet
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
399
Sur SlideShare
0
Issues des intégrations
0
Intégrations
2
Actions
Partages
0
Téléchargements
8
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Les jeudis de la découverte

  1. 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. 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. 3. C E N ’ E S T PA S … m.monsite.com
  4. 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. 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. 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. 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. 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. 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. 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. 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. 12. L a s o l u t i o n i d é a l e ? 1212
  13. 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. 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. 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. 16. E t l a c o n c u r r e n c e ? 1616Dynamic Serving Site mobile dédié
  17. 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. 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. 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. 20. B R I E F
  21. 21. Z O N I N G
  22. 22. Z O N I N G , D É C L I M O B I L E
  23. 23. D U B R I E F A U Z O N I N G
  24. 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. 25. C O LO N N E S Bootstrap : 12 colonnes natives, fusionnables
  26. 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. 27. M I S E E N PA G E
  28. 28. M I S E E N PA G E
  29. 29. M I S E E N PA G E
  30. 30. M I S E E N PA G E
  31. 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. 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. 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. 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. 35. F R A M E W O R KS • Twitter Bootstrap • Foundation • Elasticss • Blueprintcss • Knacss • Gridless • Simple-grid • golden-grid-system
  36. 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. 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. 38. B o o t s t r a p G r i d 1
  39. 39. B o o t s t r a p G r i d 1
  40. 40. B o o t s t r a p G r i d 2
  41. 41. B o o t s t r a p G r i d 2
  42. 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. 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. 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. 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. 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. 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. 48. E T A U S S I …
  49. 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

×