Lekce 1 - Úvod do responzivního webdesignu
Vítejte u kurzu, kde se naučíme uzpůsobit weby pro mobilní zařízení.
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.
Náš první responzivní web
Vytvořme si nyní úplně jednoduchou stránku bez jakéhokoli layoutu, která bude obsahovat zatím jen odstavec textu. Kód HTML stránky bude následující:
<!DOCTYPE html> <html lang="cs"> <head> <meta charset="UTF-8"> <title>Neresponzivní web</title> </head> <body> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec condimentum dignissim varius. Phasellus lobortis libero vestibulum augue commodo, vitae finibus orci varius. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec a lacus eget felis molestie congue. Donec sed fermentum ex. Praesent eu ultrices sem. In in ante pellentesque, hendrerit nibh eu, accumsan ex. Nunc commodo viverra elementum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nullam in feugiat nunc. Ut bibendum lectus sollicitudin finibus aliquam.</p> </body> </html>
A výsledek v prohlížeči:
To zatím není nic nového, že?
Simulace mobilního telefonu
Pojďme se na stránku podívat na mobilu. Nemusíme hned sahat do kapsy, lze to i mnohem snadněji. Když zapneme pomocí klávesy F12 vývojářské nástroje v našem prohlížeči, nalezneme zde ikonku, která umožňuje nasimulovat jak bude web zobrazený na mobilu (v Chrome je to tato):
Po stisknutí se text zobrazí korektně i na mobilním zařízení:
Děje se tak z důvodu, že jsme zatím neurčili žádnou velikost žádného prvku. Pojďme pod text vložit odznáček "Bestseller!" o velikosti 100x100px:
<p style="background: blue; color: white; border-radius: 999px; width: 100px; height: 100px; vertical-align: top; display: flex; align-items: center; justify-content: center; ">Bestseller!</p>
Výsledek v mobilní verzi prohlížeče:
Vidíme, že odznáček je z nějakého důvodu miniaturní, i když na desktopu vypadá normálně. Jak je to jen možné?
Abychom problém pochopili, podívejme se jak to s těmi pixely na displeji vlastně je.
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:
Tato vyšší rozlišení jsou často označována číslem a
písmenem x (jako kolikrát je pixel menší než býval).
Většina mobilních zařízení má rozlišení 2x a
více. Co se týče desktopů a tabletů, ty jsou
povětšinou stále na 1x, někdy 2x. Možná vám již
svítá, kde je problém.
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"/>
Můžeme se podívat na nový výsledek v simulátoru webového prohlížeče:
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.
Dále v kurzu si ukážeme, jak pro různé šířky stránky přizpůsobit její obsah, zejména obrázky a navigaci.
V příští lekci, Responzivní webdesign pomocí Media Queries v CSS 3, se naučíme používat media queries a vysvětlíme si proč jít směrem k mobile first přístupu.
