RESPONZIVNÍ WEB Mgr. Rostislav Fojtík, PhD. Katedra informatiky a matematik y Obchodně podnikatelská fakulta v Karvin é Slezská univerzita Responzivní web • Responsive web design • Optimalizování zobrazení pro všechna zařízení • Uživatelsky přívětivý Responzivní web Zobrazení Mobilní zařízení Responzivní web • Jednotná adresa webové prezentace • Nevytvářet duplicitní obsah • Oddělení obsahu od vzhledu Znaky responzivního webu • Flexibilní struktura - šířka komponent není pevně určena, ale odvíjí se od rozlišení displeje • Flexibilní obrázky • Media Queries - mediální dotazy, CSS3 • Přehledná navigace Obsah • Členění textu - desktopová verze by neměla přesáhnout 75 znaků na řádek a mobilní 50 znaků na řádek • Obrázky - velké bez vložených textů • Nevypínat zoomování obrázků, použití vektorové gra fi ky Grafi ka • Jednoduchá a minimalistická gra fi ka • Dostatečné mezery mezi prvky • Čitelný font • Dostatečná velikost dotykových ploch • Jednoduchá navigace stránek Grafi ka • Skeumor fi smu s • Flat Desig n • Material Desig n • Neumor fi smus Skeumor fi smus • Imitace reálných objektů, realistický vzhled • 3D prvky, propracované textury… • Náročné načítání gra fi ckých prvků • iOS do verze 6.0 Skeumor fi smus Skeumor fi smus Flat Design • Plochý design, minimalismus • Pouze jednoduché a základní tvary a barvy • Chybí dojem hloubky objektů • Jednoduché přizpůsobení vzhledu (responzivní design) • Rychlejší načítání • Windows 8 (2012), iOS 7 (2013) Flat Design • Problém s horším a pomalejším rozlišováním jednotlivých prvků • Nedostatek stínů, hloubky a zvýraznění vede k horší orientaci Flat Design Flat 2.0 Material Design • UI rámec pro gra fi ky (Android) • Systém pro návrh animací, stylů, rozvržení, komponenty a vzory • Jednotnost a jednoduchost vzhledu • Částečně vrací skeuromor fi smus - reálné zobrazení prvků • Pohyb a používání stínů Neumorphismus Neumorphism • New skeuomorphismus • Používání stínů a odlesků (větší plastičnost) • Prvky mají obvykle stejnou barvu jako podklad - občas horší orientace • Výhodný u světlých a tlumených barev Neumorphism Neumorphismus a Material Design Neumorphismus Android - Material Design h tt ps://material.io/design iOS - Human centered design h tt ps://developer.apple.com/design/human-interface- guidelines/ios/overview/themes/ Android a iOS - navigace Rozložení obsahu Rozložení obsahu Zobrazení Viewport • Meta značka viewport • Prohlížeč pozná, že má zobrazení přizpůsobit rozlišení displeje Viewport Pružný layout • Přizpůsobit se reálné šířce displeje • Nepoužívat rozměry v pixelech, ale v procentech Pružný layout Media Queries • Modul CSS3 • Pomocí Media Queries budeme de fi novat rozlišení obrazovky • Snížení počtu sloupců @media screen and (max-width: 900px) { #wrapper { Brekpoint • Brekpointy - body zlomu - změna designu @media (max-width: 900px) and (min-width: 600px) { #header { width: 800px ; } Responzivita obrázků • Optimalizovat obrázky • Maximální šířku 100 %, výška automatická .content img {                max-width: 100 %                height: auto ; } …děkuji za pozornost Mgr. Rostislav Fojtík, PhD . Katedra informatiky a matematik y Obchodně podnikatelská fakulta v Karvin é Slezská univerzit a fojtik@opf.slu.cz