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

1. Responsive
webdesign
Drupallal
Drupal Hétvége 2012
Hajas Tamás
http://thamas.hu
@eccegostudio

2. Responsive
webdesign
Drupallal

3. http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/

4. "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

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

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

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

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

9. • Media Queries
• Fluid Grids
• Fluid Images
• Flexible Media

10. • Media Queries
• Fluid Grids
• Flexible Media

11. Media Queries

12. Media Queries
CSS2
<link rel="stylesheet" type="text/css"
media="screen" href="screen-styles.css">

13. 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" />

14. 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
}

15. Media Queries
[if lte IE 8]

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

17. Media Queries
[if lte IE 8]
Respond.js
https://github.com/scottjehl/Respond
+
Modrenizr
http://modernizr.com/

18. • Media Queries
• Fluid Grids
• Flexible Media

19. Adaptive vs. Responsive

20. Adaptive vs. Responsive
Adaptive layout: Fix szélességű oldal elrendezések
váltása eszközfüggően

21. Adaptive vs. Responsive
Adaptive layout: Fix szélességű oldal elrendezések
váltása eszközfüggően

22. 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

23. 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

24. 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!(?)

25. 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!(?)

26. 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

27. Grid systems

28. Grid systems
• „klasszikus” pl. 960.gs

29. Grid systems
• „klasszikus” pl. 960.gs
• szimmetrikus: pl. Zen Grids, Susy

30. Grid systems
• „klasszikus” pl. 960.gs
• szimmetrikus: pl. Zen Grids, Susy
• asszimetrikus: pl. Singularity

31. Gridre épülő alapsminkek
960.gs:
Omega Theme
http://drupal.org/project/omega
pl. Acquia

32. Gridre épülő alapsminkek
Zen Grids:
Zen
http://drupal.org/project/zen
+
http://drupal.org/project/fences
pl. Sydney DrupalCon 2013

33. 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)

34. Sass és Compass
Sass
CSS preprocessor

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

36. 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

37. 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

38. http://sonspring.com/journal/sass-for-designers

39. Compass extension-ök

40. Compass extension-ök
• az említett grid systemek

41. Compass extension-ök
• az említett grid systemek
• Breakpoint
https://github.com/canarymason/breakpoint

42. Compass extension-ök
• az említett grid systemek
• Breakpoint
https://github.com/canarymason/breakpoint
• Respond to
https://github.com/snugug/respond-to

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. 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. HTML5

46. HTML5
• Egyszerűbb, áttekinthetőbb kód (dev)

47. HTML5
• Egyszerűbb, áttekinthetőbb kód (dev)
• Kevesebb adat (performance)

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

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

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 shiv
https://github.com/aFarkas/html5shiv

51. HTML5
Drupal modulok, pl.
• Fences
http://drupal.org/project/fences
• Elements
http://drupal.org/project/elements

52. • Media Queries
• Fluid Grids
• Flexible Media

53. Fluid images
CSS
img {
/* height: auto; */
max-width: 100%;
}

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. Flexible slideshows
Flex Slider
https://github.com/woothemes/FlexSlider
http://drupal.org/project/flexslider

56. Fluid Video

57. Fluid Video
Saját videók (nem beágyazott)
width, height

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

59. 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

60. 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

61. 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)

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

63. Teljesítmény javítás
"80-90%

64. 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/

65. Teljesítmény javítás

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

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

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. Teljesítmény javítás

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

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. 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. 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. Teljesítmény javítás

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

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. Egyéb hasznos eszközök

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

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

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

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