Responsive design v enterprise — mobilní web není luxus

„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.