Klick Health

Responsive design from the trenches

VP Strategy

Read More

Talk about creating a new or mobile-optimized website these days, and you can’t avoid the topic of responsive design. But despite being a fairly established subject of conversation (see our post from a year ago), it’s still quite misunderstood—and even contentious. So I figured a quick dispatch from the trenches was in order.

But first, a recap. With responsive design, a single website can display differently across devices using a single codebase and rules that alter design and layout for different resolutions. For example (albeit a very simple one), these rules can specify that at a desktop resolution, supplementary information appears in a sidebar, while at a smartphone resolution it appears beneath primary information. This approach differs from creating a mobile-specific site in that you don’t need a separate codebase for each supported device type.

At a high level, it works as follows:

See for yourself

At this point, some examples would probably help. To see these examples in action, you can either (a) look at them in your browser (be sure it’s a modern browser, like the latest version of Internet Explorer, Chrome, Safari, Firefox, etc.) and resize the browser window from full-width to smaller width until you see the design change or (b) look at them on your desktop computer and then on an iPhone or Android handset. Take a look:

Unfortunately, there aren’t yet a lot of pharma examples, but they’re coming—and we’re working on some projects currently that will launch in 2013. We anticipate this to be a key trend over the coming year due to unprecedented growth in mobile device adoption and internet use.

That’s important because the requisite technology (e.g. CSS3) for responsive design is widely supported on mobile browsers. While browser capabilities on the desktop can change slowly, due to the persistency of older versions, most smartphone browsers are modern because (a) smartphones are new and don’t have to contend with the same legacy software issues; (b) the dominant platforms, such as iOS, come with updated browsers with each operating system upgrade; and (c) personal smartphones aren’t locked-down by IT departments.

Advantages and disadvantages

This said, we don’t always recommend responsive design, as it’s not always suitable for a project. When considering responsive design, here are some key pros and cons:

Advantages

Disadvantages

Five criteria for choosing responsive design

So is responsive right for your next project? Typically, we recommend the approach when the following criteria apply:

Do these criteria apply for your next project? Do you have experience with responsive design? Do you foresee any challenges implementing it for future digital marketing? Let us know in the comments.

More About the Author

Simon Smith

Simon is an original dot-com veteran who's passionate about creating scalable solutions to meaningful problems. A health and technology junky, he's known to read ISIs and program apps in his spare time, when he's not planning strategies to drive our clients' digital success.

More from this author

Go from news to action. Klick Wire

Weekly Digital Health Newsletter

Klick Health will NEVER spam you. Read our privacy policy

Thank you! You're now signed up to get the Klick Wire every week - news from the world of digital health marketing.

Sorry there seems to be a problem. Please try again later.