SlideShare a Scribd company logo
1 of 81
Responsive
 webdesign
 Drupallal

Drupal Hétvége 2012

Hajas Tamás
http://thamas.hu
@eccegostudio
Responsive
webdesign
Drupallal
http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/
"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
Ethan Marcotte: Responsive web design (2010)
http://www.alistapart.com/articles/responsive-web-design/
• Media Queries


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

Ethan Marcotte: Responsive web design (2010)
http://www.alistapart.com/articles/responsive-web-design/
• Media Queries
• Fluid Grids
• Fluid Images
Ethan 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 Queries
CSS2
<link rel="stylesheet" type="text/css"
media="screen" href="screen-styles.css">
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" />
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
}
Media Queries
[if lte IE 8]
Media Queries
[if lte IE 8]


Respond.js
https://github.com/scottjehl/Respond
Media Queries
[if lte IE 8]


Respond.js
https://github.com/scottjehl/Respond


+

Modrenizr
http://modernizr.com/
• Media Queries
• Fluid Grids
• Flexible Media
Adaptive vs. Responsive
Adaptive vs. Responsive
Adaptive layout: Fix szélességű oldal elrendezések
váltása eszközfüggően
Adaptive vs. Responsive
Adaptive layout: Fix szélességű oldal elrendezések
váltása eszközfüggően
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
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
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!(?)
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!(?)
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
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ő alapsminkek
960.gs:
Omega Theme
http://drupal.org/project/omega
pl. Acquia
Gridre épülő alapsminkek
Zen Grids:
Zen
http://drupal.org/project/zen
+

http://drupal.org/project/fences
pl. Sydney DrupalCon 2013
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)
Sass és Compass
Sass
CSS preprocessor
Sass és Compass
Sass
CSS preprocessor

Compass
"CSS Authoring Framework"
Sass és Compass
Sass
CSS preprocessor

Compass
"CSS Authoring Framework"
Előregyártott Sass kódok rendszerbe
szervezett fejlesztői eszközként (szoftverként)
használható gyűjteménye
Sass és Compass
Sass
CSS preprocessor

Compass
"CSS Authoring Framework"
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
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 shiv
https://github.com/aFarkas/html5shiv
HTML5
Drupal modulok, pl.

•   Fences
    http://drupal.org/project/fences
•   Elements
    http://drupal.org/project/elements
• Media Queries
• Fluid Grids
• Flexible Media
Fluid images
CSS

