Lekce 1 - Úvod do responzivního webdesignu
Vítejte u první lekce on-line kurzu responzivního webdesignu. Společně si vysvětlíme, co znamená pojem responzivní design, proč je nezbytný pro moderní weby a jak navrhnout stránky, které se přizpůsobí všem zařízením (od mobilu až po širokoúhlý monitor).
V průběhu kurzu se krok za krokem naučíme vytvářet responzivní rozložení pomocí media queries, flexboxu a CSS gridu. Využijeme také frameworku Bootstrap a jeho grid systému k rychlé tvorbě profesionálního designu.
-
Responzivní menulocalhost
-
Tvoje stránkalocalhost
-
Horizontální skrolováníhorizontalni_skrolovani.html
Minimální požadavky kurzu
K úspěšnému absolvování kurzu jsou nutné znalosti nejméně v rozsahu našeho kurzu Webové stránky krok za krokem. Výhodou pak pro vás budou znalosti z kurzů:
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 dva.
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 63 % 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
Google od roku 2023 zcela přešel na tzv. mobile-first indexing, tedy indexování podle mobilní verze webu. Znamená to, že desktopová verze se už vůbec nepoužívá při zařazování do výsledků vyhledávání. Pokud tedy stránka na mobilu nefunguje správně (např. má skryté nebo chybějící prvky), Google ji může vyhodnotit jako méně kvalitní a snížit její pozici ve výsledcích.
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. Jelikož náš projekt bude
mít časem více souborů, vytvoříme si na něj prvně složku, např.
responzivni_web/. Ideálně v zálohované složce Dropboxu nebo ve
složce OneDrive, aby byla naše práce zálohovaná. Následně spustíme VS
Code a v této složce si vytvoříme nový soubor index.html. 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. Pomocí klávesy F12 zapneme 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>
Atribut style vytváří tzv. inline styl, kterým
můžeme přímo do HTML prvku zapsat CSS vlastnosti (např. barvu, velikost,
zarovnání, ...). V praxi se hodí hlavně na jednoduché ukázky, ale v
reálných projektech styly píšeme do samostatného CSS souboru.
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. Monitory o velikosti 14" měly nejprve rozlišení 640 bodů na šířku, poté 800 bodů, 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 do doby než Apple přišel 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á šířku
100px. 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 jako šířku viewportu má prohlížeč použít skutečnou šířku
zařízení v CSS pixelech (a nemá simulovat široký desktopový monitor):
<meta name="viewport" content="width=device-width, initial-scale=1"/>
Takto nastavený viewport zajistí, že šířka layoutu odpovídá šířce zařízení v CSS pixelech a naše prvky (např. odznáček o šířce 100px) budou na mobilu vypadat přirozeně velké. Můžeme se podívat na nový výsledek v simulátoru webového prohlížeče:
Jeden pixel 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.
Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.
Stáhnout
Stažením následujícího souboru souhlasíš s licenčními podmínkami
Staženo 3x (1.61 kB)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS
