The Future of Responsive Web Design

It wasn’t too long ago the world was introduced to Responsive Web Design, (albeit late given that it was first discussed in the early 2000’s) but nonetheless, it was then, in those infantile days along with development of mobile devices that the way we used and thought of using our mobile devices began to change. Before jumping into the topic at hand, I thought it would be prudent to re-visit responsive web design….after all you need to know where you’ve been in order to know where you are going, so lets start with a quick synopsis of responsive web design.

What is Responsive Web Design?

RWD
Responsive web design (RWD) is a design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with minimal resizing, panning, and scrolling across a wide range of devices (from mobile phones to desktop computer monitors). RWD is based on detection of the medium via the browser in use. i.e. – If a browser isn’t able to detect the viewing platform (tablet, mobile etc) then RWD likely won’t work the way you expect.

Responsive design encompasses 3 major elements:

Fluid (Liquid) Layouts:

“Liquid Layouts are based on percentages of the current browser size. They flex with the size of the window, even if the current viewer changes their browser sizes they’re viewing the site. Liquid width layouts allow a very efficient use of the space provided by any given web browser window or screen resolution.” 1

Liquid layouts are closely linked to media queries (more on that below) and special styles for optimization. Percentage-based widths alone will likely not be enough to accommodate your design for a large variety of display sizes. We will see later how to get a perfect result from liquid layouts.

Flexible Images

Flexible images are best described as those without a fixed width in pixels. This is important because the image is always represented at full width of the window / container in which it is being used. So when viewed on a desktop vs. mobile device, the aspect ratio is maintained.

Media Queries

“Media Queries is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution (e.g. smartphone vs. desktop) They are the cornerstone of Responsive Web Design.2

The problem with current RWD is that you are using the same code for all view ports and while this works, it limits the ability to quickly update your site. Take for example, a marketer that would like to switch out their white-paper offering for a video on desktop only to measure lead generation. This becomes a much more complex task that using RESS.

Whats Next?

RES
According to Bluetrainmobile.com – the immediate future is RESS (Responsive Server-side) , which is defined as a responsive website with server-side detection built-in, meaning the server will detect what device is coming to the website and deliver an appropriate experience to that device.

Remember that RWD as it stands now, requires the browser detect the medium coming to the site. This requires a lot of complex code being delivered to every visitor, every time they land on your site. Using RESS however, will allow specific code and specific image sizes optimized for that visitor’s device. This will allow a responsive website to load much faster on different devices, and also improve user experience.

If someone arrives at your site on a smartphone, using RESS will allow you to deliver content specifically for that medium, optimized for that medium…and deliver a truly mobile experience.

RESS isn’t necessarily a new method of web design . It’s more of a best practice for RWD and should be considered if you are looking to stay ahead of the curve.