Průvodce začátečníka
responzivním webdesignem

Vzhledem k tomu, že se na internet stále častěji přistupuje z mobilních zařízení, nestačí už vytvářet webové stránky se statickým designem, který vypadá dobře pouze na obrazovce počítače.

Při vymýšlení designu dnes musíte brát v úvahu také tablety, notebooky 2 v 1 a různé modely chytrých telefonů s různými rozměry obrazovky. Bez respektování skutečnosti, že si Vaše webové stránky zobrazují různí uživatelé na různých zařízeních, bude Váš web jen málo efektivní.

Aby vaše webové stránky vypadaly k světu na mobilních telefonech, tabletech, noteboocích i obrazovkách stolních počítačů, můžete zajistit s pomocí responzivního webdesignu.

A právě tento průvodce vám ukáže vše, co pro začátek potřebujete o responzivním designu webových stránek vědět.

Obsah

• Co je responzivní webdesign?
• Proč je responzivní design důležitý
• Stavební kameny responzivního webdesignu
• Běžné body zlomu u responzivních webů
• Jak vytvořit responzivní webové stránky
• Jednotky a hodnoty CSS pro responzivní design
• Příklady responzivního designu

Co je to responzivní webdesign?

Responzivní design je přístup k webdesignu, který umožňuje přizpůsobit webový obsah různým velikostem obrazovek a oken různých zařízení.

Například na obrazovkách stolních počítačů může být váš obsah rozdělen do různých sloupců, protože jsou dostatečně široké, aby se tomuto designu přizpůsobily.

Pokud svůj obsah rozdělíte do více sloupců na mobilním zařízení, bude pro uživatele obtížné jej číst a komunikovat s ním.

Responzivní design umožňuje poskytovat více samostatných rozvržení obsahu a designu na různých zařízeních v závislosti na velikosti obrazovky.

Proč je důležitý responzivní design

Pokud jste v oblasti webového designu, vývoje nebo blogování nováčkem, možná vás zajímá, proč je responzivní design vůbec důležitý.

Odpověď už zazněla a je jednoduchá. Dnes nestačí navrhovat pro jedno zařízení – protože návštěvnost většiny webů z mobilních zařízení je již vyšší než návštěvnost z desktopů.

Když více než polovina vašich potenciálních návštěvníků používá k prohlížení internetu mobilní zařízení, nemůžete jim jednoduše nabídnout stránku určenou pro stolní počítače. Neoptimalizované zobrazení webové stránky by vedlo ke špatnému uživatelskému zážitku (User eXperience - UX).

Ale: uživatelé mobilních zařízeních tvoří také většinu návštěvníků vyhledávačů.

A konečně, v několika posledních letech se mobilní zařízení stala i jedním z nejdůležitějších reklamních kanálů. Dokonce i na postpandemickém trhu rostou výdaje na mobilní reklamu o 4,8 % na 91,52 miliardy dolarů.

Ať už se rozhodnete inzerovat na sociálních sítích, nebo použijete organický přístup, jako je SEO na YouTube, většina vaší návštěvnosti bude (pravděpodobně) pocházet z mobilních zařízení.

Pokud vaše stránky nebudou optimalizovány pro mobilní zařízení a nebudou snadno použitelné, nebudete schopni maximalizovat návratnost investic do svého marketingového úsilí. Špatná míra konverze povede k menšímu počtu potenciálních zákazníků a zbytečným výdajům na reklamu.

Stavební kameny responzivního webového designu

V této části se budeme již zabývat základy responzivního designu webových stránek a jeho jednotlivými stavebními prvky.

• CSS a HTML
• Fluid layout
• Flexbox layout
• Media query
• Responzivní obrázky
• Rychlost načítání

CSS a HTML

Základem responzivního designu je kombinace HTML a CSS, dvou jazyků, které určují obsah a rozvržení stránky v daném webovém prohlížeči.

Jazyk HTML řídí především strukturu, prvky a obsah webové stránky. Chcete-li například na webovou stránku přidat obrázek, musíte použít kód HTML, jako je tento:

      
<img src="image.gif" alt="image" class=”full-width-img”>      
    

Můžete nastavit "třídu" nebo "id", jejichž způsob zobrazení později upravíte pomocí kódu CSS.

