Web Design Tips & Principles (Part 4)

File Size & Page Loading Times

Overall page file size can be reduced by effective use of Cascading Style Sheets (CSS), as this means that definitions are stored in one place rather on each page. Centralising the style of your site in one CSS file will also help with administration and updates.

Page loading time, on an average connection, should always be less than a second or two. Any page that takes longer than five seconds to load faces the risk of somebody leaving - before it's finished loading. If you do have very large pages, ensure they're optimised to load 'top-down' - so that the initial browser view is filled straight away, while the deeper content farther down the page is still loading.

Use progressive JPEG's for large pictures - so they load in stages, becoming increasingly clearer and sharper. Also consider using 'thumbnails' for large pictures; that way, people can see a small lower resolution version - before they click on it for the high-resolution version.

Generally, large images have no place in good web design, and most can be avoided by breaking them up and using a combination of text and graphics. Keep an eye on your PDF file sizes too: If they get too large, they will take a long time to download.

Graphically-intensive and slow-loading sites remain one of the chief reasons why people hit the 'back' button on their browser.

Images

When creating graphic images that incorporate text, only use 'anti-aliasing' with larger font sizes. Small anti-aliased text can be very unreadable, and anything less than 12 point is unwise. Generally, text looks better stored in a .gif file format, as it uses lossless compression and yields sharper results.

If you're using background images behind text or the main body of your website, then bear in mind how it affects the readability of the text over it. Background images should be low-contrast and have similar colours. If you're 'tiling' a graphic, then you should be sure it's seamless, and the opposite edges tie together - so it doesn't look like a patchwork quilt.

Also, remember that image content cannot be indexed by the search engines. Without good text content, there is nothing to search for in the search engines. The 'Google Search' view of your website is a pretty flat one; if you view your web page in a pure text mode, that's pretty much what Google sees and indexes in their database

Website Templates

You should download and use web templates regularly: You can learn an awful lot from existing designs and seeing how they've achieved their results. Join a good template club or service so you have access to hundreds or thousands of different designs.

Templates are also a very streamlined and efficient way of getting sites 'up' quickly, as you can start from a base design that is already 50-80% there and then modify it to your specification. You don't have to make many changes to a template before it looks completely different.

Often, you will find a template that has the basic layout that you want to create, and a good navigation structure and design. The main graphical theme may not meet your requirements, but this is easy to change with CSS. Having the basic code-blocks in place means you primarily need to work on the CSS, which is enormously time-saving, and can often mean you can charge a lower price on a job.

Continued...