Responzivita webu

Podstata RW, trendy, technologie

  • Podstatou responzivního webu je zvolit vhodnou strategii při stylování vzhledu webové stránky, kterou chcete docílit optimalizaci zobrazení a čitelnosti na různých zobrazovacích zařízeních.
  • Zobrazovací zařízení – klientské zařízení, na kterém bude web zobrazován (monitor, mobil, tiskárna, projektor …) – liší se svým rozlišením (rozměry) a lze detekovat i další vlastnosti zařízení, zda je web prohlížen na výšku či na šířku, případně při jaké barevné hloubce.
  • Historicky – před zveřejněním specifikace CSS3 bylo možné návštěvníkům webu provést přesměrování na mobilní verze, které se často nacházely na subdoméně např. m.domena.cz. Mobilní verze měla vhodně upraveno písmo, pozadí, obalující bloky měly šířku řádově kolem 200px a byly jednosloupcové. Technicky bylo přesměrování realizováno pomocí příkazů v nastavení HTTP serveru – soubor .htaccess se běžně používá např. pro řízení přístupu návštěv viz https://stackoverflow.com/questions/3680463/mobile-redirect-using-htaccess
  • Problémy webů z období před HTML5 a CSS3
    • Často byly vytvářeny pro jedno rozlišení či dokonce pro jeden typ webového prohlížeče.
    • Interaktivita realizována pomocí Flashe.
    • Občas nevhodné rozložení stránky – tabulkový, rámce
    • Navigace tvořené pouze textovými odkazy – vznikal problém trefit se prstem – dnes vyřešeno tzv. flat-designem, odkazy zobrazené jako bloky s vhodnými rozměry.
  • Současné trendy a technologie využívají především prostředků samotných prohlížečů. Web se přizpůsobuje pomocí nových CSS vlastností umožňující tzv. breakpointy. Nabízí se způsoby:
    • Bootstrap – je front-end stylový framework pro web. Obsahuje předdefinované CSS/JS/jQuery … Při kódování webu stačí vhodně aplikovat pouze HTML s patřičnými třídami a identifikátory.
    • CSS – Media Query – využití bloku @media pro podmíněné stylování
    • CSS – Flexbox – přidaný CSS modul vlastností s prefixem “flexbox-“. Flexbox je nejvhodnější pro rozložení jednořádkových prvků, jelikož organizuje prvky v jednom směru (vodorovně). Zalamování řádků provádí spíše podle okolností. Vlastnosti flexboxu jsou nastaveny především v potomcích kontejneru.
    • CSS – Grid (mřížkový systém) – přidaný CSS modul vlastností s prefixem “grid-“. Grid je nejvhodnější pro rozložení webového obsahu jak vodorovném, tak i svislém, a tak se hodí pro víceřádkové rozložení webového obsahu. Pozice blokových prvků lze chápat jako intervaly v relativním prostoru. CSS vlastnosti gridového rozložení se nastavuje především na kontejneru. Rozdíly mezi flexboxem a gridem jsou hezky popsány zde: https://frontend.garden/css-grid-pro-mikro-layouty/
    • Podmíněné komentáře v HTML – neudělají web 100% responzivní, ale mohou vyřešit problémy s prohlížeči, více: https://www.jakpsatweb.cz/html/podminene-komentare.html
  • Přístupy k responzivitě:
    • Mobile-first – Tvůrci webů nejdříve začínají stylovat web od mobilní verze, veškeré další verze pro desktop a jiné průhledy jsou doplňovány dodatečně. Zajímavě vysvětlené výhody a nevýhody i s alternativním řešením je popsáno zde: https://jecas.cz/mobile-first
    • Mobile-friendly – je prakticky synonymum pro responzivní design zaměřený hlavně na mobilní zařízení.

