Intermediate HTML

Lesson 2: Intermediate Page Design

Page layouts: the Big Three

Have you noticed that most pages on the net these days seem to be laid out in one of only a few ways? Here are some of the more popular page layouts, illustrated, by an amazing coincidence, with page shots of sites I've designed.

Page heading and menu across the top
This is a very efficient layout for a small site with only a few pages or sections. The heading gives a graphic presentation of the site name, with perhaps a slogan or a logo; the visitor's choices are clearly laid out directly underneath where they're easy to find, while the rest of the page can be used to explain in more detail the purpose of the site.

Heading across top, menu to left and/or right
A nice layout for the somewhat larger site, because menu choices can be strung down the page, without worrying about making the page too wide to fit in a browser.

Heading across top, menus to left or right and across the top (or bottom)
Some sites are so complex that they really need a LOT of menu choices. If you can logically divide up the types of links that go into each menu, splitting links into across and down menus can be very effective. For example, you can put site related links such as "about us", "contact us", "advertise with us", etc. across the top, while your subject matter links go down the side.

Having tutored beginning internet users, I can attest to the fact that people can get very confused if pages aren't organized in a logical fashion. And more experienced users have certain expectations of how a web page will be organized. I'd venture to guess that about 90% of all professional websites use one of the three formats described above.

  1  2  3  4  5  6