Layout Navigation Text Images / Media HTML Software Links
Layout ————————————————————————————————————————
The first page of your website that visitors see is called the 'home page'; it should clearly tell visitors where they are and what your website does.
A visitor should know what your website is about within seconds of viewing it; otherwise they’ll likely leave straight away.
Your website should have the same structure / layout / design on every page; with only the content being different.
In particular, the logo, navigation links and search box should be in the same position on all pages of your website.
Place your website's logo at the top of the page; most people locate it in the top left corner.
On viewing a website visitors first look to the top left quarter of the screen; they then tend to zig-zag down it from left to right.
The top of every page of your website (that which is viewable without scrolling down) is much more important than the bottom (which may not even be seen by many visitors).
Try to apply the design principles of balance, contrast, proportion, rhythm and unity throughout your website.
Used well, open / empty / white spaces between items on a website make the design more visually appealing.
A palette of between 2 and 4 colours should be appropriate for most websites; with varying tones of those colours being used to highlight and emphasize.
Colours have different meanings; choose ones which compliment the purpose of your website.
Different visitors will have different screen resolutions; it’s important to design a website that looks good on both high and low screen resolutions.
A visitor should never have to scroll horizontally when viewing your website; however, vertical scrolling is fine.
Avoid splitting your website into frames; it makes it difficult for visitors to bookmark it and makes it harder for search engines to find.
Navigation —————————————————————————————————————–
The easier your website is to navigate, the longer people will stay on it.
The smaller the number of clicks required by a visitor to find the information they want, the better your website navigation is.
If visitors to your website don’t quickly find the information that they’re looking for, they’ll quickly look elsewhere.
Plan you websites navigation system / menus at the start of the design process; don't make it up as you go along.
A link is a word or phrase that when clicked takes visitors from one part of your website to another part of your website, or to a completely different website.
It’s possible to make an image a link but it’s not recommended because many visitors won't realise that it’s a link.
It should be easy for visitors to your website to differentiate between links and normal text.
A common way to highlight links is to make them a contrasting colour to the other text on your website and to underline them.
Make it clear where each of your links goes to; this is best achieved by making links descriptive words or short phrases as opposed to ‘click here’ or ‘more information’.
Visitors will assume that links on your website are to other pages within your website; if they’re not, i.e. you’re linking to a different website, try to make it obvious.
Create a page on your website that has links to every other page (this is called a sitemap); it’s useful to both visitors and to search engines.
Include a search bar that allows visitors to search the whole of your website; this should ideally be located in a prominent position.
Create a footer section at the end of each page of your website; it’s an ideal place to put links to your ‘about us’ and ‘contact’ pages.
Try to avoid using drop down menus; some visitors won’t realise what they are and others won’t bother to scroll through them.
Don’t set-up your website to open a new web browser window when a visitor clicks on a link; they can use the ‘back’ button to return to your website if they want to.
Don’t use pop-up windows of any kind for any reason; they’re associated with spam and untrustworthy websites.
Text —————————————————————————————————————————-
Limit your written content to roughly 15 words per line and keep your paragraphs under 8 lines.
Only use fonts that are available on all computers (such as arial, helvetica and verdana).
Try to use the same style of font throughout your whole website.
Don’t display text in small font sizes; if it looks too small, visitors to your website won't even try to read it.
The colour(s) you choose for your text should contrast sharply to the colour(s) you choose for your background.
Avoid centering text; it's harder to read than text that’s aligned to the left.
People tend to skim read / scan text on a computer screen, so make good use of: bold words; bullet points; headers / sub-headers; lists; paragraphs.
Using bold instead of italics makes highlighted or emphasised words / sentences easier to read.
Don’t underline normal text; if you do so, visitors will likely confuse it for a link.
Keep long articles on the same page instead of splitting them into multiple pages (that require visitors to keep clicking ‘next page’).
Don’t blend advertising inside your main written content; doing so confuses and annoys visitors.
Images / Media ———————————————————————————————————-
Used correctly, images on your website make it more eye-catching and attractive.
Used incorrectly, images on your website distract from your written content.
Images are best used sparingly; only when they’re directly relevant to the text they’re located next to.
The more images you have on your website, the longer it will take to load in a web browser.
The images you display on your website should be a maximum of 72dpi and 200kb; if you're images are bigger than this, compress them using image editing software.
The images that you use on your website should be saved as .gif, .jpg or .png.
Don’t overuse JavaScript, Flash or animated elements; they increase the loading time of your website and distract from your written content.
Don’t make visitors watch a video or animation something before they can access your written content; most won’t bother and will immediately leave your website.
Try to avoid using music / audio files; if they’re necessary, require visitors to click a ‘play’ button rather than playing them automatically.
Avoid requiring visitors to download additional software / plug-ins to view your any part of your website; most people won’t and will instead leave.
HTML ————————————————————————————————————————–
Websites are created using a computer code / language called HTML (HyperText Markup Language).
HTML determines how text, images, links etc. look, and where they’re located, on your website.
When a HTML file is opened or viewed in a web browser, the code / language is into a visual image.
HTML files only contain text (letters, numbers and signs).
An image can’t be directly inserted into a HTML file; instead, you have to insert in words the location the image is saved.
6 digit numbers (called 'hex values') are used to represent colours within HTML e.g. #99000 is red, #009900 is green, #000099 is blue.
Triangle-brackets (which look like this < >) are used to form tags; any text between the < and the > is HTML code.
Tags are used to separate HTML code from normal text (i.e. the text that’s displayed to visitors to your website).
Tags aren’t displayed in a web browser when you view a HTML file as a website but their effects are.
Each tag within a HTML document acts as an instruction; telling a web browser how to show something or where to position it.
There are hundreds of different tags and each performs a different function.
Every tag that’s opened must also be closed; this is done by repeating the tag but inserting a / after the first < e.g. <b> this is written in bold </b>
All HTML documents begin with <html> and end with </html>.
There are two main sections within every HTML file; the the body section (<body>) and the head section (<head>).
The body section of a HTML file contains the information that’s displayed to visitors to your website.
The head section of a HTML file contains information about your website (for use by web browsers and search engines); its contents are not displayed to visitors to your website.
There are 3 important tags (called 'meta tags') within the head section of every HTML document: title; description; keywords.
Meta tags are an important aspect of search engine optimisation.
The title tag (<title>) is the text that’s displayed in the blue bar at the top of a web browser.
Your title tag should be less than 60 characters long and should include the name of your website.
The description tag (<meta name = "description" content =……">) is the text that search engines display on their results pages.
Your description tag should be less than 140 characters and should describe the purpose of your website.
The keywords tag (<meta name = "keywords" content =……">) isn’t seen by visitors to your website but is used by search engines to determine the subject of it.
Your keywords tag should contain a list of single or multi-word phrases separated by commas.
Cascading style sheets (CSS) are a type of HTML file that control which fonts, colours and spacing (other HTML elements too) are used throughout your website.
CSS allow the entire style of your web site to be changed by making just a few minor adjustments to the HTML code.
JavaScript can be used to add special effects and user interaction to HTML.
You can view the HTML file of any website on the internet by clicking ‘view’ on the menu bar at the top of your web browser and then clicking ‘page source’.
To create a HTML file, save any text file with the extension .html e.g. mywebsite.html
You can learn basic HTML within a day by either buying a HTML book or reading an online HTML tutorial.
After you’ve finished creating your website, use a HTML validator to check that the HTML code is error free.
Test your website on at least these web browsers: Internet Explorer; Firefox; Opera; Safari.
Software ——————————————————————————————————————–
There are two main types of computer software used to design websites; text editors and WYSIWYG (what you see is what you get) editors.
With text editors, you create / edit the HTML code directly.
To see how a website created / edited with a text editor looks, you must open it in a web browser.
Text editors require knowledge of HTML but create less coding (meaning a website loads quicker) and are faster to make code changes on than WYSIWYG editors.
With WYSIWYG editors, you don't create / edit the HTML code directly; rather, you type, draw, insert images etc. on to a blank page and the HTML code is automatically created / edited.
WYSIWYG editors show how the end-result will look as it's being produced i.e. they display the website as it will show in a web browser.
WYSIWYG editors don't require you to have any knowledge of HTML and are generally easier than text editors to use (especially for newcomers to web design).
Some WYSIWYG editors also include a text editor; such hybrid packages allow you to switch between the two or use them simultaneously on a split screen.
Neither WYSIWYG editors nor text editors create better looking websites than the other; they are equal with regards to their potential for designing quality websites.
The price of website design software ranges from free to hundreds of dollars.
‘Microsoft Word’ and ‘Notepad’ can be used as text editors.
‘Coffee Cup’ and ‘NVU’ are efficient, low cost website design packages.
‘Dreamweaver’ is the most popular commercial website design software package; the latest version costs approximately $400.
Layout Navigation Text Images / Media HTML Software Links
www.w3schools.com : Comprehensive information on how to create a website.
www.how-to-build-websites.com : Website design tutorial. Guide to CSS (Cascading Style Sheets).
www.jessett.com : Website design tips. List of HTML tags and hex values (colours).
www.webstyleguide.com : Planning layout and navigation. Use of colours, images and fonts.