Les jeudis de la dcouverte

  • Published on
    12-Aug-2015

  • View
    79

  • Download
    0

Transcript

  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 sadapte tout type dappareil, de manire transparente pour lutilisateur, en conservant une exprience 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 dun des sites de Lagardre Active : 60% 40% Rpartition de laudience 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 sy attendait depuis longtemps ! 2013 : Google annonce qu lavenir, la compatibilit mobile pourrait devenir un critre de classement 2014 : Avertissements sur les technologies non supportes Arrive 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 critre de pertinence de son moteur mobile Un dploiement finalis1 mois aprs Un impact peu perceptible (beaucoup de turbulences dans les serps lies galement dautres updates) Ce qui a rellement chang pour linstant : (en France) Des serps mobile encore trs peu diffrentes des serps desktop Rappel des critres pris en compte pour dfinir si une page est mobile-friendly: Elments tactiles trop proches Petite taille de police Fentre daffichage non configure (META VIEWPORT) Utilisation de contenu Flash La taille du contenu qui nest pas adapte la fentre d'affichage Le prochain update de son algorithme mobile est dj prvu : 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 prfrence. 9 Quelque soit la configuration choisie, des consignes spcifiques dites par Google : https://developers.google.com/webmasters/mobile-sites/ Dynamic Serving Responsive Design Site mobile ddi
  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 prconise par Google ? Un crawl unique gain ressources et temps pour Google Signaux des liens plus clairs Sa seule contrainte est dans sa comprhension 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 intrts de lisibilit multi device et de maintenance commune : Une solution recommande par Google Un crawl unique Pas de redirection grer 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 Sadapter tous les formats a peut devenir lourd Le principal problme : 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 lments superflus (ce qui ne saffiche pas pour une version) Poids de limage en format desktop sur le mobile Une taille trop rduite pour limage de rfrence 14 Source : trilibis.com: seul 21% des 155 sites tests se chargent en moins de 4 secondes DGRADATION 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 llment pour spcifier des images diffrentes en fonction des caractristiques 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 rsolutions prennent le pas sur des rsolutions plus faibles les images comprises dans (a href, picture srcset, img src, ) sont bien interprtes 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 ddi
  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, lancienne 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, exprime 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 dcran (Gulli : 1200) Choix esthtique
  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 prexistant et des possibilits 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 caractristiques : 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 lintgration: 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'intgration de sites sur 12 colonnes ( configurable ) layouts utilisables entre 4 breakpoints prdfinis (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 nexiste pas encore Toutes les publicits 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 Cest la publicit ADAPTATIVE Lad server gre la complexit et diffuse la cration 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 Alsacrations Plein dexemples sur mediaqueri.es Des ressources sur This is responsive Les grilles de Bootstrap Standards de tailles dcrans sur W3C Calculer ses propres grilles avec gridcalculator.dk Deux livres de rfrence : Responsive Web Design dEthan Marcotte, et Mobile First de Luke Wroblewski Implmentation basique RWD pour images Dcouvrir le RESS Solution : Adaptive images et RWD Bible de toutes les techniques dimages
  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

Recommended

View more >