1. díl - Mobile first responzivní design

HTML a CSS Responzivní webdesign Mobile first responzivní design

Pro tento článek budeme lehce využívat znalostí HTML 5, CSS 3 a CSS preprocesoru Sass. Pokud tedy jeden z uvedených jazyků neznáte, bude pro vás určitě lepší, pokud se jej před přečtením tohoto článku naučíte z místních tutoriálů.

Webové stránky a mobilní zařízení

Každodenní život si většina z nás (hlavně tedy neITáků, že...) bez mobilu nedokáže představit.

Běžný den pro "závisláky s mobilofóbií" 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.

Podle statistik zhruba 25% uživatelů navštěvuje weby právě z mobilních zařízení. Což bychom tedy rozhodně jako vývojáři webů měli bráti v potaz. 25%, což určitě sami přepočítáte na 1/4, je prostě ohromná masa lidí.

Vývoj používání prohlížečů na zařízeních – porovnání roku 2012 a 2013. Obrázek z http://code9media.com/mobile

Vývoj používání prohlížečů na zařízeních - porovnání roku 2012 a 2013. Obrázek z code9media.com/mo­bile

Způsobů jak zobrazit na mobilních zařízeních webovou stránku je mnoho, ale ne všechny způsoby jsou dobré či jednoduše vhodné. Takové špatné řešení je to, když vytvoříme speciální subdoménu pro mobily - takhle vážně ne, nejsme v pravěku - použijeme media queries! Media queries využívají sérii pravidel, díky kterým si přesně určíme jaké styly pro jaké rozměry obrazovky použít. Možná to zní složitě, ale já vás do toho dostanu!

Responzivní web design

Pojem responzivní design označuje tvorbu stránky, která se dokáže přizpůsobit velikosti displeje zařízení podle určitého pravidla s využitím media breakpointů.

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.

Přístupy

K responzivnímu web designu můžeme přistupovat pomocí dvou základních metod.

Desktop first

Když se řekne responzivní web, většina z vás si představí web vytvořený pro desktopy, který se následně upraví pro mobilní zařízení. Takto začínal každý - je to lehké a poměrně efektivní. V podstatě tvoříme normální stránku, tak jako jsme se to učili, a přenastavujeme elementy podle pravidel pro menší šířky.

Metoda má však jeden zásadní problém. Změna rozvržení webu pro různá zařízení je dost složitá a vyžaduje přepisování velké části kódu - a my určitě nechceme psát hodně kódu, že? Navíc často dochází k nekorektnímu zobrazení. Však to znáte - něco se zobrazí dobře, něco zase ne - děs a hrůza.

Mobile first

Mobile first je metoda tvorby webu, která vyžaduje trochu jiné myšlení. Metoda využívá v podstatě opačného postupu, než-li desktop first. Z toho tedy vyplývá, že se začíná od zobrazení pro mobily. A věřte nebo ne, je to paráda.

Mnoho lidí, zvláště pak začátečníků, metoda odrazuje kvůli její 'vyšší náročnosti' na pochopení. Nesmysl, jen jsou líní a nechce se jim přemýšlet.

Mobile first je výhodná metoda - ušetří mnoho času a hlavně napíšete mnohem méně kódu, který se tak stane i výrazně přehlednějším.

V této metodě je také výhodné používat CSS preprocesory, které díky zanořování vše ještě více usnadní. Media queries jednoduše vložíme do bloku selektoru pro daný element a vše máme hezky přehledně u sebe.

Breakpointy

Velmi doporučuji media breakpointy nikdy nedefinovat specificky pro určité šířky. Vždy volte breakpointy tak, jak je to vhodné pro daný element. Stránka se tak bude zobrazovat daleko lépe - přeci jen menu se bude muset přeskupit jindy než obsah stránky, nebo ne? :)

Viewport

Abychom vůbec mohli webové stránky na mobilních zařízeních spustit, budeme potřebovat upravit viewport. Ten nastavíme meta tagem, který vložíme někam do html hlavičky - úplně jedno kam. Ten v podstatě nastaví reálnou šířku displeje, kterou si internetové prohlížeče v mobilních zařízeních rády upravují podle sebe a také zakáže scalování, tedy oddalování a přibližování na mobilech.

Mým osvědčeným nastavením je toto.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Box-sizing

