Responsive Webdesign Drupallal

Editor's Notes

• #2: „Hunglish” :)\n\nRWDD - Mi kell hozzá? D8 ;)\n\nlehetséges eszközök, megoldások, \nnem a „legjobbak”\n
• #3: Responsive = válaszadó\nMire? Az eszközre = context!\n\nLehetőség: native app - l. ma Reisinger\n\nRWD 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\n
• #4: Nem mondok számokat, található sok statisztikai\n\nLényeg: (a webes elérést biztosító) hordozható eszközök aránya dinamikusan nő\n\nA web nem fix méretű\n
• #5: Mobile first - Luke Wroblewski\n\nRepeat after me: Responsive Web Design isn’t about current devices and known unknowns, it’s about future devices and unknown unknowns.\nDonald Rumsfeld\n\n\n\n\n \n
• #6: \n
• #7: \n
• #8: \n
• #9: \n
• #10: \n
• #11: HTML-ben!\n\nD8 breakpoints\n
• #12: HTML-ben!\n\nD8 breakpoints\n
• #13: CSS\nnem csak width lehet, hanem\nheight, device-w, dh, orientation, aspect-ratio, color, resulution etc.\n\nlte IE8 - polyfill\nGraceful Degradation (~ „elegáns leépítés”)\nProgressive Enhancement (~ „fokozatos erősítés”)\n
• #14: Conditional classes: Paul Irish http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/\n\nRespond.js - min-width, max width támogatása\n\nModernizr - később bővebben\n
• #15: Conditional classes: Paul Irish http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/\n\nRespond.js - min-width, max width támogatása\n\nModernizr - később bővebben\n
• #16: \n
• #17: kitérő: \nadaptive layout vs responsive layout\nadaptive design vs responsive design\n
• #18: kitérő: \nadaptive layout vs responsive layout\nadaptive design vs responsive design\n
• #19: kitérő: \nadaptive layout vs responsive layout\nadaptive design vs responsive design\n
• #20: kitérő: \nadaptive layout vs responsive layout\nadaptive design vs responsive design\n
• #21: kitérő: \nadaptive layout vs responsive layout\nadaptive design vs responsive design\n
• #22: kitérő: \nadaptive layout vs responsive layout\nadaptive design vs responsive design\n
• #23: kitérő: \nadaptive layout vs responsive layout\nadaptive design vs responsive design\n
• #24: grid felképítése: oszlopok (column), oszlopközök (gutter)\n\n960 gs - fix, statikus\nszimmetrikus - egyelő eloszlású (lehet fix, fluid, "Magic")\nSusy - Eric Meyer (nem „az”, hanem egy másik), D7 d.org theme grid tool! \n\nasszimetrikus: kül oszlop és gutter szélességk\n
• #25: grid felképítése: oszlopok (column), oszlopközök (gutter)\n\n960 gs - fix, statikus\nszimmetrikus - egyelő eloszlású (lehet fix, fluid, "Magic")\nSusy - Eric Meyer (nem „az”, hanem egy másik), D7 d.org theme grid tool! \n\nasszimetrikus: kül oszlop és gutter szélességk\n
• #26: grid felképítése: oszlopok (column), oszlopközök (gutter)\n\n960 gs - fix, statikus\nszimmetrikus - egyelő eloszlású (lehet fix, fluid, "Magic")\nSusy - Eric Meyer (nem „az”, hanem egy másik), D7 d.org theme grid tool! \n\nasszimetrikus: kül oszlop és gutter szélességk\n
• #27: klasszikus grid css class-okkal, de mq-k\n4-es már sass, compass\n"point and click"\nsok szolgáltatás\nnagyon népszerű (marketing) pl. Acquia.com\n\nscreenshot dia!\n
• #28: John Albin - D8 Mobile Initiative lead(?)\nsass, compass\n
• #29: Sam Richard, @snugug\n\nFour Kitchens Aurora alsmink: Corona\nhttp://fourkitchens.com/blog/2012/11/13/compass-aurora-corona-oh-my\n\nborealis: semantic blocks, responsive images\n
• #30: SASS: beágyazás, változók, @mixin-ek (függvény?), &:rules, @include (ezért nem kell class)\nNem(!) a drupalban - külön fejlesztői eszköz, CSS-t generál\n\n"CSS Authoring Framework" - most már mindenki tudja, hogy mi ez és mire jó ;o)\n\nMatt Farina, Nathan Smith\n
• #31: SASS: beágyazás, változók, @mixin-ek (függvény?), &:rules, @include (ezért nem kell class)\nNem(!) a drupalban - külön fejlesztői eszköz, CSS-t generál\n\n"CSS Authoring Framework" - most már mindenki tudja, hogy mi ez és mire jó ;o)\n\nMatt Farina, Nathan Smith\n
• #32: SASS: beágyazás, változók, @mixin-ek (függvény?), &:rules, @include (ezért nem kell class)\nNem(!) a drupalban - külön fejlesztői eszköz, CSS-t generál\n\n"CSS Authoring Framework" - most már mindenki tudja, hogy mi ez és mire jó ;o)\n\nMatt Farina, Nathan Smith\n
• #33: Amerika kapitány…\n
• #34: Breakpoint: töréspontok azonosítása\nRespond to: breakpointra épül, szemantikus elnevezések\n
• #35: Breakpoint: töréspontok azonosítása\nRespond to: breakpointra épül, szemantikus elnevezések\n
• #36: Breakpoint: töréspontok azonosítása\nRespond to: breakpointra épül, szemantikus elnevezések\n
• #37: Breakpoint: töréspontok azonosítása\nRespond to: breakpointra épül, szemantikus elnevezések\n
• #38: Breakpoint: töréspontok azonosítása\nRespond to: breakpointra épül, szemantikus elnevezések\n
• #39: HTML 5 initiative!\n
• #40: HTML 5 initiative!\n
• #41: HTML 5 initiative!\n
• #42: HTML 5 initiative!\n
• #43: HTML 5 initiative!\n
• #44: Fences: HTML5 fields\n\nElements: Form elemek\n
• #45: \n
• #46: picture html element\n
• #47: Nem ImageCache :)\nPerformance!\nD8 - picture module\n
• #48: library module\n
• #49: CSS - position rel, abs\n
• #50: CSS - position rel, abs\n
• #51: CSS - position rel, abs\n
• #52: a konkrét site igényeitől, komplexitásától függ, hogy milyen megoldás, eszközök lehetnek jók\n
• #53: D8-ban responsive tables\n
• #54: \n
• #55: az eddigiek is érintették már többször a teljesítményt\nmobil eszköz »\nkisebb sávszélesség\ngyengébb teljesítmény (pl 10 x lassúbb JS feldolgozás)\n
• #56: \n
• #57: \n
• #58: \n
• #59: + jpegmini, pngmini - osx v. szerver\n
• #60: + jpegmini, pngmini - osx v. szerver\n
• #61: + jpegmini, pngmini - osx v. szerver\n
• #62: + jpegmini, pngmini - osx v. szerver\n
• #63: \n
• #64: \n
• #65: \n
• #66: \n
• #67: \n
• #68: \n