Web Design Tips and Tricks

The Smaller the Better Avoiding Graphical Overload

The Smaller, the Better: Avoiding Graphical Overload.

When you're designing your website, it's easy to start loading it up with graphics, creating images that you think look good and piecing them together to make a design. While it's a tempting way to do things, you have to try to avoid it as much as possible – otherwise, you'll end up with graphical overload. Why is that a bad thing? Here's why.

It Takes Too Long to Download.

The first reason to cut down on graphics is that the more there are, and the larger they are, the longer it will take each of your pages to download. Now that many people have broadband connections, they're much more impatient than they used to be when it comes to waiting for pages to download: in most cases, you have around five seconds before your visitors start hitting the Back button.

What can you do about this, apart from using fewer pictures? Well, you can also make sure that you resize your images in a graphics editor so that their file sizes get smaller. If you just resize images by specifying a width and height in HTML or CSS, then they still take just as long to download as they would have, without the extra time serving any useful purpose.

Also, you might want to consider turning on compression in your image editor: JPEG files especially can often be compressed by 20-30% before there's any noticeable difference to the human eye. Try out different formats and compression levels to see what works.

It Gets Too Busy.

If you've ever tried to use a site that has more than three or four different images on the page at once, you'll know what I mean by that. Your eye is forced to dart all over the page, not sure where to focus: the page simply has too much going on at once. Instead of making your site busy by loading it up with graphics, you should try your best to keep it as simple as you can.

One thing I would suggest is that you take a look at the front pages of a few newspapers, and notice how they only ever lead on one picture. Putting two pictures on a front page is considered to be very bad: the reader doesn't know where to look. That goes double for websites, where the viewable area is much smaller than a newspaper page. Even if you have more than one thing to say, it's better to 'go large' with one picture and then explain the other things in text, next to it or below it.

It Distracts from the Content.

Don't forget that most of the people on your site are there to get information, not to look at your graphics. Too many graphics will distract visitors from your content, or, worse, even hide it from them, forcing them to look around before they find it. Any time your graphics get in the way of people using your site, you're suffering from graphical overload.

What's the solution to this one? You simply need to think about whether all those graphics are really needed – the chances are, they're not. Don't just add graphics because you think they look nice. Every graphic on your site should have a purpose.

An Exception: Photo Galleries.

If photography is the purpose of your site, then you obviously shouldn't be afraid to put a lot of graphics on one page. However, you really shouldn't just post large photographs one after the other. Instead, you need to provide thumbnails: smaller versions of each image, with the visitor being able to click on one to make it larger.

This lets you fit more pictures on each page, and avoids visitors having to spend their time and your bandwidth downloading files that they don't want to see. You can even add 'back' and 'next' navigation to each photo page, so the visitor doesn't have to go back to the thumbnails to see your next photo, if they want to see them all.

 

 Article index
 
5-Simple-Steps-to-Accepting-Payments
5-Steps-to-Understanding-HTML
10-Easy-Ways-to-Promote-Your-Website
5-Ways-to-Avoid-the-1998-Look
6-Reasons-Why-You-Need-a-Website
7-Ways-to-Make-Your-Web-Forms-Better
Ads-Under-the-Radar-Linking-to-Affiliates
AJAX-Should-You-Believe-the-Hype
All-About-Design-Principles-and-Elements
An-Introduction-to-Paint-Shop-Pro
An-Issue-of-Width-the-Resolution-Problem
A-Question-of-Scroll-Bars
Avoiding-the-Nuts-and-Bolts-Content-Management-Software
Beware-the-Stock-Photographer-Picking-Your-Pictures.
Building-a-Budget-Website
Building-Online-Communities
Clean-Page-Structure-Headings-and-Lists
ColdFusion-Quicker-Scripting-at-a-Price
Column-Designs-with-CSS
Content-is-King
CSS-and-the-End-of-Tables
Cut-to-the-Chase-How-to-Make-Your-Website-Load-Faster
Designing-for-Sales
Designing-for-Search-Engines
Dont-Be-Scared-Its-Only-Code-HTML-for-Beginners
Dreamweaver-The-Professional-Touch
Encryption-and-Security-with-SSL
Finding-a-Good-HTML-Editor
Focus-on-the-User-Task-Oriented-Websites
Fonts-are-More-Important-Than-You-Think
Free-Graphics-Alternatives
FrontPage-Easy-Pages
Hints-All-the-Way
Hiring-Professionals-5-Things-to-Look-For
How-Databases-Work
How-the-Web-Works
How-to-Get-Your-Website-Talked-About-on-Blogs
How-to-Install-and-Configure-a-Forum
How-to-Make-Visitors-Add-You-to-Their-Favorites
How-to-Run-Ads-Without-Driving-Visitors-Crazy
How-to-Set-Up-Your-Hosting-in-5-Minutes-Flat
IIS-and-ASP-Microsofts-Server
Image-Formats-GIF-JPEG-PNG-and-More
Its-a-World-Wide-Web-Going-International
JSP-Java-on-Your-Server
LAMP-The-Most-Popular-Server-System-Ever
Making-Friends-and-Influencing-People-the-Importance-of-Links
Making-Searches-Simple
Offering-Free-Downloads-on-Your-Website
Opening-a-Web-Shop-with-E-Commerce-Software
Perl-Cryptic-Power
Photoshop-a-Graphic-Designers-Dream
PHP-Easy-Dynamic-Websites
Picking-a-Colour-Scheme
Printing-and-Sending-the-Two-Things-Users-Want-to-Do
Putting-Multimedia-to-Good-Use
Python-and-Ruby-the-Newer-Alternatives
Registering-a-Domain-Name
Registering-Your-Users-by-Stealth
RSS-Really-Simple-Syndication
Setting-Up-a-Mailing-List
Setting-up-a-Test-Server-on-Your-Own-Computer
Some-Places-to-Go-For-More-Information
Taking-HTML-Further
Taking-HTML-Further-with-Javascript
Taking-Your-Website-Mobile
Text-Ads-Unobtrusive-Advertising
The-5-Principles-of-Effective-Navigation
The-Art-of-the-Logo
The-Basics-of-Web-Forms
The-Basics-of-Web-Servers
The-Case-Against-Flash
The-Confusing-World-of-Web-Hosting-Making-Your-Decision
The-Evils-of-PDFs
The-Importance-of-Validation
The-Many-Flavours-of-HTML
Theres-More-than-One-Web-Browser
The-Smaller-the-Better-Avoiding-Graphical-Overload
The-Top-10-Biggest-Web-Design-Mistakes
The-Web-Designers-Toolbox
The-Web-is-Not-Paper
Time-for-User-Testing
Titles-and-Headlines-Its-Not-a-Newspaper
Tracking-Your-Visitors
Understanding-Web-Jargon
Uploading-Your-Website-with-FTP
Using-Flash-Sensibly
Using-Quizzes-and-Games-to-Get-Traffic
VBScript-Javascript-Made-Easy
Websites-and-Weblogs-Whats-the-Difference
What-Do-You-Want-Your-Website-to-Do
What-You-See-Isnt-Always-What-You-Get
Which-Database-is-Right-for-You
Why-Doing-It-Yourself-is-Best
Why-Java-Will-Drive-Your-Visitors-Away
Why-Word-is-Bad-for-the-Web
Why-You-Should-Put-Your-Content-in-a-Weblog-Format
Why-You-Should-Stick-to-Design-Conventions
Working-With-Templates
Writing-for-the-Web
Site Map