Využívejte vlastnost box-sizing. Dost vám to pomůže stylovat lépe. Nejčastěji se používá s hodnotou border-box, což nám mění rozpětí šířky elementu a počítá do něj i padding a border. Můžeme tedy třeba nastavit šířku na 500px, přidat padding či border a element bude mít konečně šířku opravdu jen 500px. Určitě vyzkoušejte a napište do komentářů, jak se vám vlastnost líbí.

A tady najdete jaké má využití - http://caniuse.com/#…

Porovnání

Pojďme si tedy ukázat krátké porovnání.

Budeme mít např. nějakou jednoduchou galerii, která bude pro počítače ve dvou sloupcích. Pro mobily poté budeme chtít jedno-sloupcové rozložení. (Pro jednoduchost zatím vynecháme různé marginy, paddingy a podobně.)

Metodou desktop first bychom napsali asi takovýto kód.

.galerie img {
  width: 50%;
  float: left;

@media screen and (max-width: 700px) {
  .galerie img {
    width: 100%;
    float: none;
  }
}

Metodou mobile first bychom napsali jen tento kód.

@media screen and (min-width: 700px) {
  .galerie img {
    width: 50%;
    float: left;
  }
}

Všimněte si, že u desktop first musíme několik stylů vyresetovat, což je občas při složitějších stylech poměrně obtížné a proto se nám u této metody může často design rozsypat kvůli zapomenutému stylu. U mobile first však nic resetovat nemusíme a jen jednoduše nastavíme nové hodnoty tam, kde je chceme.

Ukázka mobile first

Ukážeme si ještě jeden příklad, nyní pouze s metodou mobile first, jelikož věřím, že je to zatím nejefektivnější metoda pro stylování responzivních stránek. Proto se také ostatními metodami již zabývat nebudeme.

Vytvoříme si jednoduché styly pro stránku s elementy pro jeden článek a dva (na tom ale nesejde) postranní panely. Následující kód bude s využitím CSS preprocesoru Sass, ale věřím, že jej pochopíte i pokud preprocesor neznáte či nepoužíváte.

HTML kód by mohl vypadat nějak takto:

<div class="obsah">
  <article class="clanek"></article>
  <aside class="postranni-panel"></aside>
  <aside class="postranni-panel"></aside>
</div>

A CSS kód s využitím mobile fist by mohl vypadat nějak takto.

.obsah
{
  .clanek
  {
    box-sizing: border-box;
    width: 100%;
    height: 200px;
    margin: 20px 0;
    padding: 15px;
    background: blue;

    @media screen and (min-width: 900px)
    {
      width: 79%;
      float: left;
    }
  }

  .postranni-panel{
    box-sizing: border-box;
    width: 100%;
    height: 100px;
    margin: 20px 0;
    padding: 10px;
    background: red;

    @media screen and (min-width: 900px)
    {
      width: 19%;
      float: right
    }
  }
}

Vždy se snažte vytvářet samostatné komponenty, které nejsou závislé na konkrétním elementu či pozici v HTML stránce, ale to už trochu předbíhám a více si o tom popovídáme v článku o objektovém CSSku - na co se vážně těšte!

Při malé obrazovce dostaneme následující efekt.

Rozložení na malých displejích.

A při větší obrazovce dostaneme jinak rozmístěné elementy.

Rozložení na velkých displejích.

Vytvořil jsem online ukázku kódu výše, kterou můžete sami editovat a hlavně měnit šířku okna a sami si vyzkoušet, že nám kód opravdu funguje - a je zatraceně jednoduchý. http://sassmeister.com/…04d151843f95

Flexibilnost

V éře responzivních webů metodou desktop first jste mohli vidět spíše fixní hodnoty pro šířku v každém @media rozmezí. V metodě mobile first se však často využívá kombinace responzivnosti a flexibilnosti, tedy nenastavujete pevné hodnoty (px, em, rem...), ale využíváte především procent (%). (bavíme se především o šířce elementů)

V jednoduchosti: snažte se stránky dělat flexibilní od nejmenších displejů až po největší, kde, pokud to samozřejmě od webu chceme, používejte pevné hodnoty.

Závěr

Tvorba opravdu dobře responzivní stránky fungující napříč prohlížeči rozhodně není procházka růžovou zahradou. Snažte se tedy využívat efektivních cest a vyhněte se věcem, které vás omezují a znesnadňují vám práci.

Existují také takzvané CSS/front-end frameworky, jako např. Bootstrap nebo Foundation, které vám (mimo jiné) mohou pomoci ke snadnému responzivnímu designu - hledejte grid systém.


 

  Aktivity (1)

Článek pro vás napsal Honza Bittner
Avatar
Autor je vášnivý web developer. Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)

