SlideShare a Scribd company logo
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

More Related Content

Viewers also liked

Energy Resources (Electricity)
Energy Resources (Electricity)Energy Resources (Electricity)
Energy Resources (Electricity)
jappyk29
 
Nn we're notupworthypostingdeck
Nn we're notupworthypostingdeckNn we're notupworthypostingdeck
Nn we're notupworthypostingdeck
Beth Becker
 
Organizing NY Twitter
Organizing NY TwitterOrganizing NY Twitter
Organizing NY Twitter
Beth Becker
 
Organizing New York Pinterest
Organizing New York PinterestOrganizing New York Pinterest
Organizing New York Pinterest
Beth Becker
 
November 23, 2014
November 23, 2014November 23, 2014
November 23, 2014
oslcbeloit
 
Organizing 2.0 2016 Rapid Response
Organizing 2.0 2016 Rapid ResponseOrganizing 2.0 2016 Rapid Response
Organizing 2.0 2016 Rapid Response
Beth Becker
 
Prog summit3022013
Prog summit3022013Prog summit3022013
Prog summit3022013
Beth Becker
 
Organizing 2.0 2016 Facebook ads
Organizing 2.0 2016 Facebook adsOrganizing 2.0 2016 Facebook ads
Organizing 2.0 2016 Facebook ads
Beth Becker
 
Web design v roku 2013
Web design v roku 2013Web design v roku 2013
Web design v roku 2013
vibration.sk
 
Jw powerpoint
Jw powerpointJw powerpoint
Jw powerpoint
lucyjadeb
 
Thesis Proposal: Understanding Audience Engagement Transmedia
Thesis Proposal: Understanding Audience Engagement TransmediaThesis Proposal: Understanding Audience Engagement Transmedia
Thesis Proposal: Understanding Audience Engagement Transmedia
Cameron Cliff
 
Srinath sports quiz prelims
Srinath sports quiz   prelimsSrinath sports quiz   prelims
Srinath sports quiz prelims
Srinath Bhashyam
 
Wordcamp 2015 Bratislava Ivan Potancok - kontrola kvality
Wordcamp 2015 Bratislava Ivan Potancok - kontrola kvalityWordcamp 2015 Bratislava Ivan Potancok - kontrola kvality
Wordcamp 2015 Bratislava Ivan Potancok - kontrola kvality
vibration.sk
 
Potancok prototyping-with-bootstrap-less-ver2
Potancok prototyping-with-bootstrap-less-ver2Potancok prototyping-with-bootstrap-less-ver2
Potancok prototyping-with-bootstrap-less-ver2
vibration.sk
 
Potancok wordcamp woo
Potancok wordcamp wooPotancok wordcamp woo
Potancok wordcamp woovibration.sk
 

Viewers also liked (15)

Energy Resources (Electricity)
Energy Resources (Electricity)Energy Resources (Electricity)
Energy Resources (Electricity)
 
Nn we're notupworthypostingdeck
Nn we're notupworthypostingdeckNn we're notupworthypostingdeck
Nn we're notupworthypostingdeck
 
Organizing NY Twitter
Organizing NY TwitterOrganizing NY Twitter
Organizing NY Twitter
 
Organizing New York Pinterest
Organizing New York PinterestOrganizing New York Pinterest
Organizing New York Pinterest
 
November 23, 2014
November 23, 2014November 23, 2014
November 23, 2014
 
Organizing 2.0 2016 Rapid Response
Organizing 2.0 2016 Rapid ResponseOrganizing 2.0 2016 Rapid Response
Organizing 2.0 2016 Rapid Response
 
Prog summit3022013
Prog summit3022013Prog summit3022013
Prog summit3022013
 
Organizing 2.0 2016 Facebook ads
Organizing 2.0 2016 Facebook adsOrganizing 2.0 2016 Facebook ads
Organizing 2.0 2016 Facebook ads
 
Web design v roku 2013
Web design v roku 2013Web design v roku 2013
Web design v roku 2013
 
Jw powerpoint
Jw powerpointJw powerpoint
Jw powerpoint
 
Thesis Proposal: Understanding Audience Engagement Transmedia
Thesis Proposal: Understanding Audience Engagement TransmediaThesis Proposal: Understanding Audience Engagement Transmedia
Thesis Proposal: Understanding Audience Engagement Transmedia
 
Srinath sports quiz prelims
Srinath sports quiz   prelimsSrinath sports quiz   prelims
Srinath sports quiz prelims
 
Wordcamp 2015 Bratislava Ivan Potancok - kontrola kvality
Wordcamp 2015 Bratislava Ivan Potancok - kontrola kvalityWordcamp 2015 Bratislava Ivan Potancok - kontrola kvality
Wordcamp 2015 Bratislava Ivan Potancok - kontrola kvality
 
