Responsivní design webu přez CSS

optimalizace stránky pro mobilní zařízení

V dnešní době je již nutné, aby všechny weby byly takzvaně responsivní. Pojem responsivní znamená, že dané weby dokážete zobrazit na mobilním zařízení (mobilní telefon, tablet, atd..) a pohybovat se v nich aniž by jste musely web různě "zoomovat" a snažit se trefit do miniaturních odkazů atd...
Navíc Google již začíná responsivitu vyžadovat, kdy má již web pro kontrolu, zda je daný web responsivní. Je tedy otázkou času než začne za "ne-responsivní design" trestat nejspíše formou snížením vyhledávacího ratingu stránek (formu trestu odhaduji).

Je několik cest jak ze řešit, aby Váš web byl dobře použitelný na full hd monitoru, ale i na malém telefonu.

1. Vytvořit 2 verze webu, kdy první je pro stolní počítače a druhá je pro mobilní zařízení (běžně například m.nazev_webu.cz). Zde je hned několik problémů:
- Drobnou úpravu například telefonu neprovedete v jedné šabloně webu, ale ve dvou. O redesignu ani nemluvím.
- Musíte určit kdy zobrazíte "mobilní verzi" a kdy tu "klasickou". Navíc každý mobil má jiné rozměry, tudíž kolik má být ta mobilní verze? Pro tablety nebo pro malé telefony na výšku? Nebo full hd tablety?
Na tyto otázky lze velmi špatně odpovědět.

2. Pomocí Javascriptu, ale s tím je hodně práce (musíte vědět o každém prvku jak je velký, totéž o daném zařízení, do toho musíte řešit i změnu rozměru například prohlížečového okna atd..) a stejně přez ten Javascript budete ovlivňovat ve finále CSS webu. Tudíž co jde přez CSS udělejme přez CSS a Javascript použijme maximálně jako nějakou "berličku", pokud by přez CSS bylo něco velmi složitého.

=> 3. přez CSS respektive CSS3
Touto cestou vcelku jednoduše odladíte web pro jakákoliv zařízení od největších monitorů po nejmenší telefony.
Klíčem jsou takzvané "CSS3 Media Queries", které dokáží rozpoznat rozměr uživatelovy obrazovky.
Základem je, že nakódovaný web pro mobily postupně "roztahujeme" na větší rozměr a jakmile se někde rozhodneme, že by již bylo lepší, aby daný výpis neměl 1 položku na řádek, ale 2, tak v této šířce potřebujeme provést změnu CSS. V této chvíli použijeme zápis "CSS3 Media Queries" a to například:

@media (min-width:450px) {
  .polozka_vypisu{ width: 50%; }
}

Tímto obratem říkáme, že pokud je šířka zařízení vyšší než 450px tak se třída ".polozka_vypisu" "dostylujeme" a upraví se tak šířka na 50%. (v základním CSS bychom měli width: 100%;) = dohromady by tato část vypadal třeba takto:

.polozka_vypisu{ float: left; background-color: red; margin: 10px 0px 10px 0px; width: 100%; color: blue; } //zakladni styl teto tridy

@media (min-width:450px) { //pokud je zarizeni sirsi nez 450px tak dopln toto => pouprv vyse napsane styly
  .polozka_vypisu{ width: 50%; }
}

Podmínky, kdy se má jaký styl/styly upravit mohou být různé a to:

@media (max-width: 100px) { … } //vse pod sirku 100px se dostyluje
@media (min-width: 100px) { … } //vse nad sirku 100px se dostyluje
@media (max-height: 100px) { … } //vse pod vysku 100px se dostyluje
@media (min-height: 100px) { … } //vse nad vysku 100px se dostyluje
@media screen and (min-width: 400px) and (max-height: 600px) { … } //vse nad 400px sirky a zaroven pod 600px vysky se dostyluje
@media (orientation: portrait) { ... } //zarizeni je "na vysku"
@media (orientation: landscape) { ... } //zarizeni je "na sirku"

