Medlicott Design

Web Design Tips

Graphics

When it comes to design tips for using graphics, photos and images on your website, it is easier to start with things you should try to avoid.

First off don’t use large graphic files that take forever to load. I think that large photo files are probably the fastest way to lose your website visitor. You know that baby photo that gets emailed from a relative and takes all day to download? Cute baby, but I could have seen that with a smaller image in half the time. Well that’s what the visitors to your website are like. If they want to see the large image create a thumbnail photo for your web page and let the visitor choose whether or not they want to see the large version. Don’t force it on them!

Don’t full the page up with pictures “just because you can”. Meaningless photos and pointless graphics are also a waste of good real estate. Lots of people create lovely images for paragraph and other headings. Why? Search engines can’t read them; they slow page download time (it may not be much, but all the extra bits add up), and take up development time.

You have heard me mention thumbnail images. They are small photos of a larger image, which usually when clicked allows the web surfer to see a large version. Don’t make the mistake of making the thumbnail almost as big as the full size image it directs you to. Thumbnail sizes have a happy medium. They need to be big enough for the average visitor to be able to see, and then choose to enlarge. Not too small that you must enlarge every picture to see the details, nor too big that there is no point having a larger version. Sometimes this is a better option. No enlarged version.

A really good habit, which many people forget, is to add an alt tag as soon as you insert a photo. In the modern era, one must always remember to cater for people from all walks of life with their disabilities and impairments, as well as to the surfer who has his graphics turned off. Graphics with no alt tags make boring looking pages no matter what type of browser is being used. When the page has missing alt tags you know its plain, but just as bad (if not worse) are missing graphics, especially missing graphics with no alt labels. While IE allows the pop up message describing the photo on mouse over, Mozilla and Opera browsers load the alt tags to view before the photo is loaded. Get into the habit of adding the alt tag, and it certainly won’t do your SEO any harm either.

My other peeve, related to large images, are those pages where a photo loads quite fast, but doesn’t fit the width of the screen. I detest sideways scrolling. Try and design your pages to fit many resolutions, but definitely keep your images within the 800x600 size to begin. Vertical scrolling is more acceptable (scroll mice generally prefer up/down) to most users, but think about whether your picture needs to be that big.

When we begin to make our first websites, animations seem like a really cool thing as we find all the different scripts that allow scrolling marquees, blinking animations, blinking text, animations that never stop, and many other gimmicks. Would you trust a website like that if you were shopping online. There are usually enough adverts, banners, pop ups, etc coming at you without adding all your own animations.

Clean is good! However, all the above recommendations are my opinion only, so if you like animated gifs and more then don’t let me put you off. However, don’t expect me to stay long either!