(Téměř) Vektorový web

Preview:

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

Citation preview

(Téměř) Vektorový

web

Martin Michálek@machal

Redesign www.vzhurudolu.cz

Web elastický jako

PDFko?

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

Responsivewebdesign

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

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

Recommended