Website design 108

Web page build considerations

Once the final look of your web design has been approved the build process can begin. There are a number of considerations to take into account during this stage which can be broadly broken down into five main areas. The first relates to speed and the different media types available. The second concerns dynamic database driven elements and security. The third relates to internet search engines. The fourth is accessibility and how 'seeable' your site is to the visitor and the fifth is site testing and error checking.

Speed is critical to a sites success.

If pages load slowly visitors will become frustrated and leave. There are two main graphic formats to choose from when converting images for the web - GIF (Graphics Interchange Format) and JPEG (Joint Photographic Experts Group). Each is best suited to a different style of imagery with GIF more suitable for computer generated work and JPEG for photographic. In general, computer generated work, such as buttons and banners consist of fewer colours than photos. A GIF image can have a maximum of 256 colours as oppose to a JPEG's 16.7 million but a GIF can still produce better results. This is generally dependant on the image content as illustrated below.

JPEG

GIF

A good quality image was obtained using JPEG compression resulting in a file size of 9.5 kilobytes. To produce the same file size as a GIF the number of colours was reduced to 8 resulting in noticeable picture degradation.

JPEG

GIF

In order to keep file sizes roughly the same, heavy compression was used when saving the JPEG resulting in blurred text and uneven colour.

Moving image options. It's possible to include movement on web pages using animated GIF's, Dynamic HTML (DHTML), the ShockWave Flash (SWF) format or even video. As with compression options each method has advantages and disadvantages.

Animated GIF's are widely viewable (i.e. can be seen in most internet browsers) but file sizes can quickly become too large for practical use. Most banners are produced using GIF animations and they are usually the best option for animating raster (pixel based) graphics. Programmes such as Macromedia Fireworks and Adobe ImageReady (bundled with Photoshop) offer comprehensive tools for producing and optimising animated GIF's. It's possible for people to view web pages without images so always offer text alternatives where images are used for areas such as navigation.

DHTML can be economical with file sizes but is a comparatively restrictive format with limited animation capabilities. DHTML is an extension of the original HTML programming language that offers greater interaction and layout capabilities. Animation is made easy using programmes such as Macromedia Dreamweaver which offers a timeline feature and other pre-defined functions. DHTML text animation should be generally avoided. Wobbling lines of text, blinking words or text that 'types on' can serve little or no purpose other than to distract and annoy the visitor.

Flash is a widely accepted medium for web animation with compact file sizes and extensive capabilities. It's viewable by the majority of internet users and is increasingly supported by alternative authoring tools such as Adobe LiveMotion and Swish for 2D work with plug-ins available for Discreet Studio Max and Newtek Lightwave by Electric Rain for 3D work. A word of caution; some organisations prevent employees from viewing Flash files in an attempt to save on bandwidth costs. For this, and other reasons, it's a good idea to avoid using Flash for critical areas of your site (such as navigation) without providing an alternative.

Video is a different option to those listed above and as the name suggests should rarely be used for animated elements on a page but for the 'broadcast' of complete programmes. If video does need to be included, ensure it is properly compressed using the most appropriate format, either Microsoft Windows Media (wmv), Apple QuickTime (mov) or Real (rm). The depth of this subject is outside the scope of this document (for the time being).

Beware the use of splash pages. Splash pages gained in popularity some time ago and serve as an animated introduction to a website. More often than not these are produced in Flash and force the viewer to sit through the presentation before allowing access to the site itself. The use of Splash pages has depreciated in recent times as they are generally considered gratuitous and obstructive. If you must use a splash page be certain to include a 'skip introduction' link to allow immediate access to site content.

Keep in mind that animation detracts the eye. The likelihood is that the most important element on your page is the copy and moving or flashing items can irritate the viewer and make a page far less easy to read.

Lastly, always be aware of file sizes when including images and animation on a web page. Remember that if a site appears to be slow and unresponsive visitors will leave.

Tip 6: Design for speed and avoid over use of animation.

Next: Dynamic data and website security

Mighty Media are a full service multimedia company and have employed an in-house team of website designers since 1997. Our practical, marketing oriented approach to website design has resulted in numerous site launches that succeed in driving qualified, targetted leads to our client's businesses.

Mighty Media is regarded as one of the premier Buckinghamshire website design agencies with a track record in corporate communications that forms the underlying foundation of their work.

Established for over 25 years, Mighty Media began making TV commercials and later diversified into the corporate video production sector working with household names such as Procter & Gamble, Mars, Nationwide Building Society and other familiar names. With a strong background in internal and external communications Mighty Media progressed into new media production. Mighty Media now specialise in CD-Rom design and production, e-learning solutions, intranet design, extranet design, video production and website design.

Based in Bourne End on the border of Buckinghamshire and Berkshire Mighty Media now provide website design and online marketing services to businesses from all over the UK.

• Amersham, Ascott, Ashendon and Aylesbury
• Beaconsfield, Bellingdon, Bourne End, Buckingham and Burnham
• Chalfont, Chesham, Chorleywood, Cliveden, Cookham and Cores End
• Denham and Desborough
• Flackwell Heath and Furlong
• Gerrards Cross
• Hambleden, Hazlemere and High Wycombe
• Iver
• Lane End
• Marlow and Milton Keynes
• Primrose Hill and Princes Risborough
• Slough, Stoke Mandeville, Stoke Poges and Stokenchurch
• Taplow
• Wooburn and Wycombe

• Bedfordshire, Berkshire and Buckinghamshire
• Cambridgeshire, Cheshire, Cornwall and Cumberland
• Derbyshire, Devon, Dorset and Durham
• Essex
• Gloucestershire
• Hampshire, Herefordshire, Hertfordshire and Huntingdonshire
• Kent
• Lancashire, Leicestershire and Lincolnshire
• Middlesex
• Norfolk, Northamptonshire, Northumberland and Nottinghamshire
• Oxfordshire
• Rutland
• Shropshire, Somerset, Staffordshire, Suffolk, Surrey and Sussex
• Warwickshire, Westmorland, Wiltshire and Worcestershire
• Yorkshire