Conditional Loading for Responsive Designs

On the eighteenth day of last year’s 24 ways, Paul Hammond wrote a great article called Speed Up Your Site with Delayed Content. He outlined a technique for loading some content — like profile avatars — after the initial page load. This gives you a nice performance boost.

There’s another situation where this kind of delayed loading could be really handy: mobile-first responsive design.

Responsive design combines three techniques:

• a fluid grid
• flexible images
• media queries

At first, responsive design was applied to existing desktop-centric websites to allow the layout to adapt to smaller screen sizes. But more recently it has been combined with another innovative approach called mobile first.

Rather then starting with the big, bloated desktop site and then scaling down for smaller devices, it makes more sense to start with the constraints of the small screen and then scale up for larger viewports. Using this approach, your layout grid, your large images and your media queries are applied on top of the pre-existing small-screen design. It’s taking progressive enhancement to the next level.

One of the great advantages of the mobile-first approach is that it forces you to really focus on the core content of your page. It might be more accurate to think of this as a content-first approach. You don’t have the luxury of sidebars or multiple columns to fill up with content that’s just nice to have rather than essential.

But what happens when you apply your media queries for larger viewports and you do have sidebars and multiple columns? Well, you can load in that nice-to-have content using the same kind of Ajax functionality that Paul described in his article last year. The difference is that you first run a quick test to see if the viewport is wide enough to accommodate the subsidiary content. This is conditional delayed loading.

Consider this situation: I’ve published an article about cats and I’d like to include relevant cat-related news items in the sidebar …but only if there’s enough room on the screen for a sidebar.

I’m going to use Google’s News API to return the search results. This is the ideal time to use delayed loading: I don’t want a third-party service slowing down the rendering of my page so I’m going to fire off the request after my document has loaded.

Here’s an example of the kind of Ajax function that I would write:

var searchNews = function(searchterm) {
	var elem = document.createElement('script');
	elem.src = 'http://ajax.googleapis.com/ajax/services/search/news?v=1.0&q='+searchterm+'&callback=displayNews';
	document.getElementsByTagName('head')[0].appendChild(elem);
};

I’ve provided a callback function called displayNews that takes the JSON result of that Ajax request and adds it an element on the page with the ID newsresults:

var displayNews = function(news) {
	var html = '',
	items = news.responseData.results,
	total = items.length;
	if (total>0) {
		for (var i=0; i<total; i++) {
			var item = items[i];
			html+= '<article>';
			html+= '<a href="'+item.unescapedUrl+'">';
			html+= '<h3>'+item.titleNoFormatting+'</h3>';
			html+= '</a>';
			html+= '<p>';
			html+= item.content;
			html+= '</p>';
			html+= '</article>';
		}
		document.getElementById('newsresults').innerHTML = html;
	}
};

Now, I can call that function at the bottom of my document:

<script>
    searchNews('cats');
</script>

If I only want to run that search when there’s room for a sidebar, I can wrap it in an if statement:

<script>
if (document.documentElement.clientWidth > 640) {
    searchNews('cats');
}
</script>

If the browser is wider than 640 pixels, that will fire off a search for news stories about cats and put the results into the newsresults element in my markup:

<div id="newsresults">
    <!-- search results go here -->
</div>

This works pretty well but I’m making an assumption that people with small-screen devices wouldn’t be interested in seeing that nice-to-have content. You know what they say about assumptions: they make an ass out of you and umptions. I should really try to give everyone at least the option to get to that extra content:

<div id="newsresults">
    <a href="http://www.google.com/search?q=cats&tbm=nws">Search Google News</a>
</div>

See the result

Visitors with small-screen devices will see that link to the search results; visitors with larger screens will get the search results directly.

I’ve been concentrating on HTML and JavaScript, but this technique has consequences for content strategy and information architecture. Instead of thinking about possible page content in a binary way as either ‘on the page’ or ‘not on the page’, conditional loading introduces a third ‘it’s complicated’ option.

This was just a simple example but I hope it illustrates that conditional loading could become an important part of the content-first responsive design approach.