Responsive Webdesign Drupallal

Drupal Hétvége 2012 előadásom

Transcript

1. Responsive webdesign Drupallal Drupal Hétvége 2012 Hajas Tamás http://thamas.hu @eccegostudio „Hunglish” :) RWDD - Mi kell hozzá? D8 ;) lehetséges eszközök, megoldások, nem a „legjobbak”
2. Responsive webdesign Drupallal Responsive = válaszadó Mire? Az eszközre = context! Lehetőség: native app - l. ma Reisinger RWD is the concept of developing a website in a way that allows the layout to adjust according to the user’s screen resolution (view port) using media queries
3. http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/ Nem mondok számokat, található sok statisztikai Lényeg: (a webes elérést biztosító) hordozható eszközök aránya dinamikusan nő A web nem fix méretű
4. "The point of creating [responsive] sites is to create functional (and hopefully optimal) user experiences for a growing number of web-enabled devices and contexts." ~ Brad Frost Idézi: http://snugug.com/musings/principles-responsive-web-design Mobile first - Luke Wroblewski Repeat after me: Responsive Web Design isn’t about current devices and known unknowns, it’s about future devices and unknown unknowns. Donald Rumsfeld
5. Ethan Marcotte: Responsive web design (2010) http://www.alistapart.com/articles/responsive-web-design/
6. •Media Queries Ethan Marcotte: Responsive web design (2010) http://www.alistapart.com/articles/responsive-web-design/
7. •Media Queries Ethan Marcotte: Responsive web design (2010) http://www.alistapart.com/articles/responsive-web-design/ •Fluid Grids
8. •Media Queries Ethan Marcotte: Responsive web design (2010) http://www.alistapart.com/articles/responsive-web-design/ •Fluid Images •Fluid Grids
9. •Media Queries •Fluid Images •Fluid Grids •Flexible Media
10. •Media Queries •Flexible Media •Fluid Grids
11. Media Queries HTML-ben! D8 breakpoints
12. Media Queries CSS2 <link rel="stylesheet" type="text/css" media="screen" href="screen-styles.css"> HTML-ben! D8 breakpoints
13. Media Queries CSS2 <link rel="stylesheet" type="text/css" media="screen" href="screen-styles.css"> CSS3 <link rel="stylesheet" media="screen and (orientation: portrait)and (min-width: 400px) and (max-width: 800px)" href="tablet.css" /> HTML-ben! D8 breakpoints
14. Media Queries CSS3 … @media screen and(min-width: 400px){ vonatkozó CSS beállításaink } @media screen and (min-width: 800px) { vonatkozó CSS beállításaink } CSS nem csak width lehet, hanem height, device-w, dh, orientation, aspect-ratio, color, resulution etc. lte IE8 - polyfill Graceful Degradation (~ „elegáns leépítés”) Progressive Enhancement (~ „fokozatos erősítés”)
15. Media Queries [if lte IE 8] Conditional classes: Paul Irish http://paulirish.com/2008/conditional- stylesheets-vs-css-hacks-answer-neither/ Respond.js - min-width, max width támogatása Modernizr - később bővebben
16. Media Queries [if lte IE 8] Respond.js https://github.com/scottjehl/Respond Conditional classes: Paul Irish http://paulirish.com/2008/conditional- stylesheets-vs-css-hacks-answer-neither/ Respond.js - min-width, max width támogatása Modernizr - később bővebben
17. Media Queries [if lte IE 8] Respond.js https://github.com/scottjehl/Respond + Modrenizr http://modernizr.com/ Conditional classes: Paul Irish http://paulirish.com/2008/conditional- stylesheets-vs-css-hacks-answer-neither/ Respond.js - min-width, max width támogatása Modernizr - később bővebben
18. •Media Queries •Flexible Media •Fluid Grids
19. Adaptive vs. Responsive kitérő: adaptive layout vs responsive layout adaptive design vs responsive design
20. Adaptive vs. Responsive Adaptive layout: Fix szélességű oldal elrendezések váltása eszközfüggően kitérő: adaptive layout vs responsive layout adaptive design vs responsive design
21. Adaptive vs. Responsive Adaptive layout: Fix szélességű oldal elrendezések váltása eszközfüggően kitérő: adaptive layout vs responsive layout adaptive design vs responsive design
22. Adaptive vs. Responsive Adaptive layout: Fix szélességű oldal elrendezések váltása eszközfüggően Responsive Layout: Fluid oldal elrendezések váltása eszközfüggően kitérő: adaptive layout vs responsive layout adaptive design vs responsive design
23. Adaptive vs. Responsive Adaptive layout: Fix szélességű oldal elrendezések váltása eszközfüggően Responsive Layout: Fluid oldal elrendezések váltása eszközfüggően kitérő: adaptive layout vs responsive layout adaptive design vs responsive design
24. Adaptive vs. Responsive Adaptive layout: Fix szélességű oldal elrendezések váltása eszközfüggően Responsive Layout: Fluid oldal elrendezések váltása eszközfüggően De: responsive design az adaptive design része!(?) kitérő: adaptive layout vs responsive layout adaptive design vs responsive design
25. Adaptive vs. Responsive Adaptive layout: Fix szélességű oldal elrendezések váltása eszközfüggően Responsive Layout: Fluid oldal elrendezések váltása eszközfüggően De: responsive design az adaptive design része!(?) kitérő: adaptive layout vs responsive layout adaptive design vs responsive design
26. Adaptive vs. Responsive Adaptive layout: Fix szélességű oldal elrendezések váltása eszközfüggően Responsive Layout: Fluid oldal elrendezések váltása eszközfüggően De: responsive design az adaptive design része!(?) http://viljamis.com/blog/2012/adaptive-vs-responsive- whats-the-difference.php kitérő: adaptive layout vs responsive layout adaptive design vs responsive design
27. Grid systems grid felképítése: oszlopok (column), oszlopközök (gutter) 960 gs - fix, statikus szimmetrikus - egyelő eloszlású (lehet fix, fluid, "Magic") Susy - Eric Meyer (nem „az”, hanem egy másik), D7 d.org theme grid tool! asszimetrikus: kül oszlop és gutter szélességk
28. Grid systems • „klasszikus” pl. 960.gs grid felképítése: oszlopok (column), oszlopközök (gutter) 960 gs - fix, statikus szimmetrikus - egyelő eloszlású (lehet fix, fluid, "Magic") Susy - Eric Meyer (nem „az”, hanem egy másik), D7 d.org theme grid tool! asszimetrikus: kül oszlop és gutter szélességk
29. Grid systems • „klasszikus” pl. 960.gs • szimmetrikus: pl. Zen Grids, Susy grid felképítése: oszlopok (column), oszlopközök (gutter) 960 gs - fix, statikus szimmetrikus - egyelő eloszlású (lehet fix, fluid, "Magic") Susy - Eric Meyer (nem „az”, hanem egy másik), D7 d.org theme grid tool! asszimetrikus: kül oszlop és gutter szélességk
30. Grid systems • „klasszikus” pl. 960.gs • szimmetrikus: pl. Zen Grids, Susy • asszimetrikus: pl. Singularity grid felképítése: oszlopok (column), oszlopközök (gutter) 960 gs - fix, statikus szimmetrikus - egyelő eloszlású (lehet fix, fluid, "Magic") Susy - Eric Meyer (nem „az”, hanem egy másik), D7 d.org theme grid tool! asszimetrikus: kül oszlop és gutter szélességk
31. Gridre épülő alapsminkek 960.gs: Omega Theme http://drupal.org/project/omega pl. Acquia klasszikus grid css class-okkal, de mq-k 4-es már sass, compass "point and click" sok szolgáltatás nagyon népszerű (marketing) pl. Acquia.com screenshot dia!
32. Gridre épülő alapsminkek Zen Grids: Zen http://drupal.org/project/zen + http://drupal.org/project/fences pl. Sydney DrupalCon 2013 John Albin - D8 Mobile Initiative lead(?) sass, compass
33. Gridre épülő alapsminkek Susy, Singularity : Aurora http://drupal.org/project/aurora + http://drupal.org/project/borealis Tony http://drupal.org/sandbox/tizzo/1426556 pl. Drupal.org D7 verziója (csak Susy) Sam Richard, @snugug Four Kitchens Aurora alsmink: Corona http://fourkitchens.com/blog/2012/11/13/compass-aurora-corona-oh-my borealis: semantic blocks, responsive images
34. Sass és Compass Sass CSS preprocessor SASS: beágyazás, változók, @mixin-ek (függvény?), &:rules, @include (ezért nem kell class) Nem(!) a drupalban - külön fejlesztői eszköz, CSS-t generál "CSS Authoring Framework" - most már mindenki tudja, hogy mi ez és mire jó ;o) Matt Farina, Nathan Smith
35. Sass és Compass Sass CSS preprocessor Compass "CSS Authoring Framework" SASS: beágyazás, változók, @mixin-ek (függvény?), &:rules, @include (ezért nem kell class) Nem(!) a drupalban - külön fejlesztői eszköz, CSS-t generál "CSS Authoring Framework" - most már mindenki tudja, hogy mi ez és mire jó ;o) Matt Farina, Nathan Smith
36. Sass és Compass Sass CSS preprocessor Előregyártott Sass kódok rendszerbe szervezett fejlesztői eszközként (szoftverként) használható gyűjteménye Compass "CSS Authoring Framework" SASS: beágyazás, változók, @mixin-ek (függvény?), &:rules, @include (ezért nem kell class) Nem(!) a drupalban - külön fejlesztői eszköz, CSS-t generál "CSS Authoring Framework" - most már mindenki tudja, hogy mi ez és mire jó ;o) Matt Farina, Nathan Smith
37. Sass és Compass Sass CSS preprocessor Előregyártott Sass kódok rendszerbe szervezett fejlesztői eszközként (szoftverként) használható gyűjteménye http://denver2012.drupal.org/program/sessions/using-sass-compass-drupal- theming Compass "CSS Authoring Framework" SASS: beágyazás, változók, @mixin-ek (függvény?), &:rules, @include (ezért nem kell class) Nem(!) a drupalban - külön fejlesztői eszköz, CSS-t generál "CSS Authoring Framework" - most már mindenki tudja, hogy mi ez és mire jó ;o) Matt Farina, Nathan Smith
38. http://sonspring.com/journal/sass-for-designers Amerika kapitány…
39. Compass extension-ök Breakpoint: töréspontok azonosítása Respond to: breakpointra épül, szemantikus elnevezések
40. • az említett grid systemek Compass extension-ök Breakpoint: töréspontok azonosítása Respond to: breakpointra épül, szemantikus elnevezések
41. • az említett grid systemek Compass extension-ök • Breakpoint https://github.com/canarymason/breakpoint Breakpoint: töréspontok azonosítása Respond to: breakpointra épül, szemantikus elnevezések
42. • az említett grid systemek Compass extension-ök • Breakpoint https://github.com/canarymason/breakpoint • Respond to https://github.com/snugug/respond-to Breakpoint: töréspontok azonosítása Respond to: breakpointra épül, szemantikus elnevezések
43. • az említett grid systemek Compass extension-ök • Breakpoint https://github.com/canarymason/breakpoint • Respond to https://github.com/snugug/respond-to • Sassy Buttons http://jaredhardy.com/sassy-buttons/ Breakpoint: töréspontok azonosítása Respond to: breakpointra épül, szemantikus elnevezések
44. • az említett grid systemek Compass extension-ök • Breakpoint https://github.com/canarymason/breakpoint • Respond to https://github.com/snugug/respond-to • Sassy Buttons http://jaredhardy.com/sassy-buttons/ • és sok más Breakpoint: töréspontok azonosítása Respond to: breakpointra épül, szemantikus elnevezések
45. HTML5 HTML 5 initiative!
46. HTML5 • Egyszerűbb, áttekinthetőbb kód (dev) HTML 5 initiative!
47. HTML5 • Egyszerűbb, áttekinthetőbb kód (dev) • Kevesebb adat (performance) HTML 5 initiative!
48. HTML5 • Egyszerűbb, áttekinthetőbb kód (dev) • Kevesebb adat (performance) • Szemantikus (SEO, mobil eszközök) HTML 5 initiative!
49. HTML5 • Egyszerűbb, áttekinthetőbb kód (dev) • Kevesebb adat (performance) • Szemantikus (SEO, mobil eszközök) • Előremutató… HTML 5 initiative!
50. HTML5 • Egyszerűbb, áttekinthetőbb kód (dev) • Kevesebb adat (performance) • Szemantikus (SEO, mobil eszközök) • Előremutató… [if lte IE 9] HTML5 shiv https://github.com/aFarkas/html5shiv HTML 5 initiative!
51. HTML5 Drupal modulok, pl. • Fences http://drupal.org/project/fences • Elements http://drupal.org/project/elements Fences: HTML5 fields Elements: Form elemek
52. •Media Queries •Flexible Media •Fluid Grids
53. Fluid images CSS img { /* height: auto; */ max-width: 100%; } picture html element
54. "Fluid images" Ugyanaz a kép több különböző méretben • Responsive Images and Styles http://drupal.org/project/resp_img • Adaptie Image Styles http://drupal.org/project/ais • Retina Images http://drupal.org/project/retina_images Nem ImageCache :) Performance! D8 - picture module
55. Flexible slideshows Flex Slider https://github.com/woothemes/FlexSlider http://drupal.org/project/flexslider library module
56. Fluid Video CSS - position rel, abs
57. Fluid Video Saját videók (nem beágyazott) width, height CSS - position rel, abs
58. Fluid Video Saját videók (nem beágyazott) width, height Beágyazott videók (pl. youtube) FitVids http://drupal.org/project/fitvids CSS - position rel, abs
59. Fluid Video Saját videók (nem beágyazott) width, height CSS http://webdesignerwall.com/ tutorials/css-elastic-videos Beágyazott videók (pl. youtube) FitVids http://drupal.org/project/fitvids CSS - position rel, abs
60. Egyéb teendők Navigáció • Az emberi ujj nem egér! • Az oldal átrendezése • Lista helyett legördülő (számtalan JS van erre) • Csak CSS: https://github.com/micjamking/Navigataur a konkrét site igényeitől, komplexitásától függ, hogy milyen megoldás, eszközök lehetnek jók
61. Egyéb teendők Táblázatok, kisebb képernyőn • oszlopok kihagyása • elemek átrendezése • más módon való megjelenítés (pl. diagramm) D8-ban responsive tables
62. •Media Queries •Flexible Media •+ Performance •Fluid Grids
63. Teljesítmény javítás "80-90% az eddigiek is érintették már többször a teljesítményt mobil eszköz » kisebb sávszélesség gyengébb teljesítmény (pl 10 x lassúbb JS feldolgozás)
64. Teljesítmény javítás "80-90% of the end-user response time is spent on the frontend. Start there!" ~ Steve Souders http://www.stevesouders.com/blog/2012/02/10/the-performance-golden-rule/ az eddigiek is érintették már többször a teljesítményt mobil eszköz » kisebb sávszélesség gyengébb teljesítmény (pl 10 x lassúbb JS feldolgozás)
65. Teljesítmény javítás
66. Teljesítmény javítás • Design: képek helyett CSS3
67. Teljesítmény javítás • Design: képek helyett CSS3 • Admin Icons (Icon Fonts) http://drupal.org/project/admin_icons
68. Teljesítmény javítás • Design: képek helyett CSS3 • Admin Icons (Icon Fonts) http://drupal.org/project/admin_icons • CSS Embedded Images http://drupal.org/project/css_emimagebackground: transparent url(data:image/ gif;base64,xyzwAi3…);
69. Teljesítmény javítás + jpegmini, pngmini - osx v. szerver
70. Teljesítmény javítás • Image Optim Jpegmini, pngmini (OSX) http://imageoptim.com http://jpegmini.com + jpegmini, pngmini - osx v. szerver
71. Teljesítmény javítás • Image Optim Jpegmini, pngmini (OSX) http://imageoptim.com http://jpegmini.com • Riot (Win) http://luci.criosweb.ro/riot/ + jpegmini, pngmini - osx v. szerver
72. Teljesítmény javítás • Image Optim Jpegmini, pngmini (OSX) http://imageoptim.com http://jpegmini.com • Smush.it (online – Yahoo Dev Net) http://www.smushit.com/ysmush.it/ • Riot (Win) http://luci.criosweb.ro/riot/ + jpegmini, pngmini - osx v. szerver
73. Teljesítmény javítás • Image Optim Jpegmini, pngmini (OSX) http://imageoptim.com http://jpegmini.com • Smush.it (online – Yahoo Dev Net) http://www.smushit.com/ysmush.it/ • Riot (Win) http://luci.criosweb.ro/riot/ • Image Magick (metadata törlés) http://drupal.org/project/imagemagick/ + jpegmini, pngmini - osx v. szerver
74. Teljesítmény javítás
75. Teljesítmény javítás • Speedy (minified JS) http://drupal.org/project/speedy
76. Teljesítmény javítás • Speedy (minified JS) http://drupal.org/project/speedy • Advanced CSS JS Aggregation http://drupal.org/project/advagg
77. Egyéb hasznos eszközök
78. Egyéb hasznos eszközök • Modernizr http://modernizr.com/
79. Egyéb hasznos eszközök • Modernizr http://modernizr.com/ • Context http://drupal.org/project/context
80. Egyéb hasznos eszközök • Modernizr http://modernizr.com/ • Context http://drupal.org/project/context • Delta http://drupal.org/project/delta
81. •Media Queries •Fluid Grids •Flexible Media •Performance Responsive weboldalak Drupallal – Drupal Hétvége 2012 Hajas Tamás http://thamas.hu @eccegostudio