Google Trends pro „responsive design“

Na následujím grafu je možné si prohlédnout hledanost pojmu na google v celosvětovém měřítku.

obr. 2: Google Trends pro „responsive design“

Jak je možné na grafu vidět, pojem „responsive design“ se poprvé objevil někdy v průběhu roku 2010. Vymyslel ho Ethan Marcotte a poprvé ho použil v článku na alistapart.com.

Viewport, Rozlišení a velikosti obrazovek

Existuje celá škálá různých rozlišení, které nemůžeme ne-responsivním webem pokrýt. V této souvislosti je vhodné odbočit a zmínit, že mobilní prohlížeče toto jsou schopné toto omezení (když to není tvůrcem stránek znemožneho, viz níže) obejít. Celé to souvisí s tzv. viewportem. Mobilní prohlížeč se pro stránku může tvářit jako zařízení s mnohem větší velikostí obrazovky, stáhne si danou stránku k sobě a poté s ní pracuje jako s velkým obrázkem. Je možné se na ní tedy libovolně pohybovat a přibližovat si ji.

Využití viewportu v kontextu responsivního designu vypadá následovně:

<!-- html hlavicka -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Není už žádoucí, aby se uživatel musel přizpůsobovat stránce, když se stránka přizpůsobí uživateli. Jedná se zamezení nežádoucí simulace viewportu a namísto toho se použije viwport reálný. Další informace je možné nalést v již starším článku Viewport: Jak velkou vykreslí stránku mobilní browsery (2010).

Významná (hraniční) rozlišení ^[1]

V následující tabulce je přehled hraničních rozlišení, které jsou ve webovém světě významné.

tab. 1: Ethan Marcotte, Responsive Web Design (2011), str. 114

Ke srovnání je možné uvést, že např. iPad 3 disponuje rozlišením 2048×1536 pixelů.

V této kapitole budou nastíněny základní principy a myšlenky, se kterými si pro začátek jednoznačně vystačíte.

Základní principy a myšlenky pocházejí ze dvou knížek z edice www.abookapart.com. První z nich, Responsive Web Design (Ethan Marcotte, zmíněný výše), popisuje základní pilíře responsivního webu. Druhá, Mobile First (Luke Wroblewski), říká, na co by se mělo myslet jako první při návrhu webu.

1. Responsive Web Design ^[1]

Existují tři základní pílíře, kterým je dále věnováno více prostoru:

1. Flexibilní layout, který je založený na mřížkách
2. Flexibilní obrázky
3. Media queries

Flexibilnost prvků

Hned do začátku bych rád poznamenal, že nás zajímá obecně pouze šířka width, výšku height necháváme fixní.

Jedno z nejdůležitějších slov, na které je zde možné narazit je flexibilní. Jestli-že chceme responsivní web, tak musí být v podst. veškeré jeho podprvky – šířka kontejnerů, obrázky, margin, padding, velikost písma – flexibilní. Co to ve skutečnosti znamená? Znamená to, že si bude potřeba dobře zapamatovat následující výraz:

cíl / kontext = výsledek

Tento výraz můžeme přepsat jako:

velikost_vnitrniho / velikost_vnejsiho = velikost_vnitrniho_v_procentech_nebo_em

Příklad, pevná šířka kontejnerů:

/* fixed-style.css */

#page {
  width: 1140px;
}

#left {
  width: 200px;
}

#right {
  width: 940px;
}

Předchozí příklad bychom přepsali takto do responsivního zobrazení:

/* responsive-style.css */

#page {
  /* kontext */
  width: 100%;
  max-width: 1140px;
}

#left {
  /* cil */
  width: 17.54385965%;   /* 200 / 1140, nezaokrouhlujeme! */
}

#right {
  /* cil */
  width: 82.45614035%;   /* 940 / 1140, nezaokrouhlujeme! */
}

Procentuální velikost šířky se nezaokrouhluje! Dále je možné pozorovat, že nejvnější prvek page (kontext kontextů) má nastavenou maximální šířku max-width.

