Responsive Web Design : back to basics

Download Responsive Web Design : back to basics

Post on 05-Dec-2014

1.159 views

Category:

Design

4 download

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