Conditional Loading For Responsive Designs

A selection of useful resources and my notes on conditional loading for responsive designs. www.css-takeaway.com

Post-load Components

http://developer.yahoo.com/performance/rules.html#postload

What's absolutely required in order to render the page initially? The rest of the content and components can wait.
JavaScript is an ideal candidate for splitting before and after the onload event.
Hidden content, images below the fold, and interactions that come after initial page rendering are other ideal candidates.
Post-loaded scripts should be viewed as a progressive enhancement - without them the page should still work.

Speed Up Your Site with Delayed Content

18 Dec 2010 | 24ways.org/2010/speed-up-your-site-with-delayed-content

It's important to reduce the number of http requests for site performance.
On pages with lots of images, it may be that some are not critical to the page and don't need to be loaded up front.
This allows the core elements of our site to load quickly, while other stuff is loaded in the background.
There's no way to prevent (some) browsers from downloading an image without removing it from the HTML completely.
Removing images from the HTML means users without JavaScript won't be able to see them.
If the images are crucial to context then they probably aren't the ideal candidate for delayed loading.
If they are just a visual enhancement, it's probably ok if some users don't see them to benefit the majority of other users.
We can use HTML5 data attributes to store references to peripheral assets (e.g. data-defer-src, and use JavaScript to retrieve these values and convert into image tags at window.load.
This articles shows how this can be done using jQuery.
We can go a step further and only load the extra assets once the user takes an action, for example loading as the user scrolls.

Lazy loading on Huffduffer

12 Apr 2011 | adactio.com/journal/4497

Highlights some examples where content can be classified as 'nice-to-have', but not core to the page.
To ensure the peripheral content (provided via third-party services) doesn't delay loading of core content, Ajax is used to request the content once the core information has already loaded - LAZY LOADING
The lazy loading is also wrapped in a condition to check if the viewport has sufficient space to accommodate the peripheral content.
Judging what content to include is no longer a binary choice - is it on the page or not.
Prioritising content as part of a mobile first approach may also introduce a extra dimension - include some content if the user's circumstances warrant it.
Caution should be taken to ensure this concept isn't taken too far and we find sites loading their core content via javascript.

Conditional Loading for Responsive Designs

02 Dec 2011 | 24ways.org/2011/conditional-loading-for-responsive-designs

The mobile-first approach forces you to really focus on the core content of your page.
When media queries are applied for larger viewports, and more space becomes available, we can load in the 'nice-to-have' content using Ajax functionality.
Before doing so, we should first run a test to check if the viewport is wide enough to accommodate subsidiary content - CONDITIONAL DELAYED LOADING.
This article uses a javascript if statement to check the viewport width and if space is available loads in additional content using Ajax.
The additional content is retrieved from a thrid-party service so the function is called at the bottom of the document once the document has loaded.
To ensure users on small screen devices still have access to this content, a simple hyperlink is available by default, which is then replaced with the enhanced content if and when the conditional content is loaded.
This article provides some example code for this approach.

Clean conditional loading

02 Dec 2011 | adactio.com/journal/5042

Highlights the fact that conditional loading based on javascript conditions that check pixel dimensions for viewport width, often only work if there's an equivalent media query at the same dimensions.
This doesn't feel clean and goes against principles of DRY having the pixel number repeated in both JS and CSS.
May be even worse if CSS media queries make use of em values and JavaScript uses pixels.
This article demonstrates code that could be used to check for the presence of a style change executed within a media query, instead of viewport width.
That way the only dimesnion value declared is in the CSS media query. If this is changed, the JS would still work as long as the style is matched.
For e.g. our JS can check if our aside has a float property. If so, we have columns in our layout and want to go ahead and display the periperhal content, in theory.

An Ajax-Include Pattern for Modular Content

28 Mar 2012 | filamentgroup.com/lab/ajax_includes_modular_content

Technique to lazy load nonessential content without introducing access barriersusing an "Ajax-include" pattern.
This enhanced certain links on a page by including a fragment of content from a URL related to their linked resource.
The content begins lightweight and accessible without Javascript, and it is enhanced into a richer experience on capable devices - without holding up the initial page load.
This pattern uses HTML5 data- attributes to store a URL reference to an external HTML fragment.
JavaScript is used to loop through all qualifying elements, Ajax-request the content, and load it into the page.
Highlights an issue that if multiple instances of this pattern occur on a page, there can be performance issues (too many requests) with the time taken to enhance the core experience and get the enhanced content onto the screen.
Offers an advanced version of this pattern that bundles all content includes together into a single request.
This uses a server-side script to accept all URLs in one request, and return the contents of each in a single response.

Conditionally loading content

24 Apr 2012 | adactio.com/journal/5414

Demonstrates use of data- attributes to store image source data.
Uses a JavaScript file executed after the DOM has loaded to check if it's a wide-screen and if so load the image into the site.
The JavaScript checks to see if the site header is linearised or floated - if floated, layout styles are being executed within the media queries and therefore it's classified as a wide-screen.
This article demonstrates example code used to load videos with JavaScript in the same way as described for images - using data- attributes and generating iframe code on the fly.
The comments in this article give good discussion to other CSS properties that could be checked for in JavaScript to determine whether to execute conditional loading of content.
Using float feels a bit risky, other CSS properties may offer a better alternative...

Conditional CSS

27 Apr 2012 | adactio.com/journal/5429

Looking for a way of detecting from JavaScript whether media queries have been executed in CSS without duplicating breakpoints.
Not looking for MatchMedia, which involves making media queries in JavaScript. Instead looking for some otherwise-useless CSS property that can be used to pass information to JavaScript.
Discusses a number of suggestions from commenters, but due to various hiccups arrives at a solution using generated content, and provides example code.
In this example generated content is applied via body:after, and display:none used to ensure it is never visible.
JavaScript can then check for this content, and load in peripheral content depending on the result returned.
The end result is that we maintain a seperation between style and behaviour and an alternative property to float is used in our JavaScript, which feels a little more robust.

Conditional loading of resources with mediaqueries

19 Dec 2012 | christianheilmann.com/2012/12/19/conditional-loading-of-resources-with-mediaqueries

Quick idea about making mediaqueries not only apply styles according to certain criteria being met, but also loading the resources needed on demand.
This allows us only to load assests if media conditions are met, for e.g. is our screen width bigger than x.
Introduces matchMedia as an option to execute JavaScript only when certain mediaquery conditions are met.
Also demonstrates how this can be combined with HTML5 data- attributes to allow JavaScript to loop through all elements with a particular CSS class, evaluate their mediaqueries and change the data-attributes back to real ones.
As a fallback in the absence of JavaScript, our elements can reference default images/stylesheets that are then replaced when needed.
This approach could be used to conditionally load higher resolution images for larger viewports by storing the high res src in a data- attribute and swapping out if macthMedia conditions are met.
This article provides example code.
A possible downside to this is that we are declaring values in both our CSS and JS again.

Think Twice Before Using matchMedia to Conditionally Load Stylesheets

29 Dec 2012 | andydavies.me/blog/2012/12/29/think-twice-before-using-matchmedia-to-conditionally-load-stylesheets

Offers some reasons to think twice before adopting an approach as discussed above that uses matchMedia to load specifically CSS files.
Browsers already do a lot to optimise the download of these assets so there may be better performance gains to be had elsewhere.
The matchMedia above may still be of use in other scenarios such as responsive images...