Tuesday, January 22, 2008

Best Practices in Web Design

Good web design is something that can be achieved relatively easily by sticking to a small set of guiding principles and avoiding some very common mistakes.

Truly excellent web design skills are born out of years of experience, dedication and plenty of hard-learned mistakes. Fortunately, being truly excellent at web design is not a pre-requisite for building a fantastic website and the lessons learned from those mistakes can be passed on without the hardship.

1. Keep Everything Obvious - Don't Make Me Think

The book entitled Don't Make Me Think!: A Common Sense Approach to Web Usability by Steve Krug is one of the best selling books on the subject of web design and usability. Personally, I think thinking is a good thing but at the same time I don't want to be struggling to figure out how to submit a web form!

Visitors to a website expect certain conventions, breaking these is a great way of losing visitors. People expect to find the navigation at the top of a page or on the left hand side. Logos are mostly found on the top left. Much research has been conducted into how people view and use web pages. The good news is that you do not to know all of this; instead look at how larger companies such as eBay, Amazon, Google, Microsoft structure their pages and the language they use, then emulate them.

2. Limit Colors

A website using too many colors at a time can be overwhelming to many users and can make a website look cheap and tacky. Any users with color blindness or contrast perception difficulties may even be unable to use the site.

Limiting a palette to 2 or 3 colors will nearly always lead to a slicker looking design and has the added bonus of simplifying your design choices, reducing design time.

Software like Color Wheel Pro can greatly simplify the creation of a pallet by showing which colors sit well together. If you really do not have the eye for design then software like this provides the perfect way of escaping monotone or badly combined color schemes.

If your site uses blue and yellow together or red and green then it may present problems to anyone suffering with color blindness. Vischeck.com provides free software that can simulate different types of color blindness.

3. Be Careful With Fonts

The set of fonts available to all visitors of a website is relatively limited. Add to that the possibility of a user having a visual impairment then the options become even smaller. It is advisable to stick to fonts such as Arial, Verdana, Courier, Times, Geneva and Georgia. They may not be very interesting but your content should be more interesting than your font and if it can't be read, what is the point of having a site?

Black text on a white background is far easier for the majority of people to read than white text on a black background. If you have large amounts of text then a white or pale background is far more user friendly. Always ensure that there is a good contrast between any text and its background. Blue text on a blue background is okay as long as the difference in shade is significant.

Verdana is often cited as being the easiest to read on the screen. Trebuchet, Georgia is probably the best option for a serif font.

4. Plan for Change

If you fix the height of your page to 600 pixels will you still be able to add additional menu items without completely redesigning your page?

The ability to add or remove content from a website is fundamental to the ongoing success of it. Having to rewrite the entire web page or website each time you want to make a small change is sure fire way to kill your interest in your own site and will negatively impact your overall design and usability.

Getting a good idea of how your website is likely to grow will clarify how best to structure your layout. For example, a horizontal navigation is often more restrictive than a side navigation unless you use drop down menus; if your navigation is likely to grow and you hate drop down menus then your design choice has been 99% made for you!

Understanding how to use Cascading Style Sheets (CSS), avoiding unconventional layouts and complicated backgrounds will all help enormously.

5. Be Consistent

Again, don't make your visitors think! About how to use your site at least. If your navigation is at the top on your homepage, it should be at the top on all other pages too. If your links are coloured red ensure the the same convention is used on all sections.

By using CSS correctly you can make most of this happen automatically leaving you free to concentrate on the content.

6. Keep it Relevant

A picture is better than a thousand words but if the picture you took on holiday is not relevant to your Used Car Sales website then you should really replace it with something which reflects the content or mood of the page; a photo of a car perhaps!

If you can take something off of your web page without it adversely affecting the message, appearance or legality of your website you should do it without hesitation.

Avoid the need to add images, Flash animations or adverts just because you have space. This wastes bandwidth and obscures the intentions of your website. If you absolutely must fill the space, then exercise your imagination to find something as relevant as possible.
Keeping your content focused will ultimately help your search-engine rankings.

7. Become a CSS Expert

Cascading Style Sheets should be any web designer's best friend. CSS makes it is possible to separate the appearance and layout of your page from the content. This has huge benefits when it comes to updating and maintaining your site, making your site accessible and making your site easy for search engines to read.

CSS at a first glance is very straightforward but is definitely worth investing in one or more books. Two great books are: CSS the Missing Manual by David McFarland and Bulletproof Web Design by Dan Cederholm.

8. Avoid Complexity

Using standard layouts for your web page will save you development time and make your site easier to use. Pushing the boundaries nearly always leads to quirky behaviour, cross-browser problems, confused site visitors and maintenance headaches. Unless you really do like a challenge then avoid complexity wherever possible.

Many standard layouts are freely available online with much of the boring, repetitive work already done for you.

The principles above all border on common sense and are well known to most people, yet so many sites continue to deviate away from them and suffer as a consequence. Following these principles will help you keep away from trouble, although it still doesn't guarantee it!

Web Marketing Tips

