Co byste měli vědět o responzivním designu

Responzivní design je ve světě webdesignu vcelku nový pojem – poprvé ho v 05/2010 ve svém článku pro A List Apart použil Ethan Marcotte.

Článek byl přeložen s laskavým svolením serveru webdesignerdepot.com. Originální znění článku (EN) naleznete zde: Must-know facts about responsive design.

TIP: Česká kniha o budování responzivních stránek.

V současnosti se dokonce polemizuje, zda lze s responzivním designem počítat i nadále či zda se jedná o marné naděje. To ukáže jen čas, nicméně jedno je jisté – responzivní design je tu proto, aby uživateli co nejvíce zpříjemnil práci.

Cílem responzivního designu je vytvářet stránky, které uživateli poskytnou lepší pocit z jejich prohlížení. Je pro něj typická jak snadná navigace a čitelnost, tak o minimální nutnost rolování a posouvání při změně velikosti okna prohlížeče. Lze ho využít na různých přístrojích od osobních počítačů až po chytré telefony.

Responzivní design je stále ještě v plenkách a jeho podstata tedy nemusí být zřejmá. Souvisí spíše s uceleným zobrazováním obsahu stránek na různých zařízeních anebo jde více o to, aby byly firemní stránky atraktivnější, pro uživatele příjemnější a vedly tedy k větším prodejům?

Mashable šel s kůží na trh a prohlásil rok 2013 rokem responzivního designu. Uvidíme, zda tomu tak bude, nicméně některé základní aspekty responzivního designu jsou trvalé standardy. A nyní se seznamme s nejdůležitějšími fakty.

Mezi responzivním designem a designem pro mobily je rozdíl

Snadno byste si mohli myslet, že responzivní design a design pro mobily je jedno a to stejné, ale není tomu tak. Jistě, responzivní design utváří webové stránky, které reagují na velikost prohlížeče a mohou být zobrazeny na mobilu, avšak responzivní design zcela souvisí s designem webového prostředí. Přistupovat k designu webu jako k designu pro mobily je už ze své podstaty omezující a neprospívá věci.

Nejefektivnější webové stránky mohou být prohlíženy na zařízeních s různým rozlišením a je jedno, zda se jedná o běžné rozlišení 1024 x 768 pixelů, o rozlišení 1920 x 1080 pixelů či cokoliv mezi tím. Stránky budou vypadat báječně i na tabletech (jak s „retina“, tak i běžnými displeji) a na chytrých telefonech. V případě, že by vývojář nahlížel na responzivní design výhradně jako na problematiku mobilních telefonů, mohl by ochudit uživatele o další možnosti.

Současně jsou mobily příhodných výchozím bodem pro práci na responzivním designu; je obvyklé, že se nejprve vytvoří návrh webu pro mobily s tím, že tento návrh se následně vylepšuje v souvislosti s požadavky na responzivní web. Mnoho designérů navíc zastává názor, že grafický návrh se snadněji rozšiřuje a doplňuje o nové věci v porovnání s opačným přístupem.

Prioritou je kvalita a velikost zobrazení

Pokud existuje pravidlo, kterého by se měli webdesignéři držet, je to to, které říká, že obrazová kvalita je mnohem důležitější než množství obrázků. Nekvalitní obrázek jednoduše nepůsobí pěkně v žádné velikosti a čas, po který se načítá, je téměř stejně důležitý jako jeho velikost. S touto skutečností budou souhlasit zejména uživatelé mobilních telefonů, jelikož mají k dispozici omezenou rychlost přenosu dat.

Jak na to mohou webdesignéři vyzrát? Jednoduše musejí najít tu správnou rovnováhu mezi dobou načítání stránek a kvalitou zobrazení, k čemuž slouží i úprava velikosti obrázku nastavením výšky a šířky v CSS, naprosté zamezení načítání obrázků v plné velikosti a optimalizace obrázků pro internetové prostředí. Je vhodné obrázek nejprve ořezat a uložit v nejmenší možné velikosti, ve které si stále ještě zachovává ostrost a vizuální kvalitu, a teprve poté ho vložit na webovou stránku.

Navštivte americký web společnosti SONY a povšimněte si, jak jsou všechny obrázky perfektně ostré bez ohledu na jejich velikost a jak rychle se při každém dalším obnovení stránky načítají. Nečekáte ani minutu a vše je opět neobyčejně ostré.

Designéři mají mnoho možností vložení obrázků do responzivního prostředí: mohou použít jen několik málo obrázků, mohou snížit počet obrázků na stránkách určených pro mobilní telefony a umožnit, aby se obrázky určené pro mobily samy překrývaly. Někteří vývojáři ale s ukrýváním obrázků nesouhlasí, protože uživatel musí obrázky načíst i navzdory tomu, že je vlastně neuvidí.