Jak vidno web lze psát i od "full hd vzhledu" k "mobilu" i naopak. Doporučuje vycházet z webu pro mobilní zařízení, aby "responsivní CSS" (= obsah těch daných "@media") raději "zatěžovala" uživatele na stolním počítači (očekáváme kvalitnější/rychlejší internet a žádná datová omezení) jak uživatele na telefonu (očekáváme pomalý internet a možná dokonce i přez datové služby, kde by klient mohl zbytečně platit za vyšší obnos stažených dat z našeho webu).
Web lze ladit jak s ohledem na výšku zařízení, tak i na šířku. A celé to je vlastně pouhé "dostylovávání" nějaké třídy jak kdyby jste napsali na řádek 1, že daný blok bude modrý a pak na řádku 10 napsali, tomu samému bloku, že bude červený, tak výsledek bude červený blok.

Postup tvorby responsivního webu tedy bude:
1. Grafický návrh webu
Zde je nutné, aby kodér spolupracoval s grafikem. Ne každý web lze jednoduše poupravit, aby ze stejného kódu fungoval jak na zařízení o šířce 1920px, tak na 320px. Absolutním základem je, že například výpis s 4 položkami na řádek zužuje šířky těchto bloků a na určité šířce řekneme, že zužovat již nelze a změníme počet položek na řádek ze 4 na 2. => kód je stejný jen upravíme v dané situaci šířku bloků. Je nutné tedy grafika u těchto situací "hlídat", aby nevymýšlel nějaké obraty, které by znamenaly přeskládání kódu a kodér tedy nebyl nucen kód duplikovat, či zbytečně zesložiťovat.

2. Samotné kódování webu
Doporučuji veškerý kód psát "v procentech". Proč? Pokud na mobilu vyjde šířka bloku na 320px a mi napíšeme "width: 320px;", tak jak bude těchto "320px" vypadat na zařízení, které má šířku 340px? Jak na 540px atd... ? Nejspíše špatně tudíž budete muset řešit všechana zařízení a optimalizovat pro ně. Když použijete procenta, tak napíšete, že daný blok má šířku "width: 100%;" a rázem neřešíte zda jste na zařízení s 320px, nebo 330px, nebo 540px. Pořád bude mít blok šířku 100% daného zařízení. Obrat, že dané bloky budou vedle sebe 2 je poté "jen" přepis z "width: 100%;" na "width: 50%;" atd.. Tak jako tak ten kód z pixeů na ty procenta budete nuceni upravit, tudíž proč vše ladit pro pixely a pak to vše postupně přepisovat na procenta? Tudíž proč dělat dvojitou práci? Pište to rovnou v procentech a je to.

3. Další krok je doplnění metatagu do hlavičky pro možnost správně využít "CSS3 Media Queries"
Jde vlastně o to, že web se bude zobrazovat dle šířky daného zařízení a ne dle svého obsahu. Tudíž nebude vracet že jeho obsah je 1920px široký, ale přebere si šířku z daného zařízení a u mobilu vrátí třeba 320px na což nám zareagují zmiňované "CSS3 Media Queries". Metatag zní:

4. Samotné "responsivní CSS styly" s využitím "CSS3 Media Queries"
Ve většině případů postačuje tvořit responsivitu webu pouze s ohledem na šířku zařízení.

Několik ukázek jaká šířka je +/- jaké zařízení:
@media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

Není nutné se těchto hodnot držet. Pokud s ohledem na grafiku potřebujete upravit počet položek výpisu na 700px tak proč se rozhodovat mezi 641px nebo 961px a raději nenapsat 700px? Tudíž výše zmíněné hodnoty jsou spíše informativní a řekněme běžné, tudíž v jejich okolí je třeba se na dané zařízení trošku lépe zamřit ať tam ten web vypadá dobře.

5. test na několika reálných zařízeních
Určitě několik zařízení s Androidem a hlavně neopomenout iOS (zde hlavně v prohlížeči Chrome, který má v kombinaci s iOS hodně much)

6. test zda Google považuje Váš web za "mobile friendly"
odkaz na testovací web od Google

<< zpět