6 chyb cestou do responzivního pekla

responsive

Cestou k optimálnímu responzivnímu webu ještě všichni nasekáme spoustu chyb. Tenhle článek by vám mohl pomoci vyhnout se těm nejhorším.

Autoři článku, Honza Sládek a Martin Michálek, pomáhají vymýšlet responzivní weby. Honza pro své klienty jako interakční designér, Martin zase pro své jako vývojář nebo konzultant. Pár nedůležitých parametrů responzivních webů za tu dobu zbytečně přeceňovali a pár zásadních zase podceňovali. Časem si uvědomili co dělají špatně. Letos hodnotili „mobilní optimalizaci” webů přihlášených do soutěže WebTop100 a přitom se vyděsili — ty samé chyby dělají skoro všichni! A někteří je umí dělat daleko lépe!

Cestou k optimálnímu responzivnímu webu ještě všichni nasekáme spoustu chyb. Tenhle článek by vám mohl pomoci vyhnout se těm nejhorším.

6 hříchů českých responzivních webů

  1. Neřeší rychlost načítání
  2. Přizpůsobují se jen konkrétním rozlišením
  3. Jsou nedostatečně otestované
  4. Používají desktopové UI komponenty
  5. Uživatelům tabletů vnucují rozhraní pro smartphony
  6. V mobilní verzi jim „nezbývá” čas na designéra

Pojďme si je postupně probrat.

1. Neřeší rychlost načítání

Honza: Náš příběh začneme jako ve snu. Vytvořili jste skvělý web, uživatelské testování neodhalilo slabiny, líbí se klientovi i jeho psovi. Zkrátka — je boží! A přece nefunguje. Načíst ho totiž trvá tak dlouho, že většina lidí na to nepočká.

Co to? Lidé čekají neradi a konkurence je tak blízko. Věděli jste, že 47 % lidí očekává, že se jim web načte do dvou vteřin? A že 40 % lidí odejde, pokud se stránka nenačte do 3 vteřin? KissMetrics dokonce spočítali, že 1 vteřina načítání stránky vás stojí až 7 % potenciálních zákazníků.

Jestli se ve WebTop100 jedna věc opakovala jako špatný vtip, bylo to ignorování času načtení webu. To ovlivňují dvě zásadní věci: počet requestů na server a datová velikost. Většinou slyším lidi mluvit o tom druhém. Důležitější je ale to první, protože mobilní sítě často mají vysokou latenci. V Kanadském CBC si spočítali, že jeden request je stojí 200 ms.

Schválně – načtěte si hned teď váš nejnověji spuštěný web se zpomaleným připojením. Na Macu ho zpomalíte pomocí nástroje Network Link Conditioner, na Windows třeba multiplatformní Sloppy.

Já počkám, fakt to teď zkuste.

Tak jak dlouho? Kdo se dostal na simulovaném EDGE připojení pod 3 vteřiny, má odpracováno, ostatní musíme zamakat.

Jako první se zaměřte na používání CSS sprites a sloučení CSS souborů do jednoho (s JavaScriptem to samé). A pěkně všechno minifikovat! Minifikace a slučování souborů jde skvěle automatizovat, třeba nástrojem Grunt.

Tohle je základ, bez kterého se dál nehnete. Pak už si můžete hrát s lazy loadem, posílat statické soubory z domény bez cookies a řešit, co všechno poslat na mobilní zařízení a co pouze na desktop (třeba velké obrázky na pozadí apod). Je toho hodně a mohli byste to optimalizovat několik týdnů.

Doporučuji si na začátku říct, kolik času (a peněz) se vám vyplatí do rychlosti investovat a pak optimalizovat, co v tom čase optimalizovat jde.

2. Přizpůsobení jen konkrétním rozlišením

Martin: Smartphone, tablet, desktop. Když chcete mamince zjednodušeně popsat, čím se zabýváte, je tohle rozdělení dobré. Moc vás ale prosím — nepoužívejte ho ve vývojářské praxi, pokud jde o breakpointy pro přizpůsobení designu.

