Road Map for the design of a web site
This section lists the key milestones in the development of a web site.
1. Identify your tasks and functionality
Make a complete list of what you want the site to achieve. See check list. This will affect the functionality you require. Some tasks can be implemented using simple browser code, HTML and JavaScript, which can readily be tested on a PC and uploaded to virtually any web space, subject to capacity. Other features such as passwords, data storage, notice boards, assembly of pages ‘on the fly’ require more advanced features, often known as server-side includes whose functionality may not be available on all servers, and may involve a charge by the service provider. ASP, PERL, CGI and PHP are examples. .
2. Identify your target customers
This follows. Your pitch will depend on the sort of customer you seek, and in turn this affects your design - simplicity, clarity and speed versus gizmos and excitement.
3. Start to pick your web service provider
Many service providers provide ‘free’ web space as part of their ‘pay as you go’ package of email, internet access and personal web space. Payment is usually only for the period when connected to the Internet for uploading. Some of these are only available to non-commercial sites and functionality may be basic, so check your anticipated functionality requirements are met and enough space is available for your needs.
From there upwards in price and functionality there is something to suit every need. When choosing a service provider, consider performance (on-line availability and speed of access tables are often published in magazines), collectable statistics (reports you can download that give details of your visitors and where they've visited in varying degrees of detail) technical support (is it free or on a premium number, and are they helpful) in addition to functionality.
Will they obtain for you and maintain a domain name? Can you upload from your computer using standard ftp software, and if getting your designer to upload, can this be done from his/her computer? NB, if you are getting your web designer to host your site, make sure you are able to keep an up-to-date copy yourself.
4. Pick a target browser level
In order to attract users, browser suppliers are always designing new functionality and bringing out new releases. The people you are attempting to reach will migrate to the later versions as they replace their computers or load in an upgrade but there will always be stragglers. There is a trade-off between using the most modern features and reaching those still on older browsers. While it is normal to use functionality that can be satisfactorily viewed on the browsers most of your intended customers are likely to use, it has to be accepted that display on earlier browsers will be limited, and there must be a cut-off point. MicroSoft Internet Explorer, Mozilla Firefox and Opera are three of the most commonly used browsers to be considered.
5. Consider themes versus custom design
Many web authoring programs provide ready-made designs for pages and navigation called themes or templates that can save a lot of time. However, your designs will not be unique (like M & S clothing - you are bound to see someone else with the same) you will get complex coding and, in my experience, automatically produced themes aren’t always perfectly implemented. Themes may also look outdated.
6. Pick your creation softwares (web page and image creation)
The leading WYSIWYG web authoring programs for the PC are Dreamweaver (Macromedia-Adobe) and Front Page (Microsoft) . There is also the themes-oriented Net Objects Fusion. Many of these include comprehensive test facilities, global search and replace and FTP uploading. It is strongly advised that you try before you buy.
Photo images can be prepared in most inexpensive photo editors. New logos and navigation buttons are best prepared in a draw program. Fireworks, Xara X, Illustrator and CorelDraw are the well known ones but there are less expensive ones downloadable from the Internet. Some of these programs have simple methods for creating bevels and drop shadows. Anti-aliasing is essential for a professional result. There are also inexpensive programs that provide only web themes such as Xara Webstyle.
Free early versions of many programs are often on magazine sleeves as an inducement to buy the latest. If you are prepared to put up with reduced functionality they may be acceptable for your needs.
7. Develop your site structure
You always start with a home page (index.htm) which links to additional pages. If you intend to have more than half a dozen pages, then you will need to group them thematically, in a logical fashion, thus creating levels, each of which has links to related pages (Level 2). This ‘Christmas Tree’ structure is important to get right at the start so that you and your visitors don’t get lost. Typically 2 levels, each page having up to 5 branches is reasonably manageable. Draw out a block diagram – it helps to detect weaknesses.
8. Formulate file-naming convention
For portable use on various servers, stick to simple lower-case letters and numbers only, and keep names relatively short. Eight characters followed by a three character extension is ideal but in any case avoid long strings. Make names meaningful and consistent to aid maintenance. This applies to pages and images used on the pages.
9. Develop your file structure
If you want, you can create sub-folders in which to group, say, images, or related pages. The home page must always be in the top (root) folder and all other files must be in this folder or a sub-folder of it. No sub folders are necessary, it is purely a matter of your convenience, but once decided should be adhered to. Keep a master copy of your pages in their folders on your PC (backed up). Upload to the web server from the master copy once tested.
10. Choose colours, logos and overall page design
First impressions count and choice of colours, styles and overall design contribute to this. Before starting detailed design it is best to get the corporate look sorted out - logo, navigation, text and background colours. Colour costs nothing, but images cost downtime. Animations can be an irritation. There’s no point in having a super design if it takes so long to download that the punters have already moved on. Always remember that pages which might be printed need to have dark text on a pale background and not vice-versa See the graphics sub section for more information on choosing colours.
11. Choose navigation philosophy
Most sites use some sort of buttons, logically grouped, or nav bars, to allow movement. They should be consistent between pages, usually located along the top or down the left hand side of the page. Always make sure visitors can tell exactly where they are on the site. (Sometimes called a crumb trail.) Depending on your target customer, consider whether to use rollovers (look good but increase the coding, hence complexity and download time) or pop-up menus (saves on space but increases the coding, hence complexity and download time and may not be visible on early browsers; review your target browser). Consider whether to keep your navigation buttons in a fixed frame so they remain on the page at all times, or whether you can afford to let them whiz out of site as the scroll bars are used. If not using frames, put duplicate links at the bottom of each page.
Whereas buttons used to created using bitmap images, there is a trend towards using CSS styled buttons. These are easier to maintain and download quicker but styles are simpler.
12. Choose target window size (640, 800,1024 etc) and fixed or flexible
Just as browsers are a moving target, so is the number of pixels on a PC screen. There are also PDA's and mobile phone displays to consider. In addition, within the range of pixels available any user can set his own window size and your pages need to cope with these conditions. Decide on your target (presently commonly 800 pixels, but there are still a significant number of 640 screens around to cater for.
Flexible designs allow the user to set the width of the pages. In an ideal world the text and images would all expand pro rata. Sadly text sizes and image sizes remain constant and the text re-wraps itself to fit the width of the browser. It should be possible for the user to reset the size of the base font (particularly necessary in the case of the partially sighted. It is my preferred philosophy to offer a flexible layout despite the difficulties posed on the design.
A flexible page width is better for printing and for accommodating users' needs.
Fixed page widths are easier to design as the number of lines of text remains constant and the text doesn’t get the chance to ‘ride up’ and expose images. But shouldn't you allow the end user to decide size? Whatever you decide, watch what happens to your pages as you vary the width of your browser. Check this every time you make a change.
Decide whether you want to offer users a choice of text sizes, as illustrated on this site.
13. Choose a page formatting arrangement: tables and frames vs. CSS
With a DTP program you can put text and objects wherever you like and they should stay there. Equally with a printed page you get an immediate overview of the whole page. With web pages that is not the case.
Frames,styles, and/or tables help control how objects and text are positioned on a page. Tables, or frames and tables, are still the most common. Tables are now frowned on because they do not meet the spirit of the code, involve extra code and create problems for blind "readers". Frames are out of fashion as they are considered confusing and not all browsers display them properly.
The preferred alternative is to provide minimal (semantic) html coding and to format the page using Cascading Style Sheets. As different browsers treat CSS differently this sets an extra challenge for the designer.
Whichever solution you adopt, remember to test in a range of browsers and use print preview to check that each page is printable without losing the right hand side. This occurs with fixed page widths, or restricted page widths, in excess of around 640 pixels.
14. Considering whether to use proprietary templates
Once set up, proprietary page templates make for easy maintenance, and allow those without knowledge of HTML code to make changes safely, by protecting parts of the page from being changed inadvertently. Good templates of this nature can take time to set up and involve extra coded instructions on the page, adding to code complexity and download time. Equally, templates can tie you to using one particular web authoring software that you must own. The choice is yours, as Graham would say.
15. Create a few alternative page mock-ups
Knowing what is feasible, create some alternative mock-ups for management to choose from so that you don’t waste too much time designing inappropriate pages. You can create these with a vector graphics program such as Fireworks, Xara X, CorelDraw or Illustrator to get the overall visual effect. Remember that designs won’t necessarily convert easily into a working page, so stress to management that it is only an approximation. A knowledge of the code and its limitations is extremely valuable in deciding your mock-ups.
16. Create initial style sheets and two working pages
With the mock-ups as reference, develop a complete set of style sheets from the beginning together with at least two typical pages. Some of the images will be taken from the mock-ups and the colours of text and background incorporated into the style sheets
17. Test in a range of browsers
If possible, get people in your organisation that have access to different browsers to test your pages Nd report back. Try moving the sides of the window around. Does it look right, is everything readable, logically laid out, appropriately coloured? If so remember there are certain features, such as download time, and links, that can only really be tested on the internet.
18. Preparing your text and images.
Much of your text may already be written and be in electronic format, which saves retyping. If you strip the text of extraneous style and other information by converting to a TXT file, you can then copy and paste it into your page and reformat it by setting the appropriate tags for each paragraph. The style sheets linked to the page are automatically available and text styles for standard tags will appear as if by magic. If you do not strip out the guff you may end up with a conflict and a much larger file size and more complex coding. If you have complex tables or text with accents you may need to adopt a different approach.
Prepare your photo images from the originals and resize each to the appropriate pixel size at which you want to display, bearing in mind the pixel width of your page. Put the image, as a jpg in the right folder before using it. Your buttons will be created in a vector program such as Fireworks or Xara X using a similar background colour to your page, and the originals should be saved in native format, in case of future changes, in addition to the GIFs created for the site. See graphics section for more details
19. Create the remaining pages via your own templates, test, upload and test again
Simply coded pages can easily be used as a temporary template simply by copying them, changing the page title and saving with a new name. Then add your new text and any associated photos, remembering to change any page-specific items.
20. Publicise your site
Hidden META tags with search words and description for use by search engines should be added to relevant pages. Also register with the top six search engines on a regular basis, add your web site to any literature displaying your contact details, add it to your email signature and get mutual links with relevant web sites.
21. Maintain your pages
Most web sites for organisations will consist of information gleaned from various documents created for other purposes, perhaps a newsletter, fact sheets, financial reports. Prepare a schedule of these sources against the web pages they effect. Whenever those documents are changed, the ensure that procedures are in place to ensure the pages are updated too.
Always make your changes to your master copy on the PC, test your pages off line and then upload and test again. If several people have the authority to upload pages from their own computers, check you have the most up to date copies by first downloading from the server and make sure no-one else is making changes to these pages simultaneously. Some web authoring programs have a check-in/check-out system to avoid such a possibility from happening.
Simple changes can be made by navigating your (up to date) master off-line web pages in the browser to the relevant page, then right-click>view source, search for the original wording in the code that appears, edit it and save. Refresh the browser and if OK upload and test on line. I create approximately 40% of my updates this way.
Other changes can be done in your web authoring program. Main thing is to do them!
