Špičkový responzivní web: 10 přikázání responzivního designu

Poslední průzkumy společnosti NetMonitor ukazují, že od ledna 2015 brouzdá a nakupuje na českém internetu pomocí mobilního zařízení 4 012 580 uživatelů. Více jak 20 % vyhledávání na Google je uskutečněno skrze mobilní zařízení. Téměř 26 % emailů je otevřeno na mobilech, 10 % na tabletech. Co z toho vyplývá pro vás? Potřebujete mobilní web.

Jakou cestou se k mobilnímu webu vydat?

S dostupností webu pro mobilní zařízení se můžete vypořádat hned třemi způsoby.

1. Nechte si vytvořit mobilní aplikaci, aneb užívejte si zbytečně drahé řešení a neochotu uživatelů stahovat si do mobilu něco, co jim zapadne na desáté ploše mobilního telefonu.
2. Nechte si vyrobit další verzi webu, která si sice bude s mobilními zařízeními rozumět, ale její správa a implementace vás přijde na další balík.
3. Nebo si nechte vytvořit responzivní web, který se elegantně přizpůsobí každému zařízení, zatímco vy máte všechna data na jednom místě.

Obsah je jako voda. Dejte ho do šálku, stane se šálkem.

Nebo smartphonem. Nebo tabletem. U responzivního webu vrací server každému zařízení stále stejný výstup a ono zařízení si určuje, jak ho zobrazí.

1. Neopomeneš rozlišení všeho

Smartphone, tablet, desktop. Hezký začátek, ale opravdu toho váš kodér neumí víc? Pryč jsou doby, kdy stačilo web doladit pro jedno či dvě rozlišení. Počet typů rozlišení roste, nezapomínejte na ultravelké monitory nebo naopak na rozlišení menších smartphonů. Tři verze návrhu pro smartphone, tablet a desktop si může dovolit grafik, ale přesto vám vždy udělá pouze statické obrázky s fixní šířkou webu. Při implementaci je ale nutné myslet na jiné věci. Zkrátka, udělejte design fluidní a univerzální.

3. Nezabiješ (obsah)

Přebíjet nekvalitní obsah responzivním designem se stalo v poslední době poměrně častým nešvarem. Pokud se tedy rozhodnete pro responzivní web, věnujte dostatečnou péči i jeho obsahu.

• Texty by měly být použitelné pro všechny typy zařízení, maximálně stručné, členěné do odstavců a nadpisů.

• Obrázky volte vždy větší a raději do nich nevkládejte text (v menším rozlišení nevypadá dobře a může se stát nečitelným).

• Když už musíte vložit na stránku třeba graf nebo infografiku, rozhodně nevypínejte zoomování na dotykovém zařízení. Na zmenšených displejích tím informace znepřístupníte úplně.

• Aby se na mobilních zařízeních obrázky nenačítaly zbytečně dlouho, zkomprimujte je nebo využijte s webmasterem nové techniky načítání obrázků pro různá zařízení. Pro ikonky, kresby nebo ilustrace využijte vektorový formát obrázku *.SVG, který šetří data a navíc se perfektně vykreslí i na zařízeních s tím nejjemnějším rozlišením displeje.

• Nespoléhejte se na dosavadní přístup “tohle na mobilu nepotřebuju”. Prohlížení stránek na mobilu možná brzy převálcuje klasické počítače, dopřejte mu proto stejně kvalitní obsah.

5. Nevezmeš designéra svého nadarmo

Šetřete grafickými prvky. Každá kudrlinka znamená snížení rychlosti načítání stránek a zbytečné stahování dat, které uživatele rozhodně nepotěší. Budoucnosti velí minimalismus a jednoduchá grafika, která sluší smartphonům, tabletům i desktopům. Myslete na detaily. Každý prvek řešte pomocí kaskádových stylů (CSS), a teprve když není jiné řešení, sáhnětě po obrázcích. Možná nejste zvyklí příliš řešit správný kontrast nebo čitelnost stránky, ti, co si váš web ale budou prohlížet venku na světle, to rozhodně řešit budou. Nedejte jim důvod odejít.

Responzivní zobrazení hraje do karet vzdušným webdesignům. Správně nastavená vizuální sémantika a dostatečné mezery mezi jednotlivými prvky (obrázky, texty, akční tlačítka a další) nejenže váš web udělá atraktivnější a uživatelsky přívětivější, ale ušetří a zjednodušší práci vašemu kodérovi.

6. Pomni, aby font čitelný byl

Pravidla responzivního designu platí i pro typografii. Sazba by měla mít svou specifickou velikost pro každé zařízení – písmo, které vypadá dobře na mobilu, nemusí slušet počítači (nebo v opačném případě nemusí být čitelné). Délka řádku by měla být optimalizovaná na šířku obrazovky, v ideálním případě by měl být počet znaků 50-75 u stolního počítače a 35-50 u mobilu. Využijte potenciál každého zařízení a přizpůsobte typografii každému z nich.

7. Bůh nejprve stvořil smartphone, pak tablet a nakonec desktop

Mějte na paměti heslo “Mobile first!”. Vždy začínejte tzv. odspodu, tedy od nejmenšího rozlišení, a pokračujte k rozlišením větším. Jinak v závěru zjistíte, že to, co jste navrhli pro desktop, na mobilní zařízení responzivní technikou nedostanete.