web style guide
cULTURE
Style Home
Styleguide
Templates

Workflow and design
First you need to plan your website construction or web development project. You'll need to work out the best way to achieve the aims of the project - and then to manage the project from inception to completion. The steps comprising the development process can be described as the "workflow" of the project:
  1. Begin by finding out what the "client" needs from the site.
  2. Determine what audience will use the site and what their needs may be.
  3. Based on this information, plan and design the overall site layout and features.
  4. Then design, collect and modify and/or create, the site content (text, images, etc).
  5. Next build each webpage (and we'll use some more jargon here) by populating documents with the assets and other content according to the design specifications.
  6. Finally you would test the site (and "debug" and refine it) to ensure it matches the aims you set for it - and before anyone else uses it.
Note: Following each step and maintaining good file structure and management lowers the time needed to make your website and ensures it's built properly so users get what they want from a visit.

For a large website project with a significant budget there could be many people involved. They may include: a Project Manager overseeing the project, a designer who lays out and creates images and banners, a programmer who writes code and programs special site functions and a copywriter who creates all the text. Lastly, a webmaster or manager may be appointed to maintain and update the site in the future.

Don't worry, most web builders work with just a graphic designer who creates the required images, while they create the rest of the website.

Remember that a site is a "living document" and, unlike paper, can be updated any time from any location - and on a regular basis. Uploading a site to the web is only the beginning of the story!
Planning the website

You would generally think about the requirements of the site and plan it on paper before you begin building it. This would include deciding on:

  1. How many pages are needed, what layout will be used, and how will a user navigate around the site?
  2. Roughly what content and features will be on each page, and what themes, images and colours?
  3. What audience is your site trying to reach (should the site be designed for older or younger people, what will the text say, what features will you have, etc.)?
  4. What are the technical requirements (is it required to work equally well in different browsers, is it best viewed on a Macintosh or a PC, on large or small screens, via fast or slow connections, does it need plug-ins, etc.)?
Design issues

How the site looks (graphic design) and works (navigation and usability) are key to a successful project. This is a whole subject in itself and deserves extra research.

All major information and links should be visible from the homepage without scrolling. Always remember that a visitor could land on any of your pages without first going to the home page

The two best web design principles are Less Is More and KISS = Keep It Simple, Stupid (remember the google page! - the most expensive website or earth, moon and now mars).

Basic design issues include the requirements to:
  • Keep your design consistent in all site pages (same fonts, layout, colour, etc.). For example, you could use a theme to tie the site together visually.
  • Utilise any existing paper-based logos, fonts, colours, etc. However, you should take care as web-based publishing has very different requirements and limitations when compared to paper-based publishing. These include differences in how colours and text are rendered (displayed) on the screen, the screen dimensions and resolution, the time it takes to download an image in a webpage, etc.
  • Size and position the elements for impact, readability and clarity. Pay attention to text size.
  • Not use too many different fonts and colours (unless it's a site for kids!)
  • Use a simple navigation scheme that is consistent in all the website pages
  • Use a design that is efficient and can be downloaded quickly ("less is more")
  • Leave some "breathing" or blank space between elements to avoid overcrowding.
You could add "browser compatibility" to this list but most users have recent versions of software (browsers, etc). (Less than 3% of people use Macs and less than 3% use browsers earlier than 5.0 version.)

However, as some visitors may experience visual or movement difficulties, you may want to ensure your design is also "accessible" to these users. Accessibility is increased by using large, clear fonts, simple and larger size navigation, "Alt" text boxes for images, and so on.

Layout and Content

Good, useful content makes a successful website, but it's also the most difficult thing to create on the web.

You'll need to look at your web design and make a list of the content you will need. Production of new web content can be expensive and time consuming so ensure you have the budget to make it.

The graphic design of a webpage is separate to the web design (navigation and information architecture). Generally a web designer will hire the services of a graphic designer to work out layout, colours, fonts and images, and then the site will be built using that design.

Design templates are also built into Dreamweaver and other web publishing packages and many more are on the web, free of paid.

H1 and H2 header tags display in ugly large type, but now cascading style sheets have made things easier by enabling control of heading size.

Content design considerations

The web as a new medium
Visitors to your website experience the web medium differently to other media, with more intense short term focus and shorter attention spans. They're in a hurry so titles and the opening sentences of text are very important. They won't read long articles unless the material is very, very useful or interesting.

Documents to be read online must be concise and "punchy", with a background and text colour that is easy to read. Noone likes to read text spread across an entire page, so use tables etc. to make one or two columns of text. Webpages can be printed by visitors and this must sometimes be taken into account (or use a PDF). Left justify your copy! (it's easier to read).

Page elements
Each page should contain a clear HTML document title (between the <title> tags so that it appears in the top of the browser), AND a page title, and plenty (at least 200 words) of page text. Always have a name, "brand" and/or copyright notice at each page bottom in case the page is printed. Always have a link back to your home page.

Search Engines give higher priority to keywords in titles than in the body. Additionally, consider using meta name="keywords" and "description" in the <head> section of the document.

Maximise prime real estate
In paper-based land people tend to read ther top right of a page, and for a broadsheet newspaper, this meant "above the fold" or the first unfolded section. This space (re real estate) is used for important stories and expensive ads. On webpages above the fold is the first screen you see. Put your key content here.

Cross-platform issues and browser variations

Although IE is still nearly 70% (in 2006) of an average market in US and AU, Firefox is closing with over 15% and rising. Browsers interpret HTML and CSS tags diffrently and you shouls test your website thouroughly using different browsers, and/or on Macs on current operating systems using current software. You can check this using website logs or statistics.

So that your files (.htm etc) can be read by any computer ALWAYS use lower case file names WITHOUT spaces (use dashes or underscore instead, e.g. file-name.htm).

Structure and Navigation

Simple and logical structure and navigation is fundamental to every successful site. Build your page navigation hierarchy "out horizontally", no more than three levels "down". The three-click rule states that users will not stay onsite if it takes more than three clicks to access the information they need. Your website directory structure and filenames should reflect the logical structure of the site.

Always have a link (at page top left) back to home to help people navigate.

Contact Details

Your mail address and an e-mail address should be on all sites. Test your email works!
 

Using web images
Web images, like colour, play an important part in creating websites. The better images look, the better the site looks, so it's worth spending some time on them. Webpage images can be created either in a graphics program, or captured direct from a device such as a scanner or digital camera. You can also use premade library and clip art images.

Web images are usually compressed in some way to reduce their file size and download speed. This can also reduce the image resolution and quality so care must be taken.

To improve the look of a web image, a graphics program can be used to optimise the image for the web. For example, images can be “tweaked” and improved in Photoshop, then the “Save for Web” feature allows further tweaking of the settings.

To ensure a site looks good and pages download at a reasonable speed it’s important to balance:
  • The need for high-quality images with larger file sizes that download more slowly, and
  • The need to have relatively small image file sizes that will download quickly.
Bitmapped web images are the most common. They have two main file types: JPEGs (.jpg/.jpeg extension) or GIFs (.gif). Vector-based images such as Flash animations and a newer graphics format PNG (.png, pronounced "ping") are alternatives.

A “bit-mapped” image is made up of a set number of tiny dots or pixels mapped to the display screen. This means it can’t be scaled (resized) without degrading or distorting. Vector graphics, such as Flash animations, are scalable because they describe the image in (coloured) line and shape vectors, not dots, to minimise file size. Vector images can provide complex graphics that download more quickly. Vector image animations, even whole websites, can be created in Flash.

There are a few basic rules when using web images:
  • Use GIFs (8 bit) for images and graphics with large areas of plain colour (e.g. titles), and JPEGs (24 bit) for detailed images with gradations of colour, (e.g. photographs).
  • Make small screen size images wherever possible - use “thumbnails” (a very small image) to link to larger, alternative versions of an image
  • Use small file size images wherever possible. In your graphics editing package (e.g. Photoshop) Save GIFs with the minimum number of colours required, and save JPEGs at a quality setting that allows both fast download and reasonable image display
  • Ensure all HTML image sizes are set so the text downloads first, before the images.
  • Although you can resize and modify images in Dreamweaver using the "handles", this distorts the image and is to be avoided. Each image should instead be created at the appropriate size for the page in the capture device or graphics package.
  • For a "fast" site, avoid creating large single images - consider using a graphics editing program to “slice” images into sections, and then reassemble them in tables or layers. Dreamweaver also has basic inbuilt image edit tools.