Respnsive webdesign (Ivan Potančok)

853 views
809 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
853
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Respnsive webdesign (Ivan Potančok)

  1. 1. Responsive webdesign Ivan Potančok @ivusko 2000 - 2010 freelance webdesigner 2010 + CEO @ vibration.sk
  2. 2. Čo robím
  3. 3. Čo robím
  4. 4. Čo robím
  5. 5. Trendy v históriiPlain textHTMLTabuľkový layoutFLASH – je responsiveXHTML + CSS 2Fluid layoutInterakcia cez JSCSS frameworky + GRIDHTML 5 + CSS 3Responsive webdesign
  6. 6. Problém
  7. 7. http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
  8. 8. Prispôsobenie dizajnupodľaveľkostizariadenia• Tablety• Smart phones• Robíme tie weby predsa pre ľudí
  9. 9. Na čo to je dobré• Ukážka• vhodná pre – prezentačné stránky = všetky wp stránky – eshopy• neodporúčam – väčšie portály, webové aplikácie – samostatné štýly, menšie obrázky, menej reklamy – zjednodušená funkcionalita – príklad – katalóg nepotrebuje v mobilnej verzii komplet navigáciu a content, stačí mu vyhľadávanie – obsah zobrazujem v inej šablóne
  10. 10. Základ• Flexibilný layout založený na gride• Flexibilné obrázky a médiá• Media queries
  11. 11. Čo potrebujeme?• firebug alebo developer tools v chrome• kalkulačku• papier (axure rp, fireworks, …)• čas• editor
  12. 12. Twenty eleven– Dobrý základ– Doplníme vlastné štýly– Uvidíme, čo prinesie šablóna twenty twelveAle čo keď už máme web a nie je responsive?
  13. 13. Postup pri zmene na responsive• Všetky šírky boxov zmeníme z px na %• Základ je nezaokrúhľovať desatinné miesta v %• Odstránime width a height obrázkov z html $(document).ready(function() { $("img").removeAttr("width"); $("img").removeAttr("height"); });
  14. 14. Základný 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. 15. TypografiaAlgoritmus … Target / context = resultbody{ font-size: 100%;}h1{ font-size:2em; 24px / 12px = 2em}
  16. 16. Mediaimg, embed, object, video{ max-width:100%;}ie6img{ width:100%;}
  17. 17. Media types - Old skul<link rel=“stylesheet” href=“global.css” media=“all” /><link rel=“stylesheet” href=“screen.css” media=“screen” /><link rel=“stylesheet” href=“print.css” media=“print” />
  18. 18. Media Queries – Nu skul• CSS3 @media only screen and (max-width: 768px) { #page { max-width:740px; } }
  19. 19. Media Queries@media screen and(min-device-width: 480px) and(orientation: landscape){ …}
  20. 20. Nastavíme viewport• <meta name="viewport" content="width=device- width; initial-scale=1.0; maximum-scale=1.0; user- scalable=0;" />
  21. 21. Komplikácie• menu• cudzí content – fb, youtube• testovanie – developer tools, zariadenia, emulátory• background-size – slabá podpora
  22. 22. Podpora prehliadačov• Väčšina prehliadačov <5 rokov• IE - problém – css3-mediaqueries.js – respond.js
  23. 23. Nevýhody• Užívateľ si nemôže vybrať, ktorú verziu chce vidieť• Nezmenšuje sa objem prenesených dát
  24. 24. Ukážky• http://hicksdesign.co.uk/• http://vibration.sk• http://patriotband.sk• http://ucimezdravovarit.sk• http://gmail.com• http://calendar.google.com
  25. 25. Zhrnutie• zaberie to trochu viac času• nič zložité• treba na to myslieť už pri návrhu dizajnu• pridaná hodnota• diskusia• Twitter > @ ivusko• Web: > ivusko.sk, vibration.sk

×