V rámci jazyka HTML byste také mohli ovládat atributy jako je výška a šířka, ale to se již nepovažuje za osvědčený postup.

Místo toho se k úpravě vzhledu a rozvržení prvků, které na stránku vložíte pomocí kódu HTML, používá CSS. CSS kód (styl) lze začlenit do dokumentu HTML pomocí značky <style> (přímý zápis CSS v HTML souboru) nebo připojit jako samostatný CSS soubor pomocí značky <link>.

Například: Takto můžeme upravit šířku všech obrázků HTML na úrovni prvků:

      
img {
  width: 100%;
}      
    

Nebo: Upravíme šířku obrázků pouze pro obrázky s nastavenou třídou "full-width-img":

      
.full-width-img {
  width: 100%;
}      
    

CSS designem můžete nastavovat nejen výšky, šířky a barvy, ale i další vlastnosti. Pomocí CSS vytvoříte responzivní design, když jej zkombinujete s technikou zvanou media query.

Fluid layout

Fluid layout je nezbytnou součástí moderního responzivního designu.

• Původně se pro každý prvek HTML nastavovala statická hodnota, například 600 pixelů.
• Fluid layout se místo toho spoléhá na dynamické hodnoty, jako např. procento šířky zobrazovacího panelu.

Tento přístup dynamicky zvětšuje nebo zmenšuje různé velikosti kontejnerových prvků v závislosti na velikosti obrazovky.

Flexbox Layout

Fluid layout založený na procentech se sice dynamicky přizpůsobuje velikosti obrazovky, ale umožňuje jen malé (a relativně pracné) přizpůsobení obsahu stránky velikosti obrazovky.

Proto byl zaveden Flexbox layuot, který dovede zařídit více věcí než Fluid layout a současně to umí jednodušeji. Flexbox je modul CSS navržený jako efektivnější způsob rozvržení více prvků, i když není známa (přesná absolutní) velikost obsahu uvnitř kontejneru.

Flexbox technologie rozmisťuje, rozšiřuje a nebo naopak zužuje zobrazované HTML prvky tak, aby zaplnily vymezené místo podle přání webdesignera a má dva základní prvky:

• Flexbox kontejner (v níže uvedeném obrázku fialové):

  Místo, do kterého se automaticky rozmisťují Flex prvky.

• Flexbox prvek (v níže uvedeném obrázku oranžové):

  Jedná se o (z pohledu HTML kódu) přímé potomky Flexbox kontejneru.

Rozmisťovnání Flex prvků řídí specifické CSS vlastnosti, například justify-content.
Jaké rozmístění zařídí různé hodnoty této vlastnosti demonstruje již dříve zmiňovaný obrázek:

Jedná se o složité téma, Flexbox technologie umí zařídit opravdu mnoho dalších věcí, takže pokud jej chcete použít ve svém návrhu, měli byste si přečíst např. průvodce flexboxem od CSS Tricks.

Media Queries

Media Query je součást CSS3, která umožňuje nastavit CSS vlastnosti různě pro různé velikosti obrazovky a tím vykreslit obsah tak, aby se přizpůsobil různým faktorům, jako je např. velikost obrazovky nebo rozlišení.

Funguje podobně jako klauzule "if" v některých programovacích jazycích a v podstatě kontroluje, zda je zobrazovací plocha obrazovky dostatečně široká nebo příliš široká, a teprve poté provede příslušný CSS kód.

      
        @media screen and (min-width: 780px) {
          .full-width-img {
            margin: auto;
            width: 90%;
          }
        }      
    

Tento kód znamená: Pokud je obrazovka široká alespoň 780 pixelů, obrázky třídy "full-width-img" zaberou 90 % obrazovky a budou automaticky vycentrovány stejně širokými okraji.

Responzivní obrázky

Nejzákladnější využití responzivních obrázků se řídí stejným konceptem jako Fluid lauout a používá dynamickou jednotku pro ovládání šířky nebo výšky a automatické dopočítání druhého rozměru. Ukázkový kód CSS, kterým jsme se zabývali dříve, toho již dosahuje:

      
img {
  width: 100%;
}      
    

