Co je to responsive webdesign, ako funguje, ake su techniky a nastroje.

1. Drupal Camp Žilina
8. - 9. 10. 2011
Drupal v mobile.
Responsive webdizajn.
Boris Gombarčík @borgo
Martin Cagalinec @cernosko
24 sven.sk

2. Sven
• 2005
• 7+1 statočných
• Drupal webshop
• Shupito.com
• DPB, Hitka, Divadlo Aréna, Pizza
Mizza, Sushi Time...
23 sven.sk

3. Čo je to mobil?
22 sven.sk

4. Čo je to mobil?
22 sven.sk

5. Čo je to mobil?
22 sven.sk

6. Aké sú čísla v Európe?
30%
70%
Smartphone Iné
21 sven.sk

7. Aké sú čísla v USA?
42%
58%
Smartphone Iné
20 sven.sk

8. Aké sú ďalšie čísla v USA?
38%
62%
Smartphone Desktop
19 sven.sk

9. User Device Detection
zobrazenie obsah podľa typu prehliadača
JE NESPRÁVNE
18 sven.sk

10. Najprv mobil potom...
Málokedy sa stáva, že návrh mobilného
rozhrania aplikácie alebo webstránky
vznikne predtým ako desktopová verzia.
Luke Wroblewski
17 sven.sk

11. Najprv mobil potom...
najprv LCD (Lowest Common Denominator)
potom LCD (Liquid crystal display)
17 sven.sk

12. Začnite s mobilom
• mobil expanduje
• mobil vás prinúti sústrediť sa
• mobil rozširuje vaše možnosti
16 sven.sk

13. Responsive webdizajn
• fluid grids (pohyblivá mriežka)
• flexible images (pružné obrázky)
• media queries (otázky na médium:)
15 sven.sk

14. http://colly.com/
14 sven.sk

15. http://fourkitchens.com/
13 sven.sk

16. http://2011.uxlondon.com/
12 sven.sk

17. http://www.stpaulsschool.org.uk/
11 sven.sk

18. http://www.kmubusinesspartner.ch/
10 sven.sk

19. http://drupalcampnh.org/
9 sven.sk

20. http://omega.developmentgeeks.com/
8 sven.sk

21. Ako na to?
• JavaScript
• CSS3
• JavaScript + CSS3
7 sven.sk

22. Adapt.js
• window.onresize();
• http://adapt.960.gs/
• všetky prehliadače (s povoleným JavaScriptom)
6 sven.sk

23. CSS3 media queries
• @media all/screen/print
• @media all and min-width/max-width
• všetky moderné prehliadače
• IE 6,7,8 nepodporuje
5 sven.sk

24. Respond.js
• CSS3 + JavaScript
• https://github.com/scottjehl/Respond
• IE 6,7,8 podporuje
• Modernizr.com
4 sven.sk

25. Responsive Images
• Fluid Images
http://unstoppablerobotninja.com/entry/fluid-images/
• Responsive Images and Context-Aware Image Sizing
http://www.craig-russell.co.uk/responsive-images-and-context-aware-image-sizing/
• Responsive Images right now
http://csswizardry.com/2011/07/responsive-images-right-now/
• Responsive Images Using CSS3
http://nicolasgallagher.com/responsive-images-using-css3/
• Responsive Images Using Cookies
http://blog.keithclark.co.uk/responsive-images-using-cookies/
3 sven.sk

26. Praktická ukážka
2 sven.sk

27. Zdroje
http://developmentgeeks.com/blog/responsive-mobile-first-designing-future
http://www.alistapart.com/articles/responsive-web-design/
http://www.alistapart.com/articles/fluidgrids/
http://www.slideshare.net/livefront/responsive-design-7877412
http://www.smashingmagazine.com/2011/07/22/responsive-web-design-
techniques-tools-and-design-strategies/
http://dsl.sk/article.php?article=11523&count=5
http://en.wikipedia.org/wiki/Browser_sniffing
http://evolvingweb.ca/story/responsive-theming-how-apply-responsive-design-
techniques-drupal-theme
http://drupal.org/node/819164
http://developmentgeeks.com/blog/creating-omega-3x-subtheme
1 sven.sk

28. Ďakujeme
sven.sk/blog @svencreative
Boris Gombarčík @borgo
Martin Cagalinec @cernosko
0 sven.sk