(Téměř) Vektorový web
39
(Téměř) Vektorový web
-
Upload
martin-michalek -
Category
Documents
-
view
1.878 -
download
0
description
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ášť
Transcript of (Téměř) Vektorový web
(Téměř) Vektorový
web
Martin Michálek@machal
Web elastický 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/5736754615/in/faves-rachelandrew/
Zdroj: Twitter Bootstrap
Smartphony méně než 480px
Portrait tablets 480px – 768px
Landscape tablets 768px – 979px
Default 980px a více
Large display 1210px a více
Responsive webdesign
Responsive webdesign
Zdroj: Twitter Bootstrap
Smartphony méně než 480px
Portrait tablets 480px – 768px
Landscape tablets 768px – 979px
Default 980px a více
Large display 1210px a více
Desktop first!
Responsive webdesign
Zdroj: Twitter Bootstrap
Smartphony méně než 480px
Portrait tablets 480px – 768px
Landscape tablets 768px – 979px
Default 980px a více
Large display 1210px a více
Desktop first!
Hodně kódování!
Hodně kódování!
Bootstrapresponsivemax. 767px
S pomocí responsive vyřešímeextrémní rozdíly v layoutu.
MobileFirst
„Fuck desktop!”
Luke Wroblewski
Běžný responsive
Mobile first responsive
http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
Běžný responsive
Mobile first responsive
Hodněkódování!
http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
Aplikujeme Mobile First a mobilní uživatel netahá nic navíc.
Webfonty ✔ ✔
Modernizr ✔ ✔
jQuery ✔
Fancybox ✔
Prettify ✔
Elastickýlayout
Jon Tan
„Layout jakoelasťáky.”
http://www.flickr.com/photos/stn1978/6395307339/lightbox/
http://v1.jontangerine.com/log/2007/09/the-incredible-em-and-elastic-layouts-with-css
font-size: 1em;
font-size: 2em;
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: 130%; }
}
Velikost písma může změnit uživatel.
A nebo my!
@media screen and (min-width: 1200px) {
body { font-size: 130%; }
}
To už není moc kódování!
Elastický layoutřeší drobné kroky
Elastický layoutřeší drobné rozdíly v layoutu.
★ Špatně se počítá v IE6-
★ Větší velikosti systémových písem
★ Prohlížeče nezmenšují bitmapy hezky
Elastický layoutSamý problém?
★ Špatně se počítá v IE6-Nevadí!
★ Větší velikosti systémových písemMáme dobré webfonty. (Zde PT Sans)
★ Prohlížeče nezmenšují bitmapy hezkyVektory nemáme, ale pseudovektory ano.
Elastický layoutSamý problém?
✔✔✔
(Pseudo)vektory
Vektory a pseudovektory
★ CSS3 (stíny, přechody)★ Ikonfonty★ CSS3 ikony (blbina)★ SVG (zatím ne)
http://icomoon.io/app/
http://www.vzhurudolu.cz/css3/
Ikonfonty
.icon { // jakekoliv vlastnosti aplikovatelne // na pismo}
Ikonfonty
.icon { // jakekoliv vlastnosti aplikovatelne // na pismo}
Elastic + RetinaFriendly
Web elastický jako
PDFko?Ano, téměř.
Elasticita u malých rozdílů v šířce layoutu obnáší méně práce než responsive
a zachovává optimální šířku řádku.
Mobile FirstResponsive
ElasticWebsite™
Vytvořili jsme
Díky!twitter.com/machal