Responzivní sazba

Sazba by neměla mít univerzální velikost – font, který vypadá atraktivně na vašem stolním počítači, může být odpudivý na displeji mobilu. I typografie musí dodržovat pravidla responzivního designu.

Nejdůležitějším aspektem responzivní typografie je délka řádku. Kvůli snadné čitelnosti by měla být sazba optimalizována na šířku obrazovky a na základě zkušeností je ideální počet znaků na řádku u stolního počítače 50 až 75, u mobilu 35 až 50.

Sazba musí být snadno čitelná i ve vertikálním směru. Mnoho webových stránek nastavuje mezery mezi řádky u větších bloků textu na 140 % oproti výchozí hodnotě, u menších obrazovek by měl být meziřádkový proklad ještě o trochu větší.

Pozornost je třeba věnovat i specifickým druhům písma: módní fonty a nová písma vypadají vizuálně příjemně na velké obrazovce, ale na menší obrazovce může nastat problém s jejich čitelností. Tyto druhy písem potřebují dostatečné mezery. Pracujete-li s malým prostorem, raději použijte nějaké běžné bezpatkové písmo.

Na webové stránce http://hardboiledwebdesign.com si můžete povšimnout mnoha principů, které zde byly dodrženy a pomohly vytvořit kvalitní responzivní web. Na obrazovce stolního počítače si povšimněte délky řádků a použitého písma, které působí čistě a snadno se čte i přesto, že je použito více znaků než doporučených 50 až 70. A na mobilním telefonu se responzivní vlastnosti webu projeví ještě lépe – na displeji iPhonu 5 bylo na řádku přibližně 67 znaků oproti doporučovanému ideálu 35 až 50 znaků.

Nezapomeňte na navigaci

Na navigaci kladou uživatelé velký důraz a vývojáři by v této souvislosti měli brát v potaz uživatelský prožitek (user experience) návštěvnika webu. Má-li být pro něj navigace příjemná, musí být plynulá a efektivní.

Efektivní responzivní design věnuje zvýšenou pozornost konkrétní šířce okna použitého prohlížeče a web, který responzivní design využívá správně, rozloží, v závislosti na šířce okna prohlížeče, navigaci do různých míst. Výborným příkladem je navigace na webu společnosti Food Sense.

Bylo by chybou responzivního designu škálovat proporce navigace na zařízeních s většími obrazovkami.

Co si vzít z responzivního designu

Až opět zaslechnete webdesignéry, jak mluví o responzivním designu, budete vědět, že jim nejde jen o to, aby vytvořili web, který bude dobře vypadat a hladce fungovat na malých displejích mobilních telefonů. Budete vědět, že základem je vytvoření webů různých velikostí tak, aby jejich používání bylo pro uživatele co nejpříjemnější bez ohledu zařízení, na kterém si je bude prohlížet.

Responzivní design je pro většinu lidí, kteří si prohlížejí webové stránky, stále ještě poměrně novým konceptem a i z toho důvodu se často nemohou rozhodnout, co dělá responzivní design responzivním designem. Znamená to vidět vše náležitě na displeji mobilu? Souvisí to s časem načítání vysoce kvalitních fotografií, které budou potěchou pro oko? Jedná se o bezchybný design a snadno čitelné písmo?

Toto všechno a ještě více. Toto jsou základy responzivního přístupu k webu, avšak responzivní design se stále vyvíjí a mění a je šance, že se rozšíří i o další prvky. A v neposlední řadě by měl responzivní design zpříjemnit uživateli prohlížení webu – nikdo se nechce zdržovat se čtením stránek, které jsou pomalé, neostré, těžko čitelné, nepřehledné a navigace na nich je komplikovaná.

Je responzivní design pouze módní záležitostí? Jaké jsou klíčové aspekty responzivního designu? Podělte se s námi o vaše názory.

O autorovi

Marc Schenker je nezávislý spisovatel, bloger a redaktor.

Informace o překladu

• Původní článek: Must-know facts about responsive design (Webdesigner Depot).
• Překlad: Miluše Pokorná.
• Odborná a jazyková spolupráce: Miroslav Kučera.

Přeloženo se svolením magazínu Webdesigner Depot. Zde naleznete další překlady.

About translation

• Original article: Must-know facts about responsive design (Webdesigner Depot).
• Translation: Miluše Pokorná.
• Language and expert collaboration: Miroslav Kučera.

Language of translation: Czech (for readers from Czech and Slovak republics). Translated with the permission of Webdesigner Depot. Other translations.