Pouze tento týden sleva až 80 % na e-learning týkající se Pythonu
Aktuálně: Postihly zákazy tvou profesi? Poptávka po ajťácích prudce roste, využij podzimní akce 30% výuky zdarma!
October discounts

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. 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

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

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:

Your page
localhost

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):

Zobrazení webu na mobilu v Google Chrome

Po stisknutí se text zobrazí korektně i na mobilním zařízení:

Zobrazení webu na mobilu v Google Chrome

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:

Zobrazení webu na mobilu v Google Chrome

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:

1× vs 2× display

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:

Zobrazení responzivního webu na mobilu v Google Chrome

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.


 

Všechny články v sekci
Responzivní webdesign
Článek pro vás napsal Štěpán Zavadil
Avatar
Jak se ti líbí článek?
4 hlasů
Autor se věnuje tvorbě webových aplikací v JavaScriptu
Aktivity (2)

 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!