Quick Tips: Colour combinations, Resizing images, Over-reliance on scripts

< Quick Tips: Start a series, Don't go plugin crazy, Invite guest posters : Quick Tips: Link to old posts, Follow-up posts, Setting up posts >

This week's tips focus on accessibility.  Many people view this as something that only affects disabled users, but I consider accessibility to be more than that.

Different people browse the Internet in many different ways, and accessibility is important so your site can be viewed by as many people as possible.

Colour combinations

When choosing which colours to use for your site, it's vital that you choose colours that complement each other.  Color Schemer is a good place to start.

Take extra care with the contrast between the text colour and the background colour.  A white background with black text may seem boring, but it's widely used because it's easy on the eyes.  Tinkering with colours just because you can does not mean your readers will find your content easy to read.

I've actually come across some sites that use black text on a black background.  Of course, they also use a background image that displays on top of the background, but it does look strange if you have a completely black page while you're waiting for a site to load.  I don't think you should rely on a background image to make the text readable - what if a reader has images turned off?  What if they're browsing the Internet with a mobile phone that either doesn't display images at all or can't handle the large background image you've used, but it still displays black text on a black background?

Furthermore, colour blind users will have severe difficulties reading your site if you use a red/green colour combination.

When designing a site, it's worth remembering that not everyone has exactly the same configuration as you.

Resizing images

Digital cameras are great.  Take your photos and transfer them to your computer without having to get them developed.  Pretty cool.

However, most cameras store very large images when they capture a photo.  This can be changed, but I'd actually suggest using a large photo size on the camera itself.  If you take an excellent photo at a small size, you won't be able to increase the size.  You can only decrease it.  So make the photos as big as you can when you're taking them.

It's a different story when you get to your computer, though.  Some of the photos I've taken are very wide, very tall, and have a very large file size.  You need to resize the image and save it under a different name so you don't overwrite the original.

Some sites will nicely resize images for you, but some won't, and that's where the problems occur.  I've seen so many images on the web that are ridiculously oversized.  It's painful to try and browse through someone's photo gallery when they're all such huge files.

A common misconception is that you can use HTML to resize an image.  Let's say you have an image that is 1500 pixels square and 2MB in file size.  Many people would upload this huge image to the web and try to resize it using the following code:

<img src="image.jpg" height="200" width="200" alt="description of image" />

Although this will display a 200x200 version of the image, your browser still has to load the original 2MB file.  Don't do this!  Resize it in a graphics package or upload it to a site that automatically resizes it for you.

Over-reliance on scripts

Some sites have all sorts of fancy things on their sites.  Some people think they look "cool".  But the more things you put on your site, the longer it takes to load.

A big mistake here is to forget that not all browsers support every possible thing you could add to your site.  Worse still, different browsers often handle things in different ways, especially with scripts - so what works for you in Internet Explorer might not work for me in Firefox.

The best advice I can give you is to ask who your site is for.  Is it for you or is it for other people?  Do you want people to come and read your site, post comments, and link to it?  If you do, reduce your clutter.  Seriously.  You don't need all those bits and pieces in your sidebar.  They just slow down the site and make it painful to use.


What do you think?

Comments

Name *
Email *
URL
* Required Fields. Email will not be shown.
Verification:	Type the message into the box below. The letters are case sensitive.
Help Enter your comment:
Rate this article: 5 4 3 2 1 No rating (5 = Highest, 1 = Lowest) Note: if you have already posted a rating on this page, a new vote will not be added.