Introductory Animations

Do introductory animations enhance your website?

Here are a few golden rules to follow.

- Make sure that the theme of your animation fits your website.

- The length of the animation is also important. Many animations give you the option to "skip intro." This is usually because the animations are so long that the website viewers may lose interest and leave the site before the animation is over.

- So, short, (5-10 seconds) animations will make everyone happy: the website has an interesting introduction, and it is not too long to lose readers.

- Make the website animation part of the logo and overall look of the website. That way, there is a continuity between the introductory page and the rest of the website.

- Add sound if it is necessary. Animations work well with or without sound.

- But, many readers may not want any sound, since they would have to adjust the volume of their speakers to hear your animation (or turn it down).

- There is nothing wrong with a little bit of creativity and motion. It is after all the bells and whistles that sometimes add the finishing touches. So work hard to produce a creative animation - put some work into it - rather than just doing one for the sake of it.

- Finally, such details in design - color, composition, layout, and also animations - are the extra elements that enhance your website to keep your visitors coming back.

Here are a couple of introduction animation samples that follow (most) of the rules outlined above:

- A rotating globe as an introduction to a website whose theme is "nation to nation"

- An animation of a book opening for a library website

The Advantages of Web Video

In my earlier blogs, I wrote about the useful additions of images. A picture is (sometimes) worth a thousand words. But of course, the picture has to be a good one.

The same with web video. Often, a a video can interest a reader to further investigate what else is available on the website.

Some helpful ways to use videos are:

• Videos to show short samples of the organizations activities.

This of often used to introduce the reader with the website writers and contributers. It also provides information on the main projects and involvements of the website's members. It is a video version of a photo gallery.

Often, movie trailers for film festivals and introduction to box office shows can be used in these introductions.

These videos tend to be short, usually 3o seconds-3 minutes long.

The Hot Docs film festival for documentary films has its trailers running as short as 30 seconds.

They have uploaded all their trailers on Youtube. You can also watch the trailers on their website with Flash Video.

• Videos presenting information and direction.

These videos tend to be medium length - usually 5-10 minutes long.

Martha Stewart's website has a whole link of videos where she demonstrates anything from flag folding to cooking chicken dishes.

This information tends to be complete, from beginning to end.

Martha's videos were done in Flash Video.

• Videos for complete speeches or interviews.

The CBC News Sunday often has full interviews posted on their website.

Here is an example of an interview on the 2008 Olympics athletes uniform. The interview is posted using Media Player.

These videos tend to be long, from 1/2 hour to one hour long.

Although the size of the video (1/2 an hour or 30 seconds) is no longer an issue in today's web technology, it is still always important to keep the size down to a bare minimum. The larger (the longer) the video, the more space you will need to store it. And why use up space unnecessarily.

So, like everything else about websites, editing is a very important step to keep your own website functioning well. The smaller the video size the better. Of course, that doesn't mean affecting the quality of your video. If a 1/2-hour is really necessary, then keep the video that long.

There are many ways to install video into your website; Real video, Media Player, Youtube and Flash Video are some of the options.

To decide on which one to use, it is best to discuss the options with your website designer.

Your Own Image Libarary

Many sites want to promote their images without necessarily selling anything. Usually, the reason for their site is to inform people about their collections. This type of website slightly differs from a site whose main function is to promote and eventually to attract a market.

Online libraries, or galleries have to carefully display their images, and provide pertinent information on their images.

Here are some ways to do this.

• Start with clear thumbnails, which can be clicked to view an enlarged version of the image

• When making thumbnails, make sure that the smaller images are clearly visible, so that they direct the viewer to the enlarged version.


• The thumbnails should really include the whole image, rather than a cropped section, to make it easier to identify what the image is.


• A long, scrollable thumbnails page is a good idea whenever possible, since viewers often don't want to click to the next page just to get another list of thumbnail images.


• A good number of thumbnails to have per page is between 20 and 40.


• The enlarged image of the thumbnail can open up in a new window or a new page. Either way, the viewer will have to click the new window closed, or link back to the original thumbnail page.


• If you're going to open a new window, make sure it is large enough to fit the image and the text, and your viewer doesn't have to scroll up or down to find all the information.
  


• I tend to prefer linking the larger image onto another page. That way, I can write as much as I want when describing the image.

Online galleries and image libraries are a good way to introduce your collection of images, whether for non-profit reasons, for a blog, or as a virtual gallery/library.

Here are some good examples which use online galleries using the list I've described above.

• Armenian miniature illustrated manuscripts: This site displaying 20 thumbnails per page, each one clearly visible. The large version opens into a new page.


• Virtual Museum of Canada featuring here A.J. Casson's work: Again with clearly identifiable thumbnails. The larger version opens into a new window. This window is a little cumbersome, since it is scrollable, and you have to adjust the size to see all the image.


• The Metropolitan Museum of Art with a page on Christian artworks in Ethiopia: Notice how the main page has extensive writing with cropped off thumbnails (not recommended.) But each thumbnail opens to another page of a larger version. You can even enlarge the image more by opening it in a new window. Text is a very important part of this web museum, which is why they've opted to have the image open primarily in a new page, rather than a new window.
  

Preview from article: Where Should You Put Menus? And Should You Have Sub-Menus?

