the web design process: parts 3 & 4
June 11th, 2009
I thought it would be better to get this series done by friday, so I’ve decided to roll parts 3+4 into one post. We’re going to cover the last 5 parts of my web design process today. Check out the overview of all the steps below:
Make sure you check out in the web design process series.
Make sure you check out in the web design process series.
Overview
» Defining the end goal
» Navigation planning and sitemap
» Hand-drawn rough layout
» Photoshop comps
» Review comps to ensure the end goal has been met
» Coded comps (alpha)
» Dynamic content integration
» Browser testing
» Launch checklist
» Soft launch (beta)
» Launch and promotion
Dynamic content integration
This is the final step before any serious testing is done. Dynamic content integration includes stuff like: javascript, ajax, jquery, back-end tie-ins, and much more… Like I mentioned in part 2, it’s a good idea to leave an area in your coded comp where your developer can add in the dynamic stuff. Some examples of dynamic content would be: rollovers, image galleries, e-commerce, etc… Once you or your developer has added this stuff in, it’s time to do some site testing.
Browser testing
Browser testing can really be a nightmare. Don’t even get me started with Internet Explorer. I’d suggest doing the majority of your testing in Firefox, make sure you download and get familiar with . It’s a free tool that integrates with Firefox to help you debug your websites. I’d suggest ensuring your website works in the following browsers:
MAC
» Safari 4
» Safari 3
» Opera 9
» Firefox 3
» Camino 1.6.7
PC
» IE6
» IE7
» IE8
» Firefox 3.5
» Firefox 3.0
» Chrome 1
» Chrome 2
» Opera 9
Some of you might want to skip IE6, but I wouldn’t recommend it. Last time I checked 20-25% of internet surfers still use it – Doh! If you’re looking for a free service to check your website in several browsers, you should check out . Like I said, it’s free and it displays screenshots of your website in the browsers of your choice.
The other big thing to confirm is that your website is valid. Head over to the to check your code. They also have a free . Valid code is very important for stuff like google ranking and load-time, so make sure you don’t skip this test. These are two of the biggest things you need to check, but there are tons of other items to review before you can launch your website confidently.
Launch Checklist
A launch checklist is list of everything you need to test before you publish your website. There’s no way one person could remember all this stuff, so it’s best to work off a good list. Several lists are out there on the web, but here are a few I’d recommend checking out:
»
»
»
Once you’ve fixed all your cross-browser bugs, validated your code, and run through at least one launch checklist, it’s time to take your website public!
Soft launch (beta)
What does soft launch, or beta, mean? To me it basically means taking your website public but not announcing it yet. Once you get your website live on your server in a public folder, you still need to do some testing. Is all your dynamic content working? Do you have any broken links? I’d recommend running through your launch checklist again when the website is live on the server. At that point, if you find anymore problems, you can quickly fix them and hopefully avoid your readers from seeing them. Beta testing is a great opportunity to invite some friends or colleagues to check out your website and see if they can break it, or find any bugs.
Launch and Promotion
This is the fun part. Your website is live, valid, cross-browser compatible. It’s time to tell the world and retire at 32. At least that is my plan. I hope you’ve found this series useful. Please feel free to leave any comments or questions below, and I’ll do my best to answer them all. Thanks
Print This Post
Follow me