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