Insert images

1. Use images that are meaningful

Images should be highly related to the content. Don’t insert images only to decorate your pages or fill empty space. Image and text should complement one another.

2. Be honest

Stock art images look nice, but they don’t show reality. Be honest with your customers and show them real life photos. Also, use colourful images instead of black-and-white images.

3. Add a caption

Add a caption near the image if its meaning is not instantly clear to everyone.

4. Make images accessible

Describe the content or functionality of images with the alternate text “alt=”. Thanks to this description in the alternate text people with visual impairment will be able to understand the meaning of your images.

5. Use images sparingly

Don’t overfill your website with images. A single meaningful image will create more impact than 10 useless images.

6. Offer a gallery or slideshow for more pictures

If you want to show a lot of pictures of a place or location create a photo gallery or a slideshow.

Gallery

Slideshow

7. Offer a zoom-in option for product details

If you want to show details of a product you should offer a zoom-in option:

  1. Put your high quality photos online, for example on www.flickr.com.
  2. Copy the URL of the image.
  3. Go to www.zoom.it, insert the URL and click on the “Create” button
  4. Copy the embed code from http://www.zoom.it.
  5. Go to Weebly.com, Wix.com or WordPress.com and insert a custom HTML element on the page you want to offer the image with zoom-in option.
  6. Insert the embed code in the custom HTML element and save the page.

8. Be original

If you want to play around with images and create something funny try the sites below. But don’t exaggerate. The images should still be meaningful and understandable.

Related links

Advertisements

When to use galleries and slideshows

If you want to show a lot of images of a place or location create a photo gallery or a slideshow.

Slideshows synchronize audio with still images. It’s like an animated photo story with some comments or music playing while the images are shown.

Do’s

  • Use large and high quality photos for slideshows.
  • Offer play control below or to the right of the slideshow (begin, pause, resume, replay).
  • Offer speed control.
  • Offer the possibility to skip the slide show.
  • Use a plain background.
  • Use a big type size and make sure text in the slideshow is legible.

Don’ts

  • Don’t automatically launch the slideshow.
  • Don’t animate text on a photo.

Related links

Black

Sophisticated and mysterious

Black is a powerful, mysterious and elegant colour. It goes well with almost any colour but it can have both positive and negative meanings.

Positive

  • Black makes us feel elegant, powerful, and sophisticated.
  • Black symbolises the night and the mystery of the outer space.
  • Black is the colour of the elite. It connotes success, wealth, and wisdom.
  • Black is formal, pure and constant.

Negative

  • In Western countries black is the colour of the funereal. It’s associated with grief.
  • Black can conjure up thoughts of rebellion, black mystery, satanic ritual, and the underworld.
  • Black can put us in a pessimistic mood. It denotes loss and discord.

Where to use

  • Black is the best colour for typography on the web.
  • Black can give your website a sense of being part of the elite.
  • Black can be used for photo galleries. It makes photographs look brighter against the background.
  • Black makes lighter colours such as yellow, red, blue and green stand out.

Related links

Define the features

1. Define the features your website should offer.

It’s important to do this step before you start creating the website. The tools I will show you in the next chapter offer a variety of features. Your feature list will help you find out which of these tools fit your needs.

 

2. Pull out the core features your site really needs

These should be 1 or 2 features, not more.

3. Prioritize the other features by focusing on users’ needs

Ask yourself: Is this really necessary, or just nice to have?
Avoid including features that are nice to have but irrelevant for your users.
Your site will appear confusing if you include too many features.

4. Put all other features on a “nice to have” list

Put this list into your “Idea Box” and forget it. I know it’s hard but you should not touch this list any more till your site has launched.

Related links

What are multimedia features?

Photo gallery

Show your photos arranged in a nice-looking grid format.
Example

Slideshows

Combine your pictures with music and animate them in a slideshow.
Example

This slideshow requires JavaScript.

Audio player

Add music, podcasts, or other audio files to your website.
Example: Pink Clouds Reprise Mix by Lasswell (4:23)

Video player

Upload videos and display them in a professional player or embed videos directly from video sharing websites such as http://www.youtube.com.
Example

Embedded documents

Embed already existing documents from script.com or other document sharing websites directly into your website for easy viewing.
Example: Invisible Alligators – Children’s book by Hayes Roberts

Related Links