Every page on your website consists of several distinct parts or elements. There
are two important concepts to consider. First, these elements can either be static
– which means that they remain identical on each page of your website (this is
also called “universal” or “global”) – or dynamic – which means that they change
from page to page. Second, every web page has a “fold”, which is the imaginary
line at the bottom of your screen: if an element is “above the fold”, it means
you can view it without scrolling down; “below the fold” is the opposite of this.
Because of this, content that is above the fold generally gets more exposure than
content that is below it, which in turn impacts where you’ll place elements and key
Here are the main components of a web page, and the criteria that should apply to them.
• The header. Your header is the top-most element of your web page and is
the part that includes your brand name and logo. This is where customers will
look to identify your page, so be sure that it is clear and striking. Your logo
should always appear on the top left of the page, and should be a clickable
image that takes you to the home page. You header will be static and will
always appear above the fold.
• The navigation bar. One step below your header is the navigation bar – the
row of buttons that visitors click on to get to other parts of your site. Always
make sure that your navigation is a horizontal bar at the top, and not a
vertical bar. Depending on the complexity of your page, your navigation bar
could consist of just a few buttons, or it could have elaborate dropdown
menus with many links. Your navigation bar will usually remain static and
will always appear above the fold. It is vital that you give your links obvious
names, so that visitors have no trouble finding what they need. The worst
type of navigation is “mystery meat” navigation, where the visitor is not
given any clues about where each click will take them.
If your page is complex enough, you could consider adding contextual
navigation, which is navigation that changes dynamically depending on where
the user is on your page. Examples of this are “breadcrumb” links, which show
where in the context of the entire website you are, and expanded navigation
bars, which appear as submenus to the main navigation.
No comments:
Post a Comment