Proč? Jediná dobrá obecná odpověď na otázku „Pro jaká rozlišení mám svůj responzivní web optimalizovat?” zní — „Pro všechna.”

Občas s weby pomáhám malé cestovce mého strejdy. Není to ničím výjimečná skupina webů s u nás běžnou „seznamáckou” cílovou skupinou, ale docela fajn návštěvností na to, aby se graf dal ukázat v článku na Zdrojáku. Tady je vývoj počtu rozlišení obrazovky za posledních pět let:

zdrojak_1_rozliseni

Graf 1: vývoj počtu rozlišení na webech Rekrey.

Ano, počet typů rozlišení ohromně roste a pryč jsou doby, kdy jedno či dvě rozlišení dominovala. I to dělení smartphone (320×480px), tablet (768×1024px) a desktop je pasé. Kam patří levné smartphony s menším rozlišením 240px? Kam minitablety, které mají menší rozlišení než některé smartphony?

Vyladit design pro důležitá rozlišení a předat vám tři návrhy — desktop, tablet a smartphone. Váš grafik si tohle dovolit může. Při implementaci ale na tohle dělení prosím zapomeňte. Udělejte to fluidní a maximálně univerzální.

3. Nedostatečné testování

Honza: Když už máte web rychlý a univerzální, je potřeba vzít do ruky několik skutečných zařízení a podívat se, jak na nich web funguje. Proklikejte si, zda se dostanete ke všem stránkám, zda zvládáte ovládat všechny interaktivní prvky. Brzy zjistíte, že je to úplně něco jiného, než si zmenšit viewport ve vašem prohlížeči.

Dejte si hlavně pozor na následující:

  1. Dostatečná velikost dotykových ploch (týká se i malých odkazů!). Různí výrobci se liší v doporučeních, jak velké dotykové plochy dělat, dobré rule-of-thumb je 1x1cm.
  2. Na dotykových zařízeních neexistuje onMouseOver, neschovávejte tedy obsah tak, že se zobrazí po najetí myši!
  3. Očekávejte, že web bude na mobilních zařízeních pomalejší. Vaše nádherné animace vůbec nebudou tak nádherné a celý dojem z webu se pokazí tím, že se při scrollování web bude trhat. Vůbec není složité to udělat a je potřeba si na to dávat pozor. A když už v tom budete – čím jednoddušší skripty mobilním zařízením dáte, tím vás lidé budou mít raději. Protože pokud procesor musí něco složitě počítat, sežere baterku.

4. Používání desktopových UI komponent

Honza: Při hodnocení WebTop100 byly momenty, které mne přiváděly do varu. Fakt, že “designér” použil nějaký zažitý vzor z desktopu a udělal ho “responzivní”. Technicky to možná funguje, ale zkusili ti lidé svůj web také použít?

Třeba si představte, že kliknete na fotku a chcete ji vidět zvětšenou. Ona se místo toho zmenší, protože na webu je nasazený lightbox a vy si můžete vybrat, zda uvidíte fotku malinkou nebo ještě menší. Naštve.

Nebo vyplňujete formulář a při výběru z jednoduchého selectu na vás vyjede dlouhý (a “krásně” grafický) seznam věcí. Je asi tak přes dvě obrazovky a když si něco vyberete, musíte ještě najet zpátky na políčko, které jste vlastně vyplnili. A to si jen nějaký “designér” vymyslel, že ten select bude vypadat hrozně pěkně a nikdo mu nevysvětlil, že nativní selecty fakt mají své výhody.

A do třetice, a to mne vážně překvapilo, je zvyk českých “designérů” odkrývat zajímavý obsah až poté, co nad něj najedete myší. Kromě toho, že cool to byla zhruba v roce 2006, tak najetí myší a dotknutí se prstem jsou mentálně dvě velmi odlišné akce. (Nebo vy se snad dotýkáte prstem každého kousku webu, abyste se s ním řádně seznámili?) Vůbec má nejoblíbenější jsou taková řešení, kdy vy stisknete velkou jasnou plochu s jednoslovným či obrázkovým odkazem, na ní se najednou objeví spousta obsahu a než ho stihnete přečíst, načte se jiná stránka.

