This chapter is from the book
This chapter is from the book
This chapter is from the book
Organizing Websites
When you are figuring out the structure of your site, you need to think about both the site as a whole and each page. Remember that a website is just a collection of web pages. There should be a unity to what you create. This unity should be apparent on the site itself and on each page. For example, if you create a family website with pages for each member of the family (mom, dad, son, and daughter), each of those pages should look similar to the others. They should look like a united whole. If every page is different, the site visitor might get lost. You might start by looking at your entire site, or you could look at just one page.
Organizing the Site
When I begin to plan out a new website, I start with a blank piece of paper on which I draw out the website in this manner:
- On a blank piece of paper, draw a central box and put Home Page in it.
- Draw separate boxes around the Home Page box for subtopics you want to cover on the website.
- If these subtopics divide further, add those topics to the page using additional boxes.
- Determine what warrants a separate page. A web page should have its own unique content that is equal in amount to that of other pages.
- Draw lines connecting these pages to the Home Page box.
- Draw lines from the subtopics of each page to the page itself.
Geek Speak
home page
A home page is the first page people see when they come to your website. This page is the one loaded when people type in your domain address. Keep in mind that people do not stay long at any website—usually just seconds—so this is where they get their first impression.
Now you have a rough map of what you want to do on your website. See Figure 3.6 for an example.
)
Figure 3.6 A rough map of a website.
Organizing the Page
In the same way as the site, I begin organizing each web page with a hand-drawn template. I keep it as simple and generic as possible so I can then make each page look like a unified page in a website. This is the method I use:
- On another blank piece of paper, draw a rectangle that is longer than wide and fills most of the page. This rectangle represents a web page that is viewed with a typical browser on a typical screen.
- At the top of this page, draw a horizontal line across the page, about 15% of the way down. This is your header.
- At the bottom of this page, draw another horizontal line across the page, about 15% of the way up. This is your footer.
- Add a rough outline of how you want your content to look on your site. You might want to have columns or tables. Take some time to express your creativity. Figure 3.7 gives you a general idea of how your site should look.
Figure 3.7 Web page diagram.
)
Geek Speak
header and footer
The header and footer sections of the page are the same for every page. Typically you'll find links to other pages and contact information in the header and footer. Look at other web pages, and you will see many have headers and footers.
You may have the same organizational structure for your whole website, or you might have a couple of different ones for different parts. This is essentially a paper template. A template allows you to keep consistency across multiple pages. Let your content define the structure.