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
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).
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.
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 D shows part of what displayed when I selected Prelude.
Learn more about conditional loading and progressive
disclosure by reading these additional resources from
TechRepublic and other sources.
- How to get started with Responsive Web Design – I explain the concept and methods behind Responsive Web Design, along with some easy examples to help you get familiar with RWD.
- How to create media queries in Responsive Web Design – I show you how to create
media queries that allow you to target styles based on a number of device
properties, such as screen width, orientation, and resolution.
- Chrome add-on Responsive Inspector lets you preview media queries – I
demonstrate the handy add-on for Chrome that allows you to inspect
media queries on active URLs and understand how responsive websites interact at
various screen sizes.
- Responsive web design tool review: Embed Responsively – This tool allows you to transform fixed width embedded media content into flexible and
fluid responsive objects. See how the tool works.
- Progressive Disclosure – the best interaction design technique? – Frank Spillers from the Demystifying Usability website presents some history and the software vs. web
- Progressive Disclosure in User Interfaces – Alexander Dawson from the Six Revisions
website breaks down the good, the bad, and the indifferent about progressive disclosure.