As more and more websites are embracing “web 2.0” standards and evolving into more responsive dynamic applications many of them are losing basic functionality such as bookmark-ability.
Assume I am a user of the site: I read through the reviews and see one that is particularly useful. I’d like to bookmark this page, or perhaps e-mail this page to a friend of mine who has been looking for a product like this. The URL in the browser hasn’t changed from the initial page state, so when I bookmark or share the link with a friend, the Reviews tab isn’t selected and I have to include instructions to my friend to click on the Reviews tab after opening the link I have sent. Now this may not seem like a significant burden, but now assume that the reviews are paginated within the tab in groups of 10, and the review I want my friend to read is on “page” 7 of the reviews. Or assume that the product page allows you to select different SKUs (different colors or versions for instance), and the data displayed and reviews are loaded based on the SKU that was selected. In either case, I now have to include detailed click path instructions to my friend, or remember them myself if I am bookmarking the page.
The solution is to make use of the URL’s hash or anchor feature to store page state without forcing a page reload. The hash is the part of some URLs at the end prefixed with a hash sign: #. This is commonly used for anchors when navigating a long page, which is a means of storing page state in the URL, we just want to take it to another level.
There are two parts to this. The first is that we need to store the state data in the URL’s hash when the state changes. The second is that when the page loads for the first time we have to check for state data in the URL’s hash, and if it exists setup the page state accordingly.
If the Reviews tab link looks like this:
You can store the state data in the URL’s hash by changing the link to this:
Now, when the link is clicked, the Reviews tab is displayed, and the URL in the browser is rewritten from:
Now we’ve successfully stored the page state data in the URL in a way that is bookmark-able and shareable. The next step is to check for and act on that state data when the page loads.