Responsive Web Design: You’ve Come a Long Way

In the last few years, responsive web design (RWD) has become the standard website implementation to address the needs of mobile users. During that time, RWD has evolved from a basic, template-based approach to a sophisticated and customized one. If you’re thinking about redesigning your site to optimize for mobile, you’ll want to understand what a responsive design looks like today as well as where it’s going next in order to make sure you spend your redesign dollars wisely.

The idea of responsive design developed from the desire to optimize for the mobile user experience while maintaining one code base, rather than maintaining both desktop and mobile versions of the website.

Responsive designs started off simply, making heavy use of templates to create website pages adjusted for mobile. These early implementations featured a minimum number of breakpoints based on the relatively small number of differing screen sizes of mobile devices and set the standard for creating a better mobile user experience and web marketing workflow. As the number of mobile devices on the market grew, the various screen sizes offered did as well, and responsive design increased its sophistication accordingly.

With more screen sizes to design and develop for, and more web practitioners learning the ins and outs of responsive design, the “snap to grid” approach started to gain popularity. This type of build typically uses three breakpoints based on screen sizes of desktop, tablet, and phone, however in some cases the breaks for tablet occur at both the horizontal and vertical page widths, adding a fourth breakpoint.

As the number of breakpoints in a responsive design tried to keep up with the ever-increasing number of screen sizes of mobile devices, designers and developers started focused on implementing a fluid design that provides unlimited views. While this method is quite effective at providing the best mobile user experience, it does require heavy design and development effort as it is highly customized. In order to successfully build a responsive website using this methodology, many decisions must be made through the design and development process to address how specific visual details will appear when collapsing and expanding. Decisions can include:

• Customized menu choices based on device

• Content inclusion, exclusion, and organization

• Tuning for mobile performance by being selective about features and images

• Incorporation of device specific presentation features (e.g. screen takeover)

• Incorporation of customized interactive features (e.g. slideshows)

These days, responsive design as we know it has started to reach its maturation point. In fact, we’re already talking about the next stage of responsive web design or “responsive 2.0.” And while that may still be a ways off, websites utilizing a fluid responsive design can feel confident that they are providing the best available mobile user experience. After all, speedy performance, great usability, and fewer distractions are always a recipe for success.