S určením velikosti písma se postupuje obdobně. Jak popisuje E. Marcotte, za základ nám poslouží např.:

/* responsive-style.css */

html {
  font-size: 100%;
}

což odpovídá ve většině prohlížečů 16px – a to je právě náš kontext!

Tedy namísto:

/* fixed-style.css */

em {
  font-size: 12px;
}

použijeme:

/* responsive-style.css */

em {
  font-size: 0.75em;   /* 12 / 16 */
}

Nakonec zmíním ještě obrázky, které by se mohly řešit následně:

/* responsive-style.css */

img {
  max-width: 100%;
}

Zde je však nutné podotknout, že tím neřeší skutečná velikost obrázku (myšleno jako velikost v KB, kterou zabírá daný obrázek na disku). Poté nám může, resp. nastane případ, kdy je obrázek na 10 % své původní velikosti, ale uživatel si do svého mobilu stahuje zbytečně velký soubor. Více naleznete např. v článku: Co to znamená, když se řekne responsivní web – úvod do responsivního webdesignu (2012) na programujte.com.

Poslední věc, kterou je třeba u flexibilnosti zmínít, je layout založený na mřížkách. Pro nejrychlejší pochopení budeme celou věc ilustrovat na frameworku foundation, který používá 12-sloupcovou mřížku:

obr. 3: Responsivní layout založený na 12 sloupcích, zdroj: foundation.zurb.com.

Takto by vypadalo html při dvou sloupcích (o velikostích 4/12 + 8/12).

<!-- responsive-layout.html -->*/

<div class="container">
  <div class="row">
    <div class="eight columns">
      Eight columns
    </div>
    <div class="four columns">
      Four columns
    </div>
  </div>
</div>

Celé to funguje tak, že používáte výše zmíněnou hierarchickou strukturu: container jako jediný všeobalující prvek, který obsahuje řádky row. Těchto řádků budete mít na webu několik a každý takový řádek bude obsahovat sloupce columns. Počet sloupců musí být v každém řádku takový, abyste dostali po sečtení jejich jednotlivých velikosti číslo 12.

Následující ukázka zobrazuje, co se bude dít při zmenšování velikost obrazovky. Proč se tak děje je popsáno níže v sekci Media Queries:

obr. 4: Reakce layoutu na zmenšení velikosti, zdroj: foundation.zurb.com.

Nyní se přesuneme k druhému bodu této části – media queries.

Media queries

Doposud byly nastíněny fantastické myšlenky responsivního designu. Když se nad tím ale zamyslíme, není tam nic, co bychom nemohli využívat, resp. nevyužívali, přece již dříve. A navíc má dosavadní řešení vážný nedostatek – uvažme, jak se nám zmenšují jednotlivé prvky stránky spolu se zmenšováním velikosti okna prohlížeče. Ve chvíli, kdy dojde již k velkému zmenšení, tak je např. náš sloupec left prakticky nepoužitelný, protože je zkrátka již příliž úzký a písmo se stává nečitelným.

obr. 5: Příliš velké zúžení sloupce.

V této situaci by bylo vhodné, aby se stránka zmenšovala, tak jak doposud, ale při určité hraniční velikosti (těchto hraničních velikostí může být i více) se nám přeorganizuje např. tak, že sloupec left již nebude vlevo, ale bude nad sloupcem right a oba budou mít width: 100%.

obr. 6: Správné přeskládání stránky.

Právě media queries nám umožňují zjišťovat velikost okna (dále také orientaci displeje, barevnou hloubku, atd.) a podle toho nastavit různé styly!

/* media-queries.css */

@media screen and (max-width: 1200px) {
  /* styly pro velikost 1200 nebo mene */
}

@media screen and (max-width: 800px) {
  /* styly pro velikost 800 nebo mene */
}

Podpora prohlížečů ^[3] pro media queries není automatickou záležitostí. Všechny nové prohlížeče media queries podporují. U těch starších se může sáhnout k java-sriptovému řešení: respond.js, media-queries.js.

