CHAPTER 5 Robust, Responsible, Responsive Web Design
From a responsive design standpoint, this same script can help us
avoid serving all of our content and selectively hiding it, instead allowing
us to include the content only when it suits our layouts. AjaxInclude
also allows us to use a second attribute so we can qualify the content’s
inclusion above or below a certain breakpoint.
Here, we would include the referenced fragment only at viewport
widths of 30em and up:
<a href="/sports" data-append="articles/sports/fragment"
data-media="(min-width: 30em)">Sports</a>Starting with our site’s core content as our foundation allowed us to
make larger decisions about how and when we could load additional assets
without running the risk of leaving any users out in the cold. If all else
should fail, the site’s intent would still remain intact: no user would be left
unable to use the site. It establishes a baseline that works for everyone,
while affording us the freedom to deliver context-appropriate scripts
and styles in the same way: a functional website for all, with conditional
enhancements when appropriate.
This same reasoning extended a recent project, a site that featured an
image carousel on every page, showing apartment listings. This would
frequently mean including dozens of high-resolution images per page.
But where these carousels appeared alongside a number of other vital
pieces of information — potentially the users’ primary concerns, certainly
more so than the photographs of the listing — there was no guarantee
that the user would click through the galleries upon landing on each page.
Had we included all of the associated img tags in our markup and simply
hidden them with CSS, it would do nothing to prevent those images from
being requested. We would potentially cost our users megabytes at a time,
simply to read a few snippets of text.
In this instance we applied the same “as needed” philosophy as we
did with our AJAX navigation pattern: the initial photo is included with