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ášť

1. (Téměř)
Vektorový
web

2. Martin Michálek
@machal

3. Redesign www.vzhurudolu.cz

4. Web
elastický jako
PDFko?

8. Layout PDF škáluje proporcionálně.
A je to bez práce.

9. Responsive
webdesign

10. „To je když webař
šoupe velikostí
okna.”
Ethan Marcotte
http://www.flickr.com/photos/drewm/5736754615/in/faves-rachelandrew/

11. Responsive webdesign
Smartphony méně než 480px
Portrait tablets 480px – 768px
Landscape tablets 768px – 979px
Default 980px a více
Large display 1210px a více
Zdroj: Twitter Bootstrap

12. Responsive webdesign
Smartphony méně než 480px
Portrait tablets 480px – 768px
Landscape tablets 768px – 979px
De
sk
Default 980px a více fir top
st!
Large display 1210px a více
Zdroj: Twitter Bootstrap

13. Responsive webdesign
Ho
kód dně
ová
ní!
Smartphony méně než 480px
Portrait tablets 480px – 768px
Landscape tablets 768px – 979px
De
sk
Default 980px a více fir top
st!
Large display 1210px a více
Zdroj: Twitter Bootstrap

14. Ho
kód dně
ová
ní!
Bootstrap
responsive
max. 767px

15. S pomocí responsive vyřešíme
extrémní rozdíly v layoutu.

16. Mobile
First

17. „Fuck desktop!”
Luke Wroblewski

18. Běžný responsive
Mobile first responsive
http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/

19. Běžný responsive
Hodn
kódov ě
ání!
Mobile first responsive
http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/

20. Webfonty ✔ ✔
Modernizr ✔ ✔
jQuery ✔
Fancybox ✔
Prettify ✔
Aplikujeme Mobile First
a mobilní uživatel netahá nic navíc.

21. Elastický
layout

22. „Layout jako
elasťáky.”
http://v1.jontangerine.com/log/2007/09/the-incredible-em-and-elastic-layouts-with-css
http://www.flickr.com/photos/stn1978/6395307339/lightbox/
Jon Tan

23. font-size: 2em;
font-size: 1em;
width: 3em; height: 3em;
em + rem

24. Velikost písma
může změnit uživatel.
A nebo my!
@media screen and (min-width: 1200px) {
body {
font-size: 130%;
}
}

25. 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í!

26. Elastický layout
řeší drobné
rozdíly v layoutu.
Elastický layout
řeší drobné kroky

27. 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

28. 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.

29. (Pseudo)
vektory

30. 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/

31. Ikonfonty
.icon {
// jakekoliv vlastnosti aplikovatelne
// na pismo
}

32. Ikonfonty
.icon {
// jakekoliv vlastnosti aplikovatelne
// na pismo
}
Elast
ic +
Retin
Frien a
dly

33. Web
elastický jako
PDFko?
Ano, téměř.

37. Elasticita u malých rozdílů v šířce
layoutu obnáší méně práce než responsive
a zachovává optimální šířku řádku.

38. Vytvořili jsme
Mobile First
Responsive
Elastic
Website™

39. Díky!
twitter.com/machal