Down with the browser refresh

I’ve just finished a project I’ve been working on over the last couple of months that was a jQuery-based ajax application without page refreshes. I thought I’d take this opportunity to share some of the problems I encountered whilst they were still fresh in my mind.

If you’re thinking of making your own jQuery online app I’d recommend trying out the ‘no refresh’ method. Once you’ve got it working, you’ll wonder how you’ve managed to cope so long with all these page refreshes, and each time somebody else’s site forces your browser to refresh, you’ll throw up a bit in your mouth.

In my humble opinion, asynchronous data transfer is the future and soon it will be very unusual to have your page refresh every time you want to see new content. Browser refreshes are clunky, ugly are an unnecessary interruption to the user experience flow.

With jQuery and ajax ruling your content you can have:

Read more »

I’m not sure how, but my jQuery application suddenly got very complicated. One minute I was adding cool onmouseover effects and then BANG I’m inserting new elements all over the place and I have to look into heavy compression just to get the thing to download this side of the apocalypse.

Browsing through my application is a breeze. All the links are rewired to AJAX requests with smooth transitions and lots of slideUp-and-downs. There’s one glaring hole that might just bring this happy user experience down quicker than a Lehman brother wearing Iron Boots.

Whenever my lovely users click ‘back’ on their browser they get taken back to the obscenity that is the non-standards-compliant flashing gif-ridden site they came from, not the last thing they were viewing on my site. And if he or she clicks ‘refresh’ the application state goes back to the original and my user has to navigate back to the page he or she was viewing all over again. What a knightmare.

The browser navigation controls – back, forwards and refresh – are a staple of any user’s experience. Of course, being a web developer you will recognise the lack of page refreshes and the changing of page elements and automatically look for site-specific navigation links on the page itself. However, your average user is going to get very confused, thinking their browser buttons are broken or worse – your website is broken.

And it’s not only the user that’s going to encounter problems. If a Google Spider can’t see pages with unique URLs it’s not going to index them. So all I’m going to get on a Google search is whatever is on the landing page, which is just header information and a footer – not very useful. If my user wants to bookmark a page for later, he or she is going to have to start again, before all the AJAX fun began. The list goes on. It’s like building a vast palace with turrets and different wings but neglecting to build any doors. Your guests are going to walk over the drawbridge and marvel at the splendour of your architecture, the complete set of Power Ranger themed bedrooms, yet have no idea how to get there.

Anyway, here’s how I solved it:

Read more »