Our development team is on an improvement roll lately, rebuilding parts of the site based on better use cases given how both our readers AND our newsroom staff/producers are using charlotteobserver.com.

For our slideshows, which get a very large amount of traffic, we wanted to address the following:

• Initial load time. This was priority one.
• Slide number/place presentation. A pet peeve of mine, several changes were needed.
• Linking to a specific image. Couldn’t do it (due to timing) before, wanted to do it now.
• More slideshows. A visual to what else is around helps readers see more possible interests.

MORE ABOUT SLOWNESS AND WHY

See all the dots below? (More about the presentation of dots later.) Each of those dots represents an image file. And, in this case, there are 51 images in the slideshow.

Why does that matter? In the past, on the old charlotte.com, it didn’t. You clicked on a slideshow, a new window popped up, and the basic HTML page was reloaded every time. And those slideshows averaged 10 photos with a few exceptions in football season. In a sequence/ladder diagram, that looked similar to this:

That worked pretty well until I came in (honestly). I don’t like pop-ups, especially in user content.

So on the new charlotteobserver.com, we wanted to keep all images within the main template, eliminating content pop-ups. We also wanted to load the HTML page only one time, saving page refresh time and making the images load on the initial request to give a faster viewing (via previous/next clicks) experience. Because we used the cycle plug-in for jQuery, we’ll call this the Cycle Slideshow. The brower/server interaction looks more like this:

So you see that all clicks (after the intial one) on the browser side require no connection to the server. That’s good once you have all the images — the slideshow ends up being FAST. But when you have to load all those images initially, there’s a noticeable lag for the first image to show up due to the very large download that’s occurring… especially with the new redesign and almost double the images per slideshow!

Using YSlow as a test to see performance issues, we now can see in this case there’s 3 MB of files coming through. OUCH, quit it.

Therefore, the business and product case were simple here — reduce that initial load significantly. We must, however, keep the user experience and perception of speedily moving through the images.

The decision made by Dave and I was to get only a couple images per request. Dave took it a step further, caching all img references and updating a no. of DOM-level data entities (he’s going to post the code here soon). Now our diagram mimics the simple efficiency of the old slideshows with the page-weight savings plus the speed of the cycle slideshow:

In the end, what Dave did with these changes is cut that initial load down 80 percent. And the user gets the same experience on the first slide as he/she does on the subsequent slides!

Awesome. Now, presentation layer.

MORE ABOUT PRESENTATION

It’s safe to say the timeline for launching the original slideshows last year was chaotic. The template was created quickly, yet the format worked pretty well for the last year. But the dots, the caption area, and the background all needed presentation work in our opinion:

The first thing you may notice in the new presentation is there are no more dots, simply tools to move to previous, next, and numbers showing where you are in the show. These are more common user tools, and we are happy to adopt them.

Next, with the cycle plugin our developers had to declare a height on the caption div in order for it to work. So, a year later and wiser, Dave scrapped the plug-in and you won’t see odd spacing (the above is ok, but in articles sometimes you got the below):

That large caption area is due to having to set a height big enough for the AP long captions. Now we can ignore the height, and the presentation is more consistent with other site elements.

Off to the whiteboard we went for the final thoughts:

Not everything ended up exactly as above, but we always find drawing helpful. That said…

LINKING TO AN IMAGE

Also noticeable in the user tools you’ll see a box to enter in a specific image number. Want to link to that specific image? We have a url for you to copy/paste now. This was a request we often saw on Twitter, so those of you who sent it in we salute you!

MORE SLIDESHOWS

Finally, what could be better than faster and improved slideshows?

Why, more slideshows of course! Taking a cue from development already done on thatsracin.com and our mediabar, we’re now presenting more options under the current slideshow.

Put it all together, and here’s what you get (or go open one of these live galleries):

We hope you enjoy all the changes and getting a peek behind the scenes. These are the things we love doing.

-Jason