Jednotka % představuje 1/100 šířky nebo výšky zobrazovací plochy a zajišťuje, aby obrázek zůstal proporcionální vůči obrazovce.

Hlavní nevýhoda tohoto přístupu spočívá v tom, že každý uživatel musí stáhnout obrázek v plné velikosti, a to i na mobilních zařízeních (na mobilech tak dochází ke „zbytečnému stahování dat“, přičemž právě mobilní připojení dnes mívá datové limity).

Máte-li na své webové stránce datově velké obrázky nebo velké množství obrázků, měli byste chtít zobrazovat uživatelům různé verze obrázků zmenšené pro různá zařízení. Musíte pro to ve značkách img použít atribut HTML srcset a zadat více než jednu velikost obrázku na výběr.

      
<img srcset="large-img.jpg 1024w,
  middle-img.jpg 640w,
  small-img.jpg  320w"
  src="small.jpg"
/>      
    

WordPress tuto funkci automaticky používá pro obrázky obsažené v příspěvcích nebo stránkách.

Rychlost načítání

Když se snažíte vytvořit responzivní design pro své webové stránky, měla by být rychlost načítání důležitým aspektem.

Stránky, které se načtou za 2 sekundy, mají v průměru 9% míru opuštění, zatímco stránky, které se načítají 5 sekund, vedou k 38% míře opuštění.

Vaše řešení responzivity nesmí blokovat nebo zdržovat první vykreslení stránky více, než je nutné.

Existuje několik způsobů, jak můžete své stránky zrychlit. Optimalizace obrázků, implementace mezipaměti (cache), minimalizace (minifikace) kódu, použití efektivnějšího rozvržení CSS, vyhnutí se JS blokujícímu vykreslování a zlepšení kritické cesty vykreslování jsou jen některé nápady, které byste měli zvážit. Pomoci Vám v tom může nástroj Lighthouse v Google Chrome (jedná se o součást DevTools).

Můžete také zkusit implementovat Google AMP pro své mobilní stránky, ale v naší případové studii Google AMP klesly naše mobilní odkazy o neuvěřitelných 59 %.

Běžné responzivní body zlomu (breakpoints)

Chcete-li pracovat s Media Queries, musíte se rozhodnout pro vhodnou volbu breakpointů. Breakpoint je šířka obrazovky, na které pomocí Media Query implementujete nové styly CSS.

Běžné šířky obrazovky (ne, výčet není rozhodně úplný)

• Mobily:

  • 320px - iPhone SE se zapnutým zvětšením písma
  • 360px, 375px - iPhone modely 2018-2020
  • 390px - iPhone pozdější modely (iPhone 15 má 393px)
  • 410px a více - Androidy modely 2018-2022
  • 430px a více - Androidy pozdější modely

• Tablety:

  • 768px - na výšku
  • 1024px - na šířku

• Notebooky:

  • 1280px (FullHD se zapnutým zvětšením 150%)
  • 1536px (FullHD se zapnutým zvětšením 125%)
  • 1920px (FullHD)

• Stolní počítače: FullHD 1920 x 1080 a více (až 4K = šířka 3840px)

Pokud zvolíte přístup k designu zaměřený na mobilní zařízení, jehož základem je jeden sloupec a menší velikost písma, nemusíte zahrnovat body zlomu pro mobilní zařízení - pokud nechcete optimalizovat design pro konkrétní modely.

Můžete tak vytvořit základní responzivní design s pouhými dvěma body zlomu, jedním pro tablety a jedním pro notebooky a stolní počítače.

Jak vytvořit responzivní webové stránky

Nyní, když jste se seznámili se stavebními kameny, je čas si vytvořit vlastní jednoduché responzivní webové stránky.

• Nastavte rozsahy Media Queries (responzivní body zlomu)
• Velikost prvků rozvržení Fluid layuout, Flex layout nebo vytvoření layoutu CSS mřížkou
• Implementujte responzivní obrázky
• Responzivní typografie pro text na webu
• Otestujte responzivitu

Nastavte rozsahy Media Queries (responzivní body zlomu)

Nastavte rozsahy Media Queries na základě skutečných potřeb vašeho webu (ty zjistíte zejména ze statistik přístupů vašeho webu nebo ze statistik přístupů obdobného webu, pokud vytváříte web nový).

Zkontrolujte si zobrazení svého webu (alespoň) na výše uvedených breakpointech.

Velikost prvků rozvržení pomocí procent nebo vytvoření rozvržení mřížky CSS

Prvním a nejdůležitějším krokem je nastavení různých velikostí pro různé prvky rozvržení v závislosti na Media Queries / breakpointech.

Počet kontejnerů rozvržení bude záviset na designu, ale většina webových stránek se zaměřuje na níže uvedené prvky:

• Obal (wrapper) / kontejner (container)
• Záhlaví
• Obsah
• Boční panel
• Zápatí

Při použití přístupu mobile-first můžete hlavní prvky rozvržení nastylovat takto (bez media query pro základní styly pro mobilní telefony):

      
// Základní rozvržení určené pro malé obrazovky - mobilní telefony
#wrapper { width:95%;  margin: 0 auto; }
#header { width:100%; }
#content { width:100%; }
#sidebar { width:100%; }
#footer { width:100%; }

// Small devices (landscape phones, 576px and up)
// - bez úprav
@media (min-width: 576px) { }
 
// Medium devices (tablets, 768px and up) - zúžení obsahu na 90 %, sloupce
@media (min-width: 768px) {
  #wrapper {width:90%;  margin: 0 auto; }
  #content {width:70%; float:left; }
  #sidebar {width:30%; float:right; }
}

// Large devices (desktops, 992px and up)
// - bez dalších úprav
@media (min-width: 992px) { }

// Extra large devices (large desktops, 1200px and up)
// - další zúžení obsahu
@media (min-width: 1200px) {
  #wrapper {width:80%;  margin: 0 auto; }
}      
    

V CSS pro Fluid layout řídí nastavení CSS vlastnosti "float", na které straně obrazovky se prvek zobrazí - zda vlevo, nebo vpravo.

Pokud chcete jít nad rámec základů a vytvořit rozmanitější responzivní design, použijte Flex layout (pro špičkový responzivní design se musíte podrobněji seznámit s více vlastnostmi CSS flexbox a jeho atributy).

Implementace responzivních obrázků

Jedním ze způsobů, jak zajistit, aby vaše obrázky „nerozbily rozložení stránky“, je pouhé použití dynamické hodnoty pro všechny obrázky, jak jsme uvedli dříve.

      
img {
    width: 100%;
  }      
    

Tím však nesnížíte datový objem, který mobilním návštěvníkům při přístupu na vaše webové stránky zbytečně vyčerpává datový limit.

Při přidávání obrázků na stránky se vždy ujistěte, že obsahuje soubor srcset s různými velikostmi fotografií.

Dělat to ručně může být poměrně časově náročné, ale v systému CMS, jako je WordPress, se to děje automaticky při nahrávání mediálních souborů.

Responzivní typografie pro text na webových stránkách

Pro skutečně responzivní design byste měli ještě vhodně upravit také velikost písma tak, aby odpovídala velikosti obrazovky.

Nejjednodušší způsob, jak toho dosáhnout, je nastavit statickou hodnotu velikosti písma, například 22 px, a následně ji přizpůsobovat v Media Queries.

Můžete se zaměřit na více textových prvků najednou tak, že každý z nich oddělíte čárkou.

      
@media (min-width: 992px) {
  body, p, a, h4 {
    font-size: 14px;
  }
}      
    

Testování responzivity

Nejdříve si otestujte, zda je váš web vhodný pro mobilní zařízení, pomocí Google testu pro mobilní zařízení. Jednoduše zadejte adresu URL svého webu a kliknutím na tlačítko "otestovat URL" získáte výsledky.

Pokud jste postupovali podle kroků uvedených v tomto článku, mělo by se zobrazit, že máte web přizpůsobený mobilním zařízením.

Dále otestujte svůj web na více velikostech obrazovky například pomocí DevTools (vývojářské nástroje v prohlížeči).

Stisknutím kombinace kláves CTRL + Shift + I v počítačích se systémem Windows nebo Command + Option + I v počítačích Mac otevřete příslušné zobrazení zařízení. Zde můžete vybrat mobilní zařízení nebo tablet podle svého výběru a otestovat svůj návrh.