Verze Internetu Exploreru menší než 9 media queries nepodporují, ale:

/* media-queries.css for IE < 9 */

<!--[if lt IE 9]>
	<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

2. Mobile First ^[2]

<< Tato část je v přípravě >>

Říkáte si při pohledu na výše uvedené informace, že se jedná o příliš komplexní řešení na to, abyste se s ním sami zabývali? Nebo chcete řešení, které se bude s postupem času přizpůsobovat potřebám? Stejně jako v jiných oblastech, tak i zde je k dispozici velká škála již hotových, nebo jen předpřipravených, řešení.

V následující části pouze nastíníme některá z možných řešení, které stojí určitě za zvážení.

Frameworky pro vlastní weby

Twitter Boostrap

Tento projekt patří mezi jeden z nejznámějších ve webdesignu obecně. Jedná se o kolekci nástrojů, prvků – formulářů, tlačítek, progres barů, apod – pro vytváření webových stránek. A co je důležité? Obsahuje už i podporu pro responsivní design! Mnoho z dalších projektů z Twitter Boostrap vychází.

Licence: Apache License, Version 2.0

twitter.github.com/bootstrap/

Foundation

Jedná se o další framework, který umožňuje rychlé a snadné vytváření webových prezentací, na které jsou kladeny požadavky responsivního designu. Tento framework obsahuje také celou řadu zajímavých prvků. Mimo klasických formulářů a tlačítek se jedná např. o Orbit nebo Reveal. Stejně jako na Twitter Boostrap, tak i na tomto frameworku je postavena celá řada dalších projektů. Foundation můžu jednoznačně doporučit jako výchozí bod pro rychlé vytvoření středně-malého webu.

Licence: MIT

foundation.zurb.com

Foundation vs. Twitter Boostrap: Bootstrap vs Foundation, or “Battle of the Frameworks” (Updated)

Responsivní WordPress

Jestliže usilujete o rychlé a snadné zprovoznění responsivního webu téměř bez jakýchkoliv znalostí, či stálou podporou ve formě aktualizací, tak je na zcela místě se zvážit použití jednoho z nejznámějších redakčních systémů – WordPressu. Přesněji řečeno WordPressu s responsivní šablonou, kterých se na internetu nachází relativně velký počet.

• 50 Best Responsive WordPress Themes (50 nejlepších responsivních šablon pro WordPress)
• 20 Free Responsive WordPress Themes (20 responsivních šablon pro WordPress zdarma)

Jeden z dalších příkladů, které je možné uvést je, možna trochu atypický, BoostrapWP.

BoostrapWP

Jedná se šablonu pro WordPress, která je založena na Twitter Boostrap. Právě tahle šablona byla zvolena jako pilíř pro tento blog.

Licence: Apache License, Version 2.0

Nyní se pokusíme nastínit, jak je to s aktuálním nasazením responsivního designu v podnebí České Repulibky.

Je důležité se zamyslet:

• Na jakou cílovou skupinu vaší webovou prezentací směřujete? 
• Jak moc je pravděpodobné, že by potencionální zákaznící chtěli přistupovat na danou stránku z mobilních zařízení?
• Do jaké míry musíte být zpětně kompatibilní?

Zodpovězení těchto otázek není mnohdy snadné, jedná se ale o jedny z klíčových otázek, které by měly rozhodování usnadnit.

Přesto všechno fixním webem ještě jistou dobu jednoznačně nic nepokazíte (a pokud byste pokazili, tak máte pravděpodobně nyní mobilní verzi na m.vasedomena.cz).

Na druhou stranu je nutné podotknout, že nasazení responsivního designu nemusí vždy nutně znamenat zvýšení výdajů.

• mediaqueri.es – galerie
• responsive.is, responsinator.com, screenqueri.es – testování vzhledu dané stránky o velikostech různých zařízení

• [1] Ethan Marcotte, Responsive Web Design (2011)
• [2] Luke Wroblewski, Mobile First (2011)
• [3] Responsive Design in 3 Steps (en)