Best web site design for internet marketing and advertising
Create a Consistent Look
Maintain a consistent appearance and web navigation style
throughout the web site advertising . Consistency helps users
identify yourweb site, realise when they’ve left it,
and navigate it successfully. Elements that should be consistent
on each webpage include the overall structure, colors, backgrounds,
headers, footers, sidebars, and web navigation cues.
Maintaining consistency is easier with careful planning,
server-side includes, templates, scripts, and style sheets,
etc., which will be discussed later in this section.
Best Web Site Design : Structure
Use logical divisions consistently.
Each document comprises headings, text paragraphs, lists,
tables, and other logical divisions. Using these elements
consistently on all webpage s is the first step toward a uniform
look. Although from a hierarchical perspective, you may view
your web site marketing and advertising as starting from the
home webpage , many users will enter your web site marketing
and advertising through a link to an intermediate webpage
. Users should be able to immediately identify your web site
marketing and advertising and recognise subsequent webpages
that are part of it.
Best Web Site Design : Colours
Use black text on default or solid white background.
Each browser has a default set of colours that are used for
the webpage backgrounds and text. Typically the webpage has
a grey or white background, black text, blue hypertext links
that have not been visited, and purple for visited links.
webpage s with white backgrounds have been found to be the
easiest to read. White background color in the HTML tags displays
best on the greatest number of browsers.
Some browsers allow the web webpage author to modify default
colours; it is tempting to give a document orweb site a unique
look by doing so. However, finding colour combinations that
are readable on all monitors can be difficult. Changing the
visited/unvisited colours may confuse viewers.
If you do change the background colour, specify text colors
that do not conflict with the reader’s default Colour
choice is an important consideration when attempting to create
a web site that will be accessible to handicapped or colour
blind users.
Background colour may also affect the printability of your
web webpage s. Onweb sites that have dark backgrounds, offer
a "printer friendly" version of webpage s, which
uses a white background and default link colours.
Best Web Site Design : Backgrounds
Avoid background images.
Some browsers allow the webpage author to specify an image
as a background for a webpage . Typically the image is tiled
to fill the window area. However, background images should
be avoided because they increase download time. Also, text
can become unreadable if it overlays parts of the image. Consistent
alignment between background images and the text or other
elements is rarely possible on different platforms or browsers.
The webpage can look distorted when viewed in a very large
or very small window.
If a background is used, the image size should be as small
as possible, and the image subtle and low contrast. A possible
exception is when using a margin along one edge of the webpage
, perhaps in conjunction with a sidebar. However, in this
case, if the window size is changed, the alignment of the
sidebar text may be destroyed. For full screen windows, the
margin may repeat in the middle of the webpage .
Best Web Site Design : Headers
Webpage headers should be narrow and fast loading.
Webpage headers are text and/or graphics that appear at the
top of every webpage . (webpage headers should not be confused
with HTML heading tags.) Using a similar-looking header creates
a consistent look and feel for your webpage s. Examples of
headers might be a line of text, a logo, and a long narrow
banner graphic, image map, or a web navigation bar.
The header can also act as a web navigational element such
as an image map, or a web navigation bar. web navigation bars
are often "sliced" into several clickable web navigational
images or buttons. They can even incorporate a path summary
or "bread crumb trail" forweb site web navigation,
as at http://www.useit.com. Because it takes up valuable screen
space, the header should only be a few pixels tall. A single
line of text wrapped in a table with a color fill is a quick
loading alternative to a graphic header. Any image that is
used should be designed to load quickly, as it is one of the
first items loaded in the document.
Best Web Site Design : Footers
Use the footer for web navigation elements and forweb site-wide
information that is too long or repetitive to fit in the header.
A footer is text or graphics that appears at the bottom of
the webpage . As with the headers, footers should be similar
throughout the web site. Footers might include logos, contact
addresses, and feedback requests.Footers may also include
elements such as links to a privacy statement or a disclaimer,
and listings of theweb site curator, and date last updated.
Best Web Site Design : Sidebars
Use sidebars judiciously, using headers and footers whenever
possible.
An alternative to both headers and footers is a sidebar,
which is a vertical column of text located typically along
the left edge of the webpage . Sidebars often contain the
elements commonly found in headers and footers. The advantage
of a sidebar is that, unlike a header, it does not push the
main contents farther down the webpage and, unlike footers,
it is visible when the webpage is first loaded.
A sidebar allows prominent display of a large number of links
or small, featured bits of information, without pushing other
content completely off the first screen. The sidebar, therefore,
can function as a web navigational element. The disadvantage
of using a sidebar as a web navigation aid is that it reduces
the width available for each line of text, which is particularly
a problem on small monitors, laptops or for users who choose
not to use their browser full screen. Also, text-only or speech-enabled
browsers tend to display the sidebar before the content, particularly
if the sidebar is in the left margin.
It is worth noting that if tables are used to create a sidebar,
the webpage may not load as quickly because most browsers
do not render elements until the entire table has arrived.
This problem can be addressed by making the sidebar itself
a table while putting the rest of the content in a normal
webpage body.
Best Web Site Design : Frames
Avoid using frames.
In the past, frames have been used as a method to lay out
webpage s, so repeated elements are available on every webpage
. For example, a sidebar in a frame on each webpage could
contain web navigational elements. However, we recommend avoiding
frames altogether.Frames make it difficult for the user to
bookmark a specific webpage . Frames also make the process
of printing the webpage confusing for the novice user. Coding
the HTML to drop the correct webpage into the appropriate
frame may become muddled, making it more difficult for search
engines to find the webpage s. And JavaScript rollover menus
may not function correctly as the user’s cursor travels
from frame to frame.
These issues are a few of the reasons why we do not recommend
the use of frames.
Best Web Site Design : web navigation
web site web navigation exists on three levels:
(1)web site level,
(2) section level, and
(3) webpage level.
web site level web navigation focuses on the web navigational
elements that should appear on every webpage in the web site:
Help, Contacts, Search, and Home.
Section level web navigation elements only appear on webpage
s within a section. They link to information that is pertinent
to the topics referenced in the section. These section elements
might be incorporated by adding a second row of buttons below
theweb site level web navigation. Section level web navigation
can be further differentiated by the use of colors that are
different than those used for the more primaryweb site level
web navigation.
webpage level web navigation includes elements used to navigate
within the webpage such as links that allow the user to jump
down the webpage to a specific topic or location.
Best Web Site Design : Using web navigational Elements
Be consistent in your use of web navigational elements.
To maintain a unified look for a web site and to avoid confusion
for the user, choose a consistent set of web navigational
elements and use them on every webpage . A user who arrives
at yourweb site from a search engine may start at some obscure
webpage in the middle of theweb site and will need links back
up to the major sections.
web navigational elements can be text or image links, a row
of icons in the footer, a menu in a sidebar, a web navigation
bar at the top of the webpage or a path summary in the header.
Regardless of the type of links used, every webpage should
have a link to the "home webpage " or to a higher-level
webpage in the same section. Regardless of the type of web
navigational elements, it is crucial that they be placed in
consistent locations on the webpage s.
Links should be given descriptive names. Do not simply create
a link that reads that reads "click here." Links
should be self-explanatory where possible and should be part
of the normal sentence structure of theweb site. Descriptive
links also increase the accessibility of aweb site for screen
readers used by visually impaired users. And always remember
to create an ALT tag for any buttons or clickable images
Best Web Site Design : Browser Compatibility
As HTML matures and new versions of browsers begin to support
more capabilities, it is tempting to create web navigational
elements that incorporate these new features. New techniques,
such as JavaScript rollover buttons are easy to create using
HTML editors and are becoming commonplace. Java Applet-based
interfaces and DHTML rollover menus are also becoming commonly
used.
While these new techniques may produce intriguing interfaces,
they are not always compatible with older versions of browsers.
Making content accessible to the user should be of a higher
priority than creating intriguing interfaces. If the user
has turned Java or JavaScript off in the browser’s preferences,
web navigational elements based on these capabilities may
not function.
A good practice is to test all interfaces on different platforms
(Mac, PC, and UNIX), as well as using several versions of
both Netscape and Internet Explorer browsers.
|
