Responsive Design im Enterprise-Umfeld — Mobile Web ist kein Luxus

„Unsere Benutzer sitzen im Büro vor einem Monitor — die brauchen kein Mobil.” Diesen Satz habe ich dieses Jahr von drei verschiedenen Kunden gehört. Und bei allen dreien haben wir letztendlich Responsive Design implementiert, weil die Realität anders aussieht — das Management liest Berichte auf dem iPad im Taxi, Vertriebsmitarbeiter geben Bestellungen vom Handy beim Kunden ein. Mobile First ist kein Trend — es ist Realität.

Zahlen, die das Management überzeugt haben¶

Dieses Jahr kommen über 20 % der Besuche im tschechischen Internet von mobilen Geräten. Bei einer unserer Anwendungen (ein internes CRM für eine Versicherung) haben wir gemessen, dass 35 % der Anmeldungen vom iPad kamen. Das Argument „unsere Benutzer haben kein Mobilgerät” hält nicht stand.

Bootstrap 3 — Ein Framework für Normalsterbliche¶

Wir geben nicht vor, Designer zu sein. Wir sind Java-Entwickler, die HTML und CSS auf dem Niveau „es funktioniert” beherrschen. Deshalb Bootstrap 3 — Mobile-First-Grid-System, fertige Komponenten, vernünftige Typografie.

Datentabellen — Die größte Herausforderung¶

Enterprise-Anwendung = Tabellen. Viele Tabellen. Und eine Tabelle mit 15 Spalten lässt sich auf einem 320px-Bildschirm schlicht nicht anzeigen. Wir haben verschiedene Ansätze ausprobiert:

• Horizontales Scrollen — einfach, aber schreckliche UX
• Spalten ausblenden — auf Mobil nur die 4 wichtigsten, der Rest klappt bei Klick aus
• Gestapelte Zeilen — die Tabelle wird auf Mobil zu einer Liste von Karten
• Alternative Ansicht — auf Mobil eine komplett andere UI

Performance auf mobilen Geräten¶

Auf dem Desktop stört es niemanden, dass eine Seite 3 MB JavaScript hat. Bei 3G tut es weh. Grundregeln: CSS/JS minifizieren (Maven-Plugin wro4j), Bilder als SVG, Lazy Loading von Daten, GZIP-Komprimierung, korrekte Cache-Header. Nach der Optimierung: Ladezeit bei 3G von 12 Sekunden auf 3 Sekunden.

Testing — Emulatoren reichen nicht¶

Chrome DevTools Emulation reicht für die Grundentwicklung, ersetzt aber kein echtes Gerät. Wir haben ein Device Lab gekauft: iPad 2, iPhone 5, Samsung Galaxy S4, Nexus 7 und ein günstiges Android-Tablet — genau das, was Ihre Benutzer haben.

Was man dem Kunden sagt¶

Responsive Design kostet etwa 20–30 % mehr Zeit als eine reine Desktop-Version, spart aber eine separate mobile Version (80–100 % mehr). Die Rechnung ist klar.

Mobile First ist da¶

Wenn Sie 2014 eine neue Webanwendung bauen und nicht an mobile Geräte denken, machen Sie einen Fehler. Ihre Benutzer haben längst ihr Handy gezückt und prüfen, ob es funktioniert.