Responsive Design Planning: More Than a Line Item

Responsive design, as a whole, represents pretty incredible potential: your website, instantly repurposed to the ever-growing myriad of mobile devices and operating systems, without substantive changes to the back-end. Sounds great, right? And it’s absolutely possible. However, there’s a misconception about what “responsive design” entails, as if it’s a single approach that instantly customizes website experiences for any mobile device.

While there are simple ways to achieve the basics of a “responsive” website, depending on your goals and needs, responsive design can require quite a bit of planning, user experience design and coding to get right. So, before you jump with both feet into creating a responsive version of a website, here are a few things to keep in mind when allocating a budget for responsive design.

1. Are we talking about devices or screen sizes?

This distinction came up in a recent project. We created a desktop version of a website and then went to work on what we were referring to as the “smartphone” version. Quickly it became clear that we were not working on a “smartphone” version but a “narrow layout.” Budget, scope and deadline dictated that the site’s functionality and HTML were not being altered at all. We were only going to apply some different CSS to adjust the layout of the page below a certain pixel width threshold. So, we were talking about a version of the site based on screen width, not device type. It may seem like semantics but somehow calling a site a “smartphone” version can suggest a design that targets smartphones and their specific capabilities (touch screens, orientation sensors, geolocation abilities, cameras etc), not just their screen size.

The takeaway? Creating narrow layouts is a fairly straightforward process, and goes a long way towards making any website more usable on smartphones. If you would like smartphone specific features, you will definitely need advance planning to think through how the experience will work, and some extra time and money.

2. Pixel Density

Just when we were all getting comfortable with the idea of serving different CSS to different devices using media queries based on pixel width, Apple retina displays and other screens with higher pixel density hit the market, and a pixel’s no longer a pixel! Just to get an idea of what I’m talking about, take a look at this comparison of some popular devices and their pixel densities (measured in pixels-per-inch or ppi):

*Source: Wikipedia

So, the race is on to create denser and denser displays. That’s great and all, but you can see how it throws a monkey wrench in our pixel-based media queries for sizing design elements. Think of it this way, thanks to its HD screen, an iPhone 4 in landscape mode is 960 pixels wide. 960 pixels! That’s as wide as many of the desktop screens out there, particularly on lower quality budget machines. So, with the advent of these high-density displays, pixel-width is only one parameter we can reliably use to ensure websites translate effectively across not only screen sizes, but screen densities.

The solution? If you’re looking to design a user experience that’s equally good on any device, you may need to include a “device pixel ratio”^* to help out with assigning the proper CSS to the proper devices. While this goes a long way in helping account for the wide variation in pixel density across devices and screens, each new media query involves time and budget for coding and testing. So you may want to decide which devices really matter to you in advance based on your audience profile before customizing your CSS to account for every screen under the sun.

3. Touch-Screen Versus Mouse

If you own a smartphone or tablet, you’ve tried navigating one of your favorite “desktop-only” sites, trying to use your finger to click on microscopic links and buttons. Frustrating! It’s no surprise that website user experiences are quite different depending on whether we are sitting at a computer or holding a smartphone:

For the desktop browser scenario, you normally have: – a very small pointer (cursor) – a very accurate pointing tool (mouse) – a user in a static scenario (sitting down using a device that is also sitting on something).

Now let’s compare that to your regular smartphone user who’s got: – a larger pointer (fingertip-sized) – a less stable pointing tool (finger) – a more dynamic position (standing or sitting or walking)

So, when we address creating a narrow layout, we’re not just thinking of the size of the screen but how it is used. For example, you may need larger buttons that are easier to see and touch for your small screen users. And this is just one example of the things you want to consider in advance if you want to create a truly mobile version of your site. This means reviewing each page layout to make sure it’s not only readable but also functions smoothly for mobile audiences. If your mobile audience is a high priority for you, this kind of planning makes a lot of sense, and you should allocate more planning, design, and development to get it right.

4. Responsive Images

If we serve the same HTML and images to our desktop users and our small screen users, we may be ignoring the possibility that our small screen users are likely to be bandwidth-constrained (e.g. accessing the site using a cellphone connection) and may have to wait longer for large images to load. Maybe this is something there is not time and budget to consider but “responsive design” includes the concept of serving different images to different users based on the same criteria used to serve different CSS. There are currently technical limitations to doing this easily and, even though there are a myriad of potential solutions out there, we still have some time to wait for an industry standard.

In any case, addressing responsive images is going to take a good deal of time to plan and code, not to mention the extra time needed to create multiple image assets.

5. Testing

So, you’ve coded your narrow layout. You shrink your browser window and your layout adjusts beautifully to snap to your customized narrow layout view. Wouldn’t it be nice if your work was done? Not quite. You’ve got to see how this layout looks and works on actual devices people will be using to access your site, especially devices of differing pixel densities.

Reminiscent of the good ole days of checking your front-end code in IE6 (but nowhere near as bad as, trust me…), when it comes to responsive design, you are almost guaranteed to find things that need fixing. And since we’re not actually targeting specific browsers or devices, it’s part of the job to check your code on a variety of devices that meet your audience profile and narrow layout requirements.

Yup, more time and budget.

The Bottom Line

That’s what this article is really about: the bottom line. In a world of unlimited time and budget, you’d do everything under the responsive design sun to custom-tailor user experiences for each and every screen and device out there. But, in the real world of schedules and budgets, it’s critical to be familiar with some of the underlying components of responsive design so you can plan intelligently, prioritize your goals and make good decisions to achieve them on time and on budget.

* To help us compensate for all these different device resolutions, we can calculate a “device-pixel-ratio”. For this, we need the concept of a device-independent-pixel (dp). Fortunately, we can use 160ppi pretty safely these days as our dp. We can use this value to calculate a device-pixel-ratio (the ratio between the device pixel density and the device independent pixel density).

For example, for the iPhone 4, we divide 326 by 160 to get a device-pixel-ratio of 2 (rounded). This value can be used in a media query, like this:

@media
only screen and
(device-width: 320px) and
(-webkit-min-device-pixel-ratio: 2) {
    /* CSS HERE */
}