Responsive Web Design: Reaching ALL Screens


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. In responsive design, page elements reshuffle as the viewpoint 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 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 an advantage 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.

Responsive design is a tool, not a cure-all. While using responsive design has many perks when designing across devices, using the technique does not ensure 100% usable experience. Teams must focus on the ongoing changes to mobile and tablet device technology and its impact on content, design, and performance in order to support users across all devices.

View our The BELLE Michigan Fund success story and imagine what Courtland Consulting can do for your brand.

For additional information or a quote for web services, please contact:

For more information, visit these resources: Nielson Norman Group , Adobe, Creative Bloq , Courtland Consulting