Website Design

“Content is King! If you want a website to generate back-links and have quality content the search engines love, be sure to make it readable by both people and search engines. Search engines are working to give people quality results. Thus, they are looking for sites with quality content. So – by building site content for people, not only are you getting back to basics (information dissemination to people via the Internet), you are creating a site search engines will love. So, build sites for people – and the search engines will come.

When creating a new website or redesigning an existing site, there are four critical rules which should be followed to make the site effective, functional, loved by search engines – and successful.

1. Easy to Read

When building a website, the first thing you need to be sure of is that your website is easy to read. When you write content, remember that most web site visitors don’t read every word of a page – in fact, they only scan pages to find what they want.

Break up Your Content

Break up your pages and use headers between major ideas so people scanning your site can find what they want quickly. Use meaningful headers between each paragraph or major idea – this helps with SEO. Headers should be created with the H1 through H4 tags for SEO. Always use good writing structure. Additionally, avoid long paragraphs that run on. You should break up any long paragraphs.

Color and Fonts

To help readability, use high contrast colors between font and background. Black text against a white background may seem stark, but it is very readable. To make a website easy on the eyes, try an off-white background and a dark gray (almost black) text color.

Things to avoid with content color:

• Avoid vibrant background colors like purple or yellow. Such back colors make text difficult to read.
• Avoid using an image behind your text.
• Avoid using bright text colors on bright backgrounds.

Ways to make pages lighter:

The wrong way: “For search engine optimization techniques.”

The right way: “Good techniques for search engine optimization are important to use.”

Using link text (anchor text) that describes what the link is about is the best way. Search engine web crawlers (programs that automatically index the contents of websites) visit your site, they “read” links. Spiders can index descriptive links into a subject or keyword category. Spiders have nothing to work with when reading a “click here” until it reaches the linked page.

This is Cross Linking – use it as much as possible when it makes sense to do so when writing your content.

3. Consistent Design

At most, one or two layouts should be used in your site design. As a reader browses your site, they should be able to get used to looking in the same place for your navigation, for your sub-navigation and for your content. That’s all there is to say about that.

4. Lower Page Weight is Better

Page weight is the total size of a page on your site in bytes – code, text and images. Your site’s page weight makes a big difference to your viewers. Lighter page weight is better for your readers because the page will download faster. The faster a page downloads, the faster they will get to the content.

8.0/101vote

Voting statistics:

Rate	Percentage	Votes
10	0%	0
9	0%	0
8	100%	1
7	0%	0
6	0%	0
5	0%	0
4	0%	0
3	0%	0
2	0%	0
1	0%	0

There are no tags associated with this post.

Many cherish the idea of starting a home page. It seems easy enough. Throw a number of products and services on a few pages and before we know it lady luck is guiding hordes of visitors to your site. Unfortunately, that is not enough, even if we use landing pages and other various tools to attract attention. When it comes to determining the success of a website, sometimes the simple, most logical elements are the most important. So, don’t overlook them!

The concept of the 5 Ws, followed by an H, is regarded as much a basic information-gathering technique in homepage building, as it is in journalism. People want to see credibility. They are curious about you, and as obvious as it may seem to provide the answer to Who, Where, What, Why When, and How on a homepage, you would not be the first to forget.

Who:

Taglines and logos often explain plenty about the type of business that is being conducted, but most likely do not give complete details about who you really are. Are you a local businessman, or do you live halfway around the world?

Mentioning an address on your homepage is vital. It will increase your chances on being pulled up by local search engines and it will tell your audience about your background. They want to know what language you might speak, how much you know about your products, and if they are manufactured by yourself or in your area. You also may want to mention sales representatives and other staff.

Where:

Your website visitors see your business location as more than just a building. Believe it or not, there still are patriots out there who would rather order from a local entrepreneur than going across the border. They know your language, trust your products and services and can easily verify your credentials. It also means that product shipping time will be less and they have access to local sales and discounts.

With news reports of diluted drugs, harmful toys and toxic drywall, customers want to know if your products are safe. Registering with independent, non-profit, consumer research companies such as the Better Business Bureau will not only give you peace of mind, but will also tell your customers you have nothing to hide and are committed to provide the best service possible.

If you do not want your privacy invaded because your company is small or home-based, you can always rent a postal box in your area.

What:

Manage your client’s expectations and tell them exactly what you are offering. This means more than just listing your merchandise and services on the homepage. The more information you offer, the bigger your advantage over your competition will be.

Go over your entire website and ask yourself numerous questions starting with ‘what…’ What are my payment options? What are my sales items? What will attract visitors to my site? What kind of products do my customers like? What are my long-term goals for the company? What is the quickest way to go from product viewing to sale completion? Indeed, customers do not like to click around to find their way around a website. Like in real-life stores, they like to pick an item, pay and go.

A poorly designed website is like a badly managed store with poor signage and no clerk in sight to assist you. As you would walk out of such a store, customers would be equally quick to click away and log off.

Why:

‘What’ and ‘Why’ are often related: what are you selling and why? Explaining the reasons why you started the business, launched a website, picked that particular name for it, chose these kinds of products to sell, can all help your customers to understand what makes you and your company so unique.

Of course, you do not have to tell your entire life story on your homepage, but can weave the information into other pages. If you have many pictures on the site, add text and let your customers know why this digital camera is the best, why a specific diet works best for diabetics, or why the gemstones in that turquoise necklace are so precious and valuable. Answering these questions and being rich in descriptions is not about showing off, but about bonding with the customer.

When:

Even though frequently underestimated, the ‘when’ factor is as important as any other website related aspect when it comes to usability. Time is relevant in so many ways and not just when it comes to shipping information.

Customers like to know your business hours and when you can be reached. They want to know when they can expect a reply to an inquiry, when your next sale will be, and when they can expect the next lot of new bestsellers. As you can see, these questions relate to your entire e-commerce site and not just the homepage.

How:

Focusing on ‘how’ you can make your website perfect is an absolute necessity. Research not only your homepage, but the entire site and find the questions you have missed so far. Keyword repetition is an important SEO factor. How many more keywords do you need to climb the search engine listings faster? How many times should you update the site’s content and blogs? How many clicks does it take to get from the homepage to the merchandise and shopping cart? How long do you leave feedback on the site? How long does a shipment take to get from you to the customer? How safe and appealing are your payment methods? How long will this list of questions be? It will all depend on the information you have already provided, how much more you want to reveal, and how much time and work you are willing to invest.

In conclusion: websites are like bridges. They are the links connecting you and your customers. Like with any structure, bridges need a good foundation, sturdy materials, and a well-designed construction plan. If any of these elements are missing the bridge will collapse. Building a successful website is no different than erecting a bridge. Just think about it! If your building blocks don’t fit, or pieces are missing, do you think your e-commerce website will bring you fame and fortune? I didn’t think so.

0.0/100votes

Voting statistics:

Rate	Percentage	Votes
10	0%	0
9	0%	0
8	0%	0
7	0%	0
6	0%	0
5	0%	0
4	0%	0
3	0%	0
2	0%	0
1	0%	0

There are no tags associated with this post.

Has this ever happened to you?

You need a photo for a website, brochure, flyer, or CD/DVD cover…

You buy one of those 100,000 photo and clipart collections on 10 CD-ROMs hoping to find the “perfect” picture, but after hours of searching you find your brain tired, your mouse hand numb, and no “perfect” photo in sight. Fortunately, the photo and clipart business got a lot smarter online, and anyone who ever needs good photos at rock bottom prices stands to benefit. Buying one of those mega-photo collections to find one photo rates about the same as buying an entire aisle at the supermarket in hopes of finding a single Snicker bar!

