• Save
Responsive Webdesign Drupallal
Upcoming SlideShare
Loading in...5
×
 

Responsive Webdesign Drupallal

on

  • 644 views

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

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

Statistics

Views

Total Views
644
Views on SlideShare
640
Embed Views
4

Actions

Likes
0
Downloads
1
Comments
0

1 Embed 4

https://twitter.com 4

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • „Hunglish” :)\n\nRWDD - Mi kell hozzá? D8 ;)\n\nlehetséges eszközök, megoldások, \nnem a „legjobbak”\n
  • 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
  • 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
  • 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
  • \n
  • \n
  • \n
  • \n
  • \n
  • HTML-ben!\n\nD8 breakpoints\n
  • HTML-ben!\n\nD8 breakpoints\n
  • 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
  • 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
  • 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
  • \n
  • kitérő: \nadaptive layout vs responsive layout\nadaptive design vs responsive design\n
  • kitérő: \nadaptive layout vs responsive layout\nadaptive design vs responsive design\n
  • kitérő: \nadaptive layout vs responsive layout\nadaptive design vs responsive design\n
  • kitérő: \nadaptive layout vs responsive layout\nadaptive design vs responsive design\n
  • kitérő: \nadaptive layout vs responsive layout\nadaptive design vs responsive design\n
  • kitérő: \nadaptive layout vs responsive layout\nadaptive design vs responsive design\n
  • kitérő: \nadaptive layout vs responsive layout\nadaptive design vs responsive design\n
  • 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
  • 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
  • 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
  • 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
  • John Albin - D8 Mobile Initiative lead(?)\nsass, compass\n
  • 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
  • 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
  • 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
  • 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
  • Amerika kapitány…\n
  • Breakpoint: töréspontok azonosítása\nRespond to: breakpointra épül, szemantikus elnevezések\n
  • Breakpoint: töréspontok azonosítása\nRespond to: breakpointra épül, szemantikus elnevezések\n
  • Breakpoint: töréspontok azonosítása\nRespond to: breakpointra épül, szemantikus elnevezések\n
  • Breakpoint: töréspontok azonosítása\nRespond to: breakpointra épül, szemantikus elnevezések\n
  • Breakpoint: töréspontok azonosítása\nRespond to: breakpointra épül, szemantikus elnevezések\n
  • HTML 5 initiative!\n
  • HTML 5 initiative!\n
  • HTML 5 initiative!\n
  • HTML 5 initiative!\n
  • HTML 5 initiative!\n
  • Fences: HTML5 fields\n\nElements: Form elemek\n
  • \n
  • picture html element\n
  • Nem ImageCache :)\nPerformance!\nD8 - picture module\n
  • library module\n
  • CSS - position rel, abs\n
  • CSS - position rel, abs\n
  • CSS - position rel, abs\n
  • a konkrét site igényeitől, komplexitásától függ, hogy milyen megoldás, eszközök lehetnek jók\n
  • D8-ban responsive tables\n
  • \n
  • 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
  • \n
  • \n
  • \n
  • + jpegmini, pngmini - osx v. szerver\n
  • + jpegmini, pngmini - osx v. szerver\n
  • + jpegmini, pngmini - osx v. szerver\n
  • + jpegmini, pngmini - osx v. szerver\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Responsive Webdesign Drupallal Responsive Webdesign Drupallal Presentation Transcript

  • Responsive webdesign DrupallalDrupal Hétvége 2012Hajas Tamáshttp://thamas.hu@eccegostudio
  • ResponsivewebdesignDrupallal
  • http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/
  • "The point of creating [responsive] sites is to createfunctional(and hopefully optimal)user experiencesfor a growing number of web-enabled devices andcontexts."~ Brad FrostIdézi: http://snugug.com/musings/principles-responsive-web-design
  • Ethan Marcotte: Responsive web design (2010)http://www.alistapart.com/articles/responsive-web-design/
  • • Media QueriesEthan Marcotte: Responsive web design (2010)http://www.alistapart.com/articles/responsive-web-design/
  • • Media Queries• Fluid GridsEthan Marcotte: Responsive web design (2010)http://www.alistapart.com/articles/responsive-web-design/
  • • Media Queries• Fluid Grids• Fluid ImagesEthan Marcotte: Responsive web design (2010)http://www.alistapart.com/articles/responsive-web-design/
  • • Media Queries• Fluid Grids• Fluid Images• Flexible Media
  • • Media Queries• Fluid Grids• Flexible Media
  • Media Queries
  • Media QueriesCSS2<link rel="stylesheet" type="text/css"media="screen" href="screen-styles.css">
  • Media QueriesCSS2<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" />
  • Media QueriesCSS3…@media screen and(min-width: 400px){ vonatkozó CSS beállításaink}@media screen and (min-width: 800px) { vonatkozó CSS beállításaink}
  • Media Queries[if lte IE 8]
  • Media Queries[if lte IE 8]Respond.jshttps://github.com/scottjehl/Respond
  • Media Queries[if lte IE 8]Respond.jshttps://github.com/scottjehl/Respond+Modrenizrhttp://modernizr.com/
  • • Media Queries• Fluid Grids• Flexible Media
  • Adaptive vs. Responsive
  • Adaptive vs. ResponsiveAdaptive layout: Fix szélességű oldal elrendezésekváltása eszközfüggően
  • Adaptive vs. ResponsiveAdaptive layout: Fix szélességű oldal elrendezésekváltása eszközfüggően
  • Adaptive vs. ResponsiveAdaptive layout: Fix szélességű oldal elrendezésekváltása eszközfüggőenResponsive Layout: Fluid oldal elrendezések váltásaeszközfüggően
  • Adaptive vs. ResponsiveAdaptive layout: Fix szélességű oldal elrendezésekváltása eszközfüggőenResponsive Layout: Fluid oldal elrendezések váltásaeszközfüggően
  • Adaptive vs. ResponsiveAdaptive layout: Fix szélességű oldal elrendezésekváltása eszközfüggőenResponsive Layout: Fluid oldal elrendezések váltásaeszközfüggőenDe: responsive design az adaptive design része!(?)
  • Adaptive vs. ResponsiveAdaptive layout: Fix szélességű oldal elrendezésekváltása eszközfüggőenResponsive Layout: Fluid oldal elrendezések váltásaeszközfüggőenDe: responsive design az adaptive design része!(?)
  • Adaptive vs. ResponsiveAdaptive layout: Fix szélességű oldal elrendezésekváltása eszközfüggőenResponsive Layout: Fluid oldal elrendezések váltásaeszközfüggőenDe: responsive design az adaptive design része!(?)http://viljamis.com/blog/2012/adaptive-vs-responsive-whats-the-difference.php
  • Grid systems
  • Grid systems• „klasszikus” pl. 960.gs
  • Grid systems• „klasszikus” pl. 960.gs• szimmetrikus: pl. Zen Grids, Susy
  • Grid systems• „klasszikus” pl. 960.gs• szimmetrikus: pl. Zen Grids, Susy• asszimetrikus: pl. Singularity
  • Gridre épülő alapsminkek960.gs:Omega Themehttp://drupal.org/project/omegapl. Acquia
  • Gridre épülő alapsminkekZen Grids:Zenhttp://drupal.org/project/zen+http://drupal.org/project/fencespl. Sydney DrupalCon 2013
  • Gridre épülő alapsminkekSusy, Singularity :Aurorahttp://drupal.org/project/aurora+http://drupal.org/project/borealisTonyhttp://drupal.org/sandbox/tizzo/1426556pl. Drupal.org D7 verziója (csak Susy)
  • Sass és CompassSassCSS preprocessor
  • Sass és CompassSassCSS preprocessorCompass"CSS Authoring Framework"
  • Sass és CompassSassCSS preprocessorCompass"CSS Authoring Framework"Előregyártott Sass kódok rendszerbeszervezett fejlesztői eszközként (szoftverként)használható gyűjteménye
  • Sass és CompassSassCSS preprocessorCompass"CSS Authoring Framework"Előregyártott Sass kódok rendszerbeszervezett fejlesztői eszközként (szoftverként)használható gyűjteményehttp://denver2012.drupal.org/program/sessions/using-sass-compass-drupal-theming
  • http://sonspring.com/journal/sass-for-designers
  • Compass extension-ök
  • Compass extension-ök• az említett grid systemek
  • Compass extension-ök• az említett grid systemek• Breakpoint https://github.com/canarymason/breakpoint
  • Compass extension-ök• az említett grid systemek• Breakpoint https://github.com/canarymason/breakpoint• Respond to https://github.com/snugug/respond-to
  • Compass extension-ök• az említett grid systemek• Breakpoint https://github.com/canarymason/breakpoint• Respond to https://github.com/snugug/respond-to• Sassy Buttons http://jaredhardy.com/sassy-buttons/
  • Compass extension-ök• az említett grid systemek• 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
  • HTML5
  • HTML5• Egyszerűbb, áttekinthetőbb kód (dev)
  • HTML5• Egyszerűbb, áttekinthetőbb kód (dev)• Kevesebb adat (performance)
  • HTML5• Egyszerűbb, áttekinthetőbb kód (dev)• Kevesebb adat (performance)• Szemantikus (SEO, mobil eszközök)
  • HTML5• Egyszerűbb, áttekinthetőbb kód (dev)• Kevesebb adat (performance)• Szemantikus (SEO, mobil eszközök)• Előremutató…
  • HTML5• Egyszerűbb, áttekinthetőbb kód (dev)• Kevesebb adat (performance)• Szemantikus (SEO, mobil eszközök)• Előremutató…[if lte IE 9]HTML5 shivhttps://github.com/aFarkas/html5shiv
  • HTML5Drupal modulok, pl.• Fences http://drupal.org/project/fences• Elements http://drupal.org/project/elements
  • • Media Queries• Fluid Grids• Flexible Media
  • Fluid imagesCSSimg { /* height: auto; */ max-width: 100%;}
  • "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
  • Flexible slideshowsFlex Sliderhttps://github.com/woothemes/FlexSliderhttp://drupal.org/project/flexslider
  • Fluid Video
  • Fluid VideoSaját videók (nem beágyazott)width, height
  • Fluid VideoSaját videók (nem beágyazott)width, heightBeágyazott videók (pl. youtube)FitVidshttp://drupal.org/project/fitvids
  • Fluid VideoSaját videók (nem beágyazott)width, heightBeágyazott videók (pl. youtube)FitVids CSShttp://drupal.org/project/fitvids http://webdesignerwall.com/ tutorials/css-elastic-videos
  • Egyéb teendőkNavigá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
  • Egyéb teendőkTáblázatok, kisebb képernyőn• oszlopok kihagyása• elemek átrendezése• más módon való megjelenítés (pl. diagramm)
  • • Media Queries• Fluid Grids• Flexible Media• + Performance
  • Teljesítmény javítás"80-90%
  • Teljesítmény javítás"80-90%of the end-user response time is spent on thefrontend. Start there!"~ Steve Soudershttp://www.stevesouders.com/blog/2012/02/10/the-performance-golden-rule/
  • Teljesítmény javítás
  • Teljesítmény javítás• Design: képek helyett CSS3
  • Teljesítmény javítás• Design: képek helyett CSS3• Admin Icons (Icon Fonts) http://drupal.org/project/admin_icons
  • 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…);
  • Teljesítmény javítás
  • Teljesítmény javítás• Image Optim Jpegmini, pngmini (OSX) http://imageoptim.com http://jpegmini.com
  • Teljesítmény javítás• Image Optim Jpegmini, pngmini (OSX) http://imageoptim.com http://jpegmini.com• Riot (Win) http://luci.criosweb.ro/riot/
  • Teljesítmény javítás• Image Optim Jpegmini, pngmini (OSX) http://imageoptim.com http://jpegmini.com• Riot (Win) http://luci.criosweb.ro/riot/• Smush.it (online – Yahoo Dev Net) http://www.smushit.com/ysmush.it/
  • Teljesítmény javítás• Image Optim Jpegmini, pngmini (OSX) http://imageoptim.com http://jpegmini.com• Riot (Win) http://luci.criosweb.ro/riot/• Smush.it (online – Yahoo Dev Net) http://www.smushit.com/ysmush.it/• Image Magick (metadata törlés) http://drupal.org/project/imagemagick/
  • Teljesítmény javítás
  • Teljesítmény javítás• Speedy (minified JS) http://drupal.org/project/speedy
  • Teljesítmény javítás• Speedy (minified JS) http://drupal.org/project/speedy• Advanced CSS JS Aggregation http://drupal.org/project/advagg
  • Egyéb hasznos eszközök
  • Egyéb hasznos eszközök• Modernizr http://modernizr.com/
  • Egyéb hasznos eszközök• Modernizr http://modernizr.com/• Context http://drupal.org/project/context
  • Egyéb hasznos eszközök• Modernizr http://modernizr.com/• Context http://drupal.org/project/context• Delta http://drupal.org/project/delta
  • • Media Queries• Fluid Grids• Flexible Media• PerformanceResponsive weboldalak Drupallal – Drupal Hétvége 2012Hajas Tamáshttp://thamas.hu@eccegostudio