Responsive Webdesign Drupallal

Slide 1

Slide 1 text

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”

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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 ﬁx méretű

Slide 4

Slide 4 text

"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 ﬁrst - 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

Slide 5

Slide 5 text

Ethan Marcotte: Responsive web design (2010) http://www.alistapart.com/articles/responsive-web-design/

Slide 6

Slide 6 text

•Media Queries Ethan Marcotte: Responsive web design (2010) http://www.alistapart.com/articles/responsive-web-design/

Slide 7

Slide 7 text

•Media Queries Ethan Marcotte: Responsive web design (2010) http://www.alistapart.com/articles/responsive-web-design/ •Fluid Grids

Slide 8

Slide 8 text

•Media Queries Ethan Marcotte: Responsive web design (2010) http://www.alistapart.com/articles/responsive-web-design/ •Fluid Images •Fluid Grids

Slide 9

Slide 9 text

•Media Queries •Fluid Images •Fluid Grids •Flexible Media

Slide 10

Slide 10 text

•Media Queries •Flexible Media •Fluid Grids

Slide 11

Slide 11 text

Media Queries HTML-ben! D8 breakpoints

Slide 12

Slide 12 text

Media Queries CSS2 HTML-ben! D8 breakpoints

Slide 13

Slide 13 text

Media Queries CSS2 CSS3 HTML-ben! D8 breakpoints

Slide 14

Slide 14 text

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 - polyﬁll Graceful Degradation (~ „elegáns leépítés”) Progressive Enhancement (~ „fokozatos erősítés”)

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

•Media Queries •Flexible Media •Fluid Grids

Slide 19

Slide 19 text

Adaptive vs. Responsive kitérő: adaptive layout vs responsive layout adaptive design vs responsive design

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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!

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

http://sonspring.com/journal/sass-for-designers Amerika kapitány…

Slide 39

Slide 39 text

Compass extension-ök Breakpoint: töréspontok azonosítása Respond to: breakpointra épül, szemantikus elnevezések

Slide 40

Slide 40 text

• az említett grid systemek Compass extension-ök Breakpoint: töréspontok azonosítása Respond to: breakpointra épül, szemantikus elnevezések

Slide 41

Slide 41 text

• 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

Slide 42

Slide 42 text

• 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

Slide 43

Slide 43 text

• 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

Slide 44

Slide 44 text

• 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

Slide 45

Slide 45 text

HTML5 HTML 5 initiative!

Slide 46

Slide 46 text

HTML5 • Egyszerűbb, áttekinthetőbb kód (dev) HTML 5 initiative!

Slide 47

Slide 47 text

HTML5 • Egyszerűbb, áttekinthetőbb kód (dev) • Kevesebb adat (performance) HTML 5 initiative!

Slide 48

Slide 48 text

HTML5 • Egyszerűbb, áttekinthetőbb kód (dev) • Kevesebb adat (performance) • Szemantikus (SEO, mobil eszközök) HTML 5 initiative!

Slide 49

Slide 49 text

HTML5 • Egyszerűbb, áttekinthetőbb kód (dev) • Kevesebb adat (performance) • Szemantikus (SEO, mobil eszközök) • Előremutató… HTML 5 initiative!

Slide 50

Slide 50 text

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!

Slide 51

Slide 51 text

HTML5 Drupal modulok, pl. • Fences http://drupal.org/project/fences • Elements http://drupal.org/project/elements Fences: HTML5 ﬁelds Elements: Form elemek

Slide 52

Slide 52 text

•Media Queries •Flexible Media •Fluid Grids

Slide 53

Slide 53 text

Fluid images CSS img { /* height: auto; */ max-width: 100%; } picture html element

Slide 54

Slide 54 text

"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

Slide 55

Slide 55 text

Flexible slideshows Flex Slider https://github.com/woothemes/FlexSlider http://drupal.org/project/flexslider library module

Slide 56

Slide 56 text

Fluid Video CSS - position rel, abs

Slide 57

Slide 57 text

Fluid Video Saját videók (nem beágyazott) width, height CSS - position rel, abs

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

•Media Queries •Flexible Media •+ Performance •Fluid Grids

Slide 63

Slide 63 text

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)

Slide 64

Slide 64 text

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)

Slide 65

Slide 65 text

Teljesítmény javítás

Slide 66

Slide 66 text

Teljesítmény javítás • Design: képek helyett CSS3

Slide 67

Slide 67 text

Teljesítmény javítás • Design: képek helyett CSS3 • Admin Icons (Icon Fonts) http://drupal.org/project/admin_icons

Slide 68

Slide 68 text

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…);

Slide 69

Slide 69 text

Teljesítmény javítás + jpegmini, pngmini - osx v. szerver

Slide 70

Slide 70 text

Teljesítmény javítás • Image Optim Jpegmini, pngmini (OSX) http://imageoptim.com http://jpegmini.com + jpegmini, pngmini - osx v. szerver

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

Slide 74

Slide 74 text

Teljesítmény javítás

Slide 75

Slide 75 text

Teljesítmény javítás • Speedy (minified JS) http://drupal.org/project/speedy

Slide 76

Slide 76 text

Teljesítmény javítás • Speedy (minified JS) http://drupal.org/project/speedy • Advanced CSS JS Aggregation http://drupal.org/project/advagg

Slide 77

Slide 77 text

Egyéb hasznos eszközök

Slide 78

Slide 78 text

Egyéb hasznos eszközök • Modernizr http://modernizr.com/

Slide 79

Slide 79 text

Egyéb hasznos eszközök • Modernizr http://modernizr.com/ • Context http://drupal.org/project/context

Slide 80

Slide 80 text

Egyéb hasznos eszközök • Modernizr http://modernizr.com/ • Context http://drupal.org/project/context • Delta http://drupal.org/project/delta

Slide 81

Slide 81 text

•Media Queries •Fluid Grids •Flexible Media •Performance Responsive weboldalak Drupallal – Drupal Hétvége 2012 Hajas Tamás http://thamas.hu @eccegostudio