img {
  /* 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 slideshows
Flex Slider
https://github.com/woothemes/FlexSlider
http://drupal.org/project/flexslider
Fluid Video
Fluid Video
Saját videók (nem beágyazott)
width, height
Fluid Video
Saját videók (nem beágyazott)
width, height


Beágyazott videók (pl. youtube)
FitVids
http://drupal.org/project/fitvids
Fluid Video
Saját videók (nem beágyazott)
width, height


Beágyazott videók (pl. youtube)
FitVids                             CSS
http://drupal.org/project/fitvids   http://webdesignerwall.com/
                                    tutorials/css-elastic-videos
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
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)
• 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 the
frontend. Start there!"
~ Steve Souders
http://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
• Performance
Responsive weboldalak Drupallal – Drupal Hétvége 2012
Hajas Tamás
http://thamas.hu
@eccegostudio

More Related Content

Similar to Responsive Webdesign Drupallal

[Hungarian] HTML Course - Sapientia University
[Hungarian] HTML Course - Sapientia University[Hungarian] HTML Course - Sapientia University
[Hungarian] HTML Course - Sapientia UniversityZoltan Iszlai
 
Cross Platform mobil app fejlesztés HTML5 JavaScript alapokon
Cross Platform mobil app fejlesztés HTML5 JavaScript alapokonCross Platform mobil app fejlesztés HTML5 JavaScript alapokon
Cross Platform mobil app fejlesztés HTML5 JavaScript alapokoneRise
 
Html5 css3-osszefoglalo-v1
Html5 css3-osszefoglalo-v1Html5 css3-osszefoglalo-v1
Html5 css3-osszefoglalo-v1webnagyi
 
Fejlesztési kihívások a pénzügyi szektorban
Fejlesztési kihívások a pénzügyi szektorbanFejlesztési kihívások a pénzügyi szektorban
Fejlesztési kihívások a pénzügyi szektorbanPal Vojacsek
 
A webes űrlapok csodálatos világa
A webes űrlapok csodálatos világaA webes űrlapok csodálatos világa
A webes űrlapok csodálatos világaSzabolcs Bobor
 
HTML5 és akadálymentesség az ELTE Informatikai Kar kurzusaiban és fejlesztése...
HTML5 és akadálymentesség az ELTE Informatikai Kar kurzusaiban és fejlesztése...HTML5 és akadálymentesség az ELTE Informatikai Kar kurzusaiban és fejlesztése...
HTML5 és akadálymentesség az ELTE Informatikai Kar kurzusaiban és fejlesztése...Andor Abonyi-Tóth
 
Webes alkalmazások optimalizálása
Webes alkalmazások optimalizálásaWebes alkalmazások optimalizálása
Webes alkalmazások optimalizálásaAntal Bodnar
 
Mi a baj a Drupaloddal
Mi a baj a DrupaloddalMi a baj a Drupaloddal
Mi a baj a Drupaloddalthesnufkin
 
Online kérdőívek készítése - tanulmány
Online kérdőívek készítése - tanulmányOnline kérdőívek készítése - tanulmány
Online kérdőívek készítése - tanulmányTóth Attila
 
Bobor Szabolcs: A webes űrlapok csodálatos világa
Bobor Szabolcs: A webes űrlapok csodálatos világaBobor Szabolcs: A webes űrlapok csodálatos világa
Bobor Szabolcs: A webes űrlapok csodálatos világaFrontend Meetup
 
Szerver oldali fejlesztés korszerű módszerekkel C# nyelven
Szerver oldali fejlesztés korszerű módszerekkel C# nyelvenSzerver oldali fejlesztés korszerű módszerekkel C# nyelven
Szerver oldali fejlesztés korszerű módszerekkel C# nyelvenKrisztián Gyula Tóth
 
HTML5 esettanulmányok
HTML5 esettanulmányokHTML5 esettanulmányok
HTML5 esettanulmányokZoltán Dávid
 
Többszálú javascript
Többszálú javascriptTöbbszálú javascript
Többszálú javascriptMáté Farkas
 
PHP Meetup: Yii használata nagyobb projektekben.
PHP Meetup: Yii használata nagyobb projektekben.PHP Meetup: Yii használata nagyobb projektekben.
PHP Meetup: Yii használata nagyobb projektekben.Szabolcs Bobor
 
Webapplication development with HTML5 and GWT
Webapplication development with HTML5 and GWTWebapplication development with HTML5 and GWT
Webapplication development with HTML5 and GWTPéter Nagy
 
T systems - agile workshop 1. session
T systems - agile workshop 1. sessionT systems - agile workshop 1. session
T systems - agile workshop 1. sessionPéter Lukács
 

Similar to Responsive Webdesign Drupallal (20)

[Hungarian] HTML Course - Sapientia University
[Hungarian] HTML Course - Sapientia University[Hungarian] HTML Course - Sapientia University
[Hungarian] HTML Course - Sapientia University
 
Cross Platform mobil app fejlesztés HTML5 JavaScript alapokon
Cross Platform mobil app fejlesztés HTML5 JavaScript alapokonCross Platform mobil app fejlesztés HTML5 JavaScript alapokon
Cross Platform mobil app fejlesztés HTML5 JavaScript alapokon
 
Html5 css3-osszefoglalo-v1
Html5 css3-osszefoglalo-v1Html5 css3-osszefoglalo-v1
Html5 css3-osszefoglalo-v1
 
Fejlesztési kihívások a pénzügyi szektorban
Fejlesztési kihívások a pénzügyi szektorbanFejlesztési kihívások a pénzügyi szektorban
Fejlesztési kihívások a pénzügyi szektorban
 
A webes űrlapok csodálatos világa
A webes űrlapok csodálatos világaA webes űrlapok csodálatos világa
A webes űrlapok csodálatos világa
 
HTML5 és akadálymentesség az ELTE Informatikai Kar kurzusaiban és fejlesztése...
HTML5 és akadálymentesség az ELTE Informatikai Kar kurzusaiban és fejlesztése...HTML5 és akadálymentesség az ELTE Informatikai Kar kurzusaiban és fejlesztése...
HTML5 és akadálymentesség az ELTE Informatikai Kar kurzusaiban és fejlesztése...
 
Webes alkalmazások optimalizálása
Webes alkalmazások optimalizálásaWebes alkalmazások optimalizálása
Webes alkalmazások optimalizálása
 
Mi a baj a Drupaloddal
Mi a baj a DrupaloddalMi a baj a Drupaloddal
Mi a baj a Drupaloddal
 
Online kérdőívek készítése - tanulmány
Online kérdőívek készítése - tanulmányOnline kérdőívek készítése - tanulmány
Online kérdőívek készítése - tanulmány
 
woocommerce-SEO.pptx
woocommerce-SEO.pptxwoocommerce-SEO.pptx
woocommerce-SEO.pptx
 
Berkes andrás pxml architektura 2013-01-16
Berkes andrás pxml architektura 2013-01-16Berkes andrás pxml architektura 2013-01-16
Berkes andrás pxml architektura 2013-01-16
 
Bobor Szabolcs: A webes űrlapok csodálatos világa
Bobor Szabolcs: A webes űrlapok csodálatos világaBobor Szabolcs: A webes űrlapok csodálatos világa
Bobor Szabolcs: A webes űrlapok csodálatos világa
 
Szerver oldali fejlesztés korszerű módszerekkel C# nyelven
Szerver oldali fejlesztés korszerű módszerekkel C# nyelvenSzerver oldali fejlesztés korszerű módszerekkel C# nyelven
Szerver oldali fejlesztés korszerű módszerekkel C# nyelven
 
HTML5 esettanulmányok
HTML5 esettanulmányokHTML5 esettanulmányok
HTML5 esettanulmányok
 
Budapest.rb 201010
Budapest.rb 201010Budapest.rb 201010
Budapest.rb 201010
 
Többszálú javascript
Többszálú javascriptTöbbszálú javascript
Többszálú javascript
 
PHP Meetup: Yii használata nagyobb projektekben.
PHP Meetup: Yii használata nagyobb projektekben.PHP Meetup: Yii használata nagyobb projektekben.
PHP Meetup: Yii használata nagyobb projektekben.
 
Webapplication development with HTML5 and GWT
Webapplication development with HTML5 and GWTWebapplication development with HTML5 and GWT
Webapplication development with HTML5 and GWT
 
T systems - agile workshop 1. session
T systems - agile workshop 1. sessionT systems - agile workshop 1. session
T systems - agile workshop 1. session
 
Drupal vs Joomla
Drupal vs JoomlaDrupal vs Joomla
Drupal vs Joomla
 

Responsive Webdesign Drupallal

Editor's Notes

  1. &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
  2. 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
  3. 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
  4. 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
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. HTML-ben!\n\nD8 breakpoints\n
  11. HTML-ben!\n\nD8 breakpoints\n
  12. 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
  13. 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
  14. 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
  15. \n
  16. kit&amp;#xE9;r&amp;#x151;: \nadaptive layout vs responsive layout\nadaptive design vs responsive design\n
  17. kit&amp;#xE9;r&amp;#x151;: \nadaptive layout vs responsive layout\nadaptive design vs responsive design\n
  18. kit&amp;#xE9;r&amp;#x151;: \nadaptive layout vs responsive layout\nadaptive design vs responsive design\n
  19. kit&amp;#xE9;r&amp;#x151;: \nadaptive layout vs responsive layout\nadaptive design vs responsive design\n
  20. kit&amp;#xE9;r&amp;#x151;: \nadaptive layout vs responsive layout\nadaptive design vs responsive design\n
  21. kit&amp;#xE9;r&amp;#x151;: \nadaptive layout vs responsive layout\nadaptive design vs responsive design\n
  22. kit&amp;#xE9;r&amp;#x151;: \nadaptive layout vs responsive layout\nadaptive design vs responsive design\n
  23. 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
  24. 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
  25. 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
  26. 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
  27. John Albin - D8 Mobile Initiative lead(?)\nsass, compass\n
  28. 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
  29. 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
  30. 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
  31. 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
  32. Amerika kapit&amp;#xE1;ny&amp;#x2026;\n
  33. 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
  34. 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
  35. 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
  36. 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
  37. 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
  38. HTML 5 initiative!\n
  39. HTML 5 initiative!\n
  40. HTML 5 initiative!\n
  41. HTML 5 initiative!\n
  42. HTML 5 initiative!\n
  43. Fences: HTML5 fields\n\nElements: Form elemek\n
  44. \n
  45. picture html element\n
  46. Nem ImageCache :)\nPerformance!\nD8 - picture module\n
  47. library module\n
  48. CSS - position rel, abs\n
  49. CSS - position rel, abs\n
  50. CSS - position rel, abs\n
  51. 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
  52. D8-ban responsive tables\n
  53. \n
  54. 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
  55. \n
  56. \n
  57. \n
  58. + jpegmini, pngmini - osx v. szerver\n
  59. + jpegmini, pngmini - osx v. szerver\n
  60. + jpegmini, pngmini - osx v. szerver\n
  61. + jpegmini, pngmini - osx v. szerver\n
  62. \n
  63. \n
  64. \n
  65. \n
  66. \n
  67. \n