by: Justin Miller

User testing is vital if a website is to function properly over various browsers. In fact, good web developers and web designers constantly test for basic functionality issues. Why? Well, the sooner we can recognize and identify problems, the sooner they can get fixed.

Functionality

The last thing a user wants to come across when browsing your site is the dreaded ‘Server Error.’ The average time a user spends on a website is minimal. Finding server errors will guarantee an even shorter visit.

What to look for:

Make sure your navigation is intuitive and functions properly. Navigation should lead users to the appropriate landing pages. Navigation should NOT contain broken links like those attached to buttons, PDFs, and jpegs.

It’s extremely important to test forms. Forms give your company or client valuable customer information and feedback. Make sure to fill forms out, document any bugs, and check that the form is submitting properly (i.e. check notification settings).

Next, test for search bar optimization. When a user types a query into the search bar it returns logical, accurate results. Before searching ask yourself what you expect to see before the results display. If the results display what you expected – good job! If the content returned makes no sense – you may need to fix the search function.

Functionality Testing Tools:

Link Checker – A Firefox add-on that will highlight all of the links on the current URL, check them, and then color coordinate them based on their functionality.

Multi Links – A Firefox add-on that uses a right click and drag technique that allows you to select multiple links and open them in new windows or tabs.

W3C Markup Validation Service – If you’re in web development, everyone should be using these tools. W3C is the “international community that develops open standards to ensure the long-term growth of the Web.” There are several tools on this site including a HTML, CSS, link, RSS, and even a Mobile validation service. It’ll check your website and tell you exactly where in the coding your problems arise.

Styling Issues and Content

Different browsers display the same content differently. For example, Firefox won’t necessarily render images and text the same way as Internet Explorer, Google Chrome or Safari for Mac. To dig even deeper, check the browser’s version. Firefox 9.0.1 is the latest installment by Mozilla, but many businesses still use version 3.6. Make sure you test the browsers and their versions based on what your company or client wants. We typically list out specific browsers and browser versions in project proposals to clarify exactly what we will test and confirm that this is what the client wants us to test.

What to look for:

Consistency is the key. Take a look at the styling of website elements like pages, titles, button layouts, image layouts, etc. Make sure they render properly on every browser and through every page of the website. Again, it’s all about consistency.

Generally, each page should keep a general theme or style sheet. While each interior page may have its unique content and images, many page elements should remain consistent throughout the website to communicate to the user that they have not left the website.

Keep everything intuitive. The simpler the navigation the longer the user will browse. Make it as easy as possible for the user to find the information they want. When testing the site, remember that it’s your job to try to break it in any way possible. It’s better to suggest something than to assume that it’s ok the way it is. Be picky. Be specific.

Styling and Content Testing Tools:

W3C Markup Validation Service – In a perfect world, if the HTML is right, if the CSS are right, you won’t have any problems through the different browsers. This should be the go to before and after the site goes live.

YSlow – A Firefox add-on. Powered by yahoo, this tool gives suggestions on how to make your site load faster. No one wants to wait for your thousands of images to load. Find a way to combine them or get rid of the ones that aren’t

iMacros for Firefox – When you find a problem and need to explain to a developer or designer the exact process in which you found this issue, iMacros records every click that makes it easy to send to your co-worker.

FireShot – Simple screenshot capture and editor to make it easy for you to show and explain issues.
While it’s apparent I do most of my testing in the latest version of Firefox, there are similar tools out there that adhere to your choice of browser. Firefox tends to make it easier with a plethora of useful add-ons on hand.