Jak se ti líbí článek?
Celkem (30 hlasů) :
4.633324.633324.633324.633324.63332


 


Miniatura
Všechny články v sekci
Responzivní webdesign
Miniatura
Následující článek
Responzivní menu

 

 

Komentáře
Zobrazit starší komentáře (3)

Avatar
Honza Bittner
Redaktor
Avatar
Honza Bittner:

Čeká to na schválení. ;)

Odpovědět 17.1.2015 20:26
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Odpovídá na Honza Bittner
Vojtěch Mašek (Woyta):

Hezký návod, také jsem chtěl na tohle téma napsat, ale předběhl jsi mě :)

Měl bych jen připomínku k viewport meta tagu, já používám tenhle zápis:

<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=no">

Initial scale jsem shledal nepotřebným, jelikož je defaultně 1, tak jsem ho vyhodil. Maximum scale zajistí mimo jiné to, že například na iPadu při orientaci na šířku bude šířka opravdu 1024px (tak jak to má být) a ne 768px což je jeho výchozí chování a narušuje to styl stránky (stránka si pořád myslí že viewport je 768 ale ve skutečnosti se roztáhne na 1024px a například obrázky, třebaže jsou uzpůsobené retina displejům, jsou rozmazané) zkrátka, nechová se to bez tohoto parametru korektně. Také zamykám zvětšování a zmenšování stránky, zastávám názor, že pokud je mobilní verze udělaná dobře, není potřeba zvětšovat.

Editováno 18.1.2015 1:42
Odpovědět  +3 18.1.2015 1:39
Výraz "to nejde" není v mém slovníku
Avatar
qwertyW
Redaktor
Avatar
qwertyW:

Mám dotaz, jak se rozezná mezi full hd monitorem a full hd telefonem?

Odpovědět 18.1.2015 7:50
Programuji, tedy jsem.
Avatar
Odpovídá na qwertyW
Vojtěch Mašek (Woyta):

Telefon může mít sice rozlišení Full HD, ale to proto že má retina panel, tzn. reálné rozlišení, které můžeš použít pro stylování bude 960 x 540px. A podle šířky 540px celkem spolehlivě rozpoznáš mobil. Responzivní design ale není jen pro mobily, základní myšlenka je taková, že se obsah přeskupí a vejde do jakékoliv velikosti obrazovky/okna.

Editováno 18.1.2015 23:09
Odpovědět  +2 18.1.2015 23:08
Výraz "to nejde" není v mém slovníku
Avatar
saqe27
Člen
Avatar
saqe27:

Vďaka za článok, krásne jednoduché ukážky, už sa teším na pokračovanie.

 
Odpovědět  +1 22.1.2015 9:24
Avatar
freearea
Člen
Avatar
freearea:

Ahoj Hobi,
tvoje články /příspěvky/ nemají chybu.
Držím palce,jen tak dál !!!

 
Odpovědět  +2 25.1.2015 10:45
Avatar
Honza Bittner
Redaktor
Avatar
Honza Bittner:

Článek mírně poupraven. :)

Odpovědět 29.3.2015 13:48
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
hruska-milan
Člen
Avatar
hruska-milan:

chci se zeptat jakej framework by jste použili na tvorbu webu - myšleno spíše na tvorbu šablony :)

 
Odpovědět  +1 10.4.2015 23:38
Avatar
tomasmanhal
Člen
Avatar
Odpovídá na hruska-milan
tomasmanhal:

Bootstrap a Foundation jsou asi nejrozšířeněj­ší...ale 100 lidí, 100 chutí. Za mě třeba Bootstrap ;-)

Odpovědět  +3 10.4.2015 23:48
Kdyby nám dodali k životu zdrojový kód, vše by bylo jednodušší...
Avatar
vojtanosek
Člen
Avatar
vojtanosek:

Tohle sem i bude hodit ale mně se web na androidu zobrazuje stejně jak na počítači :).

 
Odpovědět  -4 16.6.2015 7:29
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.

Zobrazeno 10 zpráv z 13. Zobrazit vše