A přitom to není o ničem jiném, než o kapce zdravého rozumu a používání vlastního výtvoru na mobilních zařízeních.

5. Uživatelům tabletů vnucují rozhraní pro smartphony

Martin: Ještě před měsícem by mě nenapadlo, že tohle může být problém. No. A pak jsem si ohodnotil svých pár webů ve zmiňované soutěži.

zdrojak_2_bata

Obrázek 2: bata.cz na iPhonu, iPadu a desktopu

Vezměte si Bata.cz — na iPadu se vám zobrazí „ořezaná” mobilní verze. Je to něco, co uživatel iPadu ocení? Uživatel smartphonu ano. Nebo uživatel malého tabletu s Androidem za 2 tisíce Kč. Ale zmlsaný iPadista? Nebo iPadista zvyklý občas holt zatnout zuby a použít desktopový web nepříliš dobře optimalizovaný pro dotykové ovládání a menší displej?

Tipuji, že Baťa má „super web pro desktop a ořezaný web pro mobily.” OK, ale pro uživatele tabletu je super web až moc super a ořezaný web až moc ořezaný. Když by super-desktopový web jen trochu počítal s většími tablety, je problém vyřešený.

Nezapomeňte prosím — rozdělení desktop/mobily neexistuje. Mezi desktopem a smartphone je tablet. Mezi smartphony a tabletem je kategorie malý tablet. Mezi smartphony a malým tabletem je kategorie velký smartphone. Mezi smartphony a velkým smartphonem… Víte co, raději na ty kategorie zapomeňte úplně!

6. V mobilní verzi „nezbyl” čas na grafika/designéra

Martin: Honzo, já jsem svého času „kóderskou mobilní verzi” docela obhajoval. Byly to začátky „mobilního webdesignu” a viděl jsem, že v postupech optimalizace pro mobily jsou technici dál než grafici. A tak dávalo smysl nechat si od grafika udělat jen desktopový návrh a přípravu pro mobilní zařízení obstarat sám. Vždycky jsem ovšem jako kodér od grafika chtěl spolupráci nebo alespoň zpětnou vazbu. Když jsem ale hodnotil ty WebTop100 účastníky, zjistil jsem, že „ mobilní verze” je skoro vždycky kodérská a na grafika nezbyl čas. Myslím, že dnes už je ten obor jinde a tohle by se dít nemělo. Jak to vidíš ty?

Honza: Martine, já myslím, že základní problém je, rozlišovat vůbec návrh webu na desktopovou a mobilní variantu. Plyne z toho, myslím si, mj. i to, že lidé zapomínají na tablety. Prostě web je jenom jeden a tak bychom se k němu měli návrhově i technicky chovat.

Myslím, že základním úkolem člověka, který navrhuje web (a nemyslím si, že by to měl být grafik či kodér) je navrhnout jeho strukturu tak, aby se na webu člověk vyznal a mohl ho používat na jakémkoli zařízení. Jsou různé příklady, že to jde. V ČR se mi z tohoto hlediska v poslední době hodně líbí třeba web karlovyvary.cz. Grafik by pak měl přistupovat k tomu stejně – navrhovat prvky, které se budou na různých velikostech obrazovky chovat různě. Výsledkem je úplně jiný styl práce a to je myslím něco, co si bude ještě chvilku sedat. Sám s tím stále bojuji.

Martin: OK, to se dostáváme k pracovním postupům v týmu. Ten problém je v nich. Hodně se v souvislosti s responzivním webdesignem mluví o prototypování, style tiles, odklonu od návrhů stránek k systému komponent. O post-PSD éře. Jenže osvědčený postup neexistuje. Co je ale pravděpodobné — přenosem postupu návrh –> PSD –> kódér –> programátor –> produkce do responzivního webdesignu na konci nebývá profit, ale zklamání z výsledku. Myslím, že responzivní webdesign je příležitost ke společnému experimentování designérů a techniků za účelem hledání optimální cesty a ta může být v každé firmě trochu jiná.

