5 Steps to a Successful Web Design (or Re-Design) Part 4

Tweet Today we bring you part four of a four-part series on effective website design.

Step Five – Testing & Maintenance

In “Step Four – Code”, a few applications were mentioned as tools that aid web designers to code their sites. Those same programs can aid in the testing step. The higher end editing programs: Dreamweaver, Coda and Aptana, include validation services. Simply running these commands in the program may solve a lot of issues that may occur during coding. You don’t have this luxury if you are using a basic text editor, but you are not out of luck. W3C has a code validation service http://validator.w3.org/, which allows you to validate a site via a URL, ftp upload or directly placing the code into a form field.

For visual testing, it is important to have a copy of each browser available. Again, download Firefox, Safari, Google Chrome and Internet Explorer. For multiple versions of Internet Explorer, use IE Tester http://www.my-debugbar.com/wiki/IETester/HomePage. Check that elements are aligned as intended, spacing is consistent and check for script errors.

Fix Internet Explorer specific issues by targeting the version causing an issue and resolving it with a specific fix. This can be done by creating an IE specific CSS file with the specific fix included by using an if/then conditional in the HTML. This technique will come in handy for any differences in the Explorer version of your site.

EX: This specifically targets all Internet Explorer browsers under version 7.

Test, then test again. Have someone else test the site. If you are not fortunate enough to have a group of people to test the site, send it to friends and family. Take note of technical issues as well as any complaints/suggestions about user interface. Having people other than you, that have never seen the site, test for you is a great asset. It is sometimes nice to stand over the shoulder and take notes, quietly.

The five steps mentioned in these posts are a good overview to the process. Additional information can be found on the web as well. Remember to observe the accessibility rules, pay attention to trends in web design and keep your code clean. With the upcoming release of HTML5 and CSS3, there are new possibilities on the horizon to take note of as well. Web design is a constant learning process, but the basics remain the same. The most important step is gathering the right information in the beginning. This gives a clear direction and allows for a smooth flow between all of the steps of the design process.