Web design: planning your site

The right tool for the job

Now that you know what HTML is, how it works, and a little of how to write it, you need to sit down and think about whether you need it. Before you create a site, think about what it's going to be and what your alternatives are. After all, the content is the most important part of any site and some tools are better than others for specific kinds of content.

If you simply want a journal (or weblog/blog), then you might save yourself the effort of creating a site by using a blog tool like Movable Type, Blogger, or LiveJournal. Such tools allow you to update your site without having to know HTML or needing to re-upload new pages every update. Similarly, if your site is primarily a gallery or portfolio of artwork, then tools like Gallery can save you a whole lot of effort by creating your pages and thumbnail images for you, as well as offering extra functionality such as comments and user/group settings to restrict parts of your site.

Of course, you can make a journal part of (or the heart of) your site and design around it. Tools like Blogger are very well suited to the job, whereas LiveJournal is much less so, being more suited to hosting your journal as part of its own community rather than part of your site.

If you want to create personal site or a page for your business then read on. Many of the tips in this tutorial are useful even if you decide to use a website tool like Gallery or Movable Type.

Planning your site

What is your site about?

Is it about you, about your hobby, or business? In all cases when you design a site you should know what's going to be on it. It will undoubtedly change over time as you add and change pages, but that doesn't stop you planning your site effectively.

Brainstorm. Write down what you want on your site. Don't worry if it's not possible yet: you'll learn in time. For example, if you're creating a site about yourself, your list might look something like this:

Now think about how much you want to write about each. Maybe it's just a paragraph, maybe it's a couple of pages of writing. The amount of content decides to some extent the layout of your site. Try to avoid putting too much writing on one page: if you have many hobbies that you want to write about, put each hobby on its own page.

Your audience

Think about who will be reading your site, and not just because someone you know might read something embarassing about you! When you create a web site (as opposed to just a web page) then you need to make it easy for people to find out what they want and to get around your site easily.

If you want to keep a journal, then your audience is either distant friends and family who to keep up on your life, or people who agree (or more interestingly, disagree) with your opinions. Your journal is the heart of your site and you should make it the most important part: the front page. Think about adding a section with your favourite journal entries, and add a section at the top (or a link to a separate page) that describes who you are and what you're interested in.

If you write a lot about your hobbies, then your audience will mostly be other people who share your hobby. Make that the focus of your site. Devote one or more pages to each hobby, provide opinions and links to other sites.

If you're writing a site for your business, then your company's products are the most important part. You need to tell people instantly what it is your company does, and what it produces and sells. Don't forget to mention what kind of customer you deal with. You can wax lyrical about your "mission" and grand history on another page; that kind of stuff only usually interests shareholders.

Armed with this knowledge, you can begin to plan how your site will be laid out and what will be on your front page. Don't make your customers click around to get what they want; figure out the most important part of your site and put it on the front page. Don't be tempted by "splash-screens" or a front page with nothing but a menu: you're just putting more distance between your visitors and the content they're interested in. Here's a simple layout for a small business:

An example site content sketch


In this example there are six sections to your site: your front page, where you quickly say who you are, what you sell and to who, and show off your most popular product(s), then a section about the kind of products you make and why people should buy yours instead of someone else's. Then are sections about the company, about support, about who sells your product (unless you plan on setting up your own e-commerce system, which is way beyond the scope of this tutorial), and finally a section about your products. Try to limit the number of sections you have: don't spread everything apart so far that your visitors have to hunt down the information they need, but group things together to keep your navigation easy.

Navigation

Allowing visitors to get around your site is one of the most important parts of designing a site. On the one hand you need to make it easy for visitors to get to any page without hassle, but on the other hand you have to make the navigation structure concise enough that they don't get confused. Our fictional company's website will have the following pages:

Each of the products has its own page, and while you're looking at one product you might want to look at the others. You need two levels of navigation: links to all the major sections (about us, support, our products, etc), and then links to the other pages in the current section. There are other ways of laying out your site, but this method scales very well if your site grows: it's the same sort of method that Amazon.com uses: you get the main sections as links at the very top, then sub-sections. Avoid making your site structure any "deeper": you need a lot of content before this becomes necessary. In fact most personal sites can quite comfortably fit in a single layer as in the first example on this page.

Before we continue

You should now know what your site is about, how to write simple unstyled HTML, and you should have sketched out your site's structure. Don't worry about how it looks, that comes after. Here's a recap:

On this page

Table of contents

  1. Home / About the tutorial
  2. History and context
  3. Learning HTML
    1. Document structure
    2. Marking up text
    3. Images and links
  4. Planning your site
  5. Writing your content
  6. Design and layout
    1. Writing Style-sheets
    2. Laying out your site
    3. More CSS
  7. Coding guide and tips
  8. Advanced techniques
  9. Further Reading & Resources

Example site

Help

Tips / Caveats