Download to read offline
responsive webdesign - vibration.sk
- 1. Responsive webdesign Ivan Potančok @ivusko 2000 - 2010 freelance webdesigner 2010 + CEO @ vibration.sk
- 3.
- 4.
- 5.
- 6. Trendy v histórii Plaintext HTML Tabuľkový layout FLASH – je responsive XHTML + CSS 2 Fluid layout Interakcia cez JS CSS frameworky + GRID HTML 5 + CSS 3 Responsive webdesign
- 8.
- 9.
- 10. Prispôsobe nie dizajnu podľa veľkosti zariadenia • Tablety •Smart phones • Robíme tie weby predsa pre ľudí
- 11. Na čo toje 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
- 12. Základ • Flexibilný layoutzaložený na gride • Flexibilné obrázky a médiá • Media queries
- 13. Čo potrebujeme? • firebug alebo developer tools v chrome • kalkulačku • papier (axure rp, fireworks, …) • čas • editor
- 15. Twenty eleven – Dobrýzáklad – Doplníme vlastné štýly – Uvidíme, čo prinesie šablóna twenty twelve Ale čo keď už máme web a nie je responsive?
- 16. Postup pri zmenena 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"); });
- 17. 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; }
- 20. Typografia Algoritmus … Target/ context = result body{ font-size: 100%; } h1{ font-size:2em; 24px / 12px = 2em }
- 21. Media img, embed, object,video{ max-width:100%; } ie6 img{ width:100%; }
- 22. 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” />
- 23. Media Queries –Nu skul • CSS3 @media only screen and (max-width: 768px) { #page { max-width:740px; } }
- 24. Media Queries @media screenand (min-device-width: 480px) and (orientation: landscape){ …}
- 25. Nastavíme viewport • <metaname="viewport" content="width=device- width; initial-scale=1.0; maximum-scale=1.0; user- scalable=0;" />
- 26. Komplikácie • menu • cudzícontent – fb, youtube • testovanie – developer tools, zariadenia, emulátory • background-size – slabá podpora
- 27. Podpora prehliadačov • Väčšinaprehliadačov <5 rokov • IE - problém – css3-mediaqueries.js – respond.js
- 28. Nevýhody • Užívateľ sinemôže vybrať, ktorú verziu chce vidieť • Nezmenšuje sa objem prenesených dát
- 29. Ukážky • http://hicksdesign.co.uk/ • http://vibration.sk • http://patriotband.sk • http://ucimezdravovarit.sk • http://gmail.com • http://calendar.google.com
- 30. Zhrnutie • zaberie to trochu viac času • nič zložité • treba na to myslieť už pri návrhu dizajnu • pridaná hodnota • diskusia • ivusko Twitter > @ • Web: > ivusko.sk, vibration.sk