“Summary: Responsive design teams create a single site to support many devices, but need to consider content, design and performance across devices to ensure usability.”
“Responsive Web Design (RWD) and User Experience”
Nielsen Norman Group, May 4, 2014
Mobile & Tablet, Web Usability
By Amy Schade
Defining Responsive Design
Responsive web design (RWD) is a web development approach that creates dynamic changes to the appearance of a website, depending on the screen size and orientation of the device being used to view it. RWD is one approach to the problem of designing for the multitude of devices available to customers, ranging from tiny phones to huge desktop monitors.
RWD uses so-called breakpoints to determine how the layout of a site will appear: one design is used above a breakpoint and another design is applied below that breakpoint. The breakpoints are commonly based on the width of the browser.
The same HTML is served to all devices, using CSS (which determines the layout of webpage) to change the appearance of the page. Rather than creating a separate site and corresponding codebase for wide-screen monitors, desktops, laptops, tablets and phones of all sizes, a single codebase can support users with differently sized viewports.
In responsive design, page elements reshuffle as the viewport grows or shrinks. A three-column desktop design may reshuffle to two columns for a tablet and a single column for a smartphone. Responsive design relies on proportion-based grids to rearrange content and design elements.
While responsive design emerged as a way to provide equal access to information regardless of device, it is also possible to hide certain items — such as background images, as in the Transport for London example above, secondary content or supplementary navigation — on smaller screens. Decisions about hiding content and functionality or altering appearance for different device types should be based on knowledge about your users and their needs.
RWD has potential advantages over developing separate sites for different device types. The use of a single codebase can make development faster, compared to developing 3 or 4 distinct sites, and makes maintenance easier over time, as one set of code and content needs to be updated rather than 3 or 4. RWD is also relatively “future-proof” in that it can support new breakpoints needed at any time. If a 5-inch device or 15-inch device takes off in the market, the code can support the new devices. RWD doesn’t tie design to a particular device.
See also: Hamburger Menus and Hidden Navigation Hurt UX Metrics
Want the latest in your Inbox from the Nielsen Norman Group? Sign up for their weekly newsletter. Always short insightful and useful. (No they didn’t pay me to say that nor include this link. It’s simply that I find it very useful and informative and want to share it at-large.)
Alertbox E-Mail Newsletter – “The latest articles about interface usability, website design, and UX research from the Nielsen Norman Group. You will receive one brief email every week containing summaries of our latest articles and information about upcoming events and research.“
