Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

(Téměř) Vektorový web

3,446 views

Published on

Redesign blogu (www.vzhurudolu.cz) byla příležitost zkusit s pomocí aktuálních front-end technologií udělat web jinak. Přiblížit se alespoň trochu odvěkému snu všech webařů – vektorovému webu.

Webu s flexibilním layoutem, s elastickými elementy, které se nezhroutí po každém zásahu uživatele nebo ve chvíli kdy na web dorazí se zařízením pro které není web testovaný.

A taky webu, který sice využívá to dobré z responsive webdesignu a myšlenky mobile first a progressive enhancement, ale bez nutnosti produkovat a udržovat stovky řádků kódu pro každé zařízení zvlášť

  • Be the first to comment

(Téměř) Vektorový web

  1. 1. (Téměř)Vektorový web
  2. 2. Martin Michálek @machal
  3. 3. Redesign www.vzhurudolu.cz
  4. 4. Webelastický jako PDFko?
  5. 5. Layout PDF škáluje proporcionálně. A je to bez práce.
  6. 6. Responsivewebdesign
  7. 7. „To je když webař šoupe velikostí okna.”Ethan Marcottehttp://www.flickr.com/photos/drewm/5736754615/in/faves-rachelandrew/
  8. 8. Responsive webdesignSmartphony méně než 480pxPortrait tablets 480px – 768pxLandscape tablets 768px – 979pxDefault 980px a víceLarge display 1210px a více Zdroj: Twitter Bootstrap
  9. 9. Responsive webdesignSmartphony méně než 480pxPortrait tablets 480px – 768pxLandscape tablets 768px – 979px De skDefault 980px a více fir top st!Large display 1210px a více Zdroj: Twitter Bootstrap
  10. 10. Responsive webdesign Ho kód dně ová ní!Smartphony méně než 480pxPortrait tablets 480px – 768pxLandscape tablets 768px – 979px De skDefault 980px a více fir top st!Large display 1210px a více Zdroj: Twitter Bootstrap
  11. 11. Ho kód dně ová ní!Bootstrapresponsivemax. 767px
  12. 12. S pomocí responsive vyřešíme extrémní rozdíly v layoutu.
  13. 13. Mobile First
  14. 14. „Fuck desktop!”Luke Wroblewski
  15. 15. Běžný responsive Mobile first responsivehttp://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
  16. 16. Běžný responsive Hodn kódov ě ání! Mobile first responsivehttp://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
  17. 17. Webfonty ✔ ✔Modernizr ✔ ✔jQuery ✔Fancybox ✔Prettify ✔ Aplikujeme Mobile First a mobilní uživatel netahá nic navíc.
  18. 18. Elastický layout
  19. 19. „Layout jako elasťáky.”http://v1.jontangerine.com/log/2007/09/the-incredible-em-and-elastic-layouts-with-csshttp://www.flickr.com/photos/stn1978/6395307339/lightbox/ Jon Tan
  20. 20. font-size: 2em; font-size: 1em;width: 3em; height: 3em; em + rem
  21. 21. Velikost písma může změnit uživatel. A nebo my!@media screen and (min-width: 1200px) { body { font-size: 130%; }}
  22. 22. Velikost písma může změnit uživatel. A nebo my!@media screen and (min-width: 1200px) { body { font-size: 130%; } To už moc k není} ódová ní!
  23. 23. Elastický layoutřeší drobnérozdíly v layoutu. Elastický layout řeší drobné kroky
  24. 24. Elastický layout Samý problém?★ Špatně se počítá v IE6-★ Větší velikosti systémových písem★ Prohlížeče nezmenšují bitmapy hezky
  25. 25. Elastický layout Samý problém?★ Špatně se počítá v IE6- ✔ Nevadí!★ Větší velikosti systémových písem ✔ Máme dobré webfonty. (Zde PT Sans)★ Prohlížeče nezmenšují bitmapy hezky ✔ Vektory nemáme, ale pseudovektory ano.
  26. 26. (Pseudo) vektory
  27. 27. Vektory a pseudovektory★ CSS3 (stíny, přechody)★ Ikonfonty★ CSS3 ikony (blbina)★ SVG (zatím ne) http://www.vzhurudolu.cz/css3/ http://icomoon.io/app/
  28. 28. Ikonfonty.icon { // jakekoliv vlastnosti aplikovatelne // na pismo}
  29. 29. Ikonfonty.icon { // jakekoliv vlastnosti aplikovatelne // na pismo} Elast ic + Retin Frien a dly
  30. 30. Webelastický jako PDFko? Ano, téměř.
  31. 31. Elasticita u malých rozdílů v šířcelayoutu obnáší méně práce než responsive a zachovává optimální šířku řádku.
  32. 32. Vytvořili jsmeMobile FirstResponsive Elastic Website™
  33. 33. Díky!twitter.com/machal

×