Nearly three decades after its inception, the World Wide Web has transformed into an ever-evolving platform; one that’s required to meet a number of challenges as new technologies and capabilities continue to change the web landscape. Most recently, the ubiquity of mobile devices and heightened expectations for user experience are dominating these areas of change.
Responsive web design (RWD) is an approach that allows the web to adapt to these changing needs. B2B marketers need to understand all facets of this approach to take full advantage of the modern web.
Benefits of Responsive Web Design
RWD, a term coined by Ethan Marcotte in 2010, is technically defined as the combination of fluid grids, flexible images and media queries. These qualities all contribute to the following key benefits:
- A better user experience
- Lower overall cost—no separate mobile site, one content management system and one codebase
- Consistency across all devices
- A single URL
- Improved SEO
- Forward-thinking — it will work on devices that don’t exist yet
Understanding the RWD Approach
The continuous evolution of the web, in addition to the multitudes of devices that access it, requires marketers to have a solid grasp on the many tenets and capabilities involved in responsive web design. These include:
Page layout — There are hundreds of resolutions and form factors that affect page layouts, which allows for a tailored view of content for the best user experience possible.
Workflow — Similar to the change from print to web, websites come to life in the browser in new ways; they are living, breathing artifacts that are no longer static. This requires a non-linear workflow to ensure cross-collaboration among teams achieves the iterations needed.
Mobile form factor — When we consider this aspect, we aren’t designing for a specific device; instead design is based on mobile device capabilities such as swipe functions, touch area, location, finger size and reach, microphone and camera, and phone dialing. Cramming a desktop site onto mobile is not the right approach but one we see too often.
Analytics — RWD relies heavily on big data to monitor trends in user experience. Metrics like device, bounce rates, time on site and dead-ends are all great indicators of what’s working and what’s not. Mike Weisert offers a more in-depth look on making analytics work for you here.
SEO — This has become all about the searcher and achieving the best user experience possible. RWD addresses this directly as Google favors responsive sites with one URL, low bounce rates and time spent on site, whereas it will serve up warnings to users when sites are not mobile-friendly.
Performance — It doesn’t matter if you have the best content, design and experience, performance trumps all other efforts. Studies have shown 25 percent of users will abandon your site if it doesn’t load within 4 seconds. Performance is really a part of design, with many behind the scenes efforts.
Browsers — Don’t fight the browser wars! With so many different browser capabilities, consistency here is a moving target and it’s okay to have varying experiences across browsers.
Content & Media — The emphasis on content existed long before RWD but new considerations such as length, format and grid priority are now top-of-mind when taking a content-first approach to design.
Testing — It’s impossible to test across every device available but there are ways to ensure optimal design and performance with the use of tools like Chrome DevTools, BrowserStack and Responsive.is/.
There is still much to be discovered and improved with responsive design; with only 15 percent of sites currently responsive, the web needs to catch up to users’ needs and expectations. Marketers who understand the many facets of responsive web design will be set up for success in a web atmosphere that’s constantly shifting.
For more on user experience and mobile design, read “Reshaping Behavior: Mobile's Impact on Users and Behavior.”