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