====== Historique et pré-requis ====== ===== Que sont les CSS ===== ([[wp>CSS|source Wikipédia]]) CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML. Les standards définissant CSS sont publiés par le World Wide Web Consortium (W3C). Introduit au milieu des années 1990, CSS devient couramment utilisé dans la conception de sites web et bien pris en charge par les navigateurs web dans les années 2000. {{:ressources:web:code_css.png|}} ===== Brève historique de CSS ===== * 1992 premier site Internet en HTML * 1995 CSS est publié avec pour vocation de dissocier le fond de la forme * 1997 Internet Explorer 4 commence à utiliser CSS * 1999 CSS2 permet vraiment de penser une mise en page et Internet Explorer 5 se répand * 2001 Internet Explorer 6 et changement des usages : on fait des sites en full CSS et on [[http://www.pompage.net/traduction/tablevscss|abandonne les tables]] * 2009 drafts de CSS3 * 2011 CSS3 implémenté dans tous les nouvelles versions de navigateurs ===== css2.1 et @media ===== Dans CSS2.1, le média sert à identifier le display parmi all, braille, embossed, handheld, print, projection, screen, speech, tty et tv.

{{:ressources:responsive:media_type_screen_rembrandt.png?200|}} {{:ressources:responsive:media_type_print_rembrandt.png?200|}} ===== Grilles ===== Bien évidemment nous avons lu les bouquins de [[http://www.markboulton.co.uk/|Mark Boulton]] à savoir [[http://www.fivesimplesteps.com/products/a-practical-guide-to-designing-for-the-web|A practical guide to designing for the web]] et [[http://www.fivesimplesteps.com/products/a-practical-guide-to-designing-grid-systems-for-the-web|A practical guide to designing Grid Systems for the web]]. Nous sommes aussi familiers avec des Grid Systems, comme par exemple la grille [[http://960.gs/|960]]. {{:ressources:responsive:book_dftw.png?100|}}{{:ressources:responsive:book_dgsftw.png?100|}} ====== Multi-device ====== ====== Usages ====== ===== Le mobile ===== ==== Statistiques ==== Essentiellement de l'iPhone, bien que cette hégémonie tende à disparaître. Un français sur deux a un smart phone. {{:ressources:responsive:stats_lfpt_mobile.png?700|}} {{:ressources:responsive:phone_pict_iphone.jpg?700|}} ^ Fabricant ^ Appareil ^ Diago ^ Reso ^ ratio ^ ppi ^ | Apple | **iPhone 3G & 3GS** | 3.5 | 480 × 320 px (HVGA) | 4:3 | 163 | | Apple | **iPhone 4G & 4GS** | 3.5 | 960 × 640 px | 4:3 | 326 | | Sony Ericsson | Xperia X1 | 3 | 800×480 px | x | x | | Sony Ericsson | Xperia X10 | 3 | 854x480 px | 16:9 | x | | Samsung | Galaxy S | 4 | 800x480px | x | 233 ppi | | Samsung | Galaxy SII | 4.3 | 800x480px | x | 218 ppi | | Samsung | Galaxy Ace| 3.5 | 480x320px | x | x | Selon Mediamétrie, au 3ème trimestre 2011, la France compte 18,3 millions de "mobinautes" (internautes mobiles, détenteurs de smartphone)... environ 1 client mobile sur 3 possède désormais un smartphone. Ce chiffre est en constante augmentation (+ 34% en 2011), ce qui laisse supposer qu'en 2012 un français sur deux sera un mobinaute ! (via [[http://www.capitolemobile.com/marketing-mobile/marche-smartphone-2012|capitole mobile]]) {{:ressources:responsive:stats_mobile_os.jpg|}} ==== Usage ==== * individuel * très forte mobilité * fragmenté * géolocalisation ==== Dimensions ==== * 3 à 4 pouces en diagonale * entre 480 et 960 px dans la plus grande diagonale ===== La tablette ===== * usage partagé * lieux publics * fragmentée * confort iOS, le système d'exploitation d'Apple, domine largement ses concurrents, avec 68,7 % de parts de marché en 2011, selon Gartner. Android, qui équipe notamment les tablettes de Samsung, Motorola et LG, détient à peine 20 % du secteur, mais devrait quasiment doubler ses positions d'ici à 2015, grignotant celles d'Apple. Selon userADgents en 2012 97% pour iOS, 2% pour Android et 1% pour les autres. ^ Fabricant ^ Appareil ^ Diago ^ Reso ^ ratio ^ ppi ^ | Apple | iPad 1&2 | 9.7 | 1024 × 768 px | 4:3 | 132 | | Apple | iPad 3 | 9.7 | 2048 × 1536 px | 4:3 | 264 | Nombre de tablettes vendues en france * 2010 : 43 000 * 2011 : 1.5M * 2012 : 3M * source GFK 2012 Pourcentage de clics réalisés par des tablettes * 2010 : <1% * 2011 : 3% * 2012 : 10% userADgents 2012 basé sur le % de trafic ===== Le Netbook ===== * mobilité limitée * lieux publics * persistant * macbook air * hybrides ===== L'ordinateur Portable ===== * mobilité limitée * lieux publics * persistant ===== L'écran de Bureau ===== ==== Usage ==== * confort visuel * Principal ordinateur de travail * persistant ===== La TV & la console ===== Pas assez significatif, écarté pour l'instant. ====== Nombreuses résolutions ====== Quels sont les usages ? quels sont les devices ? quelles dimensions/résolutions/dpi ? [[http://members.ping.de/~sven/dpi.html|Calculer le PPI (point per inch) de son device]] Plusieurs écrans, plusieurs usages La génération "post-pc" ====== Responsive Web Design ====== ====== Ressources ====== ===== Conférences ===== * [[http://rudyonweb.net/responsive-web-design-front-row-video/|Rudy]] ===== Notions ===== * [[http://css-discuss.incutio.com/wiki/Fluid_Design]] Fluid Design ===== Articles ===== * [[http://designspartan.com/info_generale/responsive-design-definition-fonctionnement-ressources-et-tutoriels/|RWD definition et fonctionnement]] très bon article de vulgarisation sur le RWD * [[http://www.lukew.com/ff/entry.asp?1514|Multi-device Layout Patterns]] De bons exemples d'usages de mediaqueries * "Responsive Design like water" : Explication du concept du responsive design avec une métaphore [[http://www.1stwebdesigner.com/design/responsive-design-like-water/]] * [[http://www.alistapart.com/articles/for-a-future-friendly-web/|for-a-future-friendly-web]] et [[http://www.alistapart.com/articles/responsive-web-design/|responsive-web-design]] d'Ethan Marcotte sur alistapart * Tutorial : [[http://line25.com/tutorials/create-a-responsive-web-design-with-media-queries|Create a responsive web design with media queries]] ===== Exemples ===== * [[http://yaronschoen.com/]] un freelance : layout responsive + typo * [[http://designmodo.com/responsive-design-examples/]] 50 exemples, yadayada * [[http://goutons-un-monde-meilleur.fr/]] et [[http://earthhour.fr/]] Le double menu :!: sémantique * [[http://mediaqueri.es/]] [[http://responsivedesigngallery.com/]] [[http://www.responsivewebdesign.co.uk/gallery/]] * Contre-exemple : [[http://www.floridaflourish.com/]] ===== Tools ===== * [[http://www.initializr.com/]] Bootstrap2 responsive * [[http://fittextjs.com/]] jQuery plugin to make font-sizes flexible. * [[http://labs.adobe.com/technologies/shadow/]] Adobe Shadow ; un logiciel pour tester en live sur les devices, encore mieux que [[http://quirktools.com/screenfly/]] * [[http://mattkersley.com/responsive/]] 1-click Responsive web design testing ===== Frameworks ===== * Fixed * [[http://framelessgrid.com/]] frameless * [[http://lessframework.com/]] less framework (:!: not lesscss) * Fluids * [[http://foundation.zurb.com/Fundation|]] 12 col * [[http://goldengridsystem.com/|Golden grid system]] 16/8 col * Other sources [[http://speckyboy.com/2011/11/17/15-responsive-css-frameworks-worth-considering/]] ===== high pixel density display ===== * [[http://menacingcloud.com/?c=highPixelDensityDisplays]] ===== ux ===== * [[http://www.usabilis.com/articles/2003/utilisateur-moyen.htm|L'utilisateur moyen n'existe pas]]