Hello from Saudi Arabia :)

Getting through the design and development phases can be the most time consuming stages in the life of a website. And rightfully so since these two steps determine functionality and user experience. However, there is a final stage that people frequently overlook. Two words: Quality Assurance. (Cue the dramatic music.)

In this final stage, your website should be put through the wringer and tested extensively. There’s nothing that makes our QA Team more angry than finding broken links all over a site or forms that don’t work. It makes him turn into more of a gorilla, which can be rather scary at times.

So, having said that, here are a few things that you should consider before you press the big red launch button on your website.

1. Test All Links – Did I stutter? No. I did not. Broken links throughout a website are perhaps the most common issue that people just overlook simply because they didn’t click through them. Recently, a major event website (we’ll name no names here) for the city of Fredericksburg, Va. launched a website with the majority of main menu links broken or pointing to wrong pages. This will be the dagger that killed your website, and it will be well deserved because you didn’t test the menu links.

There are tools that will test your website links. It can crawl your entire website and look for links that point to pages that don’t exist or incorrect paths. A popular tool is Link Checker:http://validator.w3.org/checklink. Creative name right?

Doing this simple step will guarantee that users area able to happily navigate through your site without wanting to punch their computer screen out. That can become very expensive very quickly.

2. Add a Favicon – Favi-what? You know that little icon that shows up in your bookmarks or in the address bar of your favorite browser that represents a website? That’s called a favicon and it takes literally seconds to make one. Yet there are millions of websites that have failed put one up. While this has nothing to do with the functionality of your website, it has everything to do with brand recognition and marketing. Just look at your favorite social media or news sites. Facebook uses the square “f”. Twitter the bird. CNN has “CNN”. Even Google Plus has “g ”. If you want people to remember a logo, this is a good way to get that to happen.

A great tool for creating these little guys (16 x 16 to be exact) is here: http://www.favicon.cc/. You can create your own using the pixel by pixel canvas, or you can import and configure your own image. Enjoy.

3. Fix Broken Images – There are a number of reasons a broken image might show up. Wrong image format, incorrect image URL, and image file size exceeded are a few of the reasons I’d check first. Regardless, get the images working before launch date. And for the QA’s sake, please use images wisely. Nothing looks more overwhelming to a user than a page full of words. No one really likes to read that much. I kid, but not really. Reading a lot of text on a screen is much more tiring and boring than reading a book in print. Break the text up a little with some unbroken images.

4. Check for Development URLs – In some of NJI’s more robust websites, we’ve needed to hardcode test links in various applications and interactive areas simply for development purposes. It is paramount that these test links be removed upon launch. Otherwise the user may arrive at a password protected development server, a wrong page, or a “white screen of death.” At that point, a QAwill burst into your room and smash your computer. I warned you.

5. Create a Sitemap – While not always needed, sitemaps can be a useful navigation aid to site visitors. A sitemap will list every link found in your site as well as top level menus and underlying content. In very large sites, sitemaps may simply be too large to consider this. However, in that case you can always create a scaled down sitemap of important links you feel users should be able to find. Above all, sitemaps must be accessible by site crawlers, which help your site to show up in search results. Google, Bing and Yahoo all require XML sitemaps to be accessible to their site crawlers so it can find those hidden or deep lying pages that most users can’t access without submitting a form or doing a search. You can read all about sitemaps here: http://support.google.com/webmasters/bin/answer.py?hl=en&answer=156184.

6. Browser Test – Yes, people still use Internet Explorer 7.0. According to The IE 7 Countdown, 4 percent of the world uses IE 7 still, and 5 percent of North America does. It’s shameful, and has made for many sad, but necessary, phone conversations about how nothing on someone’s computer looks right. Meanwhile, the other 96 percent of the Earth sees a killer awesome website. Browser testing your website for IE 7 on up to IE 10 can help quickly iron out these problems before sending the final product to a client. Here is a list of what casino online we normally browser test in:

  • IE 7-10
  • Firefox 3.5 – Current
  • Google Chrome (Current version)
  • Safari (Current version)
  • iOS (iPhone and iPad)
  • Android
  • Blackberry

Seems like an overkill, but you can never browser test too much. There have been days where that is all we will do just to make sure we have a very good browser crossover. Something you’ll want to caution about is CSS styling. Some older versions of IE do not support the current CSS 3.0 and HTML5, and will turn your beautifully awesome website into something you’d likely find on the mid-1990s Internet. You may need to use browser hacks and/or browser specific CSS targeting to get through this, sometimes, painful part of the QA process.

If you’ve decided that you just don’t want to like anyone that uses IE 7, ever, impose a tax on them for viewing your site in an old browser: http://www.kogan.com/au/blog/new-internet-explorer-7-tax/

7. Test Forms – I can hear the angry QA knocking now, and you do not want him to bitterly punch your submit button because you failed to do so before launching the site. Forms can sometimes be very sensitive to how data is input and processed. Some fields require certain formatting. Other may have a character limit. Testing these requires you to bring yourself down a few notches and pretend you have no idea what you’re doing (which hopefully is not the case). Try using symbols, all caps, numbers, etc in form fields and see if the data goes through. A good form will have some sort of validation. If it doesn’t have validation, you should plan for it. A feature like that will make your website more bulletproof and user friendly.

In the case where a form is supposed to email someone, please make sure the correct administrator email address is in the form field settings and they are receiving the emails as they should. “As they should” does not mean the email is being received in their spam or junk mail, by the way.

8. Check Screen Resolution – I love a wide monitor. Everyone does, I think. Here at NJI we have quite the workspace setup for our designers and developers. Most employees have 1920×1200 screen resolution. Some have much MUCH more resolution than that. Jealous. So we all have plenty of room/resolution to see their beautiful graphics and brilliant code. However, there are many Internet users that have smaller screens and smaller monitors. The top Internet viewing resolution worldwide is at or around 1366×768.

We like to test our websites in different resolutions because not everyone has the same monitor. You have to account for this when launching a site. It is especially important when launching sites that are responsive to screen width or resolution. Your responsive website should be altering is font size, alignments, etc. when the resolution reduces beyond 800×600.

9. Test Your Site Search – Search term: 123abc. If your site has a search area, make sure it works. Otherwise, what’s the point of having it? You should search for terms that are relavent and irrelevant within your site. Try searching for the title of a blog post that you know exists. Make sure the results include that blog post and your search criteria resulted in a correct query. Then try searching for a term or random string of characters that you know your site doesn’t include. The goal here is make sure the “no results” page is working and returns a message that is both valid and helpful to the user. Make sure it at least says “No results” on it.

10. Test Account Signups – If you’ve developed your website to allow for users to signup, make comments, alter data, etc. then please make sure they are able to so. If a client is expecting discussion on their blog posts, make sure you can make it easy for people to sign up, yet challenging for spammers to flood your site with irrelevant comments on pharmaceuticals or Nigerian princesses. Unless your site happens to be on those topics of course.

 

Website Quality Assurance Checklist

The purpose of this checklist is to provide a method of validation for web developers at V2 DevStudio to assist with meeting the minimum requirements set out in the Web Content Management and the Corporate Web Style guidelines . You should aim to ‘Pass’ all three parts of the checklist.

You can download it from here.