The Code looks Good, but is it Search Engine Friendly too?

No matter how good a developer is, each one makes few mistake while writing HTML code. And I am talking precisely about mistakes which the Search Engines don’t like - some small ones and some fatal search engine disasters. These mistakes happen not because we don’t know how to write an HTML code but because after we are done writing the code, we say to our selves, it’s done and it’s looking fine; why bother change it now for Search Engines. Not every developer is a Search Engine guru and very few know (or bother to know) that couple of such coding mistakes here and there might cause the site to choke to death. But don’t panic yet, it’s easy to avoid these mistakes - just consider the following while you code a website next time:

• Make it a thumb rule to avoid repeating yourself. If it’s a commonly used object property, place it in CSS. If it’s a repeated Javascript, store it in an external file and call where ever required.

• Don’t mess up the code with unused or unclosed DIV’s. If a DIV opens, it should close as well and if it doesn’t, it shouldn’t open. It’s as simple as that.

• The most common web developer mistake - every page has it’s own unique title and description, please do not put the title and description tag in the include files.

• Please make all links and references to images, CSS and JavaScript root relative by starting them with a slash, “/”. Dreamweaver users, please set the “Links relative” option to “Site root” in the Site Definition wizard. This is handy because root relative links don’t break when files are moved from one directory to another.

• Don’t put too many files in a single directory. Keep the heirachy going and manage the files in different directories.

• Use Validator to keep the code and CSS clean. Clean code is easier to manage then something that’s messed up.

• Don’t use <br> for <p> tag as it’s unprofessional and results in inconsistent layout in different browsers.

• Avoid spacer graphics and nested tables. Use heading tags, unordered lists and numbered lists to organize content instead.

• Make it a habit to put a forward back slash ‘/’ at the end of every URL.

Image credit:Flickr

Posted in General, Web Design, Web Development, SEM | No Comments »

Let’s get it right: 11 most essential design principles

Looking back at the past RedAlkemi blog posts, I think we have talked enough about SEO/SEM and I feel obligated to deviate to some thing that excites me as much as SEO does – Website Design. I understand how frustrating it can be for a website designer to limit his creative ability to create a website from search engine point of view. And likewise, it can be a real nightmare for an SEO, to optimize a website that is poorly designed and is a member of ‘usability hall of shame’. So let’s talk about some most essential principles of website designing (& usability):

1. Precedence (Guiding the eye)
Precedence is one most important characteristic that a successful website should have (if a high bounce rate is not an issue for the website owner). I believe that it is in the hands of a designer, how he controls the eyeballs of the visitor on his website. Yes, it depends on the requirement of the website owner, how much weight he would like to give to a particular section of a website. The basic rule here is – first thing should come first - for example, In most cases, company logo (and not login window) is where the visitor should immediately see, as he opens a website so that he knows, which website he has arrived to. This just doesn’t stops here, as it is the duty of the designer to guide the visitor’s eye through a sequence of steps. For example:

Following design functions control the visitor’s eye balls:

• Position – where on the website the element is located?
• Color – If the color is bold or subtle?
• Contrast – Important function in Web 2.0 layouts
• Size – Bigger the object, higher is the precedence (unless every thing is big)
• Design Elements – Arrows, flipped sticker icons etc

2. Breathing Space
So many times I come across website designers, who think website designing is all about utilizing every square pixel of the screen area by filling it with maximum stuff. But I feel that, more vacant space you leave on the screen, easier it will be for you to divert the eyes of the users on the intended objects. To create space, you can compromise on vertical scrolling (not horizontal off course). Following are the important elements of spacing:

• Line spacing
  Remember that eyes are more comfortable reading text lines with medium line spacing. Too little and too much of line spacing can equally hamper the text readability and precedence as it may spill the visitor’s eyes. You can control the line spacing in CSS with ‘line-height’.
• Padding
  With few exceptions, the text should never touch surrounding elements like table borders, images etc.
• White Space
  White space is a technical term and when I say white space, it doesn’t necessarily has to be white in color. ‘White space’ refers to empty spaces on the screen. Expert designers use this white space to give a balance to the whole design lay out and ample white space makes the design look more elegant. To understand this art, open some fashion magazine and see how the publishers use white spaces to highlight the products in car and watch Ads.

3. Navigation
This is the design aspect closest to usability of a website, when the user gets lost on the website, wondering where to go? Make sure that this doesn’t happens to your visitor.

• Navigation: Buttons and other navigation items on the website should be easy to find, identify and understand.
• Orientation: ‘Top’ buttons, bread crumb navigation, back button, sub headings, sitemap and site search are some important elements of healthy orientation on a website.

