Tag Archives: Responsive Design

For IT Departments, Mobile is a Pain in the App

According to mobile analytics platform Mixpanel, over half the online activity this past Christmas came from mobile devices for the first time. Mobile internet traffic overall has jumped some 84% in the past year alone according to analytics firm Walker Sands, with the last quarter alone showing a 32% jump in mobile traffic. If you’re a retailer or consumer facing company, there’s little doubt where your customers are going: in the words of The Who, they’re Going Mobile.

As users, we dig this stuff (and I’ve certainly forked over a goodly share of my income in recent years to the suspiciously cheerful folks at the Apple Store for my part in the mobile revolution!)  But as we oogle our shiny new iPads, marvel over our ever-slimmer iPhones, sketch on our gigantic Galaxy Note IIs, or geek out over the satisfying “click-thunk” as we deploy the kickstand of our new Surface tablets, let’s spare a thought for the poor IT manager who’s going to have to cope with the endless requests to support all our new toys across the sprawling company infrastructure.

Let’s face it: being an IT manager is no picnic. Every business cycle brings new infrastructure projects, and every budget is about doing more with less. And it’s a rare company indeed whose IT department is awash in the Objective C, C#, and Java programmers that you’d need to support all the different development environments and frameworks required to write apps for all these different devices.

Even if you decide to outsource your mobile development, enterprise apps are hardly a breeze for an outside party to integrate with. Development is long and costly, and you’ll be signing up your team for a non-stop series of software support issues as you try to keep up with all the new devices, form factors, and OS updates. And we haven’t even gotten around to the hassles of creating app stores, deployment strategies, and managing software updates on a zillion different client devices.

Some organizations attempt to cope with this impossible problem my creating separate “mobilized” versions of their sites, and directing users of mobile devices there, instead of the main site. Unfortunately, this now leaves the overworked IT staff supporting two versions of your critical business pages. Even then, your tablet users are usually caught choosing between the old existing site, and the inevitably phone-optimized “mobile” site. This isn’t a long-term strategy that’s likely to satisfy your fast-increasing base of tablet users (and according to The Paragon Report, tablet use had 66% Q2 year-over-year growth in in 2012!). But are your staff expected to support a third, “tablet.mysite.com” site as well? Where does the madness end?

Stopping the Insanity with Responsive Design

CSS — “Cascading Style Sheets” are the web standards technology that allows designers to control the style and placement of elements on web pages. CSS started as a broader replacement for old “B” (bold), “I” (italic), “FONT” and other such HTML tags which allowed pages to have a modicum of formatting in the early days of the web. It’s been through a few revisions since being introduced in the mid-90s, allowing designers more and more control over the look of web pages.

When CSS3 came around a few years back, a lot of us designers were so taken with our newfound ability to give rounded corners to all our rectangles (it was, admittedly, something of an obsession for us in those blocky days of yore) that we didn’t pay much attention to a geeky new feature of CSS3 called “media queries”.  These “media queries” were an updating of the old “media” types in CSS which had previously distinguished themselves by (a) offering some support to things like TVs, printers and screen readers for the blind, and (b) enjoying almost no consistent browser support, rendering them near useless.

But these new media queries, as it turned out, did a lot more than saying, “If you’re viewing this on TV, make the fonts really big”. It turns out, that you could write them to set up entirely different page layouts depending on the screen dimensions that the content  was being displayed on. You could change up your page elements’ size, font, position, color–or even whether whole areas of a web page were displayed or not–based entirely on whether it was being viewed on a phone, tablet, laptop, desktop, or giant 4K monster display.

Recently, a methodology called “Responsive Design” (sometimes “Responsive Web Design” or RWD) has developed to allow a single web page to look and function like a slick iPhone app when viewed on an iPhone, a native tablet app on an iPad, and a conventional web page when viewed on a laptop or desktop. Sites like The Boston Globe, Harvard University, and Time have used this to terrific effect. Viewing these sites on different devices gives a thoroughly native look to each, but a look at the source code would reveal that all these different user experiences are actually the same page.

The Boston Globe's terrific Responsive Design

(Incidentally, if you’re viewing this blog entry on WordPress at uxtalk.wordpress.com, you’ll also see that WordPress is a huge user of responsive design–I’m in love with their iPad implementation in particular, where they use CSS3 transitions to great effect).

Weirder still, that one source page is probably cleaner than before, despite its new ability to support myriad form factors and devices. With responsive design, the site’s stylistic elements are contained it a single style sheet, which browsers normally cache automatically. Meanwhile, the site’s various pages become lighter, faster-loading, and more supportable now that they’re free of all that formatting clutter.

Let there be no mistake: a high degree of UX and visual design skill is needed to pull this miracle off, and to make the site feel the way it should on the different devices. This is true of any competently designed site or mobile app, however, and the UX design bill is a minor consideration compared to the steep development costs and huge support footprint that comes from standing up separate mobile sites or custom enterprise mobile apps.

Responsive: Beyond the Basics

The “pure” responsive approach embraces the idea of a single style sheet that works all the mojo with nothing but CSS–no coding required! Even then, it’s shocking what CSS styles alone can do: from dropping columns from the middle of large tables to simplify the display on smaller devices–to causing navigation panels to slide out from the side on iPhones rather than taking up valuable screen space.

If you’re willing to add in a bit of elementary browser-sniffing, you can take the designs even further, displaying Android-specific icons and colors on Android devices, and iOS icons for the Apple crowd, for instance–or substituting alternate graphics or treatments for devices known to be unable to display Flash, for instance.

One of my favorite tricks is to use a small stub of JavaScript at the bottom of a responsive site to ask mobile users if they want to add an icon to the site to their device’s Home page. This gives your users the ability to launch the site with a single tap — a user experience which can be difficult or impossible to distinguish from that of a native app. (Apple devices can even display a startup screen!). The major difference is that there’s no software for the user to install and update–since the “app icon” is really just a web page link, a company’s IT department automatically updates their entire mobile user base when they update the web site.

Web sites can be added to your phone's home screen where they look--and launch--like apps

The Future is Mobile…and Responsive

Sometimes, like the old song says, you don’t need a weatherman to know which way the wind blows. From the corner coffee shop to mobile sales forces, users and customers are using every possible variety of portable and mobile devices to access information, place orders, and get their jobs done. As we welcome 2013, it’s increasingly likely that IT directors that stand up new systems without taking the mobile component to heart are either doing something unusual, or doing something wrong.

In the past, mobile for the enterprise was a sea of conflicting choice–most of them bad. With responsive design, however, there’s finally a ray of light that allows IT staff a reasonable way to support their users’ increasingly mobile workstyles without busting the budget or turning to drink.

Should all corporate sites be responsively designed? Not necessarily, but all corporate sites should definitely give it serious thought. Similarly, not all apps will be replaced by responsive web sites, but a great many of them can and will be. At the least, I expect that in a few year’s time, we’ll be mostly free of those damnable sites which prompt us to “download our free mobile app!” whenever we try to Google up some answer to a question on our mobile phone and land on their backward excuse for a content site.

Mobile app development isn’t going away by any means, but apps which do nothing more than provide a tiny window to corporate content are definitely on the Endangered Species list. Instead, expect companies to devote their mobile app development dollars to situations where an app’s unique abilities really shine–such as the ability to access the phone’s camera and other hardware. For more and more content access and transaction processing needs, don’t be surprised if your most frequently used “apps” in the future are really responsively designed websites.