„Naši uživatelé sedí v kanceláři za monitorem, mobil nepotřebují.” Tuhle větu jsem letos slyšel od tří různých klientů. A u všech tří jsme nakonec responsive design implementovali, protože realita je jiná — management čte reporty na iPadu v taxi, obchodníci zadávají objednávky z telefonu u zákazníka. Mobile first není trend — je to realita.
Čísla, která přesvědčila management¶
Na Českém internetu je letos přes 20 % návštěv z mobilních zařízení. U jedné naší aplikace (interní CRM pro pojišťovnu) jsme změřili, že 35 % přihlášení je z iPadu. Argument „naši uživatelé nemají mobil” neobstojí.
Bootstrap 3 — framework pro nás smrtelníky¶
Nebudeme předstírat, že jsme designéři. Jsme Java vývojáři, kteří umí HTML a CSS na úrovni „funguje to”. Proto Bootstrap 3 — mobile-first grid systém, hotové komponenty, rozumná typografie.
Datové tabulky — největší výzva¶
Enterprise aplikace = tabulky. Hodně tabulek. A tabulka s 15 sloupci se na 320px displeji prostě nezobrazí. Zkoušeli jsme několik přístupů:
- Horizontální scroll — jednoduché, ale UX je příšerné
- Skrývání sloupců — na mobilu jen 4 nejdůležitější, zbytek se rozbalí klikem
- Stackované řádky — tabulka se na mobilu změní na seznam karet
- Alternativní pohled — na mobilu úplně jiné UI
Performance na mobilních zařízeních¶
Na desktopu nikdo neřeší, že stránka má 3 MB JavaScriptu. Na 3G to bolí. Základní pravidla: minifikace CSS/JS (Maven plugin wro4j), obrázky jako SVG, lazy loading dat, GZIP komprese, správné cache headers. Po optimalizaci: load time na 3G z 12 sekund na 3 sekundy.
Testování — emulátory nestačí¶
Chrome DevTools emulation je pro základní vývoj, ale nenahradí reálné zařízení. Koupili jsme device lab: iPad 2, iPhone 5, Samsung Galaxy S4, Nexus 7 a jeden laciný Android tablet — přesně to mají vaši uživatelé.
Co říci klientovi¶
Responsive design stojí asi o 20-30 % více času než čistě desktopová verze, ale ušetří samostatnou mobilní verzi (80-100 % navíc). Matematika je jasná.
Mobile first je tu¶
Pokud stavíte novou webovou aplikaci v roce 2014 a nemyslíte na mobilní zařízení, děláte chybu. Vaši uživatelé už dávno svůj telefon vytáhli a zkouší, jestli to na něm funguje.