Responsive Design for Enterprise Web Sites
The rapid proliferation of different kinds of mobile devices is both a blessing and a curse for digital marketers. "Always-on" consumers and business buyers now have the opportunity to engage with your brand where, how, and when they desire. But that opportunity comes with a significant risk for you. As a businessperson, you have to ask yourself: Is my brand messaging consistent across all device types? Am I delivering an optimal user experience across every device? What is my competition doing, and do I have the design, technical, and financial wherewithal to stay competitive?
Responsive design, a Web design approach that leverages one content base and one codebase to render content across screen resolutions and device types, is one of several solutions clients are increasingly asking us to help them evaluate. Designed at multiple "breakpoints," or standard screen sizes, designers are able to accommodate many different devices at once. With this approach to Web design, you are able to enhance the digital experience by adapting content to suit the device context of the user's operating system, browser, screen size, or orientation.
A good place to start when determining whether a responsive Web site could be right for you is by looking at your current mobile needs and investments. By understanding where your mobile investments align with your business and customer goals, you can anticipate gaps in your mobile infrastructure that could impact your near-term competitiveness and long-term costs.
Is Responsive Design Right for You?
The decision to adopt responsive design can be a challenging one, especially if your current Web site is successful or if you've already made significant investments in a mobile Web site, mobile application, or hybrid approach. If you are fortunate enough to have Web and mobile experiences that meet your current business needs, analyze the features and the content that are working well, as well as what needs improvement. Evaluate how your site is currently managed and if it satisfies your business, end user, and customer needs. Before you move forward, consider the following:
1. Change your organization's approach. To achieve a successful responsive implementation, you must first break down the organizational silos between teams that are responsible for each digital channel. Analysts, developers, experience designers, information architects, and content strategists must work together as a cohesive unit. Product owners and senior management must be involved in the project early to ensure buy-in and top-down support. Defining the responsibilities of each team member and organizing timelines up front will help the team start producing quickly.
2. WCM plays a key role. A responsive design strategy should take into account the need for a Web content management (WCM) system that has the ability to provide scalable functionality. WCM for a responsive site should take a number of things into consideration, such as flexibility of content and preview testing. An important but often overlooked role in a WCM is that of content editors. Editors should be aware of how to edit content and what implications those edits might have at every breakpoint.
3. "Desktop down" or "mobile first"—decide early to minimize costs and speed execution. Starting with the smallest breakpoint helps the stakeholder team focus on the most important content for the business and for users. We usually recommend starting with a mobile first strategy, which requires an understanding and agreement of which content is the most important to achieving consistent brand messaging and optimal user experiences. From this point, designers can progressively add features and content as the screen size expands.
But mobile first may not be the best starting point for every responsive design project. In some cases, it might be better for designers to pursue a desktop down approach. This strategy starts with a full-featured desktop breakpoint that filters down to the mobile level.
4. Front-end development skills are a must. Front-end development skills that include HTML/CSS and JavaScript are essential to a successful responsive implementation. JavaScript is one of the core technologies used in implementing a responsive site, and HTML5 is a big step as far as standards are concerned. If you don't have developers with strong front-end skills in-house, recognize that you will need to bring on extra resources to support this critical need.
The ROI of Responsive Design
Now that you've evaluated the resource and process impacts, consider the potential ROI:
1. Greater content consistency. Placing content at the center of your strategy, and having one central repository for it, simplifies the maintenance and management of that content. Addressing content once, as opposed to multiple times, reduces the time and effort dedicated to its development and delivery.
2. Monetized content. With responsive design, the door is opening to include advertisements, shared content, and other content that is easily editable. The future for advertisements and responsive design looks promising, and many features are being explored. For example, the ad itself could be responsive, while it is anchored at one point on the page. As the page is pulled in, the imagery on that ad can change as well to accommodate for the shift in screen size. Ad packages can also be defined by individual breakpoint: one for mobile, one for tablet, one for desktop, etc. However, in order to monetize across devices, the business model for selling advertising space will have to adapt to accommodate responsive sites. This is an area we will continue to explore as more sites adopt responsive design.
3. Future-proofed IT investments. Employing the latest technologies and Web standards allows for better scalability and extends the useful life of your digital investments. Your initial implementation can include the essential breakpoints, and more can be added as necessary.
4. Improved SEO performance. The typical mobile approach over the last few years included brands creating separate mobile Web sites with a unique URL for each. Digital marketers have come to realize that this approach creates a splintered view of the same content among different URLs. A responsive design allows all views from all devices to register to a single URL, improving page rank and SEO performance and making it easier to find content.
5. Enhanced analytics. Responsive design can make performance monitoring easier, since you are analyzing one set of URLs and not multiple independent sites. All your data is aggregated, and you can even run concurrent A/B tests across device platforms. You can still analyze per channel and device. Google Analytics already allows you to identify device operating systems. There is also device detection software commercially available. Multiple client-side and server-side options exist as well.
Responsive design places content, rather than the device, at the center of Web design, providing a consistent user experience on any device a consumer chooses to use. Built from the ground up, a responsive approach is one of several solutions to the growing multichannel challenge that marketers are facing. In today's business environment, it's worth considering.
Beau Brewer is the vice president of business development at Siteworx.