Movable Type, Wordpress allow a seamless website/blog look

Older blog software were limited in their function. Their primary purpose was to let you post your blog articles on regular intervals, have your readers comment on them and provide an easy way for them to find older posts (usually by date or by category).

Many individuals and companies have been adding blogs to their main websites for a while now. This gives their customers and readers a place to find a variety of updated, current information, and even interact with the website besides just sending emails.

What is happening now is the reverse. Many bloggers are finding that they want to add a website-like appearance to their blogs.

For example, they may wish to sell some products (often books or artwork), they may want to add an extensive "Abouts" page, or a section for scheduled events , and a special menu for their links (to other blogs and other sites), an articles section if they also write for other journals or online sites, and of course the requisite "Contacts" page.

The site then seamlessly functions both as a website, and as a regularly updated blog.

Popular blogging software such as Movable Type and Wordpress have come up with just this version of web+blog.

Here are some examples of websites and blogs that combined together to provide the functions of both.

* Serious Eats very successfully merges both the functions of a blog and that of a content-driven website.

Regular bloggers post daily on a number of topics, and readers can interact with comments, and even participate by asking questions and making entries in the "Talk" forum*.

Besides blog posts, there are also columns which provide article-style posting.

* The Torontoist website posts daily information about Toronto. It has categorized its topics in its menu on top of the page, as well as adding a more conventional website menu including "about", an interesting "schedules" menu to know when the various topics will be posted, and a "staff" link with emails and contacts also added.

The Torontoist is part of a large, urban-based network of websites/blogs also found in New York, Vancouver and London, England.

* Even big organizations and institutions are using the Movable Type and Wordpress web and blog combination to greater effect, allowing for regular updates of news and events, some with commenting possibilities, and others with blog-like features for sharing and emailing these posts.

Almost everyone is now used to some kind of interactivity on websites. They also expect regular updates on information on events, specials (sales, items), schedules and other news that regularly change.

I have written briefly about this in another post.

*A forum is an online place where members login to discuss issues of similar interest. There are thousands of forums out there from discussing the latest reality TV episodes to intricate mathematical questions. Many websites are now including forums as well as blogs.

Promoting Your Website

In my article, How to Make the Most of Your Website, I have a section called:

How serious are you about promoting your work?

Here is a list of my recommendations.

The most important being:

Use every setting possible to publicize your website.

* Post on online sites

Find other websites to link to yours (and link theirs to yours)
Post your website on blogs and online groups
Start your own blog, and link to other like-minded blogs
Leave messages with comments and your services (subtly) on online boards
Send out your website on E-news letters
Find commercial websites that can advertise your site (usually for a small fee)

* Sign off everything with your website

On your business card
On your brochures
On any article or piece of writing

* Tell people your website address

Try to make your website easy to remember. This could be through a short address, a meaningful address (i.e. it spells out your company name clearly) or other ways to make your contact remember your website.
Just saying your website address can trigger someone to look it up later

* Put your website in visible places

On t-shirts
On paintings or craft work
On cars
On carry-on bags
On other merchandise

* Make sure that search engines like google can easily find your website.

For more information on how to obtain the article: How to Make the Most of Your Website, please go to kidistdesigns.com, and follow the membership information.

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