The term "Responsive Web Design" (RWD) was coined by Ethan Marcotte in 2010. He combined three key pieces of web design: fluid grids, flexible images, and media queries. Those three components still form the basis for Responsive Design, but the implementation has evolved in the years since.
While the technical goal of RWD is to create websites that work on a wide variety of devices with one set of code, the real benefit is that RWD requires a mindset and methodology that naturally leads to better websites. Traditional websites provide templates that require carefully crafted content to fit in the provided spaces, whereas Responsive websites use the content itself as the building blocks that influence the user experience (UX). When working with Responsive websites, one must think of the content and users first, and build the site around their requirements.
The content that will be used and what actions the end users will be will taking should determine the design and UX of the site. This approach of user-centered design requires user testing throughout the entire design process, as well as a complete understanding of the content and Information Architecture (IA), and it ultimately results in a site that is easy to use, has a coherent design system, and works well on a wide range of devices.
In order for such a process to work successfully though, there are a number of rules that must be understood and followed:
The content and user requirements must always be met
This rule specifies that the content is the most important part of the site, and it must always “work.” Users should never be punished for using an older device or browser, a slow network, or because they use an assistive technology or device. Following Section 508 and WCAG compliance standards and guidelines will help ensure that content is properly displayed for every user. Also, consider what happens when JavaScript is disabled. Can users still complete their workflows? Is all of the content still accessible? Performing usability testing to ensure that the site functions correctly in every possible situation will ensure that the users’ requirements are being met.
Responsive websites will not be exactly the same on every device
While reasonable efforts should be made to develop a design system that is cohesive across devices, variations in device capabilities, form factors, software versions, etc. will inevitably result in differences from one device to the next. Additionally, Mobile UX necessitates minimum touch screen target sizes, spacing between elements, form field sizes, etc. that may impact the visual design on individual devices differently. Designers can’t guarantee that a site will always function the same everywhere, but by keeping the needs of the content and the user in mind, they can work to create a good experience across as many devices and browsers as possible.
Don’t think in terms of “mobile, tablet, desktop”
Even though we use the term “Mobile UX,” it is important to understand that there are already a wide variety of devices out there that all have different physical sizes, pixel densities, network connections, input methods, form factors, etc. Therefore, it is safest to simply assume that there is a continuous spectrum of devices rather than a limited number of categories, and that a Responsive site should work properly at any point on that spectrum. This means that a Responsive site should be optimized for touch at any size, not just on “mobile.” Font sizes, padding, margin, and all the rest should use em and rem units rather than px. CSS breakpoints should not be arbitrarily based on any individual device’s screen, but rather dictated by the content and where it naturally suggests breakpoints are needed. Following these guidelines will ensure that a site meets the need of every user, whether their devices fall squarely into a traditional “mobile, tablet, desktop” category or not.
Be more concerned with the future than the past
A Responsive website following all of the previous rules should provide a useful experience to any user that can access it, regardless of the device they are using. This means that there will be a small set of users that will have a less impressive visual experience when using the site on older or less capable devices. And that is absolutely fine. More importantly, once the basic requirements are met, a layer of code can be added to take advantage of more advanced features in newer devices. For example, a simple form that allows the user to enter an address and press a search button meets the requirements of a location search. In another user’s more capable browser, geolocation can be added to determine the user’s current location and automatically display relevant information. Including both methods of location search ensures that every user is able to perform the action, while making the UX a little nicer for some.
As more and more people use mobile devices like smartphones and tablets to access websites, it has become more important than ever to use responsive design to ensure that your site is accessible to every user. If you have any questions about how to implement responsive design on your website, please contact us, and we’ll work with you to not only create a great user experience, but a complete digital strategy that helps you get the best possible ROI for your business.
