Responsive Web Design : back to basics

  • Published on
    05-Dec-2014

  • View
    1.159

  • Download
    4

DESCRIPTION

Alinoa a prsent lors d'une confrence organise par la Feweb le 05/03/2013, les fondamentaux de l'approche Responsive Web Design.

Transcript

  • 1. ResponsiveWeb DesignBack to Basicspar Ruben Pieraerts / Alinoa@ruben_pieraerts@alinoa
  • 2. En 2012,environ 15 %des sites sontoptimiss pourle mobile
  • 3. Ruben Pieraerts(homme / 30 ans / Bruxelles) Alinoa : Designer, manager Prof : Web design, identit visuelle (Design Innovation / technocit)
  • 4. 3 concepts :
  • 5. 3 concepts :1.Quest-ce que le Responsive Web Design ?
  • 6. 3 concepts :1.Quest-ce que le Responsive Web Design ?2. Quels sont les outils notre disposition ?
  • 7. 3 concepts :1.Quest-ce que le Responsive Web Design ?2. Quels sont les outils notre disposition ?3. Deux approches ? Laquelle choisir ?
  • 8. En 2001:
  • 9. En 2005:
  • 10. En 2010:
  • 11. Au jeu des prdictions...En 2009...Il tait prvu que les ventes desmartphones dpassent cellesdordinateurs en 2012...Cela sest produit en 2010 !
  • 12. Que faire ?
  • 13. Dvelopper un site pour chaque plate-forme ? Dvelopper une application native par plate-forme ? Ne faire quun seul site avec un design "xe ? (et tant pis pour les autres)
  • 14. Sur le mme temps...Le tra"c Internet sur mobilea explos de + de 600 %.
  • 15. ResponsiveWebDesign?
  • 16. Site Responsive Web Design=Site capable da#cherle mme contenu dans deuxcontextes di$rents
  • 17. Exemple : Amazon
  • 18. Exemple : Boston Globe
  • 19. Exemple : shun.kaiusaltd.com
  • 20. Commentmettre en oeuvrele ResponsiveWeb Design
  • 21. 3 techniques connaitre :
  • 22. 3 techniques connaitre :1. Grille %uide
  • 23. 3 techniques connaitre :1. Grille %uide2.Images et mdias %exibles
  • 24. 3 techniques connaitre :1. Grille %uide2.Images et mdias %exibles3. Media queries
  • 25. Un exemple :www.ozmoz.be(merci Thomas)
  • 26. 1.Grille %uide
  • 27. Grille=Systme qui permetdorganiserde manire rationnelleune mise en page
  • 28. Grille %uide=Grille proportionnelle
  • 29. Formule magique :cible / contexte = rsultat
  • 30. cible / contexte = rsultat960px / 1024 px = 0,9375soit 93,75%
  • 31. 2.Imageset mdias%exibles
  • 32. Un exemple :www.ozmoz.be(merci encore Thomas)
  • 33. cela marche aussi pour les vidos,...
  • 34. 3.Mediaqueries
  • 35. Introduit depuis CSS 3 Support par les bons navigateurs Pour les autres (IE 6 8) : respond.js https://github.com/scottjehl/Respond
  • 36. Avec la grille %uideet les images %exibles :le design sa#chesur tous les supports
  • 37. Mais la mise en pagenest pas adquate
  • 38. media queries=permet dappliquerun style de manireconditionnelle
  • 39. Rcapitulatif des caractristiques pour les medias queriescolor support de la couleur (bits/pixel) color-index priphrique utilisant une table de couleurs indexesaspect-ratio ratio du priphrique de sortie (par exemple 16/9)device-aspect-ratio ratio de la zone dachagedevice-height dimension en hauteur du priphriquedevice-width dimension en largeur du priphrique grid priphrique bitmap ou grille (ex : lcd)height dimension en hauteur de la zone dachagemonochrome priphrique monochrome ou niveaux de gris (bits/pixel)orientation orientation du priphrique (portait ou landscape)resolution rsolution du priphrique (en dpi, dppx, ou dpcm)scan type de balayage des tlviseurs (progressive ou interlace)width dimension en largeur de la zone dachage
  • 40. Proposition de poins de ruptures320 pixels Appareil petit cran comme les tlphones en mode portrait.480 pixels Appareil petit cran comme les tlphones en mode paysage.600 pixels Petites tablettes comme le Kindle dAmazon (600 * 800) et le Nook de Barnes & Nobles (600 * 1024) en mode portrait.768 pixels Tablette de 10 pouces comme liPad en mode portrait.1024 pixels Tablette de 10 pouces comme liPad en mode paysage, ainsi que certains netbook, ordinateurs portable et ordinateurs de bureau.1200 pixels Ecrans larges, principalement ceux des ordinateurs portables et de bureau.
  • 41. ResponsivedgradationouMobile "rst
  • 42. Responsive dgradation :=Mise en page classique.On dgrade (enlve)des contenus bassersolution.
  • 43. + Partir de lexistant (en thorie) Mme mthode de travail
  • 44. - Site plus lourd
  • 45. Mobile "rst :=On r%chit dabordau mobile.On ajoute ensuite descontenus pour enrichir.
  • 46. + Oblige faire des choixde contenus Allge le site
  • 47. - On change les mthodes de travail. Importance du couple designer / intgrateur.
  • 48. Conclusion(s)
  • 49. Epoque imprvisible->Miser sur le RWD =se prmunir des volutions
  • 50. RWD=Complment desapplications mobiles-> On y prsente pas les mmes contenus
  • 51. Pour allerplus loin

Recommended

View more >