The Web Design Process – step by step

I’ve come up with a step by step process which has made me a much more efficient web designer.  It’s all about working smarter not harder!

As a freelance web designer, I’ve picked up some good and bad habits along the way. Let’s skip over the bad habits today and focus on one of my better habits which is how I work step by step through the process of creating a website ensuring that I don’t miss anything critical.

I’m going to share the process I use. I realize it may vary from other freelancers and that is fine, but if you are starting out, I hope you will learn some time saving tips to creating a project from start to finish without missing anything important. I’d also love to hear what your design process is like so please leave a comment.

We’ll assume that you’ve worked hard with the client and the mockup is finished and you are ready to begin the coding process.

First Step – Create an XHTML page and CSS file

You will need to setup your index.html page with an appropriate doc type. Also you will need to include a css file. At this time I enter css code that I always need in every project such as a clearing div. If I plan to use .png files, I will also add an .htc file and any additional files needed to view .png files in the older browsers.

Step 2 – Code the main areas

The main areas include, wrapper, header, navigation, content area and footer.  I work in order of back to front and top to bottom. I begin by designing the background of the page using css. That’s the back of the site. Depending on the design, I will either code up a wrapper div that will sit centered and contain the rest of the html code or I will code the header (top).

The header is created and I place all my elements in the header before moving on to another main element. At this time I might include a logo, a tagline, some navigation, contact info or images. Once the header is fully created, I move onto the next step which is the navigation. (moving down)

If the navigation is under the header, I will create it in full. If the navigation falls into a side bar I will first create a main wrapper which includes all the columns needed in this design and place the nav into one of them.

Next is the content area or text area.  If you created the columns in the last step above, you might be able to skip this section.  I will often set all the padding and margins for all the columns and enter the text and images for the home page.

Working further down the page, I will next create the footer. At this time you should be able to see all of your design with all the decorative elements all neatly in their places.

What’s next?

Step 3 – Validating

At this time, I upload my XHTML page and css to the server and I validate the code using the WC3 Markup Validation Service. This step is crucial and in my opinion and this is when I make sure everything I’ve created thus far is coded without any errors.  Why do I do it now?  Because it makes debugging the site in all the browsers so much easier.  Which leads us to the next step…

Step 4 – Browser Testing

Can I add a little commentary?  I never like this part because of IE6. Although I’ve become a pretty darn good IE6 debugger, it still brings on anxiety! Anxiety or not, it has to be done!   My list of test browsers includes Firefox, Internet Explorer 6 and newer, Opera, Safari and finally Chrome.  One of the best tools for this job is IETester. A couple of tools available for testing in Safari include BrowsrCamp, which is the one I use most often and Browser Shots.

(*sidenote: some web designers do not test in IE6.  If you are designing for a tech savvy target market you may not need to be concerned about IE6.  However if the target market of this project is an average user, consumer or a corporate user, you should test in IE6.)

In this step you may be forced to include a separate css file for IE6 and IE7.

Step 5 – Title, Descriptions, Meta tags

Now that the homepage is done, and tested to be valid and cross browser beautiful, I work on the title of the homepage, the meta description and the meta keywords (just in case the seo gurus are wrong).  I find if I do it now, as I create the other pages of this project, only minor tweaking to these three elements is needed.  This saves me time in the long run.

If your internal pages of a website are different than the homepage styling, simply start this process again.  After this you can simply create new pages off of either the homepage or the internal page by using the “save as” feature.  Don’t forget to adjust the titles, meta description on these new pages so they coincide with the the content of the page.

It’s also good practice to run each page through the WC3 Markup Validation Service prior to completing this project.  Fix any errors that may have occurred from adding text, images and other unique design elements.

Step 6 – Check the speed

Once the site is published I use an add-on to Firebug called Y-Slow to check the site’s download speed.  I work my way down the list of warnings until my site is optimized and images smushed.

9 Comments on "The Web Design Process – step by step"

  1. Monie says:

    Been there, done that!
    Great brief collection, useful for independent freelance web designer.

  2. MikeHopley says:

    What a simple, clearly-written article. Many designers could save themselves headaches if they walked through these steps. :)

    I’m curious why you need a .htaccess file in order to use PNGs. PNGs work out-the-box on every browser, unless you’re trying for alpha-transparency in IE6 (probably a bad idea). Even in that case, I don’t understand how the .htaccess file helps. Are you perhaps thinking of a .htc file?

    With regard to validation, you don’t need to upload to the server; you can use the Firefox Web Developer Toolbar to validate local HTML. But even this is slow compared to HTML Validator for Firefox. This little add-on automatically scans a web page and shows either a green tick (valid) or a red cross (invalid) in the corner of Firefox. This means you can see at a glance whether a page is valid — no action is required to make it work.

    This makes validating a large number of pages much more practical. There used to be an even better option, in the form of Nikita the Spider, which batch-validated entire sites. Sadly she is no longer with us. :(

  3. Mike, thanks for the comments. I have misspoken about the .htaccess. I did mean to say .htc. I will correct that error in the article above.

    Excellent tips for validating! Thank you for your contribution. I’m anxious to give the HTML Validator for Firefox a go.

    Thanks Monie!

  4. fpiat says:

    I like your writing and your articles but it’s seems like nobody ever saw this (very good) new: XHTML died in july 2009 (http://www.w3.org/News/2009#entry-6601). So why always talking about this crappy thing?

  5. I guess I did miss that fpiat! LOL Thanks for educating me! I still use a XHTML strict doc when designing so I guess I still have the right to use that term.

  6. MikeHopley says:

    Just to clear up possible confusion: XHTML 2 is dead; XHTML in general is not.

    You can write HTML5 using an XML serialisation; this is called XHTML 5. And of course, you can also continue using XHTML 1.0 (or even 1.1, although I would discourage that).

    For the reasons given in my doctype article, I still recommend that most authors use HTML and not XHTML. However, the demise of XHTML 2.0 doesn’t really change anything.

  7. fpiat says:

    @Mike : beautiful article that I missed.
    “XHTML 2 is dead; XHTML in general is not”: sh.. the monster still moving!

  8. I have been using HTML 4.01 Strict all this while…
    Well actually, to be honest, right after I read Mike’s article few years ago :)

  9. a great resource thanks dear

Got something to say? Go for it!