Výraz Responzivní design je poměrný mladý. Poprvé ho použil americký programátor Ethan Marcotte v článku na blogu A List Apart 25. května 2010.
Během pouhých 3 let vstoupil do povědomí většiny internetových vývojářů a stal se z něho de facto standard současných webů.
Uživatelé internetu v dnešní době nepřistupují pouze prostřednictvím svého počítače.
Masivně narostlo množství uživatelů přistupujících k webových stránkám skrze mobilní telefony a tablety. Pomalu internet vniká i do obýváku, kde jsou opět jiné – specifické požadavky na zobrazení webů.
Některé zdroje uvádějí dokonce až 50 % přístupů k internetovým stránkám přes mobilní telefony. Dle našich statistik se toto číslo pohybuje okolo 20-30%.
Lidé si rychle zvykají informace hledat kdykoli a kdekoli se zrovna nacházejí a mobilní telefon s datovým tarifem tomuto účelu věrně poslouží. Nezdráhají se dokonce i nakupovat. Proto se přizpůsobení webových stránek těmto zařízením stává nutnosti, pokud na internetu hodláte vydělávat.
ZÁSADY RESPONZIVNÍHO DESIGNU
Responzivní webdesign spočívá v dodržování několika pravidel.
- Šířka objektů v procentech – u responzivního designu se nezapisuje šířka objektů v pixelech, ale v procentech. Tento krok je logický vzhledem k tomu, že web není určený pro konkrétní rozlišení, ale má se přizpůsobit rozlišení koncového zařízení. Šířka vnějšího okraje webu se určí procentem z celkové šířky prohlížeče a všechny vnořené elementy pak mají procentuální šířku rodičovského elementu, ve kterém se nacházejí.
- Rozložení elementů na stránce – každá webová stránka se skládá z bloků. V první úrovni se jedná o hlavičku, tělo a patičku. Tyto pak dále obsahují např. hlavní menu nabídku, přepínač jazyka, hlavní obsahový blok, postranní panel atd. Rozmístění těchto bloků musí reagovat na rozlišení prohlížeče. Typicky bloky, které jsou na počítači zobrazeny vedle sebe se na mobilním telefonu zobrazí pod sebou. Uživatel tak nemusel web posouvat do stran, ale jen nahoru a dolů, jak je zvyklí.
- Velikost obrázků – obrázky jsou z pohledu různých zařízení s různě kvalitním připojením k internetu problematické. Na počítači s rychlým připojením budete chtít zobrazit obrázek ve vysokém rozlišení. Naopak, na mobilním telefonu s horším připojením a datovým limitem budete vyžadovat zobrazení malý obrázků. Tento obrázek musí být zmenšen již na serveru, aby nedocházelo k nadměrnému přenosu dat. V praxi se pak používají různé velikosti obrázku s popisem rozlišení a prohlížeč si jednoduše sám vybere, který obrázek ze serveru stáhne.
- Ovládání webových stránek – ač tento faktor úplně nespadá do kategorie responzivního designu, může se na účinnosti webových stránek projevit nejvíce. Ať se jedná a nemožnost ovládat některé prvky webu na dotykovém zařízení nebo o problematickém stisknutí tlačítka z důvodu jeho malé velkosti. V obou případech se jedná o hrubé chyby způsobující odliv zákazníků ke konkurenci. Tento nešvar je řešitelný v celku jednoduše, použitím nativních ovládacích prvků.
MOBILNÍ VERZE WEBU
Další možností jak přizpůsobit prohlížení webových stránek mobilním zařízením je vytvoření tzv. mobilní verze webu. To je de facto úplně oddělená část stránek. Typicky se umisťuje na subdoménu m.domena.cz. U responzivního designu prohlížeč stáhne ze serveru vždy stejnou stránku, která pouze jinak zobrazuje. Oproti tomu u mobilní verze stránek se kód, který vám server poskytuje, může výrazně lišit. Chybí tak většinou některé funkce.
Toto řešení je vhodné použit u hodně složitých webů, jako jsou zpravodajské deníky, složitější aplikace, které by bylo velmi obtížné vytvořit responzivně. Vždy je potřeba si dopředu definovat jaké funkce bude mít klasická, tzv. desktopová verze stránek a jaké bude mít mobilní.
Problém rozdělení na desktopovou a mobilní verzi však většinou není dobré řešení, protože není vhodné např. pro tablety nebo phablety, tedy „přerostlé“ mobilní telefony.
Množství typů zařízení stále narůstá a správný web by měl být použitelný jednoduše na všech zařízeních. Jedině tak nebude přicházet o zákazníky.