Responsivní web design

Responsivní web design

Webové stránky

Webové stránky Důvody

Starý přístup Webové stránky • Návrh stránky pro různá zařízení: • Stránka pro iPod • iPad • iPhone(mobilní telefon) • Televize • Počítačový monitor • Čtečka e-knih

Nevýhody Webové stránky • Duplicitní obsah = náročná údržba • Moc práce kvůli marginálnímu přínosu • Stejně nejsme připraveni pro jiná zařízení • Drahé • Neschopné adaptace

Webové stránky Podíl mobilních a desktopových přístupů http://gs.statcounter.com/#mobile_vs_desktop-ww-monthly-200903-201308

Webové stránky Nejpoužívanější rozlišení http://gs.statcounter.com/#resolution-ww-monthly-200903-201308-bar

Webové stránky Nejpoužívanější rozlišení v mobilních zařízeních http://gs.statcounter.com/#mobile_resolution-ww-monthly-200903-201308

Webové stránky http://blog.teamtreehouse.com/ ukázková responzivní stránka

1680 x 888 Webové stránky • Stránka se vystřeďuje na obrazovce • Nad 1350px šířky • Kolem hlavního obsahu se vytváří okraje

970 x 800 Webové stránky • Stránka vyplňuje celou šířku • Zatím se nic nepřeskupuje

760 x 600 Webové stránky • Přeformátovalo se záhlaví a zápatí • Přesunul se postranní sloupec

Webové stránky http://2011.dconstruct.org/ Ukázková responzivní stránka

Nad 1360px Webové stránky • Stránka se vystřeďuje na obrazovce • Kolem obsahu se tvoří okraje

Nad 960px Webové stránky • Fotografie jsou 3x3

960 – 720px Webové stránky • Fotografie jsou 2x4

720 – 480px Webové stránky • Fotografie opět 3x3 • obsah je pod galerií • Obrázkové menu

Pod 480px Webové stránky • Opět změněná galerie

Webové stránky Prostředky

Reset style Webové stránky • Normalize • http://necolas.github.io/normalize.css/

Zabránění autoscalingu browserů Webové stránky • <meta name="viewport" content="width=device-width, user-scalable=false;initial-scale=2.0"> • Pro prohlížeče založené na WebKitu

Fluidní layout Webové stránky • Rozměry v procentech • Cíl / kontext = výsledek Požadovaná šířka prvku Šířka obalujícího prvku Někdy i šířky okrajů a marginy!

EM pro typografii Webové stránky • Veškeré rozměry písma a typografických prvků v násobcích Em odvozených od základní velikosti písma. • H1 {font-size: 1.5em;}

Fluidní obrázky Webové stránky • Šířka v procentech • Max-width: 28%; • I na malá rozlišení přenášíme velké obrázky

Fluidní obsah Webové stránky • Float: left; • Float: right; • Clear: left / right / both; • Display: inline-block;

Media query Webové stránky • Umožňují vybrat specifický styl pro určitý viewport • Médium • Šířka

Možnosti media query Webové stránky • Width • Height • Device-width • Device-height • Orientation: portrait / landscape • Aspect-ratio: 16/9 • Device-aspect-ratio • Color: 16 (16bit) • Monochrome: 2 (počet odstínů) • Resolution: 300dpi • Scan: progressive / interlaced

Vložení media query Webové stránky • Pomocí @import • Přímo vnořený blok

Doporučení Webové stránky • Co je hlavní obsah stránky? • Začněme od nejmenšího rozlišení, postupně přidáváme a přeorganizováváme prvky. • Textový řádek musí být čitelný najednou – nesmí být moc široký. (~800px) • Navigace musí být přehledná, neměla by se příliš měnit její podstata. • Jen proto, že je zařízení malé, není správné část obsahu před ním skrývat.

Webové stránky Máte nějaké dotazy? Děkuji vám za pozornost

Použité materiály Webové stránky • LAWSON, Bruce, Remy. Introducing HTML 5: výukový kurz webového vývojáře. 2nd ed. Berkeley, CA: New Riders, c2012, xvi, 295 p. Voicesthatmatter. ISBN 03-217-8442-1. • Frain, Ben.Responsive Web Design with HTML5 and CSS3. PacktPublishing, 2012. ISBN13: 9781849693189. • MARCOTTE, ETHAN: Responsive Web Design, 25.5.2010, http://alistapart.com/article/responsive-web-design

Responsivní web design