Website Creation: STEP 3 – Testing and Maintenance

JekkilekkiStep 3 – Testing and Maintenance

This is the 4th part of a 4-part look at my website creation process. Here I will present a list of the Testing and Maintenance steps I generally take as I progress through any website creation effort. Hope you enjoy my list!

1. Browser Checking

  1. Browser Combos – Load the site in all possible browsers and combinations I have available.
  2. Windows – IE8, IE7, IE6, (anything below IE6 I don’t generally optimize for -> and all IE versions render sites differently, unfortunately), Firefox, Opera, Google Chrome (all of which render nearly the same), Flock, SeaMonkey, etc.
  3. MacOSX – Safari, Firefox, Opera, Camino
  4. Image Renderers – Additionally, sometimes I use image rendering services like IE NetRenderer and Litmus. You can read more about cross-browser checking tools here.
  5. Take Notes – Make notes of what is broken.
  6. Clean it up or Fix it – If everything works everywhere (highly unlikely -> thanks Internet Explorer!) then I’m in luck and can clean things up before finishing up. However, things are usually broken and the next step in the process is required.

2. Firefox and Firebug

  1. Firebug – If building a CMS, there are often elements, particularly in forms that need editing. Firebug is a killer tool for looking at code on the web and helping with CSS editing.
  2. Inspect Elements – Inspect form (or other) elements in Firebug.
  3. Adjusting – Adjust elements as needed.
  4. Fix IE – Adjust IE’s “broken” elements from notes in Step 1 as needed.

3. IE’s “Broken” Elements

Check up on a number of these links for IE-related fixes.

  1. Position is Everything – Explorer Exposed (19 bugs)
  2. IE’s Top 10 CSS Problems
  3. Float Test (IE seems to have lots of problems with floats)
  4. CSS “position: fixed” in IE (I fixed one background image problem by using “position: absolute; z-index: -99;” to make the image float UNDER the text instead of on it)
  5. On Having Layout (this is one of the most commonly referred to articles about IE and CSS and seems to help fix a lot of the common problems)
  6. IE/Win hasLayout Triggers (demonstrates many triggers to get IE to see an element “hasLayout”)
  7. CSS Tests and Experiments (extensive documentation -> over 200 tests, and about 100 for IE)
  8. WebsiteTips.com
  9. Debugging CSS (this is a long list of problems that I’ve not yet had a chance to fully come to appreciate)

4. Browser Checking (again)

  1. Check x2 – After adjusting CSS elements as needed, I again check the site across a range of browsers and OSs.
  2. Check x2 Pages – Double check ALL pages, all links, all images, all forms, etc.
  3. Check x2 Functionality – Double check ALL functionality across a range of browsers.
  4. Break it to Fix it – In fact, sometimes, depending on the amount of time I have, it’s a good idea to TRY and BREAK the site. Users have a funny way of doing things (and trying to do things) that developers didn’t expect -> good to get as many of those kinks worked out in advance as possible.

5. Code Clean-up and Presentation

  1. Comments – Up to this point, I have pretty nice code, but I like to go over it all again and be sure there are informative comments in the important places that clients will want to know about (tips, guidelines, directly naming certain elements, etc).
  2. Pretty-Print – I also like to format the code in a user-friendly format (pretty-print maybe it’s called). That includes indenting, commented dividing lines, etc.
  3. Live Link Presentation – Present the site to my client using a live link to the test site and ask them to evaluate it thus far. Make note of interesting or challenging things, and ask the client to try out a variety of things on their machine, including all site pages, etc.
  4. Feedback – Wait for feedback from the client, if changes need to be made, by this point they’re usually pretty simple to deal with.
  5. Package and Send – If the site is good, package it all in a .ZIP file and wait for receipt of the final payment before transferring the files.

6. Ongoing Refinement and Maintenance

  1. Upkeep – Over the life of the site, as elements get added, users increase, and changes are needed, I often get requests to help maintain what I’ve built. As long as the site was well-made from the start, upkeep is relatively simple, especially since I’m using my code, and don’t have to learn someone else’s.
  2. Add Elements – Sometimes the client wants to add other elements, or a bit of JavaScript tapered to their needs. Sometimes they provide me with links, or code, or just ideas of what to add.
  3. Maintenance Contract – Of course, all of the updates and upkeep needs to be contracted as well. The original contract only builds a site, upkeep (sometimes up to 40 hours a month) requires additional money as it is using additional time and resources to maintain.
  4. Client Training – Sometimes, I can train the client in the use of the CMS or even basic HTML and CSS so that they don’t need my constant supervision and only rarely ask me for minor assistance. In that case I usually help out for free.
  5. Offer New Features – As I learn new skills and web standards, I can also offer additional services to my clients for their websites -> things like HTML newsletters, jQuery photo galleries, etc.

Finished at last! 3-for-3. This part of the process also usually takes a minimum of one week (sometimes even up to one or two months and ongoing as needed). Hope you liked my process, and found it informative or helpful.

<– Go back to part 3:Code

Go back to part 1: Why a “Simple” Website Doesn’t Cost $100 ->

What about you?

I’m still learning, and working to improve my speed and skills with web design. Is there anything here you particularly agreed with or found helpful? Or anything you disagreed with? Or perhaps you have additional tips to help improve the website creation process as a whole? Please leave me a comment!


Advertisements

3 Responses to “Website Creation: STEP 3 – Testing and Maintenance”

  1. Website Creation: STEP 2 – Code « Aaron Snowberger’s Home Abroad Says:

    […] Continue to part 4: Testing and Maintenance –> […]

  2. And Here I Thought IE 6 was Broken « Aaron Snowberger’s Home Abroad Says:

    […] few months. Every time I make a website, I have a process: from design, to code, and finally to fixing my code (particularly for IE). Wouldn’t it be great if just for once the code I wrote really worked […]


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: