By Mat Marquis CHAPTER 5the first payload of the page, and the gallery script is initialized. Although
using AJAX to fetch each individual slide while the user navigated through
the gallery would end up adding a troublesome delay and harming the
overall experience, we wanted to ensure that we were still responding to
the user’s intent.
In this instance, when the user triggered the next link, we would fetch
and append all the other slides at once. This still resulted in a slight delay;
the user was presented with a loading indicator upon hitting the second
item in the slideshow while the other items were loaded. After a few
iterations, we ended up loading the first and second photos up front. When
the user clicks to the next item in the gallery — already in the markup —
the third item onward is quietly loaded behind the scenes and added to
the slideshow. By the time the user interacts with the next trigger again
just a moment later, the third slide is ready and waiting for them. The
result is massively reduced bandwidth cost for each user on the site, but a
completely seamless experience at the same time.
These kinds of optimizations are matters of finesse and refinement
of simple concepts — seemingly small steps with enormous potential
benefits for our users.
CSS
Once we have meaningful markup as our foundation and we know that we’re
ensuring a usable experience for everyone, we can make some key decisions
about how we deliver those experiences without leaving anyone out.
While working on the jQuery Mobile project, we quickly realized
that even serving our core CSS indiscriminately could introduce the
potential for a broken experience. Anyone using a feature phone or early
smartphone would be poorly equipped to deal with advanced styles, even
if we were to assume that the styles themselves would degrade gracefully.
Simply attempting to parse the style sheet itself could introduce issues on
platforms as common as Blackberry devices that are only a few years old.