Personally, my shelves hold over 2,000,000 photo and clipart images on over 100 CD-ROMs, most of which rate quite useless to me. To further complicate matters, photo collections on CD-ROM tend to go out of date. Many of the photo collections I bought in the mid-1990′s contain photos of people from the 1980′s, so the hair, clothes and even makeup look out-of-date. The solution to this dilemma lies in the fact that you can now buy photos online at bargain-basement prices.

Previously, in order to buy photos online, you either joined a membership site, which charges a monthly fee, or you bought by the photo from sites charging $100 or more for one photo. Do a search on google.com for “royalty free photo,” “stock photo,” or “buyout photo” and you’ll find plenty of websites offering photos at premium prices (not to mention the confusion of finding what you want).

Two excellent options for buying photos and clipart are ClipArt.com and BigStockPhoto.com.

Clipart.com charges a membership fee to browse their database and download images. Their best deal is the yearly subscription of $169.95 (equates to about $15 a month) with unlimited downloads. This represents an excellent option if you plan to use a large number of images over the year, but I found the actual photos (they also carry clipart, sounds, illustrations and more) about average.

At BigStockPhoto.com I found the photos much more compelling and dramatic than ClipArt.com. I also like the fact that BigStockPhoto.com lets you buy only the photos you want by purchasing credits instead of paying for a membership. You can buy a single photo for $2.50, but the price per picture goes down when you buy multiple credits (10 gives you the first price break).

Whenever you buy images, carefully read the fine print in the license about how you can and cannot use the images, especially for commercial purposes. It does you no good to buy an image you can’t use. Beware of “free” clipart and photo websites, they can often display images of dubious origin. Also, free clipart sites frequently carry tons of banner and pop-up advertising (along with some more sinister spyware applications that install themselves automatically on your computer).

Regardless of why you want them, buying images online now rates much better than buying a huge clipart collection and hoping to find what you need. And, by purchasing only the pictures you need, you’ll save yourself significant time and money in the long run.

0.0/100votes

Voting statistics:

Rate	Percentage	Votes
10	0%	0
9	0%	0
8	0%	0
7	0%	0
6	0%	0
5	0%	0
4	0%	0
3	0%	0
2	0%	0
1	0%	0

There are no tags associated with this post.

Where has the old school simplicity gone? So many websites today, though very artistic and unique, often overlook the simple rules of design and construction when it comes to building websites.

1) Color Clashes:

The colors of a website (general rule) should be no more than three colors. Make sure that the colors do not clash with each other. Though this is sometimes artistic and unique, this kind of design is normally not appropriate. Understanding first what the rules are, and then being able to justify why they were broken to achieve a certain result, is wise.

2) Unorganized Navigation:

Navigation is the heart of every website. By the simple rule of simplicity, navigation should be as simple as possible not only for the visitors’ sake, but also for the search engines. Navigation bars are sometimes so complicated that it makes visitors scratch their heads and leave. Keeping things as simple as possible is essential for the success of all websites.

3) Inconsistent Font Faces and Sizes:

If you are making a website for children skip this part, but if you’re thinking of building a website for business, then this is often a huge issue. Font Faces and Sizes should be consistent on every page of a website. Let us say one of your headings is a Verdana size 15, then all of the headings should also be Verdana at size 15. Consistency is a very important aspect of designing a simple website. Not only does it make a website look more organized, but it also makes it look a lot cleaner, and more professionally thought out.

4) Long Sentences:

Remember that websites are created to make it easier for visitors to find and finish their goals. Scaring them by making them read endless babble does not help this process at all. Using line breaks, headings, and subtitles is an important aspect of displaying information on the web. This not only makes it easier for visitors to scan and look for the information they want, but it also promotes a better flow of information.

5) Lost Contact Info:

Contact infos are commonly located on the lower part of a website, on the navigation bar, or on the side bar. It is a common practice to insure that that the contact information is visible on every page and to all the visitors.

0.0/100votes

Voting statistics:

Rate	Percentage	Votes
10	0%	0
9	0%	0
8	0%	0
7	0%	0
6	0%	0
5	0%	0
4	0%	0
3	0%	0
2	0%	0
1	0%	0