Potancok prototyping-with-bootstrap-less-ver2
Potancok prototyping-with-bootstrap-less-ver2Potancok prototyping-with-bootstrap-less-ver2
Potancok prototyping-with-bootstrap-less-ver2
 
Potancok wordcamp woo
Potancok wordcamp wooPotancok wordcamp woo
Potancok wordcamp woo
 

Similar to responsive webdesign - vibration.sk

Respnsive webdesign (Ivan Potančok)
Respnsive webdesign (Ivan Potančok)Respnsive webdesign (Ivan Potančok)
Respnsive webdesign (Ivan Potančok)wcsk
 
Kontrola kvality webového projektu - Ivan Potančok - WordCamp2015
Kontrola kvality webového projektu� - Ivan Potančok - WordCamp2015Kontrola kvality webového projektu� - Ivan Potančok - WordCamp2015
Kontrola kvality webového projektu - Ivan Potančok - WordCamp2015
vibration.sk
 
Drupal - efektívne riešenie pre web stránky
Drupal - efektívne riešenie pre web stránkyDrupal - efektívne riešenie pre web stránky
Drupal - efektívne riešenie pre web stránky
Unikum.cz
 
Design mobilnych aplikacii
Design mobilnych aplikaciiDesign mobilnych aplikacii
Design mobilnych aplikacii
SCR®
 
Výkon webových animácií
Výkon webových animáciíVýkon webových animácií
Výkon webových animácií
blueweb_sk
 
Academy vol.4
Academy vol.4Academy vol.4
Academy vol.4
blueweb_sk
 
Academy vol.4
Academy vol.4Academy vol.4
Academy vol.4
blueweb_sk
 
Návrh a realizácia web stránky skriptovacím jazykom PHP vrátane administračné...
Návrh a realizácia web stránky skriptovacím jazykom PHP vrátane administračné...Návrh a realizácia web stránky skriptovacím jazykom PHP vrátane administračné...
Návrh a realizácia web stránky skriptovacím jazykom PHP vrátane administračné...
Catana0605
 
Co je Drupal
Co je DrupalCo je Drupal
Co je Drupal
Jozef Toth
 
Drupal - Open Source CMS
Drupal - Open Source CMSDrupal - Open Source CMS
Drupal - Open Source CMS
Jozef Toth
 
Prvý eShop na priestorové údaje na Slovensku
Prvý eShop na priestorové údaje na SlovenskuPrvý eShop na priestorové údaje na Slovensku
Prvý eShop na priestorové údaje na Slovensku
Tomáš Sasko
 
Drupal v mobile - Responsive webdizajn
Drupal v mobile - Responsive webdizajnDrupal v mobile - Responsive webdizajn
Drupal v mobile - Responsive webdizajn
Sven Creative, s.r.o.
 
Tricky css
Tricky cssTricky css
Tricky css
blueweb_sk
 
Webikon Wordpress - ONLINEKLUB
Webikon Wordpress - ONLINEKLUBWebikon Wordpress - ONLINEKLUB
Webikon Wordpress - ONLINEKLUB
Katarína Molnárová
 
Na čo myslieť pri vytváraní WEBu | ui42 - ONLINE KLUB 2014
Na čo myslieť pri vytváraní WEBu | ui42 - ONLINE KLUB 2014Na čo myslieť pri vytváraní WEBu | ui42 - ONLINE KLUB 2014
Na čo myslieť pri vytváraní WEBu | ui42 - ONLINE KLUB 2014
ONLINE KLUB
 
CMF Drupal 8 - jednoduché riešenie pre náročných
CMF Drupal 8 - jednoduché riešenie pre náročnýchCMF Drupal 8 - jednoduché riešenie pre náročných
CMF Drupal 8 - jednoduché riešenie pre náročných
Miro Michalicka
 
ONLINE KLUB - Peťo Nemčok, Webikon - Wordpress
ONLINE KLUB - Peťo Nemčok, Webikon - WordpressONLINE KLUB - Peťo Nemčok, Webikon - Wordpress
ONLINE KLUB - Peťo Nemčok, Webikon - WordpressKatarína Molnárová
 
ONLINE KLUB - Ivan Potančok - Webdesign
ONLINE KLUB - Ivan Potančok - WebdesignONLINE KLUB - Ivan Potančok - Webdesign
ONLINE KLUB - Ivan Potančok - WebdesignKatarína Molnárová
 
Prečo Wodpress nie je už len o blogu
Prečo Wodpress nie je už len o bloguPrečo Wodpress nie je už len o blogu
Prečo Wodpress nie je už len o blogu
Matej Kukucka
 

Similar to responsive webdesign - vibration.sk (20)