Honza: Přesně Martine! Pro mne je zatím červená linka mezi jakýmikoli přístupy k responzivnímu webdesignu hodně o komunikaci mezi designérem a techniky. Všichni musí být na stejné vlně a vědět, čeho chtějí dosáhnout. Grafický návrh (pokud zrovna existuje) už je spíše takové vodítko, které je super, ale stejně bude na každém zařízení výsledek vypadat trošku jinak. A to je podle mne právě to, co si spousta “grafiků” ještě nepřipustila a zatím je prostě zajímá jen ta verze pro jejich velikost monitoru. Myslím, že příští dva roky je to hodně na kodérech – aby s grafiky komunikovali, ptali se jich na různá designová rozhodnutí a ukazovali jim, jak vlastně web funguje.

Závěr?

Stejně jako u každé nové technologie, i u responzivního webdesignu platí, že ji zpočátku používáme špatně. Zdůrazňujeme méně důležité věci (mnoho variant layoutu pro různá zařízení, podporu vysokokapacitních displejů) na úkor těch opravdu důležitých (rychlost načítání, pracovní postupy).

A jako tenhle seznam neduhů ani responzivní webdesign není uzavřené téma. Postupy, které si při výborných výsledcích zachovávají dostatečnou efektivitu tak, aby byly prodejné, se teprve vytvářejí.

Responzivní webdesign není border-radius. Tedy něco, na co se podíváte nebo se naučíte na školení a pak to umíte. Responzivní webdesign je změna, kterou budeme všichni prožívat minimálně ještě několik let a jejíž scénář si budeme psát sami.

Věděli jste, že nám můžete zasílat zprávičky? (Jen pro přihlášené.)

Komentáře: 38

Přehled komentářů

Martin Prokeš návrat k webdesignerským kořenům
TomKout Používejme mobilní zařízení
Miré Možná jsem zastaralý...
Jonáš Krutil Re: Možná jsem zastaralý...
MichalSvatos
jaroslavhorak Responzivní vs. Adaptivní
Jonáš Krutil Re: Responzivní vs. Adaptivní
Dominik Tilp Re: Responzivní vs. Adaptivní
jaroslavhorak Re: Responzivní vs. Adaptivní
Dominik Tilp Re: Responzivní vs. Adaptivní
Čelo
Michal Lightbox
TomKout Re: Lightbox
martindrzka Re: Lightbox
Jakub Stacho Re: Lightbox
Jonáš Krutil Re: Lightbox
NN Prečo statický obsahu z domény bez cookies?
Martin Hassman Re: Prečo statický obsahu z domény bez cookies?
NN Re: Prečo statický obsahu z domény bez cookies?
martin Re: Prečo statický obsahu z domény bez cookies?
Kvalitnikod.cz Dobře napsaný článek
Tomáš Dvořák PageSpeed Insights
Tomáš K čemu to je ?
Martin Hassman Re: K čemu to je ?
Tomáš Re: K čemu to je ?
Martin Michálek Re: K čemu to je ?
kaktuss Re: K čemu to je ?
Radek Re: K čemu to je ?
kolemjdoucí Standardy
pav Re: Standardy
Pavel Re:
MartinJ
Miloš Neustupovat pitomosti
Marek Lecián Respozivní web - Ano jde to i zadarmo....
Marek Lecián Další pěkný článek k tématu... Respozivní webu vs Mobilní
Tomáš Kouba Přesněěě... a jak udělat přepnutí do desktopové verze?
Martin Michálek Re: Přesněěě... a jak udělat přepnutí do desktopové verze?
Tomáš Kouba článek
Zdroj: https://www.zdrojak.cz/?p=10247