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 numbe...
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-...
• Media Queries• Fluid Grids• Fluid ImagesEthan Marcotte: Responsive web design (2010)http://www.alistapart.com/articles/r...
• 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 QueriesCSS3…@media screen and(min-width: 400px){  vonatkozó CSS beállításaink}@media screen and (min-width: 800px) {...
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 old...
Adaptive vs. ResponsiveAdaptive layout: Fix szélességű oldal elrendezésekváltása eszközfüggőenResponsive Layout: Fluid old...
Adaptive vs. ResponsiveAdaptive layout: Fix szélességű oldal elrendezésekváltása eszközfüggőenResponsive Layout: Fluid old...
Adaptive vs. ResponsiveAdaptive layout: Fix szélességű oldal elrendezésekváltása eszközfüggőenResponsive Layout: Fluid old...
Adaptive vs. ResponsiveAdaptive layout: Fix szélességű oldal elrendezésekváltása eszközfüggőenResponsive Layout: Fluid old...
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/borealisTonyht...
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ő...
Sass és CompassSassCSS preprocessorCompass"CSS Authoring Framework"Előregyártott Sass kódok rendszerbeszervezett fejlesztő...
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...
Compass extension-ök•   az említett grid systemek•   Breakpoint    https://github.com/canarymason/breakpoint•   Respond to...
Compass extension-ök•   az említett grid systemek•   Breakpoint    https://github.com/canarymason/breakpoint•   Respond to...
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őre...
HTML5•   Egyszerűbb, áttekinthetőbb kód (dev)•   Kevesebb adat (performance)•   Szemantikus (SEO, mobil eszközök)•   Előre...
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•...
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                             CS...
Egyéb teendőkNavigáció•   Az emberi ujj nem egér!•   Az oldal átrendezése•   Lista helyett legördülő (számtalan JS van err...
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. ...
• 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.s...
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•  ...
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...
Teljesítmény javítás•   Image Optim                 Jpegmini, pngmini (OSX)    http://imageoptim.com       http://jpegmini...
Teljesítmény javítás•   Image Optim                 Jpegmini, pngmini (OSX)    http://imageoptim.com       http://jpegmini...
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://dr...
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    h...
• Media Queries• Fluid Grids• Flexible Media• PerformanceResponsive weboldalak Drupallal – Drupal Hétvége 2012Hajas Tamásh...
Upcoming SlideShare
Loading in …5
×

Responsive Webdesign Drupallal

582
-1

Published on

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

Published in: News & Politics
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
582
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • &amp;#x201E;Hunglish&amp;#x201D; :)\n\nRWDD - Mi kell hozz&amp;#xE1;? D8 ;)\n\nlehets&amp;#xE9;ges eszk&amp;#xF6;z&amp;#xF6;k, megold&amp;#xE1;sok, \nnem a &amp;#x201E;legjobbak&amp;#x201D;\n
  • Responsive = v&amp;#xE1;laszad&amp;#xF3;\nMire? Az eszk&amp;#xF6;zre = context!\n\nLehet&amp;#x151;s&amp;#xE9;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&amp;#x2019;s screen resolution (view port) using media queries\n
  • Nem mondok sz&amp;#xE1;mokat, tal&amp;#xE1;lhat&amp;#xF3; sok statisztikai\n\nL&amp;#xE9;nyeg: (a webes el&amp;#xE9;r&amp;#xE9;st biztos&amp;#xED;t&amp;#xF3;) hordozhat&amp;#xF3; eszk&amp;#xF6;z&amp;#xF6;k ar&amp;#xE1;nya dinamikusan n&amp;#x151;\n\nA web nem fix m&amp;#xE9;ret&amp;#x171;\n
  • Mobile first - Luke Wroblewski\n\nRepeat after me: Responsive Web Design isn&amp;#x2019;t about current devices and known unknowns, it&amp;#x2019;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 (~ &amp;#x201E;eleg&amp;#xE1;ns le&amp;#xE9;p&amp;#xED;t&amp;#xE9;s&amp;#x201D;)\nProgressive Enhancement (~ &amp;#x201E;fokozatos er&amp;#x151;s&amp;#xED;t&amp;#xE9;s&amp;#x201D;)\n
  • Conditional classes: Paul Irish http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/\n\nRespond.js - min-width, max width t&amp;#xE1;mogat&amp;#xE1;sa\n\nModernizr - k&amp;#xE9;s&amp;#x151;bb b&amp;#x151;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&amp;#xE1;mogat&amp;#xE1;sa\n\nModernizr - k&amp;#xE9;s&amp;#x151;bb b&amp;#x151;vebben\n
  • \n
  • kit&amp;#xE9;r&amp;#x151;: \nadaptive layout vs responsive layout\nadaptive design vs responsive design\n
  • kit&amp;#xE9;r&amp;#x151;: \nadaptive layout vs responsive layout\nadaptive design vs responsive design\n
  • kit&amp;#xE9;r&amp;#x151;: \nadaptive layout vs responsive layout\nadaptive design vs responsive design\n
  • kit&amp;#xE9;r&amp;#x151;: \nadaptive layout vs responsive layout\nadaptive design vs responsive design\n
  • kit&amp;#xE9;r&amp;#x151;: \nadaptive layout vs responsive layout\nadaptive design vs responsive design\n
  • kit&amp;#xE9;r&amp;#x151;: \nadaptive layout vs responsive layout\nadaptive design vs responsive design\n
  • kit&amp;#xE9;r&amp;#x151;: \nadaptive layout vs responsive layout\nadaptive design vs responsive design\n
  • grid felk&amp;#xE9;p&amp;#xED;t&amp;#xE9;se: oszlopok (column), oszlopk&amp;#xF6;z&amp;#xF6;k (gutter)\n\n960 gs - fix, statikus\nszimmetrikus - egyel&amp;#x151; eloszl&amp;#xE1;s&amp;#xFA; (lehet fix, fluid, &quot;Magic&quot;)\nSusy - Eric Meyer (nem &amp;#x201E;az&amp;#x201D;, hanem egy m&amp;#xE1;sik), D7 d.org theme grid tool! \n\nasszimetrikus: k&amp;#xFC;l oszlop &amp;#xE9;s gutter sz&amp;#xE9;less&amp;#xE9;gk\n
  • grid felk&amp;#xE9;p&amp;#xED;t&amp;#xE9;se: oszlopok (column), oszlopk&amp;#xF6;z&amp;#xF6;k (gutter)\n\n960 gs - fix, statikus\nszimmetrikus - egyel&amp;#x151; eloszl&amp;#xE1;s&amp;#xFA; (lehet fix, fluid, &quot;Magic&quot;)\nSusy - Eric Meyer (nem &amp;#x201E;az&amp;#x201D;, hanem egy m&amp;#xE1;sik), D7 d.org theme grid tool! \n\nasszimetrikus: k&amp;#xFC;l oszlop &amp;#xE9;s gutter sz&amp;#xE9;less&amp;#xE9;gk\n
  • grid felk&amp;#xE9;p&amp;#xED;t&amp;#xE9;se: oszlopok (column), oszlopk&amp;#xF6;z&amp;#xF6;k (gutter)\n\n960 gs - fix, statikus\nszimmetrikus - egyel&amp;#x151; eloszl&amp;#xE1;s&amp;#xFA; (lehet fix, fluid, &quot;Magic&quot;)\nSusy - Eric Meyer (nem &amp;#x201E;az&amp;#x201D;, hanem egy m&amp;#xE1;sik), D7 d.org theme grid tool! \n\nasszimetrikus: k&amp;#xFC;l oszlop &amp;#xE9;s gutter sz&amp;#xE9;less&amp;#xE9;gk\n
  • klasszikus grid css class-okkal, de mq-k\n4-es m&amp;#xE1;r sass, compass\n&quot;point and click&quot;\nsok szolg&amp;#xE1;ltat&amp;#xE1;s\nnagyon n&amp;#xE9;pszer&amp;#x171; (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&amp;#xE1;gyaz&amp;#xE1;s, v&amp;#xE1;ltoz&amp;#xF3;k, @mixin-ek (f&amp;#xFC;ggv&amp;#xE9;ny?), &amp;:rules, @include (ez&amp;#xE9;rt nem kell class)\nNem(!) a drupalban - k&amp;#xFC;l&amp;#xF6;n fejleszt&amp;#x151;i eszk&amp;#xF6;z, CSS-t gener&amp;#xE1;l\n\n&quot;CSS Authoring Framework&quot; - most m&amp;#xE1;r mindenki tudja, hogy mi ez &amp;#xE9;s mire j&amp;#xF3; ;o)\n\nMatt Farina, Nathan Smith\n
  • SASS: be&amp;#xE1;gyaz&amp;#xE1;s, v&amp;#xE1;ltoz&amp;#xF3;k, @mixin-ek (f&amp;#xFC;ggv&amp;#xE9;ny?), &amp;:rules, @include (ez&amp;#xE9;rt nem kell class)\nNem(!) a drupalban - k&amp;#xFC;l&amp;#xF6;n fejleszt&amp;#x151;i eszk&amp;#xF6;z, CSS-t gener&amp;#xE1;l\n\n&quot;CSS Authoring Framework&quot; - most m&amp;#xE1;r mindenki tudja, hogy mi ez &amp;#xE9;s mire j&amp;#xF3; ;o)\n\nMatt Farina, Nathan Smith\n
  • SASS: be&amp;#xE1;gyaz&amp;#xE1;s, v&amp;#xE1;ltoz&amp;#xF3;k, @mixin-ek (f&amp;#xFC;ggv&amp;#xE9;ny?), &amp;:rules, @include (ez&amp;#xE9;rt nem kell class)\nNem(!) a drupalban - k&amp;#xFC;l&amp;#xF6;n fejleszt&amp;#x151;i eszk&amp;#xF6;z, CSS-t gener&amp;#xE1;l\n\n&quot;CSS Authoring Framework&quot; - most m&amp;#xE1;r mindenki tudja, hogy mi ez &amp;#xE9;s mire j&amp;#xF3; ;o)\n\nMatt Farina, Nathan Smith\n
  • Amerika kapit&amp;#xE1;ny&amp;#x2026;\n
  • Breakpoint: t&amp;#xF6;r&amp;#xE9;spontok azonos&amp;#xED;t&amp;#xE1;sa\nRespond to: breakpointra &amp;#xE9;p&amp;#xFC;l, szemantikus elnevez&amp;#xE9;sek\n
  • Breakpoint: t&amp;#xF6;r&amp;#xE9;spontok azonos&amp;#xED;t&amp;#xE1;sa\nRespond to: breakpointra &amp;#xE9;p&amp;#xFC;l, szemantikus elnevez&amp;#xE9;sek\n
  • Breakpoint: t&amp;#xF6;r&amp;#xE9;spontok azonos&amp;#xED;t&amp;#xE1;sa\nRespond to: breakpointra &amp;#xE9;p&amp;#xFC;l, szemantikus elnevez&amp;#xE9;sek\n
  • Breakpoint: t&amp;#xF6;r&amp;#xE9;spontok azonos&amp;#xED;t&amp;#xE1;sa\nRespond to: breakpointra &amp;#xE9;p&amp;#xFC;l, szemantikus elnevez&amp;#xE9;sek\n
  • Breakpoint: t&amp;#xF6;r&amp;#xE9;spontok azonos&amp;#xED;t&amp;#xE1;sa\nRespond to: breakpointra &amp;#xE9;p&amp;#xFC;l, szemantikus elnevez&amp;#xE9;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&amp;#xE9;t site ig&amp;#xE9;nyeit&amp;#x151;l, komplexit&amp;#xE1;s&amp;#xE1;t&amp;#xF3;l f&amp;#xFC;gg, hogy milyen megold&amp;#xE1;s, eszk&amp;#xF6;z&amp;#xF6;k lehetnek j&amp;#xF3;k\n
  • D8-ban responsive tables\n
  • \n
  • az eddigiek is &amp;#xE9;rintett&amp;#xE9;k m&amp;#xE1;r t&amp;#xF6;bbsz&amp;#xF6;r a teljes&amp;#xED;tm&amp;#xE9;nyt\nmobil eszk&amp;#xF6;z &amp;#xBB;\nkisebb s&amp;#xE1;vsz&amp;#xE9;less&amp;#xE9;g\ngyeng&amp;#xE9;bb teljes&amp;#xED;tm&amp;#xE9;ny (pl 10 x lass&amp;#xFA;bb JS feldolgoz&amp;#xE1;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

    1. 1. Responsive webdesign DrupallalDrupal Hétvége 2012Hajas Tamáshttp://thamas.hu@eccegostudio
    2. 2. ResponsivewebdesignDrupallal
    3. 3. http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/
    4. 4. "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
    5. 5. Ethan Marcotte: Responsive web design (2010)http://www.alistapart.com/articles/responsive-web-design/
    6. 6. • Media QueriesEthan Marcotte: Responsive web design (2010)http://www.alistapart.com/articles/responsive-web-design/
    7. 7. • Media Queries• Fluid GridsEthan Marcotte: Responsive web design (2010)http://www.alistapart.com/articles/responsive-web-design/
    8. 8. • Media Queries• Fluid Grids• Fluid ImagesEthan Marcotte: Responsive web design (2010)http://www.alistapart.com/articles/responsive-web-design/
    9. 9. • Media Queries• Fluid Grids• Fluid Images• Flexible Media
    10. 10. • Media Queries• Fluid Grids• Flexible Media
    11. 11. Media Queries
    12. 12. Media QueriesCSS2<link rel="stylesheet" type="text/css"media="screen" href="screen-styles.css">
    13. 13. 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" />
    14. 14. 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}
    15. 15. Media Queries[if lte IE 8]
    16. 16. Media Queries[if lte IE 8]Respond.jshttps://github.com/scottjehl/Respond
    17. 17. Media Queries[if lte IE 8]Respond.jshttps://github.com/scottjehl/Respond+Modrenizrhttp://modernizr.com/
    18. 18. • Media Queries• Fluid Grids• Flexible Media
    19. 19. Adaptive vs. Responsive
    20. 20. Adaptive vs. ResponsiveAdaptive layout: Fix szélességű oldal elrendezésekváltása eszközfüggően
    21. 21. Adaptive vs. ResponsiveAdaptive layout: Fix szélességű oldal elrendezésekváltása eszközfüggően
    22. 22. 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
    23. 23. 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
    24. 24. 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!(?)
    25. 25. 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!(?)
    26. 26. 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
    27. 27. Grid systems
    28. 28. Grid systems• „klasszikus” pl. 960.gs
    29. 29. Grid systems• „klasszikus” pl. 960.gs• szimmetrikus: pl. Zen Grids, Susy
    30. 30. Grid systems• „klasszikus” pl. 960.gs• szimmetrikus: pl. Zen Grids, Susy• asszimetrikus: pl. Singularity
    31. 31. Gridre épülő alapsminkek960.gs:Omega Themehttp://drupal.org/project/omegapl. Acquia
    32. 32. Gridre épülő alapsminkekZen Grids:Zenhttp://drupal.org/project/zen+http://drupal.org/project/fencespl. Sydney DrupalCon 2013
    33. 33. 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)
    34. 34. Sass és CompassSassCSS preprocessor
    35. 35. Sass és CompassSassCSS preprocessorCompass"CSS Authoring Framework"
    36. 36. 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
    37. 37. 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
    38. 38. http://sonspring.com/journal/sass-for-designers
    39. 39. Compass extension-ök
    40. 40. Compass extension-ök• az említett grid systemek
    41. 41. Compass extension-ök• az említett grid systemek• Breakpoint https://github.com/canarymason/breakpoint
    42. 42. Compass extension-ök• az említett grid systemek• Breakpoint https://github.com/canarymason/breakpoint• Respond to https://github.com/snugug/respond-to
    43. 43. 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/
    44. 44. 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
    45. 45. HTML5
    46. 46. HTML5• Egyszerűbb, áttekinthetőbb kód (dev)
    47. 47. HTML5• Egyszerűbb, áttekinthetőbb kód (dev)• Kevesebb adat (performance)
    48. 48. HTML5• Egyszerűbb, áttekinthetőbb kód (dev)• Kevesebb adat (performance)• Szemantikus (SEO, mobil eszközök)
    49. 49. HTML5• Egyszerűbb, áttekinthetőbb kód (dev)• Kevesebb adat (performance)• Szemantikus (SEO, mobil eszközök)• Előremutató…
    50. 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 shivhttps://github.com/aFarkas/html5shiv
    51. 51. HTML5Drupal modulok, pl.• Fences http://drupal.org/project/fences• Elements http://drupal.org/project/elements
    52. 52. • Media Queries• Fluid Grids• Flexible Media
    53. 53. Fluid imagesCSSimg { /* height: auto; */ max-width: 100%;}
    54. 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
    55. 55. Flexible slideshowsFlex Sliderhttps://github.com/woothemes/FlexSliderhttp://drupal.org/project/flexslider
    56. 56. Fluid Video
    57. 57. Fluid VideoSaját videók (nem beágyazott)width, height
    58. 58. Fluid VideoSaját videók (nem beágyazott)width, heightBeágyazott videók (pl. youtube)FitVidshttp://drupal.org/project/fitvids
    59. 59. 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
    60. 60. 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
    61. 61. 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)
    62. 62. • Media Queries• Fluid Grids• Flexible Media• + Performance
    63. 63. Teljesítmény javítás"80-90%
    64. 64. 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/
    65. 65. Teljesítmény javítás
    66. 66. Teljesítmény javítás• Design: képek helyett CSS3
    67. 67. Teljesítmény javítás• Design: képek helyett CSS3• Admin Icons (Icon Fonts) http://drupal.org/project/admin_icons
    68. 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. 69. Teljesítmény javítás
    70. 70. Teljesítmény javítás• Image Optim Jpegmini, pngmini (OSX) http://imageoptim.com http://jpegmini.com
    71. 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/
    72. 72. 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/
    73. 73. 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/
    74. 74. Teljesítmény javítás
    75. 75. Teljesítmény javítás• Speedy (minified JS) http://drupal.org/project/speedy
    76. 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. 77. Egyéb hasznos eszközök
    78. 78. Egyéb hasznos eszközök• Modernizr http://modernizr.com/
    79. 79. Egyéb hasznos eszközök• Modernizr http://modernizr.com/• Context http://drupal.org/project/context
    80. 80. Egyéb hasznos eszközök• Modernizr http://modernizr.com/• Context http://drupal.org/project/context• Delta http://drupal.org/project/delta
    81. 81. • Media Queries• Fluid Grids• Flexible Media• PerformanceResponsive weboldalak Drupallal – Drupal Hétvége 2012Hajas Tamáshttp://thamas.hu@eccegostudio

    ×