Respnsive webdesign (Ivan Potančok)
Respnsive webdesign (Ivan Potančok)Respnsive webdesign (Ivan Potančok)
Respnsive webdesign (Ivan Potančok)
 
Kontrola kvality webového projektu - Ivan Potančok - WordCamp2015
Kontrola kvality webového projektu� - Ivan Potančok - WordCamp2015Kontrola kvality webového projektu� - Ivan Potančok - WordCamp2015
Kontrola kvality webového projektu - Ivan Potančok - WordCamp2015
 
Drupal - efektívne riešenie pre web stránky
Drupal - efektívne riešenie pre web stránkyDrupal - efektívne riešenie pre web stránky
Drupal - efektívne riešenie pre web stránky
 
Design mobilnych aplikacii
Design mobilnych aplikaciiDesign mobilnych aplikacii
Design mobilnych aplikacii
 
Výkon webových animácií
Výkon webových animáciíVýkon webových animácií
Výkon webových animácií
 
Academy vol.4
Academy vol.4Academy vol.4
Academy vol.4
 
Academy vol.4
Academy vol.4Academy vol.4
Academy vol.4
 
Návrh a realizácia web stránky skriptovacím jazykom PHP vrátane administračné...
Návrh a realizácia web stránky skriptovacím jazykom PHP vrátane administračné...Návrh a realizácia web stránky skriptovacím jazykom PHP vrátane administračné...
Návrh a realizácia web stránky skriptovacím jazykom PHP vrátane administračné...
 
Co je Drupal
Co je DrupalCo je Drupal
Co je Drupal
 
Drupal - Open Source CMS
Drupal - Open Source CMSDrupal - Open Source CMS
Drupal - Open Source CMS
 
Drupal
DrupalDrupal
Drupal
 
Prvý eShop na priestorové údaje na Slovensku
Prvý eShop na priestorové údaje na SlovenskuPrvý eShop na priestorové údaje na Slovensku
Prvý eShop na priestorové údaje na Slovensku
 
Drupal v mobile - Responsive webdizajn
Drupal v mobile - Responsive webdizajnDrupal v mobile - Responsive webdizajn
Drupal v mobile - Responsive webdizajn
 
Tricky css
Tricky cssTricky css
Tricky css
 
Webikon Wordpress - ONLINEKLUB
Webikon Wordpress - ONLINEKLUBWebikon Wordpress - ONLINEKLUB
Webikon Wordpress - ONLINEKLUB
 
Na čo myslieť pri vytváraní WEBu | ui42 - ONLINE KLUB 2014
Na čo myslieť pri vytváraní WEBu | ui42 - ONLINE KLUB 2014Na čo myslieť pri vytváraní WEBu | ui42 - ONLINE KLUB 2014
Na čo myslieť pri vytváraní WEBu | ui42 - ONLINE KLUB 2014
 
CMF Drupal 8 - jednoduché riešenie pre náročných
CMF Drupal 8 - jednoduché riešenie pre náročnýchCMF Drupal 8 - jednoduché riešenie pre náročných
CMF Drupal 8 - jednoduché riešenie pre náročných
 
ONLINE KLUB - Peťo Nemčok, Webikon - Wordpress
ONLINE KLUB - Peťo Nemčok, Webikon - WordpressONLINE KLUB - Peťo Nemčok, Webikon - Wordpress
ONLINE KLUB - Peťo Nemčok, Webikon - Wordpress
 
ONLINE KLUB - Ivan Potančok - Webdesign
ONLINE KLUB - Ivan Potančok - WebdesignONLINE KLUB - Ivan Potančok - Webdesign
ONLINE KLUB - Ivan Potančok - Webdesign
 
Prečo Wodpress nie je už len o blogu
Prečo Wodpress nie je už len o bloguPrečo Wodpress nie je už len o blogu
Prečo Wodpress nie je už len o blogu
 

responsive webdesign - vibration.sk

  • 1. Responsive webdesign Ivan Potančok @ivusko 2000 - 2010 freelance webdesigner 2010 + CEO @ vibration.sk
  • 2.
  • 6. 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
  • 7.
  • 10. Prispôsobe nie dizajnu podľa veľkosti zariadenia • Tablety • Smart phones • Robíme tie weby predsa pre ľudí
  • 11. 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
  • 12. Základ • Flexibilný layout založ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
  • 14.
  • 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 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"); });
  • 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; }
  • 18.
  • 19.
  • 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 screen and (min-device-width: 480px) and (orientation: landscape){ …}
  • 25. Nastavíme viewport • <meta name="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äčšina prehliadačov <5 rokov • IE - problém – css3-mediaqueries.js – respond.js
  • 28. Nevýhody • Užívateľ si nemôž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