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:
- Wireframe and design interfaces for different devices/resolutions (usually common desktop, tablet and mobile resolutions)
- Develop a single site with a single codebase to serve the appropriate layout and design for each device/resolution
- Use rules (such as CSS media queries) to show the appropriate layout and design for the appropriate device
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:
- Klick’s website: Since you’re here, give it a shot!
- Velcade RN (https://www.velcade-rn.com): This is a simple responsive site that Klick created for registered nurses.
- Clear Air Challenge (http://clearairchallenge.com/): This is a more complex responsive site where the design has many “steps” and several layout changes.
- Earth Hour (http://earthhour.fr/): This is another fairly complex example that incorporates video.
- Fork CMS (http://www.fork-cms.com/): Another example that demonstrates multiple “steps” for different devices, meaning that it shows a different layout and design for multiple devices, not only desktop and mobile.
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:
- More cost-effective for the long-term due to maintenance of a single codebase rather than multiple codebases
- Ensures content available for different devices is always up to date (no need to ensure multiple codebases are updated when changes are required)
- Can reduce regulatory burden once responsive-design review process is established; it may not be necessary to review every page of different sites for different devices once your regulatory department understands how the design differs for each device, and that the available content will be the same (or where it will differ)
- Better future-proofing; avoids the need to create specific sites for each new device/resolution (and with the ongoing mobile device wars, and new devices seemingly launching each month, this can be an important consideration)
- Becoming a best practice and recommended approach (for example, Google explicitly recommends it for mobile search engine optimization)
- Generally, not suitable for complex applications, games, or multimedia applications where some more advanced interactions are required; this may change, however, as HTML5 support strengthens
- Generally, not suitable for a large existing website; converting it to responsive design can be more expensive than creating a mobile-specific site (although the long-term cost-savings may still recommend the responsive approach)
Five criteria for choosing responsive design
So is responsive right for your next project? Typically, we recommend the approach when the following criteria apply:
- Project is starting from scratch and there is no need to re-code an existing website
- Required mobile functionality is fairly traditional, not excessively complex and works well with common user interactions (taps, etc.)
- Client’s internal regulatory group is open to or already accustomed to responsive design, and amenable to reviewing content for different resolutions in a more streamlined fashion that creates efficiencies
- Will reduce the amount of future maintenance required (such as by reducing the number of codebases that must be maintained)
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.