Responsive webdesign
          Ivan Potančok
          @ivusko

          2000 - 2010
          freelance webdesigner

          2010 +
          CEO @ vibration.sk
Čo robím
Čo robím
Čo robím
Trendy v histórii
Plain text
HTML
Tabuľkový layout
FLASH – je responsive
XHTML + CSS 2
Fluid layout
Interakcia cez JS
CSS frameworky + GRID
HTML 5 + CSS 3
Responsive webdesign
Problém
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
Prispôsobe
nie dizajnu
podľa
veľkosti
zariadenia
• Tablety
• Smart
  phones
• Robíme tie
  weby
  predsa pre
  ľudí
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
Základ
• Flexibilný layout založený na gride
• Flexibilné obrázky a médiá
• Media queries
Čo potrebujeme?
•   firebug alebo developer tools v chrome
•   kalkulačku
•   papier (axure rp, fireworks, …)
•   čas
•   editor
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?
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");
   });
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;
}
Typografia

Algoritmus … Target / context = result

body{
  font-size: 100%;
}
h1{
  font-size:2em; 24px / 12px = 2em
}
Media

img, embed, object, video{
  max-width:100%;
}

ie6
img{
  width:100%;
}
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” />
Media Queries – Nu skul
• CSS3
  @media only screen and (max-width: 768px) {
    #page {
      max-width:740px;
    }
  }
Media Queries
@media screen and
(min-device-width: 480px) and
(orientation: landscape){ …}
Nastavíme viewport
• <meta name="viewport" content="width=device-
  width; initial-scale=1.0; maximum-scale=1.0; user-
  scalable=0;" />
Komplikácie
• menu
• cudzí content – fb, youtube
• testovanie – developer tools, zariadenia,
  emulátory
• background-size – slabá podpora
Podpora prehliadačov
• Väčšina prehliadačov <5 rokov
• IE - problém
  – css3-mediaqueries.js
  – respond.js
Nevýhody
• Užívateľ si nemôže vybrať, ktorú verziu chce
  vidieť
• Nezmenšuje sa objem prenesených dát
Ukážky
•   http://hicksdesign.co.uk/
•   http://vibration.sk
•   http://patriotband.sk
•   http://ucimezdravovarit.sk
•   http://gmail.com
•   http://calendar.google.com
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

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