Responsive design in the enterprise — mobile web is not a luxury

“Our users sit in the office in front of a monitor — they don’t need mobile.” I heard that sentence from three different clients this year. And at all three we eventually implemented responsive design, because reality is different — management reads reports on an iPad in a taxi, sales reps enter orders from their phone at a customer’s site. Mobile first is not a trend — it is reality.

Numbers that convinced management¶

This year, over 20% of visits on the Czech internet come from mobile devices. For one of our applications (an internal CRM for an insurance company) we measured that 35% of logins came from an iPad. The argument “our users don’t have mobile” doesn’t hold up.

Bootstrap 3 — a framework for mere mortals¶

We won’t pretend we are designers. We are Java developers who know HTML and CSS at a “it works” level. That is why Bootstrap 3 — mobile-first grid system, ready-made components, sensible typography.

Data tables — the biggest challenge¶

Enterprise application = tables. Lots of tables. And a table with 15 columns simply cannot be displayed on a 320px screen. We tried several approaches:

• Horizontal scroll — simple, but terrible UX
• Hiding columns — on mobile only the 4 most important, the rest expand on click
• Stacked rows — the table becomes a list of cards on mobile
• Alternative view — completely different UI on mobile

Performance on mobile devices¶

On desktop nobody worries about a page having 3 MB of JavaScript. On 3G it hurts. Basic rules: minify CSS/JS (Maven plugin wro4j), images as SVG, lazy loading of data, GZIP compression, correct cache headers. After optimisation: load time on 3G from 12 seconds down to 3 seconds.

Testing — emulators are not enough¶

Chrome DevTools emulation is fine for basic development, but does not replace a real device. We bought a device lab: iPad 2, iPhone 5, Samsung Galaxy S4, Nexus 7, and one cheap Android tablet — exactly what your users have.

What to tell the client¶

Responsive design costs roughly 20–30% more time than a desktop-only version, but saves a separate mobile version (80–100% more). The maths is clear.

Mobile first is here¶

If you are building a new web application in 2014 and not thinking about mobile devices, you are making a mistake. Your users have already taken out their phone and are checking whether it works.