Responsive web design (RWD) has been hailed by many as a silver bullet, capable of transforming your dusty old website into a modern day marvel -- one able to deliver the optimal user experience to your customers whether they're using a smartphone, desktop PC, or internet-enabled television. Mashable's Pete Cashmore declared 2013 to be "the year of responsive web design." Google even went on record recommending that "webmasters follow the industry best practice of using responsive web design."
It all seems so simple: With some CSS3 media queries and targeted break points, you too can have a website optimized for the modern, mobile-oriented web. And with a large percentage of internet users choosing their smartphones as their primary (or only) online browsing devices, there is no better time to consider a responsive approach to your website.
But anyone in search of a silver bullet is likely looking for a simple solution to what is actually a very hairy problem.
Executing werewolves is difficult business
A silver bullet is an integral part of resolving any werewolf challenges that you might encounter, but it's only a small piece of the puzzle. After all, werewolves are deadly, fearsome, and nasty beasts. Dispatching them -- with or without a silver bullet -- is never easy. Any experienced werewolf hunter can attest to the fact that the proper strategy, team, training, and tools will put you into the best possible position to effectively fire your lethal silver bullet.
Like werewolves, too many websites have a tendency of transforming into hairy, unruly behemoths over time -- our own personal beasts. Months or years of organic growth coupled with legacy back-end systems only make it more challenging to face the idea of a redesign, let alone a responsive one. While RWD is absolutely an outstanding approach to serving web content, there are several factors that you'll need to be aware of if you want to succeed. The larger, more complex, and older the site, the more challenging it becomes to smoothly make the successful transition from a hulking beast to a sleek and mobile-friendly responsive design.
What follows are three reasons that you're not ready to begin a responsive redesign engagement, each with steps that you'll want to take to successfully fire your RWD silver bullet.
Reason 1: Your content stinks
The awesome thing about responsive design is the fact that the content is the same whether it's being viewed on a phone, tablet, laptop, or Commodore 64. This content uniformity is good for a number of reasons.
First of all, search engines don't have to contend with multiple versions of content (sometimes radically different or missing content) depending on which version of the website is being indexed. This is the primary reason Google took a pro-RWD stance. It also makes it easier for your customers to find you via a search engine.
Secondly, when content can be found at a single URL regardless of the device with which the user is browsing, it makes it much easier for people to share. Let's face it: Making it easier for people to share your content is good for business. For more and more websites, social sharing via Twitter, Facebook, LinkedIn, Reddit, StumbleUpon, and other social properties drives substantially more traffic than search engines. Making it easier to share your stuff (via a single URL) should be a priority, and RWD helps make it possible.
Finally, while form and functionality should vary depending on which device is being used, research has shown that users expect to be able to find the same content no matter how they're accessing a website. Limiting the amount of content or showing altogether different content on a smartphone versus your "full" desktop website is a recipe for confused and disgruntled users. With the number of mobile devices accessing the web expected to exceed the number of desktop and laptop connections, it's critical to consider the mobile audience a priority.
(Source: Mary Meeker, KPCB Internet Trends 2013)
All of this content business is well and good, until you recall the monster lurking in your data center. When was the last time you took a concerted look at all of the content -- all of the content -- you're hosting on your website? If you're like most organizations, it's been a while. And, I hate to break this to you, but I'd be willing to wager that a large percentage of that content isn't great. Most of it is probably outdated or even downright worthless (you don't still have content appearing in Flash, do you?). And it almost certainly isn't optimized for viewing on a screen the size of a deck of playing cards.
That's why the most challenging part of a successful RWD redesign isn't determining break points, testing a range of browsers and operating systems, or designing the UI. It's the fact that your content just isn't ready to be universally accessed by the myriad of devices browsing the web. It's not mobile friendly.
So step one in the RWD process should be a content strategy engagement. This process should involve an inventory and analysis of all of your online content, as well as offline content (e.g., brochures, direct mail, etc.). A great deal of your content will be removed, consolidated, reorganized, and edited with a focus on rewriting to reflect your brand, tone, and readability across multiple platforms.
Reason 2: Your CMS can't support responsive content
Speaking of content, part of a good content strategy engagement should include an evaluation of your content management system (CMS) and a plan to maintain the content on an ongoing basis.
Chances are very good that the CMS your organization uses also serves as a web publishing tool (WPT) that generates markup via a WYSIWYG editor used by authors to publish web pages. (WYSIWYG -- pronounced wiz-zee-wig -- is short for "what you see is what you get.") While WYSIWYGs are capable of enabling virtually anyone to be able to compose and edit content for a website, they can also be used to ill effect. Publishers using a WYSIWYG often unwittingly insert media and code (embedded videos, images, tables, or pasted copy from Word documents) that can cause even the most bulletproof layouts to break. Several WYSIWYG editors also produce invalid and non-semantic mark-up that could wreak havoc on the fluid grids used to implement a responsive layout.
In order to successfully transition your content to RWD, you might need to reconsider your approach to the tools that store and publish content. Dan Jacobson, who transformed National Public Radio's content management solutions, has stated, "The future of content management systems is in their ability to capture the content in a clean, presentation-independent way." That means, when it comes to selecting an optimal, forward-thinking content management tool, stop thinking in terms of marrying pages and presentation. Focus on workflow and the ability to extract clean, device-agnostic content via an API to a variety of platforms based on meta data, and chunks of content -- not pages -- that can flow into a variety of form factors and templates.
Reason 3: Your team isn't equipped to execute
Once your content strategy and content delivery infrastructure are in order, you'll be in an excellent position to successfully execute a responsive redesign. But, there's still another hurdle that you'll need to overcome in order to fire your responsive silver bullet: the skills and process of your design and development teams. Responsive web design requires that your team is equipped to design and develop with the mobile user in mind. It also calls for a new, more collaborative approach to the design and development process.
From a design perspective, designing for mobile means understanding touch affordances and interactions -- no more hover states and point and click. It also involves being well versed with mobile form factors, native controls, and interactions for an array of mobile platforms (e.g., iOS, Android, Windows, Blackberry, etc.) and designing graphics for a variety of pixel densities. Designing responsively also requires that designers let go of any illusions that designs can be "pixel perfect" across the myriad of devices that may be accessing a website. For example, Facebook sees 7,000 different types of mobile devices visiting its site daily; have fun QAing literally thousands of devices.
List of displays by pixel density (source: Wikipedia)
Responsive web design means that you are not designing for any device or browser in particular -- you're designing for all of them (even ones that haven't necessarily been invented yet). That means designers need to focus on prioritization of content (which will vary based on user and use case) rather than creating myriad pixel-perfect layouts. It means creating a style guide that can be applied fluidly to a variety of form factors and working very closely with a front-end development team to apply those styles to real content within device browsers. Given the range of mobile browsers and their capabilities, some layouts will look better than others. It's important to focus efforts on key platforms (based on analytics) to ensure optimal performance and layout on devices that comprise your primary target audience.
Speaking of working in unison with developers, the collaborative nature of the responsive design process lends itself to Lean UX, Hungry Man, and Agile development methodologies. A waterfall approach (focusing on the majority of design work prior to development) is not an optimal way to conduct a RWD engagement. Designers and developers should work together closely during quick sprints to iterate, test, and tweak designs within browsers rather than working strictly from wireframes and design comps.
In order to ensure that your team is equipped with responsive and mobile design and development skills, consider training. There are a number of workshops and conferences across the country that can help train your team to design and build for mobile or operate in an Agile environment. There are also trainers and consultancies that will be happy to work with your organization to improve a team's skills or process. You might also want to consider bringing in an outside firm that specializes in mobile and responsive implementations (remember to distinguish native application experience from responsive web expertise when evaluating an agency's prior work) to augment your internal team or run a RWD project lock, stock, and barrel.
With a plan to create sustainable, mobile-friendly content; a system to deliver it; and a team in place proficient in designing and programming in a collaborative, device-agnostic environment, your organization will have what it takes to pull the trigger on your RWD silver bullet. Happy hunting.
On Twitter? Follow iMedia Connection at @iMediaTweet.