Since launching the site I’ve been getting quite a few emails. A lot of them are questions about how I built the site, with the most common regarding the HistoryAPI and pushStates.
What library did I use? How did I make it so fast and snappy? Here’s some of the answers.
I actually didn’t use a library for pushStates as my site is pretty simple and only really has two states: the homepage with the horizontal scrolling panels and the article view (which you’re looking at right now). This made it really easy to manage navigation. Also, for browsers that don’t support the HistoryAPI (early versions of IE) I am just doing a page reload rather than messing around with hashes.
I was familiar with using the HistoryAPI from working on the recently relaunched USA Today site but I also found this article a really good summary – it’s a short article and will possibly just reiterate the stuff you already know but it’s worth a read.
I did do a little researching into libraries though and this one definitely seems to be the most popular and if (or maybe when) I go about cleaning up my code and refactoring I might use it. I have plans for a Labs section on my site which will add some routing complexity.
How is my site so snappy and fast to load articles?
Something I found that really helped with keeping the site smooth is preloading adjacent articles. This initially happened by accident as I needed to load the next / previous articles in order to find out the background color for the left / right arrows. I guess preloading depends on the site design and UX. It lends itself really well to my site as I can easily predict the content that a user is likely to view next.
If you’re going to add preloading to your site plan it carefully. I personally don’t like it when a site aggressively loads stuff that I might not view. You also don’t want to delay the user from getting to the content they are initially on your site for. Below is the flow for how content loads on this site.
If you arrive at the site on the homepage:
- Load the homepage
- When a user selects an article load that article and display it once it’s loaded
- Now the user has the article and can start reading it, let’s preload the next and previous articles (they won’t even notice, they’re busy reading the article)
- If a user clicks the next / previous arrows on the article view we already have it loaded so BOOM we can show it instantly
- Repeat step 3
It’s similar to when a user deeplinks to an article:
- Load the article
- Again, now the user has the article and can start reading it let’s preload the next / previous articles
- If the user clicks the close or logo to navigate to the homepage we’ll then (and only then) load the homepage
So in conclusion
That’s the way this site was built. I just wanted to get something out there and I’m pleased I did. I still have work to do though, there’s still bugs but I’ll get there soon.