4. Worst Case scenario:
Consider these factors in advance, so as to avoid end moment surprises (some real unpleasant ones )
You might pick a dazzling font for your copy, but is it available on the user’s computer, what if not? Your design looks amazing in 1100px, but is it creating horizontal scroll?
What happens when the user resizes the window? Did you forget to keep your design center aligned?

5. Typography
This is how you can control your body copy:

• Font choice : Make sure, you are using standard HTML fonts. These fonts can make your layout look elegant, retro, flashy, professional, festive etc.
• Font sizes: Even though small fonts look more sophisticated, they are hard to read. So use a readably big font size. Modern Web 2.0 layouts allow you to use big fonts without looking ugly.
• Spacing: I have already discussed this above.
• Line length: To understand line length, if you open up a newspaper, you will notice that text is presented in small lines and multiple columns. Avoid elongated sentence lines.
• Color: Avoid extra bright, too high or too low contrast colors
• Paragraphing: Stick to left aligned text.

6. Usability

• Adhere to standards: To avoid confusions, adhere to the web standards and do the expected. For example, don’t underline a letter, if you don’t want to link it; as most people tend to expect an underlined word to link to some other page. Doing otherwise can cause confusions.
• Action blue print: Make a list of all the tasks that your customer might want to perform on your website. Then look for ways to make these tasks easy for the visitors to perform in minimum steps in order of importance of each task.

7. Alignment
Alignment doesn’t necessarily mean that the design elements should be in a straight line, but it means every thing should be consistently placed on the page in a set pattern. Aligning will make your design look more ordered and digestible.

8. Clarity (sharpness)
Keep the design sharp – pixel by pixel.

• You may want to use ’sharp’ text in photoshop.
• Ample contrast to keep the borders clearly defined.

9. Consistency
Consistency means, you must have a clear theme in your mind before starting the design, so that you can select colors, font, buttons, spacing, illustration, pictures etc. that compliment to the website theme. An inconsistency in the design will make it look unprofessional and low in quality. So make early decision and stick to them. Smart CSS will help you achieve this consistency. Even if your website design is bad, a consistent website design will still look better then an inconsistent website design.

10. Design Maintenance
Do the design elements cross each other too much? When you make a change in one ‘div’, do the adjacent ones collapse? Keep all the design elements separated from each other (as much as possible) as the designs with the elements related to each other are easy to build but at the same time are very hard to maintain.

11. Use CSS smartly
Use CSS as often as possible, specially in the case of large websites. If you are to use buttons at multiple places of all the pages on your website, you may want to make a button in CSS and attach it to every ‘DIV’ where you want to place that button. Yes, by doing this you compromise on flexibility of these buttons, but you save a lot of time.

Posted in Web Usability, General, Web Design | No Comments »

The MaGic of Lexical clouds: for higher rankings and enhanced user experience

Web BuzZ-BuZz, Web 2.0 BuzZ-BuZz
There has been so much of buzz about Web 2.0. Many webmasters have embraced weblogs, mash-ups, RSS feeds, bookmarking, social networking, tag clouds, wikis etc. But what excites me most about Web 2.0 are Tag clouds that so many website owners are using these days, for higher website rankings and an even richer user experience. For those who haven’t heard of these lexical clouds before, this is how a tag cloud for flickr looks like:

There are so many websites today, that are using tag clouds but the reason why I mentioned only flickr is because flickr was the first Web 2.0 website to use this concept successfully. Check out the tag cloud for Technorati:

Tag clouds, for better user experience
Tag cloud according to Wikie is - “ A visual depiction of user-generated tags used typically to describe the content of web sites. Tags are usually single words and are typically listed alphabetically, and the importance of a tag is shown with font size or color. Thus both finding a tag by alphabet and by popularity is possible. The tags are usually hyperlinks that lead to a collection of items that are associated with a tag thus describing the item and enabling keyword-based classification and search of information”. Flickr says - “Tags are like keyword or category labels, and they can help visitors find items which have something in common“. The simplest way to explain a tag cloud is that it is a Web 2.0 way of categorizing, organizing and navigating your website content with keyword links.When a user saves, bookmarks or votes (what ever they may call it) for some blog post, picture, video etc on a web 2.0 website like flickr, technorati, del.icio.us etc, he/she has to enter a keyword that the user thinks best describes it.

