Responsivní design je hit poslední doby. Denně se ale setkávám se stránkami, které sice jsou responzivní, ale nevhodným zásahem celý efekt rozbijí a stránka pak na mobilu vypadá špatně. Několik častých chyb jsem nasnímal, popsal a doporučil řešení.

Facebookový bloček

Facebook nesmí chybět na žádné stránce, která je moderní a sociální. Často však do hezké responzivní šablony někdo bloček zasadí tak nevhodně, že celou responzivnost zničí. Několik ukázek takového problému jsem našel například na webech kinohled.cz nebo blog.mefistofeles.cz. U kinohledu končí běžná stránka tam, kde je v polovině obrázku vidět změna pozadí. Bloček je ale nastaven tak nešikovně, že stránku rozšíří na dvojnásobek. U blog.mefistofeles.cz se sice vejde do stránky, ale vytéká z designu.

Kinohled - přetékající FB bloček Blog.mefistofeles.cz - přetékající facebookový bloček

 

Ve zdrojovém kódu kinohledu vidím například bloček vložený takovýmto zápisem:

Řešením je donutit facebookový bloček, aby nebyla šířka nastavena fixně. Záleží vždy na konkrétním případu a implementaci, ale začal bych CSS pravidly jako:

max-width: 100% !important;

Pak je nutné zkoušet a zkoušet. Několik nástrojů, které práci usnadní vyjmenovávám na konci článku v odstavci Nástroje, které vám pomohou.

Minimální šířka prvků

Vždy, když přidáte na web nový prvek, je dobré zkontrolovat, jak že to vypadá na mobilu. Zdroják, postavený na wordpressu, má v horní části stránky vloženu admin lištu.

Zdroják.cz - lišta v hlavičce rozhodí responsivní design

Klasický design končí na zlomu pozadí, lišta však vynutí širkokou stránku bez ohledu na váš display. Chyba je v tom, že pomocí CSS této liště nastavují minimální šířku na 600px. Taková lišta se na menší telefony v portrét modu nemuže vejít. Ve stylech je uveden zápis:

#wpadminbar {width: 100%; min-width: 600px; }

Obsah až pod přehybem

Kdysi, v době menších monitorů, se řešilo, aby se obsah webu vešel co nejlépe nad přehyb (fold) monitoru. Tedy aby byl obsah vidět bez nutnosti scrollování. Teď nastává ten samý problém u mobilů. Bylo by fajn, aby alespoň nadpis a část textu byla viditelná hned, bez scrollování. Zdroják to má tak na doraz, itefektivně.cz má nadpis na mém telefonu (800x480px) až pod přehybem. Oba snímky jsou z detailu článku.

Zdroják - text začíná až pod přehybem itefektivne - text začíná až za přehybem

Pokud chcete otestovat, kolik se toho vejde na display bez scrollování, můžete použít třeba tento nástroj z googlelabs. Změnou velikosti okna můžete simulovat mobilní rozlišení. Obsah nad přehybem by snad měl být také lépe hodnocen pro vyhledávání.

Je na zvážení každého designera, co vše by mělo v hlavičce na mobilním zobrazení být, a jestli je to tam opravdu nutné. U zdrojáku je velké pole pro hledání, které jsem nikdy nepoužil. Překáží mi ale při čtení každého článku.

Příliš velký padding stránky

Pro responsivní weby používá mnoho vývojářů framework Bootstrap. Ten má v základním nastavení na můj vkus zbytečně velké odsazení obsahu a na menších displayích to vypadá, že na obsah už skoro žádné místo nezbývá. První ukázka pochází z blog.mefistofeles.cz a sejmuta byla telefonem Sony Xperia Tipo (display 320x480px). Padding stránky je nastaven zleva i zprava na 25px, dalších 20px zleva i zprava vezme padding samotného obsahu. Při poměrně běžném rozlišení 320x480px tedy padding ukousne celých 28% šířky displaye. Řešením by bylo buď jej snížit na mnohem nižší čísla nebo nastavovat relativně k šířce displaye. Druhá ukázka je z mého webu, kdy jsem stejné výchozí hodnoty snížil na 10px z každé strany padding textu a 5px padding stránky. Celkem tedy jen 1/3 původních hodnot. Zároveň jsem zmenšil velikost nadpisu, aby nevycházelo jedno slovo na řádek. Dává to tak víc prostoru samotnému textu.

Příliš velký padding stránky ukázka paddingu

Zbytečně moc dat a scriptů

Pokud máte pod každým článkem umístěno několik sociálních tlačítek (facebook, twitter, g+, linkedIn) a pro každé používáte doporučovaný způsob vložení, nutíte tak prohlížeč stahovat mnoho dat navíc. Pro zmíněná čtyři tlačítka to může být 400KB dat a 22 requestů. Pokud vám to také přijde hodně, přečtěte si můj článek Jak dělat tlačítka pro sociální sítě lépe. Jde to i bez externích zdrojů a hromady dat navíc.

Nástroje, které vám pomohou

Window resizery jsou rozšíření do prohlížeče, která umožní změnit velikost okna a tím simulovat menší display.

 

Emulátory mobilních prohlížečů vám umožní zobrazit si stránku tak, jak by vypadala na mobilu. Opera mini je dostupná jako java applet ve webové stránce, opera mobile se instaluje do počítače a dovoluje spouštět prohlížeč v konfiguraci jednoho z mnoha běžných telefonů. Při startu aplikace si vybíráte, jaký telefon emulovat.

Opera mini - online verze mobilního prohlížeče

Vývojářské nástroje, jako jsou firebug ve firefoxu, dragonfly v opeře nebo developer tools v chrome, pomohou odhalit, kde se bere padding a margin, jak je který prvek zarovnán. Zároveň umožňují ihned hodnoty měnit a testovat. Nemusíte tak dokola upravovat soubor se styly a přenačítat stránku. Vždy je ale lepší otestovat web na reálných zařízeních. Zjistíte tak, jak se stránka používá, jak reaguje na dotek a posun.

Závěrem