Na mobilních zařízeních se zobrazuje stejná verze webu jako na běžném počítači, ale zobrazuje se jinak.
- Jinými slovy web na straně serveru nerozlišuje na jakém zařízení se bude web zobrazovat a všem typům zařízení posílá stejná data = stejný web.
- Tento „stejný“ web se ale na mobilu, tabletu nebo notebooku zobrazí jinak pouze na základě velikosti zobrazované plochy.
- Toto můžete vyzkoušet jednoduše v počítači tím, že zmenšíte šířku okna a uvidíte při zužování okna prohlížeče jak se web mění.
- Obvykle není možné mezi jednotlivými verzemi přepínat, ta správná přizpůsobená verze se zobrazí automaticky dle šířky okna prohlížeče.
Responzivní webové stránky – desatero
- Neopomeneš rozlišení všeho (= px -> %)
- Cti SEO svého i obsah svůj
- Nezabiješ (obsah)
- Urychlíš načítání webu svého
- Nevezmeš designéra svého nadarmo
- Pomni, aby font čitelný byl
- Bůh nejprve stvořil smartphone, pak tablet a nakonec desktop
- Požádáš testera svého
- Nesejdeš z cesty použitelnosti webu
- Neopomeneš zákazníka svého
Responzivní webové stránky – další tipy
- Výzvu k akci umístěte do nevýraznějšího místa stránky
- Ideálně hned na začátek, aby ji uživatel měl před očima hned při načtení.
- Používejte krátké a výstižné názvy položek navigačního menu
- Na mobilu je málo místa, ale uživatel vždy potřebuje jasně vědět, kam ho chcete navést.
- Zvolte co nejjednodušší design
- Zbavte se nepotřebného obsahu a zjednodušte stránku, jak jen to jde –minimalistický design je lehce ovladatelný a uživatel se v něm na malém prostoru dobře orientuje.
- Nepoužívejte vyskakovací okna
- I malé vyskakovací okno je pro mobilního uživatele noční můrou. Mobilní prohlížeče je většinou nepodporují a jejich zobrazení brání uživateli v pohybu na stránce.
- Omezte pole, do kterých uživatel musí něco psát
- Vepisování údajů do políček není na mobilu vždy nejsnazší. Pokuste se nahradit textové vstupy výběrem z nabídky možností, zaškrtávací nabídkou apod.
- Přidejte kotvu na začátek stránky
- Pokud máte na stránce více obsahu, je třeba na mobilu hodně scrollovat. Dejte uživateli možnost rychle se vrátit na začátek stránky jednoduchým nenápadným tlačítkem.
Proč dělat responzivní weby?
Pojďme se pro začátek trochu namotivovat proč se vlastně snažit své webové stránky přizpůsobovat návštěvníkům s mobilními zařízeními. Důvody jsou vlastně hned 2.
Počet uživatelů
Podle statistik statcounter.com používá většina lidí k přístupu na internet mobilní telefon:
V roce 2016 překonaly mobilní zařízení v přístupu na internet klasické počítače. V lednu dokonce překročil podíl mobilních zařízení na internetu 55 % celosvětově. To znamená, že obrovská masa lidí k nám přijde s malou obrazovkou orientovanou na výšku a s korektním zobrazením našeho webu na svém mobilu jednoduše počítá.
Běžný den pro „závisláky na mobilech“ probíhá asi takto:
Přijdou do školy či do práce a téměř neustále někomu musí nutně psát, musí se nutně dívat na weby, což samozřejmě nepočká na jejich osobní volno. Z toho vyplývá, že je nutné weby optimalizovat, aby se na ně dostal každý kdykoli a odkudkoli.
Mobile-first indexing
Druhým důvodem je, že i Google již používá pro indexování mobilní verzi stránek (tzv. mobile-first indexing). Když nám nebude fungovat korektně, nebude se mu líbit a nebudou k nám dokonce tedy ani chodit lidé nebo jich bude chodit málo.
Responzivní webdesign
Způsobů jak zobrazit na mobilních zařízeních webovou stránku je mnoho, ale ne všechny jsou dobré. Takové špatné řešení je, když vytvoříme speciální subdoménu pro mobily – takhle vážně ne! Určitě nechceme vynakládat prostředky na udržování dvou webů, když můžeme udržovat jen jeden, stačí se v zásadě naučit jen pár moderních postupů.
Pojem responzivní design označuje tvorbu stránky, která se dokáže přizpůsobit velikosti displeje zařízení podle určitých pravidel definovaných nejčastěji pomocí tzv. breakpointů, které si představíme dále v kurzu.
Hlavně si tento pojem nespleťte s elastickými weby, což není nic jiného než šikovné využití procent pro šířku a pixelů, či jiných vhodných jednotek, pro maximální šířku.
Fyzický pixel vs. CSS pixel
Možná si pamatujete, že v minulosti se obrazovky fyzicky zvětšovaly. 14″ monitory nejprve měly rozlišení 640 bodů na šířku, poté 800, až jsme se dnes dostali na 1920 pixelů na 27″ obrazovce. Veškerá tato „zvětšení“ znamenala ale i zvětšení obrazovky, takže jeden pixel měřil přibližně pořád stejně.
Úsvit retina displejů
Toto trvalo až firma Apple přišla s novým trendem a to, že do stejného displeje vložila na šířku 2x tolik pixelů, celkově měl displej tedy 4x tolik bodů (2x tolik na šířku i na výšku), ale úhlopříčka displeje měla stále stejně palců. Těmto displejům od Apple se říká retina displeje. Daný zlom nastal mezi telefony iPhone 3 a iPhone 4 a odstartoval trend, ke kterému se připojily všechny ostatní výrobci mobilních zařízení. Na displeji mobilů dnes nejsou body již vidět pouhým okem a text se stal mnohem zaoblenější a lépe čitelný.
Abychom zobrazili bod stejně velký jako byl bod na displeji iPhone 3, musíme tedy na iPhone 4 rozsvítit vlastně 4 fyzické pixely:
CSS pixely
V naší ukázce Chrome emuluje displej s velkým počtem fyzických pixelů
na malém rozměru. My jsme určili, že náš obrázek má 100px šířku.
Jednotka px ve výchozím nastavení odpovídá 1
fyzickému pixelu! To proto, aby se staré webové stránky, které
počítají s velkým desktopovým displejem, zobrazily na telefonu
nerozsypané. Protože fyzických pixelů má mobilní displej na šířku
tisíce, zabírá náš 100px odznáček opravdu jen malou část.
Abychom problém opravili, musíme prohlížeči říct, že počítáme s tím, že displej je malý a pixel může být opravdu brán podle té původní normy, kdy jeden CSS pixel jsou např. rovnou 4 fyzické. Šířka obrazovky na mobilu potom měří obvykle něco mezi 320px-360px a náš odznáček bude vypadat normálně, protože bude mít reálně třeba 400px. Jak na to?
Viewport
HTML umožňuje nastavit tzv. viewport, což je vlastně rozměr
„okna“, kterým se na web díváme. Do hlavičky <head> si
přidáme následující <meta> element, kterým říkáme,
že nechceme CSS pixel převádět na pixel fyzický, ale chceme poměr 1:1:
<meta name="viewport" content="width=device-width, initial-scale=1"/>
1px nyní odpovídá asi 1/96 palce jak na počítači, tak na mobilním
telefonu. Odznáčky se na stránku vejdou asi 3, protože jeden má
100px a celá stránka má něco přes 300px.
Nesmíme zapomenout na to, že teď je ta samá stránka na telefonu široká jen 320px, ale na desktopu např. 1000px!. My na ní skoro nic nemáme, takže nám to nevadí, ale pokud bychom tam měli např. obrázek o šířce 640px, vytekl by na mobilu z displeje.
Zdroj: