After the planning and site design stages, the next step is to decide on a clear, consistent set of page layouts which guide the visitor through the content of the site. Appropriate graphics and added features should enhance the visitor experience by adding to the understanding of the content without delaying access to that content.Page Styles, Graphics and FormatsTo present information in a manner that is comprehensible, you need to use a variety of presentation techniques. A long scrolling page of text with no formatting at all is extremely hard—and boring—to read and understand. By building a visual hierarchy on the page, using text formatting, headings and graphics, you will help the reader assess and understand the importance of the different elements on the page.Effective page layout depends on differentiating the various elements on the page, which may include:• Page and section headings• Navigation links• Main content• Related content links (other articles, next page, etc.) • Advertising images or links• Subsidiary content (copyright, disclaimers, creation date, etc.).
Colour-blind people can only read your text if the colours have sufficient contrast. Convert the background hex codes into decimals and add up the red, green and blue components. Do the same for the text colour. The results must differ by at least 255. For example: bgcolor=#339900 >>> 51+153+0= 204; text=#0066cc>>>0+102+204=306; 306204=102 >>> not enough contrast. Beccy Manley KidStuff Number of monitor colours 65,000 (16 bit) (32 bit) 16 million (24 bit) 256 (8 bit) 16 (4 bit) Source: theCounter.com (
id: b96bc6a2534ca946c0d4b54fed7f0f38 - page: 7
Percentage of users 54 25 12 7 0.05 The suggested strategy is to ensure that all your navigation link images, saved as GIFs, are created using the safe colour palette, while photographic images in JPG format have a higher number of colours which will display perfectly in most monitors, but in those with lower colour settings will be dith-ered or reduced, perhaps limiting the quality of the image. The Visibone Color Laboratory ( provides a number of tools to help designers pick safe colours: the one illustrated below is a colour wheel. It allows you to select contrasting and complementary colours and see how they appear on other colours, to ensure that the text and links will be visible against the chosen colour background. Pixellation To avoid your GIF images looking pixellated (having jagged edges), keep the lines and edges horizontal, vertical or at 45-degree angles.
id: f05246900b204bb2d1412ce91a62bb92 - page: 7
Optimising Graphics PhotoShop 5.5 has a^save for Web option which simplifies the process of optimising graphics and results in very small files sizes. A 4-up view lets you choose the number of colours, type of palette (selective, adaptive, etc), dither, etc., and compare the results before saving. You can easily preview in different browsers and even choose^browser dither to simulate the appearance on a monitor with 256 colours. ImageReady and Fireworks have similar optimisation options. Elaine Robinson Freelance Web Designer
id: a11baf5b6a1a9e432c357a7ea7f97046 - page: 8
Animations As few animations really add much to the understanding of a page, it is best to avoid them where possible. They are usually larger files, and can be very distracting to the reader. If you are using an animation to demonstrate a process, or as a flow chart, then it may be more appropriate to place it in a separate page. If it is left within a content page set it to loop just once, or perhaps twice, rather than continuously. The idea, as always, is to enhance rather than to confuse or distract the user. Converting Graphics When scanning or saving graphic files, bear in mind that Mac monitors display only 72 dots per inch (dpi), whilst PC monitors show 96 dpi. Creating graphics at higher dpi settings is wasteful, as the monitor cannot display them at their full resolution and the file size will be much higher. One major exception would be if they are designed for printing, as 300 dpi would more closely match the printer output quality.
id: cb4908988d49f89e3f60ee0d3f635fab - page: 8