Web Site Design Pages

Beginners Guide to Websites

Website Content is Everything

What is Good Web Design

Beginners Guide to E-Commerce

Website Review

My Approach to Web Design

Content Management Systems

Useful Web Design Resources

Other Web Site Services

Search Engine Optimisation (SEO)

Disability Accessibility

Hosting

Domains

Useful Website Resources

Web Safe Colours

There is a very limited range of colours considered to be web safe - this doesn't mean these are the only colours you can use but it does mean these are more reliably produced across the technologies used and safest where text and images are used together. Here is a web safe colour chart.

You will see the colours are very limited unlike the millions you have available for print and do not expect to be able to quote a pantone colour and get the equivalent for the web, you can't I am afraid, they are not really compatible, for the web you need the Hex or RGB colour reference.

Fonts for Websites

Fonts used for web sites are limited to a small number of common fonts found on the majority of computers - fonts are not downloaded with a web pages, web pages use fonts on the visitors computer.

While a specific font is not necessarily installed on every computer, even those using the same operating system, some fonts are so common that they are safer to use than others. The most common serif typefaces are Times and Times New Roman. The most common sans serif typefaces are Arial, Helvetica, and Verdana. A variety of size parameters, letters spacing and line spacing can be adjusted and colour can be specified.

If you want to use a font that is not generally available then machines without that font will default to another font so you may not get the appearance you want so I recommend you use the commonly available fonts.

So the best approach, if you want to match up logos, print presentation and your website, is to limit the logo and print presentation to what can be done on the web.

If you really must have a certain font (perhaps to match your logo for headings on the page) the only reliable option is to have a graphic instead. This however is not to be recommended as it is detrimental to search engine rankings and creates Disability Accessibility issues.

Here are some examples of the common fonts used on web pages.

Photos for Use on Your Website

You cannot use someone else's photos or images on your website without their permission. Many great images and photos are available for a very small charge from websites like Istockphoto.

Preparing Images for the Web

Typically photos are far too large (in terms of height and width) and also too big (in terms of file sizes) to use directly on a website. So they need to be made physically smaller (or perhaps cropped) and then have the quality reduced (or optimised) so they are suitable for web use. So you might start with a 3000x2000 8mg photo that ends up at 300x200 and 40kb for use on the web.

I think the best software package for preparing images for use on websites is Adobe Fireworks. However this is quite an expensive piece of software outside the scope of many casual users who perhaps need some software for preparing graphics for adding to their website using their Content Management System (CMS) so here are a couple of FREE alternatives:

• Picasa (from Google)
  This is a simple photo managing and editing package for people who don't need anything too clever. Its export facility has some basic resizing and optimisation features.

• GIMP (GNU Image Manipulation Program)
  This is an open source program that is an alternative to Photoshop so it is a professional level program that is free. There are loads of plugins including a "Save for Web" one to make life easy for you.

Favicons

A favicon (short for favorites icon), also known as a shortcut icon or bookmark icon is a 16x16 pixel square icon associated with a particular website.

Browsers that provide favicon support typically display a page's favicon in the browser's Address bar and next to the page's name in a list of bookmarks.

You can create a Favicon here for free and there are instructions on how to use them on your website.

Coding Web Pages

The industry standard is Adobe Dreamweaver, but this is expensive. There is a free open source program called NVU that tries to do a similar job. You do need to have a reasonable understanding of web site setup and web page coding to use either of these effectively.

Uploading Your Website to Your Hosting (FTP)

The standard way of publishing your web pages or adding files (images, PDFs etc) to your website is to use an FTP (File Transfer Protocol) program.

There is an good free open source program available called Filezilla. (You will need the Client version.) 

To use an FTP program you will need the Address (host), Username and Password to your hosting. The program gives you a 2 pane file browser - one pane is your computer, the other is the server on which you site is hosted. Files are sent in either direction between the 2 computers.