Your web site marketing strategy is the essential factor that determines the success or failure of a business web site. This is true whether your web site is an extension of an offline business, or you run an completely online business. Web site marketing is unlike any marketing you may have done using other media.

However, marketing your web site on the internet shares many common core marketing foundations that underlie your marketing efforts regardless of the media you use. I am a strong believer that for a small business, all marketing should be based on the old direct marketing mantra of attention, interest, desire, and action. In this article I am going to discuss those aspects in terms of how they are crucial in marketing your web site on the internet.
Regardless of the media you choose, nothing will ever happen if you don't attract the attention of prospective buyers. This is one of the very basic tenets of successful marketing. On the internet, this concept is evaluated by the traffic that you receive on your web site. But there are a lot of factors that affect how much traffic you get, and only part of it is the actual content of your web site. There are two ways you can get attention in any media: you can earn it or you can buy it.

All the major search engines (Google, MSN, Yahoo, etc.) show up two different types of results when a customer uses them.

The most relevant results based on the search algorithms used by the engine are called 'free' or 'organic' since they are the natural result of running a search.

The second type of result are actually paid advertisements, and they can be very difficult to distinguish from the results that are actually relevant to you query.

It is important to keep in mind that no matter how good the engine, the results are still hit or miss. It is a computer program sorting web pages based on mathematical formulae, not live people helping you select the best results, so as a person hoping to be indexed, you must be willing to put the time and effort into checking how you rank on the major engines and tuning your word choice to optimize that. If you can't make it onto the first (or second at the very least) page of results, your traffic will drop dramatically! Most people don't bother to wade through the hits on the pages after that. Even second-page ranking will hurt your ability to attract new users.

One of the most effective ways to increase internet traffic is buying some form of advertising. One of the most pervasive forms is banner advertising. Originally, these were very popular forms of advertising, but as they became more prevalent, their effectiveness waned. They can still be effective as long as you have a clear marketing strategy and are able to track your advertising statistics.

Text advertisements are probably the most common form of internet advertising today. Google has paved the way, and if done correctly, your internet traffic can multiply quickly by using Google ads. MSN and Yahoo also offer text advertisements on their sites. One downside to text advertising is that the cost can add up fairly quickly, depending on how many hits you receive for your ad. Each time a searcher clicks on your text ad, the provider charges you a set amount. Another way to increase traffic to your site is to buy traffic from someone who has an e-mail contact list or has a lot of traffic on their site already.

Any approach to publicizing your website or portal must begin with the aim of grabbing attention of the web surfers and internet addicts. To grab attention, you must deliver your message to surfers on websites they frequently visit. You can publicize your website by doing the hard work yourself or by availing expert help, or a mix of both.

Doing it yourself means you will have to commit your time, energy and money. It might sound daunting but ultimately proves to be cheaper as well. Availing expert help can get your results without eating your time. To set the cash registers ringing, it is suggested that you develop your own mix of both ways suited to your own needs and resources.

About the Author: You can get more information about Business Marketing at http://www.bizrave.com/. Eric Menzies writes about Search Engine Marketing Firms and other topics.

Monday, January 21, 2008

Understanding Modal window

In user interface design, a modal window (often called modal dialog because the window is almost always used to display a dialog box) is a child window which requires the user to interact with it before they can return to operating the parent application. Modal windows are commonly used in GUI systems to command user awareness and to display emergency states.

Creating a popup window is reasonably easy if you just want another browser window of a specified size and you don't care if your visitors swap back and forward between the various browser windows. Where it becomes difficult (if not impossible) is where you want the new window to stay in front of the original window and not allow your visitor to interact with the original window until the new window has closed. We call a window that insists on retaining the focus like this a modal window.

Usage
  • Drawing attention to vital pieces of information. This use has been criticised as ineffective.
  • blocking the application flow until information required to continue is entered. collecting application configuration options in a centralized dialog.
  • Warning that the effects of the current action are not reversible. This is a frequent interaction pattern for modal dialogs, but it is also criticised by usability experts as being ineffective for its intended use (protection against errors in destructive actions) and for which better alternatives exist.

Modal Window Apllication Tools

ThickBox

Webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.

TinyBox

TinyBox is an easy to use lightweight JavaScript library for creating modal windows/dialogs in an elegant manner, without using traditional pop-up windows. It can be used to overlay content on the current page (i.e. you can load a page and display it in a box above the current one).

Control.Modal

Control.Modal creates modal windows and lightboxes from any links/anchors elements on your pages. Since it attaches these behaviors to HTML that already has semantic meaning, it will degrade gracefully for browsers that do not support JavaScript, and is search engine friendly. It attaches in one line of code for simple use cases, but is highly customizable and can be used in a variety of edge cases.

MOOdalBox

A modal box (inline popup), used to display remote content loaded using AJAX, web 2.0 style, written for the mootools framework.

Lightbox JS

Lightbox JS is a simple, unobtrusive script used to overlay images on the current page. It's a snap to setup and works on all modern browsers.

GreyBox