Websites often have lots of menus to list. The standard About, Contact, Biography and Services are often not enough.

The dilemma is where to put all those menus and sub-menus.

Here are some options:

- List everything horizontally across the top

• Advantages: People can see every topic and item you wish to cover as soon as they enter your website


• Disadvantages: If you have a lot of content, your web page has to be pretty wide, usually extending from one side to the other. Otherwise, you would have to edit very carefully what makes up your menus.


• Example: Artdaily.org. Art daily has placed all of its menus (all 11 of them) across its website.
  

- List the important menus where they're most visible, and subsidiary ones like About, Contact, Privacy Statements etc... either at the very top or at the very bottom

• Advantages: Frees up more space horizontally


• Disadvantages: Could be difficult to find the subsidiary menus


• Example: Paypal has put it's most important menus to get you started (Home, Personal, Business, Products & Services) horizontally about 1/4 from the top. At the very top, and at the very bottom, it has a large list of subsidiary menus for more detailed and additional information.

For more information on the article, please register here, or purchase it at the store .

Good Architecture

Web design is sometimes called web architecture, equating websites as three-dimensional objects with different levels. The placement of these levels (web pages) and their navigation becomes similar to how one places rooms in a house, and goes through the house from one room to another. The other elements in those rooms - furniture, accessories, colors, etc. - also relate to how one arranges the rooms.

Christopher Alexander is an architect who has written an epic encyclopedic manual of how to design the optimal homes in his four volumes of The Nature of Order.

Here are the outlines of the Fifteen Fundamental Properties from Volume I of the Nature of Order. It is well worth to get the book and read the details, examples and photographs. I think they relate very well with web design.

1. Levels of scale: A balanced range of sizes is pleasing and beautiful

2. Strong centers: Good design offers areas of focus or weight

3. Boundaries: Outlines focus attention on the center

4. Alternating repetition: Repeating various elements creates a sense of order and harmony

5. Positive space: A background should reinforce rather than detract from the center

6. Good shape: Simple forms can create an intense, powerful center

7. Local symmetries: Organic small scale symmetry works better than precise overall symmetry

8. Deep interlock and ambiguity: Looping, connected elements promote unity and grace

9. Contrast: Unity is achieved with visible oppositions

10. Gradients: The proportional use of space and pattern creates harmony

11. Roughness: Texture and imperfection implies uniqueness and life

12. Echoes: Similarities should repeat throughout a design

13. The Void: Empty spaces offer calm and contrast

14. Simplicity and Inner Calm: Use only essentials; avoid extraneous elements

15. Not-separateness: Designs should be connected and complementary, not egocentric and isolated

Book Review: The Irresistible Offer

Mark Joyner has a series of books out with no nonsense strategies about how to sell you product.

The Irresistible Offer: How to Sell Your Product or Services in 3 Seconds or Less (TIO) of course starts with the premise that you have something to...offer. And not only that, that you have something to offer to some-one (some group) which is "thirsty" - his words - for your product or services.

In TIO, Joyner stresses the TOUCHSTONE, an integral part of your business idea which will give the irresistible offer to your clients.

The most interesting example he gives is the touchstone for Domino's Pizza: "Delivery in 30 minutes or money back" became a phenomenon. Whether people liked the pizza or not (although Joyner always stresses quality), people would order Domino's just to be guaranteed a hot pizza delivered in record time.

Joyner's next book, The Great Formula for Creating Maximum Profit with Minimal Effort takes off where TIO left, and this time his idea is how to continually sell the product once we have the TIO and the thristy crowd.

One ingenious idea, from some case studies he presented, is an e-book publisher who used a simple concept to get his clients continually interested: Volume I, Volume II, Volume III... You get the picture.

Both books are chock full of ideas. They are written in an easy, conversational way, and can enhance anyone's library.

Excerpts from article: "The Whys and Hows of Adding a Blog to Your Website"

Here is a section from my article "The Whys and Hows of Adding a Blog to Your Website."

To access the full article, please register - for free - in the Members Area.

The members section also features:

- Other articles
- Specials of the month
- Updates on new services and products

---

The Whys and Hows of Adding a Blog to Your Website.

A. WHY ARE BLOGS IMPORTANT?

1. Blogs personalize your website

There is the "About" section with the biography, and the "Gallery of Photos" section with photos to put a face to the website contributors, but there is no direct interaction with the reader with these one-off posts. A blog, with repeated entries, is about giving the point-of-view of the webmaster, allowing us to know him better than what his website says.

Example: The Times online has a blog section with several writers (including the featured web writers) who give their own perspectives and opinions on current news.

2. Blogs update visitors

A static website, with irregular updates (usually on services, which don't change that much) cannot give a well-rounded picture of the goals and plans of the website. A good blog will discuss new ideas before they are implemented, and explain current services to give its visitors the workings behind the idea.

Example: The Art Gallery of Ontario has a blog section which focuses on the renovation, comments on gallery projects, and other related topics. This kind of information would be hard to document on the regular website.

3. Blogs provide information

Much better than links, blogs can be a great resource for like-minded websites, projects, communities and individuals. A well-archived blog with easily classified topics can be a wealth of information

Example: bbrooks fine flowers has a blog to give seasonal and other information about flowers. The information doesn't necessarily have to be about the flowers in their store.

To continue reading, please join the Members Area.