Your SlideShare is downloading. ×
A la découverte du Responsive Web Design par Mathieu Parisot - Soat
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

A la découverte du Responsive Web Design par Mathieu Parisot - Soat

826
views

Published on

La présentation présentée par Mathieu Parisot chez Soat le 27 février sur le thème : A la découverte du Responsive Web Design

La présentation présentée par Mathieu Parisot chez Soat le 27 février sur le thème : A la découverte du Responsive Web Design

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
826
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
24
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. A la découverte du Responsive Web Design
  • 2. Mathieu PARISOT Développeur Web et Java @matparisot https://www.google.com/+ParisotMathieu
  • 3. Responsive what ?
  • 4. Responsive Web Design, dimwit !
  • 5. S'adapter à la taille de l'écran
  • 6. S'adapter à l'ergonomie
  • 7. S'adapter au contexte
  • 8. Des milliers de combinaisons…
  • 9. Tant que ça ?
  • 10. Bah, ça ne me concerne pas tout ça !
  • 11. "55 % des américains ont utilisés un smartphone pour accéder à internet en 2012" Source : http://www.pewinternet.org/Reports/2012/Cell-Internet-Use-2012.aspx
  • 12. "Pour 31%, il s'agit de leur mode consultation principal" Source : http://www.pewinternet.org/Reports/2012/Cell-Internet-Use-2012.aspx
  • 13. "Plus de 50% des clients Amazon ont acheté depuis leur mobile à noël 2013" Source : http://phx.corporate-ir.net/phoenix.zhtml?c=176060&p=irol-newsArticle&ID=1886961
  • 14. "Walmart.ca en RWD : +20% de conversions +98% de vente sur mobile" Src : http://www.getelastic.com/how-walmart-cas-responsive-redesign-boost-conversion-by-20/
  • 15. "75% des gens utilisent leur smartphone aux toilettes" http://www.11mark.com/IT-in-the-Toilet
  • 16. "10% des gens américains utilisent leur smartphone pendant qu'ils font l'amour" http://mashable.com/2013/07/11/smartphones-during-sex/
  • 17. Comment on peut supporter autant de trucs ?
  • 18. 1 site dédié aux desktops !
  • 19. 1 site dédié aux desktops ! 1 site dédié aux smartphones !
  • 20. 1 site dédié aux desktops ! 1 site dédié aux smartphones ! 1 site dédié aux tablettes…
  • 21. 1 site dédié aux desktops ! 1 site dédié aux smartphones ! 1 site dédié aux tablettes… 1 site dédié aux TV ?
  • 22. 1 site dédié aux desktops ! 1 site dédié aux smartphones ! 1 site dédié aux tablettes… 1 site dédié aux TV ? Oups le PDG a acheté une montre connectée !
  • 23. 1 site dédié aux desktops ! 1 site dédié aux smartphones ! 1 site dédié aux tablettes… 1 site dédié aux TV ? Oups le PDG a acheté une montre connectée !
  • 24. 1 seul site !
  • 25. Un code HTML unique !
  • 26. Des tailles relatives ! % em vh rem vw
  • 27. Des média queries !
  • 28. Des grilles fluides !
  • 29. Un exemple ? http://alistapart.com/
  • 30. Le 1er site Responsive ! http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
  • 31. Trop facile ! C'est tout ?
  • 32. Content First
  • 33. S'adapter à son environnement
  • 34. Amélioration progressive
  • 35. Amélioration progressive
  • 36. Amélioration progressive
  • 37. Amélioration progressive
  • 38. Dégradation élégante
  • 39. Dégradation élégante
  • 40. Dégradation élégante
  • 41. Dégradation élégante
  • 42. Les problèmes que tout cela pose…
  • 43. La performance
  • 44. La maintenabilité
  • 45. La compatibilité
  • 46. Des composants graphiques adaptés
  • 47. Des images adaptées 100ko 20ko 5ko
  • 48. Wireframes Les processus de conception
  • 49. Wireframes Maquettage Les processus de conception
  • 50. Wireframes Maquettage Les processus de conception ??
  • 51. Wireframes Maquettage ?? Les processus de conception site final
  • 52. Les tests
  • 53. Pas adapté pour tout
  • 54. Trouver les compétences
  • 55. Oh mon Dieu, on n'y arrivera jamais !
  • 56. Un site unique
  • 57. La flexibilité
  • 58. Une meilleurs conception
  • 59. Diminuer la frustration
  • 60. Parlons argent !
  • 61. ou pas…
  • 62. Bluffer ou pas ?
  • 63. Chaque projet est unique
  • 64. Des estimations pour sortir du flou
  • 65. Ceux qui ont essayé sont contents
  • 66. Site Responsive Site mobile Site Desktop Apprentissage
  • 67. Site Responsive Site mobile Site Desktop Apprentissage Equipe formée
  • 68. Site Responsive Site mobile Site Desktop Milieu de projet Apprentissage Equipe formée
  • 69. Site Responsive Site mobile Fin de vie Site Desktop Milieu de projet Apprentissage Equipe formée
  • 70. L'apprentissage
  • 71. Les révolutions sont souvent chaotiques
  • 72. Vos process vont dérailler…
  • 73. Stop à la bidouille !
  • 74. L'internet fixe est (trop) rapide
  • 75. Même pas peur, allons-y !
  • 76. Par où commencer ?
  • 77. Trouver les bonnes métriques
  • 78. commencez PETIT !
  • 79. Restreignez votre périmètre
  • 80. http://smashingmagazine.com/2013/07/08/ choosing-a-responsive-image-solution/
  • 81. Pour conclure…
  • 82. Vos sites doivent être responsive par défaut !
  • 83. @matparisot Merci !