Adding pictures and other graphics can lift your pages, add colour and life as well as make them easier to read. They can give novices to building webpages a real headache, though. Here is a simple guide.

The very first step to adding pictures is to make them the correct size for the space on your webpage. This means don’t just click on the picture in your html editor and push it to the right size because doing that doesn’t reduce the file size. If you do that and have a jpg that is 2mb, for example, even though the picture looks smaller, the file size will still be 2mb.

Use a picture editor to reduce the size of the picture which will reduce the file size too. The free Google graphics management program Picasa has a really easy way of reducing the size of pictures and other graphics. Large files take a long time to download when a page opens and people won’t usually hang around and wait for it to happen so it’s really important.

If you want text to flow alongside the picture, this is the code to align right for example:

<img src=”../graphics/blackpool_tower.jpg” width=”250″ height=”314″ alt=”Blackpool Tower and beach, Blackpool, Lancashire” hspace=”10″ vspace=”10″ align=”right”>.

I’ll unpack this tag:

img src=”../graphics/blackpool_tower.jpg” – this says where the picture can be found on the server, it’s in a folder called graphics and the name of the picture file is blackpool_tower.jpg.

width=”250″ height=”314″ – this shows the size and, most important, the picture has been changed to this size before uploading on to the server. While on the subject of picture file sizes, you usually don’t need more than 72 resolution for pictures online and this helps to keep the file size down.

alt=”Blackpool Tower and beach, Blackpool, Lancashire” – this is what people will read if they browse with graphics turned off so they don’t see the picture. They will know what the picture showed. It is also a useful way getting more keywords on to your pages naturally for search engines.

hspace=”10″ vspace=”10″ – this put a 10 pixel space horizontally (hspace) and vertically (vspace) around the picture so text doesn’t go right up to the edge.

align=”right” – unsurprisingly this aligns the picture right. You can have align=”left” instead, if that suits your page better. When you do either of these, the text will display alongside the picture.

Don’t forget that even if you are using an html editor, you can always change the code yourself. For example, you could copy and paste the tag above and substitute your own folder and picture file name. You could change the hspace and vspace to another number and align left. You would, of course, change the alt to your own picture title.

Trying this kind of thing in your code will help you understand more about using html and what happens when you make changes. Even making mistakes can be helpful as long as you eventually understand what the mistake was and what effect it had.

Whether your website is for your business, to give information on a subject you love or just because you want your own website, it is very disappointing if it doesn’t get an audience so it’s worth taking the trouble to get presentation and content right.

Pictures
Many beginners don’t understand the difference between the size pictures appear on a webpage and their file size. Always remember that a digital picture is computer file, usually a .jpg so, to reduce the picture, you must reduce the file size. To do this, you need to use a graphics editor, Google Picasa is a good free option.

The reason that this is important is because a big jpg file will take a long time to load on a webpage and most people will not wait. They will become impatient and click away on to another site that loads quickly.

Similarly, if you put too many pictures on a webpage, it will take too long to load. How many is too many? It depends on the file sizes of your pictures. If you feel a need to use several pictures, you could convert them to thumbnails with a larger picture opening in a separate window when somebody clicks on one of them.

Text
Most people find it more of a strain to read text on a computer monitor than on paper. This is something that anybody who writes webpages must consider. Visitors might not read a long essay, even on the most fascinating of topic, simply because it’s not a good way to present information online. If your topic demands this kind of format, consider giving a ‘print’ option so that visitors can print off the article without all the surrounding ads and banners if you have them. There are also ways of breaking up text to make it easier to read on a screen.

• Use short paragraphs
• Use sub titles where possible so people can find particular information quickly.
• Use bullet points

Don’t make pages too long, people don’t like scrolling down too far unless the page is particularly fascinating. Split a very long page into two or even three pages but make sure you split on natural breaks.

Spot the Spelling Mistake!

Spelling and Grammar
How many times have you looked at a website and seen spelling and grammar mistakes? My guess would be that you have seen this many times.

If you want your site to be taken seriously, you must check for errors. When people see mistakes like these, it can raise doubts in their minds about just how much faith they can put in any information on the site.

Almost everybody has Word, Word Perfect or similar programs with spelling and grammar checkers. Just paste your text in one of these, if you have written it elsewhere, and run it through the checker.

Layout and Design
The way you layout and design your webpage can have an impact on whether visitors read the information on it and whether they go on to other pages on the site.

• People are accustomed to finding menus in the top left of a page or along the top. Don’t decide to be innovative and put it in the bottom right corner of your page or other unlikely position because many people will never notice it and certainly won’t look for it there.
• Don’t put links to other pages on your site in a way that makes them hard to find. For example, nobody is going to spend time hovering their mouse over words or images that might possibly contain a link. Make links obvious.
• If you have a three column layout like this page, don’t write a very short article and then put so many ads in the side columns that they go way below the centre column content. Trust me, nobody will scroll down to look at ads. It looks ugly and amateurish. It shows that you haven’t considered how people use the web.

Flash, Fireworks and Other Technical Effects
Personally, my heart sinks when I’m looking for information and visit a website with a Flash opening page. It’s even worse when I don’t have the option of bypassing it. Then, when I find that the whole site is done in Flash or uses other technical effects to present information leaving me to watch what appears to be little more than a slide show, I quickly decide I’ll find the information elsewhere.

If you must use technical effects, make sure they are appropriate to the presentation of your subject matter and that people can opt out of them and see the plain vanilla version. Not everybody is on a fast, broadband connection or using a fast computer with plenty of memory. If your site causes their computers to freeze, I promise, they will never come back to your website nor recommend it.

The Final Check
When you build your webpages, as you load each one on to your site, check them online. Read the text looking for mistakes. If you aren’t good at spotting them, get somebody else to check too.

Ask yourself if the page looks as good online as it did on your computer. If the answer is no, then fix it. Your webpages could be online for years so it’s worth taking the time to get them right.

Check all your links. Personally, I never type in a link, I always copy and paste but, even so, I always check them by clicking on them. Links that don’t work are annoying for visitors and give a bad impression.