Conditional loading for responsive web design

Paul Hammond wrote a large article entitled Speed ​​Up Your Site with Delayed Content . In his material, he outlined the technique for loading part of the content, such as images of user profile avatars in the comments, after the initial page load, which gives a good performance boost when the page loads.

There are other situations where deferred content loading can be applied, for example, in responsive web design .


Initially, responsive web design was applied to personal computer websites to allow them to adapt for small screen resolutions. But now responsive web design is used more for the new approach called “ mobile first ”.
')
An early approach to website development using responsive web design initially envisioned the development of a large, multifunctional website for personal computers and devices with large screens, followed by adaptation for mobile devices. At the same time, part of the site’s functionality (additional menus, auxiliary panels, advanced tools, etc.) was subsequently hidden from users by means of media queries. The user at the same time saw only what is intended for display on mobile devices. The disadvantage of this approach is that some of the content (and often most of it) is still uploaded to the user's browser, thereby increasing the page load time and the traffic consumed.

One of the main advantages of the mobile first approach is that this approach forces you to concentrate on the main content of your page. Perhaps this approach would be even more correctly called " content-first ". In this approach, you only display the essence of your page and discard aside all the additional conveniences of a large, full-sized website that are irrelevant or introduce additional, but optional functionality.

But what do you do when your page loads on a device that, due to its sufficient display resolution, is capable of displaying additional site functionality? You can load such additional optional functionality with the help of Ajax technology and the techniques Paul Hammond described in his article. The only difference is that you first need to run a quick test to determine whether the viewing area of ​​the device on which your page loads is wide enough to accommodate additional content.

Imagine this situation: I published an article about cats and I would like to include relevant news about cats on the topic in the elements of the sidebar, but only if there is enough space on the screen for this very sidebar.

We will use Google News API as a news resource. This resource is great for using conditional loading, because we don’t want third-party services to slow down the loading of our page. So send a request to the Google News API after the page loads.

Here is an example of a function that uses Ajax to get news.

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 also wrote a callback function displayNews, which accepts JSON from an Ajax request and adds content to the newsresults block.

 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 the add news function at the bottom of my page.

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

Now, if I want to receive news only at a certain accessible resolution of the browser's viewing area, I can wrap the function with an if block.

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

If the browser viewing area is wider than 640 pixels, the function of receiving and adding news in the container with the newsresults indicator will start.

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

And now, to leave the opportunity for mobile device users to view news about kittens, change the container, leaving the opportunity to receive the news on their own:

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

Example

So, visitors with small screens will see a link to receive news, and users with large screens will see the news list directly.

Before that, I concentrated on developing web pages solely on technologies such as HTML and JavaScript, but the approach presented above allows us to concentrate on the content delivery strategy and information structure. With the introduction of a conditional download, the content can not only "appear" and "be hidden" but also "be loaded" under certain conditions.

It was just an example, but I hope that it illustrates that conditional loading can be an important part of responsive web design.

This article is a free translation of the article Conditional Loading for Responsive Designs by Jeremy Keith