There are no tags associated with this post.

Did you know that even under the best of circumstances, your web visitors will read less than 20% of the writing on your web pages? Remind yourself daily that most web visitors don’t like to read. In fact most visitors to your site will require mere seconds to form an opinion of the value of your content before abandoning your site forever. (You can measure this – look at your bounce rate for each page.)

The Golden Triangle

The Golden Triangle was first reported by Enquiro (www.enquiro.com) when they published a report analysing eye scan activity during first time scans of Google search results pages. Enquiro found that when Googling, most web users concentrate their attentions on a triangular area covering the first few search results. Then if they don’t find what they want they will usually start a new search.

How does this behaviour affect us as web owners? Badly, I am afraid. Because if our site does not appear in the first few lines, we as well not exist! That is why we as web owners need to spend so much time and effort improving our search rankings.

From Triangle to F-Shape

Subsequently Jakob Nielsen did more work on how the triangle works for the average web page. The results of this research are reported in his article F-Shaped Pattern For Reading Web Content.

He also used eye tracking technology to investigate HOW users scan a “normal” web page. (IE not a Google search results page). What he found was that most readers use an F pattern to scan a new web page for information of interest.

This has major implications to us as web owners! Because it means that if we don’t put interesting content in the first few lines – we are toast – and our web viewer will simply click away! So it behoves us to study the structure of the F-Shape and to apply the lessons of F-Shape wherever we can to each of our precious web pages.

The F shape is structured as:

FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF (first scan)
F
FFFFFFFFFFFFFFFFFFFFFFFFFF (second scan)
F
F
F
F
F

The pattern forms a triangle if you trace its outer edges. The F-Shape formed by two horizontal lines across the page from left to right, with the top line being longer than the one below it. The vertical stripe connects the horizontal lines to complete the F-Shape.

Text that looks interesting to the reader can extend the time spent examining info on the down stripe of the F. (This is usually menu items. Thus if you do have a sub-menu in this position – keep links short and make sure your links are arranged with the most important items at the top.) It is possible that at this stage a reader can branch out outwards in a third horizontal pass, if the info is appealing enough.

Another important point is the readers do not follow the text linearly across each page. They flit to islands of text that interests them. This results in a blotchy, seemingly random reading pattern. Either way, know that they will seldom read your sentences from beginning to end, unless the information is really of interest.

What this means for your web content:

In general remember that people don’t read a lot. This is the most important content rule any web owner needs to know. So do spend time trying to REDUCE the text content of your pages. Less is always more when it comes to content.

Readability of your pages using the F-Pattern

Top of the F Shape is read first horizontally

1. Most important sentence and keywords need to be on the top line
2. The first paragraph of writing is key and will be read the most – so work hard at keeping it short and full of valuable keywords
3. The second paragraph will be read next but it will usually never be read completely
4. Use bullets and sub headings in bold and make the first few words count. (Don’t expect readers to carrying on reading. Say your piece in the first sentence – if more is read, that is a bonus)

This article is part of a series on the basics of competent web design called Web Design 101. Additional articles are added to the series at irregular intervals.
Click here to view more articles in the Website 101 series

References and further reading:

1. Enquiro
   a) Enquiro defines Google Golden Triangle
   b) Eyetracking2-Sample
   
2. Jakob Nielsen – F-Shaped Pattern For Reading Web Content
3. Harald Weinreich, Hartmut Obendorf, Eelco Herder, and Matthias Mayer: “Not Quite the Average: An Empirical Study of Web Use,” in the ACM Transactions on the Web, vol. 2, no. 1 (February 2008), article #5.

0.0/100votes

Voting statistics:

Rate	Percentage	Votes
10	0%	0
9	0%	0
8	0%	0
7	0%	0
6	0%	0
5	0%	0
4	0%	0
3	0%	0
2	0%	0
1	0%	0

There are no tags associated with this post.