Answering the Responsive Design Speed Dilemma

ResponsiveJS' Conditional Loading Helps Solve Puzzle

When “Responsive Design” first entered the web’s lexicon the discipline was focused on optimizing the visual experience of a single website across a spectrum of devices. This first wave of responsive design saved us from the horrors of resizing, panning, and excessively scrolling on our phones, but did not address an equally important cross-device challenge: site speed.

Speed should be an ongoing concern for every responsive project, and in this post I want to highlight the newest ways in which ResponsiveJS is solving industry wide challenges.

Let’s imagine you have a section of content on your website that is not absolutely vital (some people label the inclusion of non-essential content as bad design, but I prefer to call it "corporate made me do it"). You might display this content in a secondary column for laptop and desktop users, and you might not display the content at all for tablet and smartphone users.

In the past, many designers would craft a website for desktops first, and then simply hide the non-essential content for smaller screens. This optimizes the visual experience for everyone, but the hidden content is still downloaded by all devices regardless of whether it is displayed or not. The result is mobile users burn data (which should be used for productive tasks like sharing selfies) on downloading website content they will never see. Yikes!

The second wave of Responsive Design saw the rise of a practice named “mobile first.” This approach uses the world’s smallest screens as the baseline and enhances the page progressively for larger devices. One of the most exciting components of mobile first is a technique named “conditional loading.”

Remember the non-essential section of website content we discussed earlier? A truly mobile first website would omit that content initially, and then load the content into the page dynamically only if a device is large enough. Conditional loading keeps data transfer to a minimum because content is loaded only as necessary depending on device size. Speed for visitors is increased and bandwidth costs for site owners are decreased. Hooray!

Unfortunately, in an era where mobile first CSS has become the norm, conditional loading is still primarily limited to websites with budgets that allow developers to “go the extra mile.” Even famous mobile first frameworks like Twitter Bootstrap don’t offer conditional loading as a standardized feature. Conditional loading isn’t exactly rocket science, but the onus to implement the technique seamlessly still rests on the shoulders of experienced responsive experts.

The question becomes: how can you transform an existing desktop website into a responsive website not only in terms of appearance but also load times? How can you achieve the speed that mobile first and conditional loading offer without recreating a website from the ground up or even restructuring the HTML? The long answer is to hire an experienced team of developers to write several applications worth of JavaScript. The short answer is to leverage ResponsiveJS.

The latest release of ResponsiveJS utilizes JSBoost. ResponsiveJS transforms your desktop website into a visually optimized experience for smartphones and tablets, and the new JSBoost release helps you go the extra mile by implementing conditional loading. ResponsiveJS now prevents mobile devices from loading the entire page, and instead only loads content that has been designated useful for the current screen size.  This means ResponsiveJS offers true mobile first performance when a complete mobile first redesign is not an option.

The convenience of retrofitting your existing desktop website to be responsive is no longer tied to a site speed penalty.  By leveraging conditional loading ResponsiveJS enables the desktop first design process to compete with the ultra light weight data transfers of mobile first design. This is another example of ResponsiveJS combining modern best practices with an innovative JavaScript framework to solve industry wide challenges.

Conditional loading is just one of the many new features of ResponsiveJS. Stay tuned for additional posts to learn how ResponsiveJS can transform any desktop website into a performant responsive experience!

Join the Discussion