Blogs contain entries or posts that can be anything from commentary of life events, videos and pictures to anything else that can be 'posted' online. Blog posts are in reverse-chronological order and allow readers to provide comments and sometime ratings. Sometimes a blog is the entire website, or a blog can be a subset of the entire site. Another critical element of a blog is comments. Readers expect to be able to leave comments about the posts and sometimes rate the content. Thus, the posts themselves and the way they are displayed on a site are important, as it is the main content portion of the site. Clever designs allow for the common elements around the posts to stay the same and consistent, while allowing posts to be updated (and aggregated) frequently.

Small business storefronts, or any site that sells a commodity, often has an area that allows you to search through its products and then purchase them through a "shopping cart". These storefronts then need a well designed area to be able to view products, get the specifications, and then add the products to a cart to checkout. It is a process that would be repeated often and used whenever a product is purchased.

Web design principles for blogs and storefronts

As with general web design there are some guidelines that can help you create effective, clean, and inspired blog and storefront designs. The web design basics should also be taken into account: proximity, alignment, repetition, and contrast—but also here are a few other pointers.

Keeping it simple

For blogs, there are more widgets and plugins you can add into your blog than you have space for—and more than is ever really needed. Be particular and choosy. Use only those that make sense for the type of reader you want to attract. Otherwise it becomes visual clutter. Choose sidebar features wisely and keep it to a bare minimum. Some basics are: a picture or more information about yourself, how to contact you (if you like), links to other similar blogs links to some of your past posts (favorites, archives, most mentioned), and links to any other websites you contribute to and/or own.

When designing storefronts or any websites where your end goal is to have someone purchase an item—don't distract a user from their main goal of purchasing an item. If you add in sidebars with too much distraction, you'll lose the ever-dwindling window of opportunity for a purchase. Keep the important items front and center: a shopping cart, account information, check out.

Identifiable

You have about a five second window to attract and keep a reader on your website. So, use those seconds wisely and give your viewers everything they need to know about you and your blog or store within that first five seconds.

How can you do this? Use your header wisely. A graphical title, tagline that is prominent and expressive can do it all, and quickly. This should be placed in the "header" location of your web design.

When blogging this is critical, since most blogs are text-based, most viewers won't take the time to read but a few sentences unless you entice them to stay on your site and read along for a while.

For any storefront, if you keep your company name, and a graphical representation of what they might find in your online store, then you too will encourage a casual browser to "click around" and see what else you have for them to browse. This also increases your chances at making a purchase.

Making your site navigationally easy

Everyone hates a website where they can't figure out "where to go next". So make your links and navigation very easy to find. Top or sidebar locations are the most obvious and natural locations for these, and probably the best locations for any of the key places you want any visitor to your site to see.

You can also incorporate other forms of navigation like breadcrumb trails, tree menus, and submenus. Breadcrumbs are visual navigational elements. They show the "trail" of where you are in the site, and how you arrived at your current location. Most often breadcrumb trails are near the top of the web page. An example of breadcrumb trails is seen in the following screenshot from the online Inkscape Manual http://tavmjong.free.fr/INKSCAPE/MANUAL/html/index.php:

An example of a tree menu is as follows:

Tree menus are a bit more complicated. They show the main level web pages and then, when clicked, expand to show the next "tier" of pages. Each level can continue to expand if needed.

As seen in the tree menu, main level pages can expand to submenus. This could also be done in a drop down in any horizontal-based navigation as well, like the example shown below:

No matter what navigational elements used, the key is to keep them simple and identifiable throughout your web page design and obvious that a user can use these links to get where they need to be on your website.

Feeds and social networking links

More and more people today are taking advantage of RSS feeds. What are RSS feeds? RSS (Really Simple Syndication) feeds are a way to continually broadcast (or publish) your blog entries. These feeds are in a standardized XML format and pull the metadata tags you assigned when publishing your blog post and display them in "readers" for others to automatically receive.

Feed readers allow subscribers (those who want to favor your site), to receive updates as soon as you post any new information, in this case, every time you would release a new blog post. When using an RSS reader, the user needs to enter you blog's feed URL to complete a subscription. Then, the RSS reader checks these subscribed feeds' URLs regularly for new updates and then alerts them when new podcasts are available.

So, how do you create an RSS feed for your blog?

• For a website with hosting where you have your blog as part of an entire site, you can create RSS feeds by using a simple RSS feed provider, such as FeedBurner (www.feedburner.com). These services are free, and once you provide a link to your blog, they do the rest automatically for you.
  You'll have to set up an account, and then make a note of the blog RSS feed URL (it typically ends in XML). Then on your website, you can offer a link to subscribe to your blog feed.
• When using a blogging service, there are usually ways to automatically set up RSS feeds to your blog entries. In fact, most blog software has two types of RSS feeds links built in. These can be found in the <head> element of the HTML. There are also many orange 'RSS' buttons that can be easily set up and used within the design itself. Explore your blogging service provider site and set up to determine how best to set up RSS feeds.

Either way you set up a feed, make sure you display the RSS feed link prominently. Put it in the sidebar, under each blog post, up near the titles. And give it a distinct link title like: Subscribe to my blog or RSS feed or something similar.

RSS feeds are most commonly used for blogs, but as a storefront or online merchandiser, you might set up you own blog announcement area where you would want to announce new products or features of your online store. This would be an easy way for your shoppers to stay tuned to your latest offerings.

An alternative to RSS feeds are Atom feeds. Atom stands for Atom Syndication Format which is an XML language used for web feeds. This differs from RSS feeds that focus on post updates; web feeds focus on allowing software programs to check for updates on an entire website. The site owner can use a content management system or other special software that publishes a feed of all the new content that then can be used by a feed reader, another program, or fed into other content management systems.

Making checkout easy

Design the checkout process of your online store to be as easy as entering brief information and clicking a few buttons. Ideally you need to have the shopping cart, checkout, continue shopping, and my account access available from any page within the site. Then, any potential purchase could also be made from any page on the site as well.

Work with the programmers of the shopping cart to create the most effi cient checkout process possible. Give them design options that can allow for the fewest number of screens, but that captures the critical information from the purchaser.

Summary

In this article we learnt about designing for blogs and online merchant stores. We walked through simple designs for each, defining common elements for each website type and even some sub-level pages to help keep the designs consistent.

In the next article, Creating Web templates in Inkscape, we will look at how to create templates so that you can create the design and each part of the web page faster.

Further resources on this subject:

• Logos in Inkscape [Article]
• Creating Web templates in Inkscape [Article]