Mylné představy o responzivním designu

Překladový článek od Daniela Klinga. Autor ve článku popisuje nejčastěji se vyskytující mylné představy webdesignerů ohledně responzivního designu.

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

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

K přístupu na internet denně používám různá zařízení, konkrétně Macbook Pro, iMac, počítač, iPad, iPhone, a dokonce i televizi. Skutečně mi vadí, když narazím na webové stránky, které nejsou optimalizované pro větší displeje anebo u kterých musím čekat dvě minuty, než se mi načtou do zařízení.

Koncept responzivního (přizpůsobivého) designu jsme uvítali všichni. Málokdo má výhrady a vlastně jedinou přesvědčivou připomínkou, kterou jsem nedávno opět zaslechl, je časová náročnost, kterou nechce klient akceptovat.
Pojďme se podívat, zda dokážeme některé mylné představy rozptýlit.

Responzivní design je pro mobily

Ano, webové stránky pro mobily jsou na vzestupu, a ano, jedná se o hnací sílu responzivního designu, ale v souvislosti s responzivním designem musíme brát v úvahu i jiná zařízení. Například s nástupem displejů označovaných jako „retina“ si začali uživatelé prohlížet webové stránky na velkém množství různých zařízení s vyšším rozlišením.

Při navrhování a vyvíjení responzivních webů se pokuste vzít v úvahu i další souvislosti. Měli byste vědět, s jakým zařízením uživatel pracuje – využívá mobilní přístroj nebo je doma u televizoru? Kde se uživatel nachází? Stojí ve frontě v obchodě s potravinami nebo kempuje ve volné přírodě? Kvalitní obsah je vám k ničemu pokud se stránky uživateli sedícímu na pláži a popíjejícímu margaritu načítají deset minut.

Obsah je důležitý, ale prostředí je něco, co je všude kolem Vás a nad čím nemáte absolutně žádnou kontrolu. A právě proto by se měl obsah stránek umět přizpůsobit většímu i menšímu rozlišení zařízení. Potřebujete-li upravit grafiku, optimalizovat velikost textu či zvýšit výkonnost, můžete použít řadu nástrojů, jež jsou k dispozici – nezapomínejte na ně a používejte je.

Obsah se neustále přemísťuje a je tedy třeba, abyste při vytváření responzivního designu správně vyvážili grafickou stránku, potřeby uživatele a výkonnost. A to se netýká jen mobilů.

Responzivní design nefunguje vždy

Tvrdíval jsem, že responzivní design nebude fungovat vždy a že záleží případ od případu, nedávno jsem však svůj názor pozměnil. Jsem přesvědčen, že pokud se chcete při své práci soustředit na potřeby uživatele, musíte mít již od samého počátku vytváření webu na paměti responzivní design.

Webové stránky s fixní šířkou lze použít u obrazovek s větším i menším rozlišením, rozhodujícím faktorem je neomezená dostupnost webu komukoliv a to bez ohledu na použité zařízení či rozlišení.

Responzivní design souvisí s breakpointy zařízení

Povšiml jsem si tendence designerů a vývojářů vytvářet responzivní webové stránky pouze pro zařízení s určitým rozlišením (k tomuto prohřešku se také hlásím), z nichž nejběžněji používanými jsou přenosné či stolní počítače, iPady a iPhony, případně jiné mobilní přístroje. Jako designeři si musíte uvědomit, že responzivní design souvisí s navrhováním breakpointů a vytvářením obsahu, který je čitelný a dostupný komukoliv, nejenom uživatelům určitých zařízení.

Nicméně pokud navrhujete webové stránky softwarově, je nutné, abyste měli něco jako framework s breakpointy, ze které budete vycházet, a doporučuji, abyste si ji vytvořili sami. Dle obsahu optimalizujte návrh stránek. To, které breakpointy budou nejlépe fungovat, zjistíte tak, že si nejprve načrtnete několik skic daného webu a následně začnete ve vybraném softwaru rozmísťovat pixely. Při skicování a navrhování si dejte pozor, abyste vždy pracovali ve stejné mřížce.

Pokud pracujete stejně jako já, své vytvořené skicy si kódujete a vytváříte funkční prototypy. Tento postup mi velmi pomáhá při vytváření responzivního designu, mohu totiž vytvářet měnící se model a přidávat do návrhu breakpointy v místech, kde dochází ke změnám, aniž bych se pokoušel cpát tam pixely prostřednictvím Photoshopu.

Responzivní design škodí typografii

Největším problém mnoha responzivních webových stránek je obětování typografie, k čemuž dochází v případě, kdy návrháři a vývojáři upřednostňují breakpointy zařízení před breakpointy designu. Dle mého názoru znamená upřednostnění zařízení před designem naprostou lhostejnost vůči publikovanému obsahu i vůči uživateli, který ho bude číst. Text by si měl udržet čitelnost až do doby, kdy se musí přizpůsobit, aby byla čitelnost zachována i nadále. Ze všeho nejdůležitější je obsah, velkou prioritu je však třeba dát i dostupnosti stránek a jejich čitelnosti.

