(Téměř)Vektorový   web
Martin Michálek    @machal
Redesign www.vzhurudolu.cz
Webelastický jako   PDFko?
Layout PDF škáluje proporcionálně.        A je to bez práce.
Responsivewebdesign
„To je když webař            šoupe velikostí                 okna.”Ethan Marcottehttp://www.flickr.com/photos/drewm/5736754...
Responsive webdesignSmartphony                        méně než 480pxPortrait tablets                  480px – 768pxLandsca...
Responsive webdesignSmartphony                        méně než 480pxPortrait tablets                  480px – 768pxLandsca...
Responsive webdesign                                                      Ho                                              ...
Ho             kód dně                ová                    ní!Bootstrapresponsivemax. 767px
S pomocí responsive vyřešíme  extrémní rozdíly v layoutu.
Mobile First
„Fuck desktop!”Luke Wroblewski
Běžný responsive Mobile first responsivehttp://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
Běžný responsive                                                                        Hodn                              ...
Webfonty           ✔            ✔Modernizr          ✔            ✔jQuery                          ✔Fancybox               ...
Elastický layout
„Layout jako                    elasťáky.”http://v1.jontangerine.com/log/2007/09/the-incredible-em-and-elastic-layouts-wit...
font-size: 2em;        font-size: 1em;width: 3em; height: 3em;          em + rem
Velikost písma    může změnit uživatel.        A nebo my!@media screen and (min-width: 1200px) {	   body {	   	 font-size:...
Velikost písma    může změnit uživatel.        A nebo my!@media screen and (min-width: 1200px) {	   body {	   	 font-size:...
Elastický layoutřeší drobnérozdíly v layoutu.                      Elastický layout                     řeší drobné kroky
Elastický layout       Samý problém?★ Špatně se počítá v IE6-★ Větší velikosti systémových písem★ Prohlížeče nezmenšují bi...
Elastický layout       Samý problém?★ Špatně se počítá v IE6-   ✔    Nevadí!★   Větší velikosti systémových písem  ✔    Má...
(Pseudo) vektory
Vektory a pseudovektory★ CSS3 (stíny, přechody)★ Ikonfonty★ CSS3 ikony (blbina)★ SVG (zatím ne)   http://www.vzhurudolu.cz...
Ikonfonty.icon {  // jakekoliv vlastnosti aplikovatelne  // na pismo}
Ikonfonty.icon {  // jakekoliv vlastnosti aplikovatelne  // na pismo}                             Elast                   ...
Webelastický jako   PDFko? Ano, téměř.
Elasticita u malých rozdílů v šířcelayoutu obnáší méně práce než responsive    a zachovává optimální šířku řádku.
Vytvořili jsmeMobile FirstResponsive  Elastic  Website™
Díky!twitter.com/machal
(Téměř) Vektorový web
(Téměř) Vektorový web
(Téměř) Vektorový web
(Téměř) Vektorový web
(Téměř) Vektorový web
(Téměř) Vektorový web
Upcoming SlideShare
Loading in …5
×

(Téměř) Vektorový web

3,176 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ášť

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,176
On SlideShare
0
From Embeds
0
Number of Embeds
428
Actions
Shares
0
Downloads
18
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

(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

×