RESPONSIVNÍ WEB DESIGN. WEBOVÉ STRÁNKY 2 Číslo projektuCZ.1.07/1.5.00/34.0808 Označení materiálu VY_32_INOVACE_15 Šablona III/2 Inovace a zkvalitnění.

Prezentace na téma: "RESPONSIVNÍ WEB DESIGN. WEBOVÉ STRÁNKY 2 Číslo projektuCZ.1.07/1.5.00/34.0808 Označení materiálu VY_32_INOVACE_15 Šablona III/2 Inovace a zkvalitnění."— Transkript prezentace:

1 RESPONSIVNÍ WEB DESIGN

2 WEBOVÉ STRÁNKY 2 Číslo projektuCZ.1.07/1.5.00/34.0808 Označení materiálu VY_32_INOVACE_15 Šablona III/2 Inovace a zkvalitnění výuky prostřednictvím ICT Tematická oblastStatický návrh webových stránek Škola Střední průmyslová škola strojní a elektrotechnická a Vyšší odborná škola, Liberec 1, Masarykova 3, příspěvková organizace AutorMgr. Michal Stehlík Téma hodinyNávrh responzivních stránek Předmět, ročníkIKT, 2. ročník Anotace Žáci se seznámí s možnostmi moderního návrhu stránek přizpůsobivých prohlížeči.

3 DŮVODY WEBOVÉ STRÁNKY 3

4 STARÝ PŘÍSTUP  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 WEBOVÉ STRÁNKY 4

5 NEVÝHODY  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 5

6 PODÍL MOBILNÍCH A DESKTOPOVÝCH PŘÍSTUPŮ http://gs.statcounter.com/#mobile_vs_desktop-ww-monthly- 200903-201308 WEBOVÉ STRÁNKY 6

7 NEJPOUŽÍVANĚJŠÍ ROZLIŠENÍ http://gs.statcounter.com/#resolution-ww-monthly-200903- 201308-bar WEBOVÉ STRÁNKY 7

8 NEJPOUŽÍVANĚJŠÍ ROZLIŠENÍ V MOBILNÍCH ZAŘÍZENÍCH http://gs.statcounter.com/#mobile_resolution-ww-monthly- 200903-201308 WEBOVÉ STRÁNKY 8

9 UKÁZKOVÁ RESPONZIVNÍ STRÁNKA http://blog.teamtreehouse.com/ WEBOVÉ STRÁNKY 9

10 1680 X 888  Stránka se vystřeďuje na obrazovce  Nad 1350px šířky  Kolem hlavního obsahu se vytváří okraje WEBOVÉ STRÁNKY 10

11 970 X 800  Stránka vyplňuje celou šířku  Zatím se nic nepřeskupuje WEBOVÉ STRÁNKY 11

12 760 X 600  Přeformátovalo se záhlaví a zápatí  Přesunul se postranní sloupec WEBOVÉ STRÁNKY 12

13 UKÁZKOVÁ RESPONZIVNÍ STRÁNKA http://2011.dconstruct.org/ WEBOVÉ STRÁNKY 13

14 NAD 1360PX  Stránka se vystřeďuje na obrazovce  Kolem obsahu se tvoří okraje WEBOVÉ STRÁNKY 14

15 NAD 960PX  Fotografie jsou 3x3 WEBOVÉ STRÁNKY 15

16 960 – 720PX  Fotografie jsou 2x4 WEBOVÉ STRÁNKY 16

17 720 – 480PX  Fotografie opět 3x3  obsah je pod galerií  Obrázkové menu WEBOVÉ STRÁNKY 17

18 POD 480PX  Opět změněná galerie WEBOVÉ STRÁNKY 18

19 PROSTŘEDKY WEBOVÉ STRÁNKY 19

20 RESET STYLE  Normalize  http://necolas.github.io/normalize.css/ http://necolas.github.io/normalize.css/ WEBOVÉ STRÁNKY 20

21 ZABRÁNĚNÍ AUTOSCALINGU BROWSERŮ   Pro prohlížeče založené na WebKitu WEBOVÉ STRÁNKY 21

22 FLUIDNÍ LAYOUT  Rozměry v procentech  Cíl / kontext = výsledek WEBOVÉ STRÁNKY 22 Šířka obalujícího prvku Požadovaná šířka prvku Někdy i šířky okrajů a marginy!

23 EM PRO TYPOGRAFII  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;} WEBOVÉ STRÁNKY 23

24 FLUIDNÍ OBRÁZKY  Šířka v procentech  Max-width: 28%;  I na malá rozlišení přenášíme velké obrázky WEBOVÉ STRÁNKY 24

25 FLUIDNÍ OBSAH  Float: left;  Float: right;  Clear: left / right / both;  Display: inline-block; WEBOVÉ STRÁNKY 25

26 MEDIA QUERY  Umožňují vybrat specifický styl pro určitý viewport  Médium  Šířka WEBOVÉ STRÁNKY 26

27 MOŽNOSTI MEDIA QUERY  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 WEBOVÉ STRÁNKY 27

28 VLOŽENÍ MEDIA QUERY  Pomocí @import  Přímo vnořený blok WEBOVÉ STRÁNKY 28

29 DOPORUČENÍ  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 29

30 DĚKUJI VÁM ZA POZORNOST Máte nějaké dotazy? WEBOVÉ STRÁNKY 30

31 POUŽITÉ MATERIÁLY  LAWSON, Bruce, Remy. Introducing HTML 5: výukový kurz webového vývojáře. 2nd ed. Berkeley, CA: New Riders, c2012, xvi, 295 p. Voices that matter. ISBN 03-217-8442-1.  Frain, Ben. Responsive Web Design with HTML5 and CSS3. Packt Publishing, 2012. ISBN13: 9781849693189.  MARCOTTE, ETHAN: Responsive Web Design, 25.5.2010, http://alistapart.com/article/responsive-web- design http://alistapart.com/article/responsive-web- design WEBOVÉ STRÁNKY 31