Content and Images
Helpful tips for your content...
- Write content that is easy to scan.
Chances are that even you didn't read every word
on this page. Web users are impatient. People tend to
quickly scan over the content of a web site to decide if
they want to read the rest. To help them determine what's on
your page, use lots of headings, bulleted lists, and put
your most important points in your headings and first
sentences of paragraphs.
- Use images to help bring across your point.
Wise positioning of images can catch your user's
attention and cause them to scan the text around or near the
images.
- Keep things short.
People like looking at short, bulleted lists. Keep your
sentences short, and keep your paragraphs short. Stay away
from long blocks of text, unless it's some kind of technical
article that you know people will want to read.
- Remember your purpose and your audience.
Look back at your answers to the questions in the first
article about the purpose of your web site and your
audience. Don't overwhelm your audience with things they
don't need to know.
- Call for action!
What do you want your users to do? Buy something? Click
on something for more information? Be sure to put things
that you want your user to see and click on up front (not
hidden four pages down), and use action words in your text
and images so that your users know what to do.
Basics about web images...
There are two main file types for web images - .gif and .jpg.
Most photo editors will have an interface that allows you to
optimize for the web.
- Save an image as a .gif if it has few colors
(think a cartoon or a 'flat' logo) or if you want a part of
the image to be transparent. The more colors a picture has,
the larger file size it will be.
- Save an image as a .jpg if there are many color
gradients. There are different quality levels (compression
levels) that you can choose. Twiddle with the settings until
you find one that is a good compromise between file size and
quality.
Helpful tips for using images...
Images can help to bring visual interest to your site, even
if you don't have a need for diagrams or illustrations.
- Graphic headings or titles
Lots of sites use graphics with text for headings or
titles. While some web-purists will protest, this is
definitely one way to make your site look a little more
professional. Make sure that the font you use complements
your logo as well as the other text on your site. You can
make graphic headings in a photo editor and save as a .gif.
-
Use
color wisely.
For seamless integration, choose photographs that
compliment the color scheme or motif of your site. For
example, see how Microsoft matched the heading colors with
the photos on their Windows XP info page.
- "Clickable" areas
You can often use images as a "clickable" area - almost
like a button on the page. For example, look at our home
page. The "favorites" and "product support" illustrations
not only tell you what the section is about, but also allow
you to click into those pages.
- Make your point
Use photos to illustrate a point or send a message.
Integrate or place text on a photo with some kind of
tagline.
Stock image resources
If you don't have your own photos to use, there are lots of
places where you can find quality images online. Look for
royalty free* images - they are generally cheaper and
have a more flexible license. We've ordered these links in the
order that we look for graphics.
*Note: What's the difference between "rights-managed" and
"royalty-free" images?
Rights-managed photography is priced based on the buyer's
intended use, as well as factors like the size of the photo, how
long it will be used, and the distribution of the photo. The
people who sell rights-managed photography track the usage so
that they know how the photos are being used. Rights-managed
photography is generally more expensive.
Royalty-free photography is purchased once by the buyer and
can then be used multiple times, for multiple purposes.
Licensing agreements may vary, so you should read the agreement
carefully to see what you can or can't do with the image.
Next: Bells and Whistles |