If you look at the picture above, you will notice that each tag (or keyword link) have different font sizes. The font size of these tags depend on the number of times keyword has been used to tag that an item. More the items are associated with the keyword, the more it is popular and bigger will be the size of the font. So it’s an intuitive means of navigation on a website.

When the user clicks on a tag, he/she is navigated to a tag page which on flickr looks likes this:

The tag page comprises of the most recent items tagged by visitors using that particular keyword they have clicked on. Please note that these tag clouds are not necessarily the only way to reach to the items on the website, but they serve as an alternative & intuitive way of finding them. Most often then not, you will also find the item’s tag adjacent to the item, clicking on which will take you to the other items tagged using that keyword tag. ‘Related tags’ are the other common tags which contain that same item.
Tag clouds: not just usability, it’s also an amazing SEO tool
So you still have doubts, if you should incorporate these lexical clouds on your website or not? I will give you one more good reason to do so - With Tag clouds, you consolidate your website’s internal linking which means you have better strategical control on your link equity (juice) and since the anchor text of these tags is extremely keyword rich, it boosts the ranking of your website or weblog far more than what conventional navigation bar does and hence increases the website’s ranking for significantly larger variation of keywords. You yourself will be surprised to see the keywords tags (including long tail keywords) that people will associate your content with (even wordtracker would have failed to find those). Bloggers will be glad to know that WordPress 2.3 comes with tagging in-built. Ultimate tag warrior is an awesome plugin to create a colorized tag cloud or heat map.

Other Tag cloud resources:
How to make Tag clouds using PHP, MySQL, CSS
Tag clouds using ASP.Net

Posted in Web Usability, General, Web Design, Web Development, SEM | 1 Comment »

Maximize golden areas on your website - track customer’s eyes

Several website experts keep conducting this “eye tracking research” to find the right spot where the customers or website users always focus on. Eye tracking is used in virtually every kind of marketing - TV ads, billboards, product packaging and web sites - to determine what works and what doesn’t with consumers. What is this eye tracking? Is it really that important? Lets try and answer some of these questions.

What is eye tracking study?
Eye tracking is the process of measuring either the point of gaze (”where we are looking”) or the motion of an eye relative to the head. An eye tracker is a device for measuring eye positions and eye movements (definition source: Wikipedia).

In simpler words, the trackers record the areas (via heat sensors), where the the visitor’s eyes pays maximum attention. The image above shows the trends on search engines, which is more or less same for a website. The area on the top-left is called “The golden triangle”. This is the area which gets maximum attention

Is eye tracking analysis really that important?
Being involved in usability study and conversion improvement, I can say that this study makes a lot of sense and could help us define the important and sellable areas (or spots) on the website.
While we are trying to start a service or add a new package to the website, or simply want website visitors to focus on a thing, you should place it strategically on the area considered as the golden spots on the website. While designing the website, one could keep these things in mind to leverage certain areas to boost sales.

The eye tracking pattern may be based on any or all of the following:

• Individual perception
• Interest
• Need
• Age
• Education level
• Computer monitor
• Browser settings and others reasons etc.

It can help us find the following:

• Effectiveness of our website design
• Whether we are using the right areas for promotion
• If our users are able to find what they’re looking for
• The right content is used at the right spots
• Effectiveness of banners
• If search boxes are noticed at all

The results of numerous eye tracking studies enable web site designers and owners to optimize site pages for maximum impact and “stickiness”. Lets face it all that matters in an online business is NOT how busy you website is (traffic), but how many of them actually become customers. All versions are good as long as it is CONVERSION (hear the registers ringing:))

Posted in Web Usability, Web Design | 2 Comments »

Important aspect often overlooked while considering a web development company

When searching for a web development company for a new website, it is wise to also evaluate the level of post development support that you can expect to receive.

Post development support may include guidance on how to use some of the back end features, adding any new features at a later stage, receiving suggestions, evaluations of new ideas etc. What is often overlooked is support in terms of website marketing. Just having an entity out there in the World Wide Web is not enough. It is critical that just before the website is about to be completed, a complete Online Marketing Plan is worked out so that it can be launched along with the website. This Online Marketing plan should focus on getting traffic and conversions both in the short term and long term after finding out the amount and kind of dependency required on search engines for getting traffic, exploring other sources of getting traffic like banner advertisements etc., This should be a complete plan that would also evaluate the traffic to find out how it is interacting with the website, what is the conversion rate etc. and necessary actions should be taken on the basis of this to get a high conversion rate.

Hiring a development company that can provide support in working out a right marketing mix as well, ensures that your website is a successful online business.

Posted in Web Design, Web Development | 1 Comment »