V responzivním designu lze zachovat čitelnost obsahu webu použitím relativních jednotek, jako jsou em. Dají se využít nejenom pro nastavení velikosti fontů, výplně či okrajů, ale také pro konstrukci samotného layoutu. Základem responzivního designu je proporcionální layout a dle mého názoru do něj skvěle zapadá jednotka em.

Em je relativní jednotka, která je škálovatelná od velikosti fontu nadřazeného elementu. Dokáže uspořit mnoho času a těžkostí a pomáhají udržovat strukturu celého layoutu. Co to znamená? Při zmenšení či zvětšení základního fontu se rovnoměrně upraví i layout a nedochází k žádnému zkreslení.

Uvedeme si to na příkladu: v návrhu webu máme dva breakpointy, jeden pro velký monitor s vysokým rozlišením a druhý pro malý tablet. Základní velikost fontu je 16px, což odpovídá 1.0 em; při prohlížení webové stránky v super rozlišení 3840 × 2160 ji zvětšíme na 22px, a naopak při rozlišení 800 × 600 (malý notebook, tablet) velikost zmenšíme na 14px. Ve dvou navržených breakpointech výrazně měníme velikost písmen a layout. Pro větší rozlišení nastavíme titulek na 1.4 em se základní velikostí fontu 22px – to znamená, že 1.4em odpovídá 30.8px. V případě menšího základního fontu 14px bude 1.4 em odpovídat 19.6px. I když se u rozlišení 3840 × 2160 velikost fontu dramaticky zvětšila, není třeba se obávat, že by se layout rozpadl – automaticky se přizpůsobí. Řekněme, že máme prvek o šířce 50em, při rozlišení 800 × 600 odpovídá 700px a při rozlišení 3840 × 2160 bude odpovídat 1 100px. A stejně tak se přizpůsobí výplň (padding) a okraj (margin). Nastavení velikosti fontu a layoutu u většího rozlišení v em umožňuje měnit velikost návrhu proporcionálně a obsah stránek je dostupnější a čitelnější.

Responzivní design je hlavně o skrývání

Účelem responzivního designu je vytvořit obsah dostupný na všech zařízeních a rozlišeních s důrazem na uživatele a jeho možná tělesná postižení. Skrývání obsahu není nikdy dobrý nápad, a pokud můžete, vyhněte se mu. Skrývání obsahu znemožňuje jeho dostupnost pro čtečky a pro nevidomé tak přestává tento obsah existovat. Nezapomínejte, že obsah by měl být univerzální; netrestejte své uživatele omezeními jednotlivých zařízení.

Přesto jsou případy, kdy považuji skrytí určitých prvků stránky pomocí atributu display: none za užitečné. Většinou se jedná o případy použití určitého druhu navigace. Já osobně používám display: none u navigace, která na různých zařízeních způsobuje deformaci obsahu. Není vhodné, abyste omezovali či skrývali obsah; pravděpodobně jste k tomuto rozhodnutí dospěli na základě domněnek a budoucímu uživateli můžete přivodit nepříjemné chvilky.

Responzivní design škodí výkonnosti

Poslední dobou jsem natrefil na spoustu webových stránek, které nebraly ohledy na uživatele s omezeným připojením k internetu. U většiny těchto stránek jsou použity velké obrázky a velké JavaScriptové knihovny a mnoho z nich mohlo být optimalizováno, pokud by se již při jejich navrhování počítalo se zobrazováním na mobilech.

O problematice responzivního zobrazení se stále a hodně diskutuje a je těžké dospět k jednotnému řešení. Chápu to, avšak pokud byste čekali na ideální řešení, které bude funkční bez ohledu na prohlížeč a použité zařízení, neusnadníte uživatelům vlastnícím zařízení s omezeným připojením prohlížení vašich současných stránek. Poohlédněte se po řešení, které váš problém vyřeší nejlépe, a držte se ho. Pokud řešení nenaleznete, negativně ovlivníte náročnost stránek na zobrazení a zcela zmaříte záměr responzivního designu.

Malá zařízení mohou mít potíže i s velkými JavaScriptovými knihovnami. Pokuste se najít řešení, při kterém budou knihovny zobrazovány podmíněně v závislosti na rozlišení displeje či typu zařízení. U responzivnímu designu byste neměli zapomínat na výkon zařízení.

Závěr

Neustále přibývá webových stránek a s nástupem mobilů a smartphonů je možné jejich obsah zobrazit kdekoliv a v jakémkoliv prostředí. Je třeba vyhovět všem uživatelům a poskytnout jim přesně to, co chtějí. Responzivní design je zcela novou technologií a dle mého názoru se jedná o vynikající technologii, která sjednotí celé webové prostředí.

S jakými dalšími mylnými představami o responzivním designu byste se rádi vypořádali? Má responzivní design nějaké nevýhody? Okomentujte tento článek.

O autorovi

Daniel Kling je designér a přední vývojář a v Carlisle v Pennsylvanii založil společnost 717 Studios. Pokud se zrovna nevrtá v motorce či si nehraje se svými dvěma dětmi, můžete ho potkat na Twitter nebo na Dribbble sledovat, na čem právě pracuje.

Informace o překladu

• Původní článek: Common misconceptions 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: Common misconceptions 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.