RESPONSIVNÍ WEBDESIGN - přizpůsobujeme se zařízením

Technologie se stále mění, a tak se i ve webdesignu začínají objevovat nové a nové věci. Jednou z aktuálních je tzv. "Responsivní webdesign". A o co přesně jde? To si řekneme v tomto článku.

Responsivní design - reaguje vždy na vás

Se stoupající oblíbeností mobilních zařízení jako jsou telefony a tablety, notebooky a netbooky nevyjímaje, bylo nutné začít přemýšlet, jak upravovat stránky tak, aby byly dobře čitelné i na těchto zařízeních. S notebookem samosebou není problém, pracuje stejně jako jakýkoli jiný počítač a tak stránky zobrazuje bez problémů, ovšem mobilní telefony a tablety mohou mít s velkou spoustou stránek, neoptimalizovaných pro mobilní zařízení, problémy. Brzy se tedy objevilo řešení, které by mohlo všemu napomoci.

Jako první termín responsivní web uvedl americký programátor Ethan Marcotte ve svém článku Responsive webdesign na svém blogu.

Struktura, flexibilita a hlavně pohodlnost

To vše se vám může vybavit, když uslyšíte "responsivní webdesign", protože o to tu hlavně jde. Responsivní design, jak už jsem zmínil, se snaží být co nejpřívětivější ke všem druhům elektronických zařízení, na kterých je možné webové stránky zobrazit.

Základem všeho není nic speciálního, je to klasické HTML a CSS, ovšem pouze jiná metoda kódování a hlavně se zde objevuje vlastnost Media Queries, kterou zahrnuje specifikace (o nich si něco povíme jindy) CSS3. Tato vlastnost zjišťuje, o jaký druh zařízení se jedná a podle toho stránku optimalizuje. 

To vše je možné shrnout do třech základních úrovní: flexibilní struktura, flexibilní obrázky a Media Queries.

1. Flexibilní struktura

Aby bylo možno dosáhnout flexibilní struktury, musíme zjistit, jaký je podíl dvou šířek objektů v procentech. Tedy objektu hlavního a objektu, který je do něj vnořen. Logicky nám tedy vzniká vzorec:

procentuální šířka = ( vnořený objekt / hlavní objekt ) * 100

- oba údaje v pixelech

Pro vysvětlení si tedy uvedeme malý příklad. Představte si, že chceme mít objekt s názvem například header, ve kterém se bude nacházet hlavička naší stránky a také vyhledávač- tedy search. Víme, že šířka header bude 1024px a šířka vyhledávače bude 200px. Nyní si tedy stačí jenom logicky dosadit do vzorce, který jsme si uvedli v odstavci předtím.

19,53125 = (200 / 1024) * 100

Mnohé z vás mohlo napadnout, jak se daná procenta zaokrouhlí. Kvůli absolutní přesnosti tedy je lepší, když se nezaokrouhlují vůbec.

2. Flexibilní obrázky

Flexibilní obrázky bychom mohli chápat velice podobně jako již zmiňovanou flexibilní strukturu. Platí tedy, že se obrázky budou stejně jako struktura přizpůsobovat vašemu zařízení. Toho docílíme tak, že neuvádíme šířku ani výšku v pixelech, ale v procentech:

img {  width: 100%;
          height: auto;
}


3. Media Queries

Poslední ze  tří částí správného responsivního webu jsou Media Queries, díky kterým lze měnit stylování dokumentu podle šířky obrazovky (displaye) zařízení. Poněkud laickým vysvětlením (zároveň asi nejlepším) se jedná o jakou si podmínku, kterou musí zařízení splnit. Pak se spustí určitý typ stylování. Nyní si představíme, že máme zařízení v rozlišení od  500px do 900px. Platí pak toto:

@media (max-width: 900px) and (min-width: 500px) {
                         #container1 { background: url(img/media.png); }
}