| Your web site design layout largely depends on the | | | | navigation menu might then lead to a variety of yoga |
| type of website you're building. A sales page, for | | | | disciplines and techniques, with a page for each of |
| example, has different requirements than a landing | | | | those. Yoga would be considered a general category, |
| page, and a landing page has different requirements | | | | while a discipline of yoga would be considered a |
| than a niche web page. For our purposes, however, | | | | sub-category. |
| we're going to address a generic web site. This is a | | | | The Text Area |
| website that has multiple pages, with each page both | | | | Content drives the Internet, and it should be the |
| leading to other pages on the site and also standing | | | | primary focus of your web pages as well. Black text |
| on its own. | | | | on a white background should always be your first |
| Your layout will most often contain a header, a | | | | choice. It makes reading easy on the eyes. |
| navigation menu, a text or content area, a footer, | | | | Depending on how much of your width you |
| and a place beneath the footer for links to your less | | | | dedicated to your navigation (generally around |
| visited but always necessary pages. Let's take a look | | | | 20-25% of the total width), the remaining area is |
| at these one at a time. | | | | dedicated to your text. |
| The Header | | | | Your title should be at the top of the area and |
| For the vast majority of sites, the header is an | | | | generally be contained within an h1 header tag. Avoid |
| image that spans the full width of your web page | | | | using fancy fonts. Stick with something basic such as |
| and provides the visitor with a quick, at-a-glance | | | | Arial, and try to stay to two or three fonts |
| grasp of what your website is all about. The width of | | | | maximum on a page. In addition, allow for plenty of |
| your website can run anywhere from 600 pixels to | | | | white space. Don't try to cram text into small areas |
| the full width of the visitor's screen, though most | | | | that make it difficult to read. Keep your content |
| often it will be between 750 and 800 pixels. This is a | | | | clean, pleasing to the eye, and easy to read. |
| width that visitors generally find comfortable and has | | | | The Footer |
| proven to be effective in the past. | | | | The footer is often a reflection of the header. It's |
| With this in mind, your header will most often fall | | | | there primary to graphically enclose your content |
| between that same 750 and 800 pixel range. It | | | | area and to give your web page a sense of |
| should contain an image that reflects the purpose of | | | | completion. It'll often be a third of the height of your |
| your website and is simple yet attractive. It should | | | | header, though there are no hard and fast rules that |
| also include the title of the web site. | | | | set a footer's height. Whatever you find graphically |
| The Navigation Menu | | | | pleasing should be fine. Though you will want to use |
| If you have more than a single page, your visitor's | | | | the same colors and general layout as your header. |
| need a way to find their way around your site, and | | | | Important Links |
| this is where your navigation menu comes into play. | | | | Beneath the footer, you'll want to include those links |
| It usually consists of a list of menu items in their own | | | | to pages that are necessary for legal and credibility |
| column, either to the left or the right of the primary | | | | reasons but are rarely clicked on by your visitors. |
| text area. For a small site, each menu item will link | | | | Examples include links to your contact page, to your |
| directly to a corresponding page and you'll only have | | | | privacy policy, to your terms of use policy, and to |
| a single navigation menu. For a large site, each menu | | | | your disclaimers. |
| item will lead to another page, which has a different | | | | There it is ... a basic web site design layout. It doesn't |
| navigation menu that leads to additional pages within | | | | have to include bells and whistles and flashing images. |
| that topic. | | | | It simply has to provide a pleasing format in which to |
| For example, if you have a large site on alternative | | | | present your content. Don't over think it. Always |
| medicine, your primary menu may include an item or | | | | keep this in mind: simple and straightforward is |
| link to a page about yoga. On the yoga page, the | | | | always better than complex and confusing. |