Back to Insights

Progressive enhancement building a better user and search experience

As web development moves towards richer user experiences leveraging JavaScript, AJAX, Flash, CSS, Flex, etc. site visitors (such as people using older browsers or even search engine robots) can end up with a site that is inaccessible. Worth considering in your design and implementation planning is what your pages will look like when these rich elements are enabled and disabled and the pros and cons of page coding techniques such as graceful degradation or progressive enhancement. Afterall, it might just be the difference between a person being able to interact with your content / functionality or a search engine being able to index your site content.

If you've never seen progressive enhancement in action, it's worth a peek at the North Shore Credit Union site. Inspired by an article on Progressive Enhancement and SEO we identified some problems with how search engines were indexing content on the home page of their site. The page utilizes a content switcher widget which allowed a large amount of content to fit into a smaller visible area. Prior to the change each tab of the widget changed to the next on mouseover using JavaScript. Each tab was also setup to work when the user did not have JavaScript enabled by adding a query string to the URL that would show that tabs content (e.g. ?widget=1).

While this allowed the widget to work for visitors with and without JavaScript enabled, search engine robots had trouble indexing the site. Some search engines would index the root level page (e.g. /index.jsp) as well as each of the variant pages that were using the query string. This would result in the home page being indexed multiple times and page rank split among those pages — or depending on the search engine robot and its ability to execute JavaScript — some content not being indexed on the page at all.

After a few mockups and some code changes we eliminated the query strings (and the indexing issues) providing a page that is still accessible to visitors with or without JavaScript enabled while also exposing to search engines additional content that can help increase keyword density and organic search relevancy. Check out the changes (home page, product page, product landing page and tabbed content page). You can view the progressive enhancement in action by turning off JavaScript on your browser.