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.
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.