responsive webdesign -

Download responsive webdesign -

If you can't read please download the document

Post on 05-Dec-2014

1.888 views

Category:

Technology

6 download

Embed Size (px)

DESCRIPTION

wordcamp 2012 Slovakia

TRANSCRIPT

  • 1. Responsive webdesign Ivan Potanok @ivusko 2000 - 2010 freelance webdesigner 2010 + CEO @ vibration.sk
  • 2. o robm
  • 3. o robm
  • 4. o robm
  • 5. Trendy v histriiPlain textHTMLTabukov layoutFLASH je responsiveXHTML + CSS 2Fluid layoutInterakcia cez JSCSS frameworky + GRIDHTML 5 + CSS 3Responsive webdesign
  • 6. Problm
  • 7. http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
  • 8. Prispsobenie dizajnupodavekostizariadenia Tablety Smart phones Robme tie weby predsa pre ud
  • 9. Na o to je dobr Ukka vhodn pre prezentan strnky = vetky wp strnky eshopy neodporam vie portly, webov aplikcie samostatn tly, menie obrzky, menej reklamy zjednoduen funkcionalita prklad katalg nepotrebuje v mobilnej verzii komplet navigciu a content, sta mu vyhadvanie obsah zobrazujem v inej ablne
  • 10. Zklad Flexibiln layout zaloen na gride Flexibiln obrzky a mdi Media queries
  • 11. o potrebujeme? firebug alebo developer tools v chrome kalkulaku papier (axure rp, fireworks, ) as editor
  • 12. Twenty eleven Dobr zklad Doplnme vlastn tly Uvidme, o prinesie ablna twenty twelve Ale o ke u mme web a nie je responsive?
  • 13. Postup pri zmene na responsive Vetky rky boxov zmenme z px na % Zklad je nezaokrhova desatinn miesta v % Odstrnime width a height obrzkov z html $(document).ready(function() { $("img").removeAttr("width"); $("img").removeAttr("height"); });
  • 14. Zkladn layout#page { /* width:1000px; */ max-width: 1000px; /*(100%)*/#menu { /*width:180px; */ width:18%; /*(180/1000 = 0,18)*/ float:left;#content { /*margin-left:20px; width: 800px */ margin-left: 2%; width:80%; float:left;}
  • 15. TypografiaAlgoritmus Target / context = resultbody{ font-size: 100%;}h1{ font-size:2em; 24px / 12px = 2em}
  • 16. Mediaimg, embed, object, video{ max-width:100%;}ie6img{ width:100%;}
  • 17. Media types - Old skul
  • 18. Media Queries Nu skul CSS3 @media only screen and (max-width: 768px) { #page { max-width:740px; } }
  • 19. Media Queries@media screen and(min-device-width: 480px) and(orientation: landscape){ }
  • 20. Nastavme viewport
  • 21. Komplikcie menu cudz content fb, youtube testovanie developer tools, zariadenia, emultory background-size slab podpora
  • 22. Podpora prehliadaov Vina prehliadaov @ Web: > ivusko.sk, vibration.sk