Při tomto procesu si musíte zodpovědět několik otázek:

• Přizpůsobí se rozvržení správnému počtu sloupců?
• Vejde se obsah dobře do prvků rozvržení a kontejnerů na různých obrazovkách?
• Odpovídají velikosti písma jednotlivým obrazovkám?

Jednotky a hodnoty CSS pro responzivní design

CSS má absolutní i relativní měrné jednotky. Příkladem absolutní jednotky délky je cm nebo px. Relativní jednotky neboli dynamické hodnoty závisí na velikosti a rozlišení obrazovky nebo na velikosti písma kořenového prvku.

Jednotky PX vs EM vs REM vs Viewport pro responzivní design

• PX - jeden pixel
• EM - relativní jednotka založená na velikosti aktuálního písma prvku.
• REM - relativní jednotka založená na velikosti základního písma prvku.
• VH, VW - % výšky nebo šířky viewportu.
• % - procento nadřazeného prvku.

Začínající webový designér by se měl v případě textu držet pixelů, protože jsou nejjednodušší jednotkou délky v CSS.

Při nastavování šířky a maximální šířky obrázků a dalších prvků je však nejlepším řešením použití %. Tento přístup zajistí, že se prvky přizpůsobí velikosti obrazovky každého zařízení.

Příklady responzivního designu

1. Online noviny: New York Times

Na stolním počítači připomíná rozvržení NYT tradiční noviny, přeplněné vizuálními prvky a různými řádky a sloupci obsahu. Zdá se, že pro každou kategorii zpráv existuje samostatný sloupec nebo řádek.

Na mobilních zařízeních odpovídá standardu jednoho sloupce a také upravuje nabídku do akordeonového formátu, aby se snadněji používala.

2. Blog: Umění nonkonformity

Blog Chrise Guillebeaua "The Art of Non-Conformity" funguje již více než deset let. Jeho design sice není nejmodernější, ale je responzivní a na mobilních zařízeních přizpůsobuje dvousloupcový postranní panel a rozvržení hlavního obsahu do jednosloupcového designu.

3. Elektronické obchodování: Amazon

Amazon není celosvětovým lídrem v oblasti elektronického obchodování pro nic za nic, jeho uživatelské rozhraní je dokonale plynulé na všech zařízeních.

Jejich rozvržení pro tablety jednoduše odstraňuje část bílého prostoru a přidává rolovací část s ikonami, aby se do menšího rozměru vešlo více obsahu.

Jejich rozvržení pro mobilní zařízení přináší design v jednom sloupci a soustředí se na to podstatné, jako je historie posledních nákupů, spíše než na ikony odkazů na různé sekce z jejich hlavní domovské stránky.

4. YouTube

YouTube na mobilu, tabletu a notebooku

Základem designu domovské stránky YouTube je flexibilní mřížka videí, která jsou relevantní pro každého uživatele. Na tabletech se počet sloupců v každém řádku sníží na tři. Na mobilních zařízeních je redukován na jednosloupcový design.

Mobilní verze také přesouvá hlavní nabídku do spodní části obrazovky, blíže k palcům svých uživatelů chytrých telefonů. Tento jednoduchý krok zlepšuje navigaci a UX.

5. Online magazín: Wired

Přístup časopisu Wired k responzivnímu webovému designu se zaměřuje na implementaci jednosloupcového rozvržení na všech menších obrazovkách, počínaje tablety (zde je namístě upozornit i na to, že podíl přístupů na weby z tabletů bývá v řádech jednotek procent).

Jedná se o základní rozvržení, které však usnadňuje upozornění uživatele na hlavní články a jejich CTA pro přihlášení k odběru.

Na závěr

Responzivní webový design se skládá z mnoha různých prvků. Bez základních znalostí HTML a CSS se můžete snadno dopustit chyb.

Ale díky seznámení se s různými stavebními prvky, analýze příkladů pomocí nástrojů pro tvorbu webových stránek a průběžnému testování pomocí ukázkového kódu byste měli být schopni vytvořit responzivní webové stránky bez větších problémů.

Zkuste také: Kurz responzivity na w3schools.com