RESPONSIVNÍ WEB DESIGN

WEBOVÉ STRÁNKY 2 Číslo projektuCZ.1.07/1.5.00/ 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.

DŮVODY WEBOVÉ STRÁNKY 3

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

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

PODÍL MOBILNÍCH A DESKTOPOVÝCH PŘÍSTUPŮ WEBOVÉ STRÁNKY 6

NEJPOUŽÍVANĚJŠÍ ROZLIŠENÍ bar WEBOVÉ STRÁNKY 7

NEJPOUŽÍVANĚJŠÍ ROZLIŠENÍ V MOBILNÍCH ZAŘÍZENÍCH WEBOVÉ STRÁNKY 8

UKÁZKOVÁ RESPONZIVNÍ STRÁNKA WEBOVÉ STRÁNKY 9

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

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

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

UKÁZKOVÁ RESPONZIVNÍ STRÁNKA WEBOVÉ STRÁNKY 13

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

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

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

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

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

PROSTŘEDKY WEBOVÉ STRÁNKY 19

RESET STYLE  Normalize  WEBOVÉ STRÁNKY 20

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

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!

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

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

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

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

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

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

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

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

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  Frain, Ben. Responsive Web Design with HTML5 and CSS3. Packt Publishing, ISBN13:  MARCOTTE, ETHAN: Responsive Web Design, , design design WEBOVÉ STRÁNKY 31