We have been working on a new feature that we are calling Snapshot.

This will show you the problems that occur on one of your pages by highlighting them on a copy of the web page.  For non technical users, such as Content Editors, this is a very easy way of identifying problems on the pages they are working on.

I have been very keen on creating a quick and easy way for users to run single page audits (Immediate audits).  When you are working on a page you always view it in your browser to make sure it looks as expected and make tweaks to perfect it.  I wanted you to be able to click on a button in your browser and have Sitemorse run an Immediate audit on that page so that you could see what Sitemorse found on the page.  This would mean that while you are working on the page you can get a quick Sitemorse audit and correct any issues there and then rather than wait for it to be live or to step through the current means of running an Immediate audit from your Sitemorse dashboard.  The simpler it is to use the more likely you are to use it.

Adding the button to your browser is simply a matter of adding a bookmarklet to your toolbar.  In Firefox you drag the link to your bookmark toolbar, in IE you right click the link and add it to your Favourites - simple, no plug-ins or downloads.

When you click on the Instant Snapshot button we store the web page and all the page elements(source code, images, style sheets etc) on our system.  After a few moments the page you were looking at will be redrawn.

 As you can see there is a Sitemorse control bar running across the top of the web page we just audited.

A red cross indicates Sitemorse found errors under that category of tests while a green tick indicates no errors were found.  Click on an icon with a red cross and Sitemorse will highlight the elements in errors by drawing colour-coded boxes around them on the web page, move your mouse over an error and a hover-box will explain what the error is:-  

Clicking on the icon again and Sitemorse removes the highlighting of the errors.

The right-most icon is the View Source option.  Clicking this icon changes the view to the source code, laid out as it would look in a typical HTML Editor including syntax colour-coding, with the errors highlighted and hover-boxes to explain the problem.

Webpages can look aesthetically very pleasing but have performance issues that are not always easily identified.  Clicking on the Performance button gives you a view of how the page would load on a broadband connection and sets a target of six seconds.  As you can see from the results below large images may look good but can have a devastating impact on performance.