Responsive Design 2.0: Dynamic Serving and The Future of Mobile Web Design

April 28, 2014

Back in 2010, it seemed to come out of nowhere – responsive web design (RWD) – a term coined by visionary designer Ethan Marcotte that would soon become a household name in web design and mobile strategy. For many, this was an entirely new concept: the idea that web content could be intelligently adapted to a variety of mobile form factors by using HTML and CSS alone.

I have to admit, when I first saw a responsive design demo back in 2010, I instantly assumed that client scripting i.e. JavaScript was used to rewrite the page elements on the fly as the browser width changed. Nope. It was 100% pure HTML and CSS.

This was a game-changing development. RWD has enabled us to support a range of devices while maintaining a single codebase. At the same time, we could take advantage of what would become an SEO best practice as well: consistency of URLs and content for both desktop and mobile users. No more separate “m dot” site. No more browser detection and URL redirection. Just one site for all users. For these reasons, Google soon began to officially recommend RWD as the preferred solution for smartphone optimized sites.

Within a couple years, responsive web design went from being a bleeding edge feature to an essential component of most website redesign projects. But what started out as a somewhat simple solution (layouts for desktop, tablet, and smartphone) has now become a vast and complex landscape. An analyst at Morgan Stanley suggests that, in the next five years, mobile traffic will completely surpass desktop traffic to become the primary way that people access the web. With the increasing spectrum of mobile and internet-enabled devices in the marketplace and the continued growth of mobile traffic, the responsive approach will certainly continue to be central to how we design for the web.

However, RWD alone is not enough to provide a truly optimized mobile experience as it has a built-in inefficiency: site performance. To demonstrate this, let’s first understand how responsive web design actually works.

Media Queries

Responsive web design is essentially made possible by media queries – a part of the CSS3 specification that allows designers to target styles based on a number of device properties, such as screen width, orientation, and resolution.

In fact, the ability to apply separate styles to content based on media types has long been a standard part of HTML and CSS. For example, a standard way to provide site visitors with printer-friendly versions of our content is to define a separate CSS style sheet for browsers to use when the user prints the page, such as in the following example, which shows the use of the media attribute:

    <link rel="stylesheet" href="print.css" type="text/css" media="print" />

Media queries expand the capabilities of the media attribute by allowing us to “query” the device to find out what display capabilities it has. Let’s look at a simple example of a media query in CSS:

    @media screen and (max-width:480px) {
        /* my fancy styles go here */ 
    }

In this example, we see a media query that checks if the user’s device has a screen that is no wider than 480 pixels. The power of media queries can be leveraged by combining multiple criteria into a single query, thereby further customizing the user experience and delivering styles for specific configurations, such as in the following example, which applies styles only for handheld devices in the landscape orientation with a minimum width of 700 pixels:

    @media (min-width: 700px), handheld and (orientation: landscape) {
        /* my fancy styles go here */ 
    }

Media queries are an excellent way to deliver different styles to different devices and configurations, providing the best experience for each type of user. But, by its very nature, RWD delivers the same source code to all browsers – regardless of device type or available bandwidth. That means in order to view a RWD site, mobile users must download all of the page source code – including the desktop-specific formatting, high-resolution images, and other stuff they don’t need.

This often results in huge inefficiencies in mobile site performance. Remember, RWD is a front-end technique – meaning that the server delivers the same content for everyone. So, to solve this problem, we must combine the benefits of front-end optimization with back-end or server-side optimizations. In this way, we can not only tailor the design and layout of the content, but adapt the content itself. For example, when delivering an image to be displayed on a widescreen monitor, we can use large, high resolution JPEG. But there is no reason to deliver the same large image file for display on a smartphone with a 3-inch screen – needlessly using up the user’s bandwidth, and slowing down the page load. So, how can we improve upon this?

Dynamic Serving

Google defines dynamic serving as, “a setup where the server responds with different HTML (and CSS) on the same URL depending on the user agent requesting the page”. In other words, dynamic serving is the idea of changing the content that gets served to be the most suitable for the given device or context. When combined with RWD, we create a strategy that involves both front-end and back-end optimization. The idea of combining responsive design with server side components is also referred to as “RESS”.

What's Next

While there will always be cases where a separate mobile site or app is the most appropriate option, in general, the future of web design is responsive. But providing an effective user experience across devices will continue to increase in complexity. Media queries alone are not a viable solution for true mobile experience optimization. Approaches like RESS, that provide dynamically served content to adapt to the context of the user, will emerge as the best practice.

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

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.