Good web design has a number of common features which make websites easier and more enjoyable to use. Knowing what these are will help you understand why you love some sites, and hate others - and what you want to include in your own website.
We should point out that these are common terms that we use for different parts of a web page. They're fairly standard, but other people may use different terms.
This article on the anatomy of a web page covers the individual elements on a page, what they're for and why you need them. To see what page formats are commonly used and to learn about responsive designs, read our article on the size and layout of a web page.
Page header
The area at the top of the page is usually referred to as the page header. On a typical page such as Microsoft or eBay, this area is between 50 and 100 pixels high. It features the company logo, perhaps a strap line and main navigation. It often includes key information or calls to action, such as a phone number, contact button or search box. This is the first thing that your visitors will see, and will be a common theme throughout your site.
Site structure
You can think of a site structure as a tree diagram or a directory with nested sub folders. At the top of the structure is home, immediately below that the most important sections or topics and inside those, further sub-sections.
Organising how content will be arranged in a site structure diagram is one of the first tasks we do with our clients before starting on the design for a new website. It's crucial that content is organised clearly from the start so visitors find the website easy to navigate. We recommend aiming for no more than 3 tiers or nested levels of content below the home page.
Websites are a great way to give people access to lots of information, including archives, but sometimes less is more with content. The more pages you add and the bigger your site structure, the harder it is for visitors to browse and for you to keep pages and files up-to-date. Website visitors typically have a short attention span; they expect to find the information they want quickly. You need to make sure your site structure allows them to do this.
Main navigation
The main navigation is usually a horizontal row of 5-8 page links, which are either at the top of the site structure, or are the most important pages on the website. These are clearly visible and obvious, and are often highlighted when the visitor is in that section of the site. The first item is usually a link back to the Home page, although if you want to squeeze in more navigation tabs this can be removed as it's standard practice for the logo in the page header to also be a link back to the home page. With more than 8 main navigation links, a website can look cluttered.
This layout doesn't work at all for smartphones. Common practice is now to use a hamburger menu to display navigation on a mobile design. A hamburger menu is a button containing three horizontal lines which you click to reveal a vertical menu.
Secondary navigation
Secondary navigation refers to pages below the top level of the website, the second tier of the site structure. Unlike the main navigation, the secondary navigation changes depending on which area of the site the visitor is browsing. Secondary navigation is usually either placed directly under the main navigation, or on the left side of the screen (for larger screen sizes). When placed on the left side of the screen, secondary navigation allows the tertiary navigation to be displayed as well. Tertiary (third tier) navigation is a useful navigational aid for larger sites.
For larger screens where users will almost certainly have a mouse, secondary navigation often appears as a dropdown menu which appears when you hover over a particular tab.
Meta tags
Meta tags are fields which aren't displayed on the screen to visitors but are used by search engines. You can read more about meta tags and other behind-the-scenes features of websites in our blog about SEO (search engine optimisation).
Page title
The heading at the top your page is crucial to attract a visitor's interest. Studies have found that the vast majority of visitors will look at a web page for less than 30 seconds, so your page needs a snappy (and relevant) title to draw them in. The page title should use the HTML H1 tag because it has special significance to search engines indexing your page.
Breadcrumb trail
A useful navigational aid, the breadcrumb trail is usually placed just below the page header and shows at a glance where the visitor is located in the site structure, e.g. Home > Blog > Anatomy of a web page. The breadcrumb trail begins at the home page and each link except the last should be clickable to take the visitor up to that section.
Hero images or banner images
These terms refer to the large images at the top of the page that grabs the visitor's attention. If you have a number of them that fade in and out automatically or that visitors can click through, this is often referred to as a carousel. Its use should be restricted to key pages such as the home page in order to maximise the effect. An example of a website that we've built with an image carousel is Gloucestershire Healthy Living and Learning
Full-screen and embedded videos
If you have a video you want to include in a web page, the best way is to upload it to a platform like YouTube or Vimeo, then embed it in your content (YouTube and Vimeo give you the code to do this). Videos take up a lot of disk space (physical space on your website server) and bandwidth (download traffic), so you probably want to avoid hosting them on your own website. In addition, embedded videos come with players so visitors can play, pause, jump back and forward etc. Finally, YouTube is a popular search engine in its own right so having your own YouTube channel is good for driving traffic to your website.
Full-screen videos can make a big impact when used as the background to a web page, stretched right to the edge. You can see examples from our own portfolio on Media Spaces and UTM Consultants
Unlike embedded videos, full-screen videos will probably be hosted on your own website. You need to pick the right video, one that's not too busy or complicated and one that works with text over the top, and the overlaid text needs to be fairly minimal. Like image carousels, full-screen videos should be restricted to key pages such as the home page.
Content width
An important consideration for readability is the width of the main content of a page. Text that spans the whole page can be hard to follow, which is why newspapers use a series of narrow columns. On a web page, content wider than around 30 words can be hard for the visitor's eye to track, so we recommend breaking wide sites up into columns to make them easier to read.
Site map
A site map is a text-only list of all the pages on the website with links to each page. All our sites come with a sitemap that's automatically generated so that it's updated every time a page is added, edited or deleted through the Content Management System. Your navigation and site structure should be clear enough for visitors to easily find what they're looking for, but a site map is a good way to list everything on your website in case they're confused. You can create sitemaps in a variety of formats to submit to Google.
Page footer
The page footer usually consists of links to important (but not very interesting) pages on the site, such as the terms & conditions, site map and a contact page. Some sites, such as the BBC website, put a large number of links in the footer so that the main navigation can be free of clutter without reducing functionality.