Relativní vs. absolutní jednotky

  • Největší problémy při zobrazování webu na zařízeních s menší šířkou je způsob nastavení vlastností width pro různé objekty (divy, obrázky, …). Pokud je šířka okna menší než nejširší prvky se započítanými marginy, okno prohlížeče zobrazí vodorovný posuvník – tomu chceme zabránit.
  • Rozlišujeme 2 základní typy layoutu (rozložení)
    • fixní – pevná (absolutní) šířka obálky (kontejneru) webu … riziko zobrazení posuvníku
    • fluidní – dynamické … šířky jsou relativní a přizpůsobují se … pro RW nejvhodnější, avšak nelze vícesloupcové rozložení zúžit do extrému – došlo by k vytečení objektů a opět nečitelnost. Snahou je stále zachovat minimální šířku > nastavení break-pointů.
  • Proporcionální design – jedním ze základů responzivního designu je nastavení rozměrů objektů pouze pomocí šířky a to v relativních jednotkách. Webové prohlížeče pak sami proporčně dopočítají vlastnost výšky. Pokud tedy zadáme oba rozměry objektu pomocí relativní jednotky, objekt bude pravděpodobně zdeformován. Proporční design se dále zabývá proporční velikosti písma.
  • Průhled = viewport – rozměr okna prohlížeče na daném zařízení
  • Nepoužívat absolutní jednotky pro nastavení šířky – cm, mm, pt, px in!
  • Vhodné relativní jednotky pro nastavení šířky jsou vždy závislé podle toho, k čemu jsou vztaženy:
    • % – procento z šířky rodičovského prvku
    • vh – jednotka určená jako 1/100 z výšky daného průhledu
    • vw – jednotka určená jako 1/100 z šířky daného průhledu
    • em – jednotka, která je relativní vůči nastavené velikosti písma daného prvku
    • rem – jednotka, která je relativní vůči nastavené velikosti písma prvku body
  • Doporučuji se podívat sem: https://www.w3schools.com/css/css_units.asp

Media queries, Flexbox, Grid

  • Body zlomu = Break-pointy – Hranice vlastností, při kterých dojde k přeskupení bloků nebo jiné změně stylu. Např. při šířce okna prohlížeče s minimální šířkou 1000px se web zobrazí ve třech sloupcích vedle sebe, při šířce 500-999px pouze ve dvou sloupcích vedle sebe a třetí se vykreslí pod ostatními a při šířce okna menší než 500px se všechny bloky bývalých sloupců vykreslí pod sebou v jednom sloupci.
  • Media Queries – slouží fuzzy-logicky k nastavení podmínek break-pointů. Co lze všechno detekovat v podmínkách?
  • Flexbox – není třeba promýšlet přesné parametry jako u nastavení break-pointů u Media Queries. Flexboxový layout je definován řadou vlastností, který určuje chování prvků (items) v obalu (container). Takže se při návrhu stačí zaměřit na způsoby, jak budou položky natahovány a zarovnávány. více: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
  • Grid (mřížkový systém) – podobně jako flexbox rozeznává nadřízený obalující prvek (rodič) a podřízené prvky (potomky). Výhodou oproti flexboxu je, že grid lze nastavovat nejen do strany, grid lze také nastavit svisle na konkrétní počty řádků. Definice rozměrů a pozic jednotlivých položek je závislá dle rozložení buněk mřížky. Rozvržení jednotlivých bloků v mřížce trochu připomíná tabulkové rozložení v Excelu. více: https://css-tricks.com/snippets/css/complete-guide-grid/

Viewport

  • Webový prohlížeč se na malých zařízeních snaží vykreslit web zmenšený tak, aby se vešel na šířku okna. To sice zajistí to, aby návštěvník nemusel scrollovat posuvníkem do strany, ale způsobí to nečitelnost písma.
  • Mnohem vhodnější by bylo, kdyby měl web nastaveno výchozí měřítko a veškerý obsah webu se relativně přizpůsoboval průhledu (viewportu).
  • Nová metaznačka v HTML5 ovládá výchozí měřítko: <meta> s atributy name a content.
  • více zde: https://jecas.cz/meta-viewport

Adaptivní obrázky

  • Pomocí nových HTML5 prvků pro vložení obrázků lze docílit toho, že webový prohlížeč si podle daných podmínek uvedených v atributu vybere vhodný zdroj souboru.
  • <picture> definuje blok obrázku.
  • Uvnitř se nachází výchozí prvek <img> a prvky <source>, kterými lze definovat alternativní verze.
  • Atributy prvku <source>
    • media – nastavení podmínky na zobrazovací zařízení
    • srcset – URL souboru
  • ukázka zde: https://www.w3schools.com/tags/tag_picture.asp
  • Takto není třeba přenášet příliš velké rastrové obrázky a tím se ušetří čas načítání. Nicméně díky HTML5 je možné také zobrazovat SVG, což je univerzálnější řešení, kdy není třeba zabývat se verzemi obrázků. Proto preferujeme vektorovou grafiku!!