If you work in the mobile space, it's pretty likely that you've heard the term "responsive design" thrown around quite a bit lately. By building interfaces that adapt content to the form factor, a business creates a framework to support multiple devices and makes big steps toward future-proofing its web presence. On the other hand, teams that decide to ignore the implications of this fundamental change to how websites are built will certainly find themselves lagging behind competitors and losing users on smaller screens as the mobile space continues to evolve.
The concept, in a nutshell, is that websites can be written to adapt to multiple screen sizes. Instead of writing different presentation layers to suit a desktop browser or a tablet or a smartphone, presentations can be created to respond to the screen they are presented on.
This notion seems pretty straightforward, and in some ways content has been adapting to platforms for a few years. But this approach is revolutionary in how it abstracts form from function and the flexibility it provides designers as well as business owners.
Here are the basics that marketers need to know about responsive design, along with the pros and cons of facets of the concept.
What is responsive design?
We are designers for things we can't predict. It seems like every month there is a new device -- with a new screen size -- coming to market, and users want to consume their content on it. One way to address this approach is writing code that adapts content to the page that it's on.
Elegant, but with challenges
By writing standards-compliant code and applying consistent treatments across a site, a responsive build can be much less expensive to maintain over time. Like any browser-based experience, a responsive build will face a few inherent challenges that can add cost and complexity to the process. Fortunately, with the correct approach and tools, the risk is minimal and the progress is significant.
Think across form factors
It used to be that teams only had to consider a few screen sizes and browsers. That's not the case anymore, given the significant number of different screen sizes and resolutions currently on the market. Anyone who is only used to desktops and an unfragmented browser and operating system landscape will have to recalibrate his or her thought process. Teams now have to design for multiple form factors, screen sizes, and resolutions. For example, a user on an iPad mini might have trouble tapping a link that is easy for an iPad user to see. Or more importantly, text might render very small on the iPad mini and make it hard for older or vision-impaired users to read.
This challenge extends to input metaphors as well. Although the tablet and desktop are close enough that they can be treated as one look, this can limit the ability to take advantage of touch interfaces. If a business opts for this approach, designers should make sure that they are creating interfaces that can work for both mice and fingers by doing things such as using big targets for tapping or clicking. The Next Web does a great job with this by providing ample room for fingers as well as mice.
Many business owners and designers assume that responsive design means significantly more documentation than a traditional build. This is not the case if the team is willing to adapt its approach. A more collaborative process works wonders, both for product quality as well as time to market. By sitting developers, designers, QA, and business strategists down together in front of a whiteboard or with a paper and pen, teams can sketch out well-thought-out, easy-to-build designs without a lot of back and forth. A few sketches are worth a thousand words when sharing concepts.
Watch out for fragmentation
Another challenge to responsive design is fragmentation. For a little while, we were blessed with a few key platforms and browsers, but the landscape is devolving into a tangle of software and hardware. Not only are there different versions of Android, for example, but the different carriers regularly make changes to their builds. The below pie chart represents the breakdown of Android devices, by platform version, that accessed Google Play within a 14-day period.
Source; data gathered over a two week period ending on Dec. 2, 2012
This splinternet can lead to lots of headaches during development and QA. The best bet is to design simple interfaces that don't put too much motion or interactivity in any one place. This key step ensures that coders don't have to put in a million hacks to make things work smoothly. An ancillary benefit is that these designs are generally easier for end users to learn, which has a very positive effect on adoption.
Consider bandwidth differences
Finally, the each device will have wildly different connection speeds to the internet. A user plugged in at home has ample bandwidth and can browse faster or perform more complicated interactions than someone relying on a wireless carrier's network. Experiences have to be designed to be simple and straightforward, requiring as little code as possible to ensure a smooth experience on multiple networks.
Consider a mix of responsive and selective
There is no question that any brand serious about its presence on the mobile web must employ a responsive strategy. But like all other options when building digital content, there are different options and shades of grey. If there are pages that generate enough traffic or profit, consider building platform-specific versions for them. Google News and Google Weather have built out a tablet-specific HTML pages that make the most of touch.
Google News on keyboard and mouse
Google News on iPad
By studying which devices and operating systems are responsible for the majority of traffic, brands can then design, build, and test releases specific to each one. This approach, sometimes called "selective design," has some pros, such as pixel-level control over key factors, but it is haunted by a few key limitations. First, this approach gets expensive, especially when a site has a lot of pages or content types that don't generate a lot of revenue. Second, over time, it requires a lot more resources to maintain and update.
If a site is going to be around for any significant period of time, the less code to manage, the better. With that said, for key pages, many major brands will create a device-specific page, especially for tablets. Amazon is a great example of this; it has built out a touch version optimized for the tablet, but it sends desktop users on similar screen resolutions to a keyboard and mouse optimized experience.
Kindle store on keyboard
Kindle store on iPad
The term "responsive design" is oft referenced, but frequently misunderstood, both in terms of how it works, as well as the huge implications it has for organizations adapting to an increasingly fragmented digital landscape. It is an abstract and evolving approach to envisioning, designing, and building scalable layouts that work across multiple form factors and screen sizes.
Designers, developers, and business strategists must understand not only what responsive design is, but also how to adapt existing content and functionality to it. Otherwise, they will quickly find themselves overwhelmed with managing multiple experiences across myriad devices. While not risk free, this approach to content presentation and development ensures flexibility and scalability over time. By carefully planning, yet quickly designing and executing across multiple form factors, organizations can move to market with experiences that are maintainable and relevant across multiple devices and contexts.
On Twitter? Follow iMedia Connection at @iMediaTweet.
"Responsive web design" image via Shutterstock.