Web Development

Incorporate conditional loading into your design for a better UX

Learn how to implement conditional loading as part of your overall mobile and device-agnostic web design projects.

A number of websites are falling behind the mobile usage curve by not including Responsive Web Design (RWD), Progressive Enhancement (PE), and/or Adaptive Web Design (AWD) elements. These sites deliver poor user experiences (UX) and ultimately higher website bounce rates.

If your site doesn't include RWD design yet, you should consider the idea of Conditional Loading for Responsive Designs, which Jeremy Keith first wrote about in December 2011. 

What is conditional loading?

Conditional loading is the process of breaking out relevant portions of content into their own HTML sections, and then loading them only when requested by the user or when certain browsing conditions are met, such as when a screen dimension is detected on a mobile device.  

As part of a larger goal to provide responsive user experiences across all devices, conditional loading can be organized along with a content hierarchy scheme in addition to a progressive disclosure interaction technique, which has been used in application development for many years. You always want to prioritize your content to optimize form and function; for example, it's not necessary to load entire web pages into mobile browser screens when users are only looking for a specific portion of your content.  

Once the content is prioritized, the next step combines creating the content hierarchy with how the progressive disclosure is controlled; ultimately, these decisions will be up to the content owners. Nevertheless, you want to make sure the most relevant material is displayed on all devices, follow that by the next level of content importance, and so on for the entire website (Figure A).

Figure A

ConditionalLoadingFigA103013.gif
This image is a representation of how a website's content should/could be organized when applying a conditional loading hierarchy.

It's not as difficult as you might imagine to incorporate conditional loading as part of your overall mobile and device-agnostic web design projects. Media queries can be added to your CSS that allow you to target styles based on a number of device properties, such as screen width, orientation, and resolution.

An example of conditional loading

There are several best use case examples of websites that employ conditional loading in their mobile displays; in particular, Wikipedia offers an excellent standard for presenting its mobile content. Wikipedia incorporates conditional loading by presenting the top-level content: title, an interaction navigation, the subheading, the main sidebar information (including an image if provided),  relevant statistics, and the introduction. Figure B shows the featured content about the Battle of Goliad as displayed on an iPhone using the Chrome browser.  

Figure B

ConditionalLoadingFigB103013.gif
Scrolling past the introductory content, you're presented with the progressive disclosure of the article subheadings (Figure C). The sub-headings for Background, Prelude, and so on give the user the option of reading more with a simple tap on the touch screen to open up that particular section. This allows users to access only the information they want.

Figure C

ConditionalLoadingFigC103013.gif

Figure D shows part of what displayed when I selected Prelude. 

Figure D

ConditionalLoadingFigD103013.gif

Additional resources

Learn more about conditional loading and progressive disclosure by reading these additional resources from TechRepublic and other sources.


About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

1 comments
SusanObi
SusanObi

Conditional Loading has advantages and disadvantages.

Advantages - Page load faster by filtering the content to be displayed based on devices

User will have better usability for mobile devices where screen size is small compared to desktops

Disadvantages - Need to include JavaScript for each device or range of devices

Identify the areas on each page to be removed or displayed based on devices and apply JavaScript accordingly

Additional programming required in applying JavaScript on pages

We at Elegant MicroWeb find that it is a better idea to identify the common areas on a page/website that need to be rendered, based on devices rather than modifying each page and applying JavaScript for each page.

http://www.elegantmicroweb.com/capability/tc/responsive-web-design.htm

Editor's Picks