Like everything, from baking a cake to writing a tutorial, there isn’t a single best way to build a website. You try a few methods and over time, you either find the formula that works for you or you improvise and come up with an altogether new one.
Over the past 4 years, I have experimented with several practices and have finally settled with the following one. It is a 5 step process that starts with defining the purpose of the site and who it is meant for and concludes with a beautiful, fully functional website.
If you decide to skip some of the intermediate steps, you can end up with either a beautiful, non-functional site, or the opposite, a site that is functional, but ugly to look at.
STEP 1: Define Before You Design
First, you need to answer two basic questions: What? Who? If you are building the site for a client, involve them while answering these questions.
What – is the purpose of the website?
What is the purpose of building this website? In other words, what do you hope to achieve through this website? Here are some of the possible answers:
- selling a product: You could be selling anything from clothes to computers. You want to build a website so that people can buy your products sitting at home.
- providing a service: The site provides a web-based service. (Ex. 37 Signal’s Basecamp, Google’s Gmail)
- blogging: You have something to share with the world. You want to publish an article and let the visitors comment of it.
- initial web presence: You don’t have a website as yet. You hear everyone talking about the importance of “web presence”. So, you want to provide some information about your company on the internet.
Having identified the purpose of the website, you need to define a typical visitor to your site.
Who – is the target audience?
You want to cater to everyone who surfs the internet? Nice try, but you need to be more specific.
Answering this question will give a direction to your copy writer and designer. If you fail to answer it precisely, you might end up with pink flowers and teddy bears on a technical site.
Taking the example of 37 Signal’s products, their target audience is small businesses and individuals. Even though large corporations also use their products, they target small businesses and individuals.
Some of the characteristics that you would take into consideration while defining your audience are:
- age: If you are building a site for a retirement home, you are very clearly targeting an audience that have crossed their prime.
- language: Does your entire audience speak the same language? If not, you might have to consider supporting multiple languages on your website.
- profession: If you are building a site that is specific to a domain, you will use a terminology that is understood only by people from that domain. Remember that some of the visitors won’t be from that domain so while writing the copy be nice to them too.
STEP 2: Website Structure
Next you will build the skeleton of the website. Typically a site will be divided into sections and subsections. This is very important because it gives you an overview of the website. You could use an outliner tool to create the site structure. I use LooseStitch. It is a free online outliner that allows you to invite others to work out the outline too. It is extremely useful when you are working as part of a team.
As an example let’s look at Amazon’s site. It has 11 top level sections:
- Books
- Movies, Music & Games
- Digital Downloads
- Computers & Office
- Electronics
- Home & Garden
- Grocery, Health & Beauty
- Toys, Kids & Baby
- Apparel, Shoes & Jewelry
- Sports & Outdoors
- Tools, Auto & Industrial
Each of them has some sub sections. Here are a few of them:
- Books
- Books
- Kindle
- Textbooks
- Magazines & Newspapers
- Movies, Music & Games
- Movies & TV
- Blu-ray
- Video On Demand
- Music
- MP3 Downloads
- Musical Instruments
- Video Games
- Digital Downloads
- Kindle
- Video On Demand
- MP3 Downloads
- Amazon Shorts
Amazon.com has only 2 levels of menus. A simpler site could have only a single level while more complex ones could have as many as 4 levels.
STEP 3: Prototyping Your Site
Until now, you haven’t written a single line of code. The client must be getting anxious as to when they will get to see the first screens of the website. At the end of this step you will show them something in the browser; but not what they are expecting. They will want to see the design first. You will instead show them a prototype site.
A prototype site is a fully functional site with all pages containing the necessary content. If the site has a navigation menu, it must figure somewhere on the prototype pages. The ‘Contact Us’ form must be wired up to send the data by mail to the required address.
But then how is this different from the final site?
Oh I forgot to mention, the designer has still not made the design. The prototype is a bare naked site that contains almost no graphics. The purpose of the prototype is to be able to very quickly put things into place and find the usability errors. You could have started out with a 2 level structure for the site and then realized that you underestimated the complexity of the site. A 3rd level needs to be added. If we realize this after the design has been made, the designer will have to redo the design. This can cost quite a fortune.
STEP 4: Designing Your Site
Looking at the prototype, the designer knows the site structure and what should be on every page. In step 1, we defined the target audience and the purpose of the website. These are vital input for the designer. He or she now has most of the input that is needed. In a few days, it is possible to come up with two or three template designs for the site. At the end of a few sessions with the client, one of the designs can be finalized.
Remember, the designer doesn’t design in HTML. They will use Photoshop or a similar application, and will provide one template for each type of page.
STEP 5: HTMLize the Design of Your Website
Once the design is approved, you need to rebuild it in HTML5 and CSS3. If the design contains transitions, you will need to use Javascript and possibly AJAX. For each template design, you should build one HTML file. Dump some “Lorum Ipsum” (sample text) in the placeholders so that you can see how the page looks.
After building the HTML templates, test them on various browsers. You are bound to be confronted by browser issues. The earlier you fix them, the less you will need to replicate the corrections.
Once the HTML template pages are ready and tested across browsers, you can replicate the prototype pages with the new design. While replicating, make judicious use of inclusions. You can include the common chunks of code like the header and the footer. This reduces code on each page and makes the entire website code base more manageable.
That’s it! We have gone from the idea of a website, to building one in 5 steps. This is a basic overview of how to build a website. Later we can discuss Search Engine Optimization (SEO), the use of a Content Management System (CMS), advanced uses of JavaScript, CSS and more!
