sven.sk

Drupal v mobile.Responsive webdizajn.

Boris Gombarčík Martin Cagalinec

@borgo@cernosko

24

Drupal Camp Žilina8. - 9. 10. 2011

sven.sk

Sven• 2005

• 7+1 statočných

• Drupal webshop

• Shupito.com

• DPB, Hitka, Divadlo Aréna, Pizza Mizza, Sushi Time...

23

sven.sk

Čo je to mobil?

22

sven.sk

Čo je to mobil?

22

sven.sk

Čo je to mobil?

22

sven.sk

Aké sú čísla v Európe?

30%

70%

Smartphone Iné

21

sven.sk

Aké sú čísla v USA?

58%

42%

Smartphone Iné

20

sven.sk

Aké sú ďalšie čísla v USA?

38%

62%

Smartphone Desktop

19

sven.sk

User Device Detection

zobrazenie obsah podľa typu prehliadača

JE NESPRÁVNE

18

sven.sk

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

Najprv mobil potom...

najprv LCD (Lowest Common Denominator)

potom LCD (Liquid crystal display)

17

sven.sk

Začnite s mobilom

• mobil expanduje

• mobil vás prinúti sústrediť sa

• mobil rozširuje vaše možnosti

16

sven.sk

Responsive webdizajn

• fluid grids (pohyblivá mriežka)

• flexible images (pružné obrázky)

• media queries (otázky na médium:)

15

sven.sk

http://colly.com/

14

sven.sk

http://fourkitchens.com/

13

sven.sk

http://2011.uxlondon.com/

12

sven.sk

http://www.stpaulsschool.org.uk/

11

sven.sk

http://www.kmubusinesspartner.ch/

10

sven.sk

http://drupalcampnh.org/

9

sven.sk

http://omega.developmentgeeks.com/

8

sven.sk

Ako na to?

• JavaScript

• CSS3

• JavaScript + CSS3

7

sven.sk

Adapt.js

• window.onresize();

• http://adapt.960.gs/

• všetky prehliadače (s povoleným JavaScriptom)

6

sven.sk

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

Respond.js

• CSS3 + JavaScript

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

• IE 6,7,8 podporuje

• Modernizr.com

4

sven.sk

Responsive Images

• Fluid Images

• Responsive Images and Context-Aware Image Sizing

• Responsive Images right now

• Responsive Images Using CSS3

• Responsive Images Using Cookies

http://unstoppablerobotninja.com/entry/fluid-images/

http://www.craig-russell.co.uk/responsive-images-and-context-aware-image-sizing/

http://csswizardry.com/2011/07/responsive-images-right-now/

http://nicolasgallagher.com/responsive-images-using-css3/

http://blog.keithclark.co.uk/responsive-images-using-cookies/

3

sven.sk

Praktická ukážka

2

sven.sk

Zdrojehttp://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

Ďakujeme

sven.sk/blogBoris Gombarčík Martin Cagalinec

@svencreative@borgo@cernosko

0