Responsive GIS: Part One

It’s taken a few years for responsive design to catch on. The first browsers to parse CSS3 media queries dropped in late ’08, but it took another 4 or 5 years for the trend to take off. Thankfully, with the pervasiveness of mobile devices, and this year’s search engine optimization (SEO) mandate from Google, it looks like responsive design has finally hit the primetime. But designing with a mobile-friendly, no, mobile-first, mentality comes fraught with its own set of design challenges.

Application Design in a Responsive World

From the user’s perspective, responsive web design (RWD) is great! And what’s not to love? It works on my desktop, it works on my iPad, and hey, look, it even works on my phone! But from the designer’s standpoint, that sounds like a recipe for disaster.

Paradigm-Shift

There’s no getting rid of the demand for mobile accessibility, so how do you engineer a solution? For better or worse, RWD demands a shift in the way we think about web application development. We have to start from mobile devices and work our way up to desktops, not the other way around. We have to contextualize workflows and break applications into modules to make them better fit the bite-size screen. In some cases, we have to remove functionality altogether in the name of streamlining the user experience. And we have to do it all without sacrificing the usefulness of the software. Buckle-up, it’s going to be a bumpy ride.

So, Where Do We Start?

In the early days, CSS files were the messy catch-all containers – with classes and IDS haphazardly thrown wherever the developer’s cursor landed first. Layouts weren’t easily transferrable, let alone standardized, and stylesheets were rife with browser-specific hacks just to render the site usable across the range of desktop browsers.

But we’ve come a long way in just a few years. With the advent of LESS/SASS, we can impose structure on our stylesheets. Write more meaningful code with fewer lines. Use real variables and calculations right in our CSS. And best of all, we can forge a standardized framework for layout.

Enter Twitter Bootstrap. A framework built to, among other things, give developers a consistent way of laying-out web applications for use on mobile and desktop screens alike. It’s not a solution in and of itself, but it’s a powerful tool in the hands of a modern-day web developer.

So now that we’ve got this handy way of displaying grid-based layouts at different sizes, all we have to do is dump our current functionality into the pre-defined layout grid and we’re done, right? Wrong.

Harness the Power of Responsive Layouts

Just because a layout gracefully scales, doesn’t mean it has the user’s best interest in mind. In fact, your application probably needs a full-scale rewrite of the frontend if it’s not currently mobile-friendly, but this time, consider designing mobile-first.

Pack every last bit of functionality you can into the mobile experience. Then and only then are start thinking about what the desktop version can add to the overall package, because mobile accessibility isn’t a value-added benefit, it’s the core of your offering.

Is Responsive Right for You?

It’s worth mentioning that not every application has to be geared toward mobile audiences. Yeah, I said it. There are plenty of apps that just aren’t meant for mobile screens, but for those web applications that demand a mobile interface, this is the only way forward. It’s a bold new way of thinking about the web, and it’s forcing us to pay more attention to the user experience we’re delivering.

Tune in to part two, where we explore the methodology and design principles that GeoDecisions uses to build enterprise-level responsive GIS web applications.