Post on 06-Jul-2015
transcript
Vypracoval: Milan Němec
Vedoucí práce: Ing. Jiří Kosek
Responzivní webdesign
Obhajoba bakalářské práce
Obsah
• Představení a důvody výběru
• Cíle práce
• Základní principy
• Praktická část
• Závěry práce
Představení a důvody výběru
Zdroj: http://wikimotive.com/wikiblog/seo-disadvantages-responsive-design/
Cíle práce
• Popsat možnosti tvorby responzivních webových stránek
• Vytvořit a poskytnout naučný materiál pro vývojáře
• Popsat nástroje a techniky, které povedou k rychlejšímu a efektivnějšímu vývoji
• Ověření výsledků na vytvořeném prototypu responzivní webové stránky
Základní principy
• Flexibilní struktura
• Media queries
• Flexibilní obrázky
Přístupy k vytváření:
• Mobile first
• Desktop first
Flexibilní struktura
• Rozměry elementů v relativních jednotkách [%]
• Vzorec: cíl / kontext = výsledek
.page { width: 100%; }
.header { width: 100%; }
.content { width: 68.75%; /* 660 / 960 */ }
.panel { width: 31.25%; /* 300 / 960 */ }
Media queries
• Za definovaných podmínek se aplikují styly
• Dotaz se skládá ze dvou částí – Dotaz na typ média (screen, print, ...)
– Vlastnost média s cílovou hodnotou (width, orientation, aspect-ratio, …)
• Chybí podpora v IE8
@media screen and (max-width: 480px) { body { font-size : 80%; } .block article { padding: 0; }
}
Flexibilní obrázky
• Dodnes neexistuje optimální řešení
• Řešením picture element – chybí podpora v prohlížečích
• Prozatímní řešení v některém polyfillu
Zdroj: http://responsiveimages.org/
Praktická část
Cíl: Vytvořit prototyp webové stránky VŠE v Praze využívající principy responzivního webdesignu.
Výchozí stav:
Praktická část
• Desktop first
• Upravení na flexibilní strukturu
• Vhodně přidávány media queries a upravován layout
• Hlavním obrázkům přidán atribut srcset, ostatní upraveny
Praktická část
1050px
671px 850px
851px
Praktická část
671px 670px 480px
Praktická část - výsledky
• Zobrazení optimalizováno pro mobilní zařízení
• Větší použitelnost
• Stejný obsah pro všechna zařízení
• Závislost na javascriptu
• Podařilo se vytvořit možné řešení responzivního webu VŠE
• Představeny a aplikovány základní principy RWD
Závěry práce
• RWD představuje vhodný způsob vytváření uživatelsky přívětivých stránek nejen pro mobily a desktopy
• Dodnes neexistuje jednotná metoda, univerzální postup
• Některé potřebné části nejsou stále implementovány
• Podoba a vývoj responzivních webů se bude vždy odvíjet od dostupných zařízení
Vypracoval: Milan Němec
Děkuji za pozornost