Responsive Web Design: You’ve Come a Long Way

May 21, 2014

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.

Related Reading

Why Today Is Already Too Late To Make Your Website Mobile-Friendly

If you’re still thinking about how to make your website more mobile-friendly, you better stop thinking and start doing beca

Content Considerations for a Responsive Web Design

When you embark on a responsive web design project, you’ll be spending a lot of time looking at how designs resolve from one browser experience to another, and wireframing layouts across devices.

#makeitawesome: StudentCity Launches New Responsive Website

While every college and university seems to have their own unique school traditions, spring break happens to be a

An Event Apart: Boston 2014

An Event Apart is billed as “the design conference for people who make websites” and each year the experience exceeds expectations.