Heading Hierarchy

Heading hierarchy on a web page is little hard for some to understand. In this article, we’ll try to clear up the confusion by comparing heading hierarchy in a web document with how you use headings in a printed document.

In web page coding there are heading tags H1 through H6 available to format the headings in the web page. H1 is the largest, H6 is the smallest. Just like an article printed on a piece of paper, the default size of the heading represents the importance of the heading. These sets of HTML tags are meant to define headings in the page, not to format just any text on the page.

Let’s take a different approach to understanding the heading hierarchy in a web page. People usually use a book as an example, but we’ll use a one or two page document you are writing for, say, a school assignment or a report at work.

Web Heading Hierarchy vs Print Heading Hierarchy

If you open up Word and start a new document you will see that the default blank document has some formatting already in place. Click the arrow beside where it says Normal in the toolbar and you will see some heading formatting already set up. Notice how the font size gets smaller as you move from heading 1 to heading 2 to heading 3. This creates a heading hierarchy within the Word document. The heading tags on a web page also decend in size by default, H1 is the largest, H6 is the smallest.

Heading 1

Because we are writing an article, the title of the article would use heading 1.

Heading 2

Each main section of the article would use heading 2.

Heading 3

Now if you had sub sections within the main sections the first one would be heading 3.

Heading 4, 5 and 6

If your sub section required further headings, then the first one after heading 3 would be heading 4. The next heading within this sub section would be heading 5. The next would be heading 6.

Headings in Descending Order of Importance

When you write an article to be printed on paper, the reader expects some kind of organization (hierarchy) of headings to break up the article and show how the headings relate to one another.

If all the headings look the same by giving them the same heading formatting, wouldn’t you find it confusing where one section of discussion ends and another starts and how each section relates to another?

It would be much easier to read an article that has definite heading differences showing how they relate to the heading above.

Courses which teach you how to study better tell you to look at the headings in the table of contents and within each chapter of your textbook to get a feel for what each chapter is about.

It is ok to mix up heading levels, as long as they show the hierarchy of the document. One main section may just have heading 2, the next main section might need heading 2, 3 and 4 to clarify the subsections. That’s ok.

What makes it difficult to read something is when you go from heading 2 and it’s subsection uses heading 4. The reader will wonder what happened to heading 3.

If you were to take out all the words and just leave the headings, does the resulting table of contents type layout make sense? This is the goal of using heading hierarchy properly. When you take the words away, can the reader get a sense of what is covered.

Heading Hierarchy on the Web

Heading hierarchy works the same way on the web as it does in print. Web users are generally in a hurry so they look for headings to see if they want to stop and take the time to read the whole web page. Web users also skim in search of what they specifically are looking for. Having a heading hierarchy will help them find what it is they are looking for.

The heading tags available in HTML should not be used as a means to format something that is not a heading. This messes up the heading hierarchy for the search engines and those who use technology to read web pages to them.

The default format of heading tags might not match the style of your web page. This can be altered by using the heading selector in your stylesheet and setting the formatting to match the look of your web page. Using a class (e.g. .heading1) in the stylesheet does not set the heading hierarchy correctly. You need to format the actual heading selector (h1 for example) in the stylesheet to retain the web page heading hierarchy.

Proper Heading Hierarchy

Using the proper heading heirarchy on your web pages adds to the legibility of the web page, improves your search engine optimization and adds to the accessibility of the page.

According to a survey by WebAIM of over 1100 screen reader users, 52% navigate by using the headings.

From the WebAIM survey:

The responses to this question provided one of the greatest surprises to us. It is clear that providing a heading structure is important to screen reader users with 76% always or often navigating by headings when they are available. Use of heading navigation increased with screen reader proficiency with them being used always or often by 90.7% of expert users, 79.3% of advanced users, 69.9% of intermediate users, and 55.4% of beginners.

From SEO by the Sea:

When you use a heading element, whether <h1>, or <h2>, or so on down the line, you aren’t just impacting the look and feel of the text within that element, but you are also defining a semantic relationship between those words and the words that follow them. You’re telling visitors, and search engines that the utterings on the page that follow are related to the terms in your heading in a meaningful way, even if you don’t quite understand that, and don’t quite do that right. And many people don’t.

When you use a top level heading, or an <h1>, you’re setting up a semantic relationship between that heading and the remainder of the content on a page, describing what it is about. If you then use a second <h1> on the same page, you’re creating some potential confusion, because someone, or a search engine might see that as the ending of the semantic relationship between the content after the first <h1> and the start of this new <h1>. If instead you use a second level heading element, or an <h2>, you’re continuing the semantic relationship between the top level heading above with that content, but defining an included semantic relationship with the content headed by the second level heading.

Heading Elements and the Folly of SEO Expert Ranking Lists

Further Reading on Heading Heirarchy

Video: Importance of HTML Headings for Accessibility – from a blind person’s point of view.

Heading Structure – Heading Tag

404 Error

Have you ever clicked a link to only end up at a page that says that the page does not exist? This is a 404 error which means the link you clicked (or typed) is incorrect, the website was revised/renovated and no redirects were put in place or that the website owner has deleted the page without redirecting you to another page.

If your website hosting has not been set up with a custom error page, the visitor will be sent to a generic web host error page. This is very confusing for the visitor as they won’t know what to do next.

404 Error and Search Engines

If you have a bad link to a non existant page on your website (from another website or the search engine results) this can be bad news for potential visitors who have found you in the search engine results. The search engines find the link(s) in their index from visiting websites who have linked to your website or crawling your own web pages.

404 Error – Google

The Official Google Webmaster blog decided to help webmasters out by explaining 404 errors through the week of August 11, 2008. Here’s a list of the posts as of this writing:

The posts at Google Webmaster Central blog include pictures to help you understand how 404 errors work. Check out all their posts on crawling and indexing.

404 Error – Yahoo!

Page Not Found Error Handling – Information from Yahoo! on handling 404 errors in Yahoo! Stores.

“You’re still crawling URLs that I removed ages ago.” – information from Yahoo! Search Help on handling a 404 error.

404 Error – Live Search

Live Search Releases Web Page Error Toolkit – this is an asp.net application for IIS servers.

Customize your 404 error pages with the Web Page Error Toolkit – more information on the Live Search Web Page Error Toolkit.

Bing

Fixing 404 File Not Found frustrations (SEM 101)

Are Your Podcasts and Videos Reaching All Audiences?

If you have done any research on social networking, podcasting or the use of videos to attract readers to your website or blog, you will find that podcasting and inserting videos into the web page/post is highly recommended as a marketing tool.

Today in Glenda Hyatt Watson’s Accessibility 100 series she brings up a very valid point: Using Transcripts to Increase Your Audience.

Podcasts and Videos for Marketing

Marketers tell you to use podcasts and videos to attract visitors to your website or blog, right? So why don’t they suggest including a transcript of the podcast or video to accommodate those who cannot listen to your podcast/video or see it? You are missing out on a whole section of the internet users.

The Internet has opened the lines of communication to so many people with disabilities or who are otherwise shut in. Why not make it so your podcasts and videos are reaching all audiences?

As an example of what can be done, Darrell of Enabling Abilities to Appear explains how to use digital recorders with Dragon to create transcripts.

Include Transcripts to Reach All Audiences

What a great way to cover your bases! Using podcasts, videos and transcripts to reach all audiences. Not only do you provide accessibility to your website or blog, there’s a copy of your presentation for those who prefer to read your presentation. Great marketing solution!

This isn’t a new idea. UIE Brain Sparks also provide transcripts for their podcasts.

Transcripts for Search Engine Optimization

From Google Videos:

“Users will be able to find your video more easily if you add a transcript to each video file you’ve uploaded via your Video Status page. …”

Google Video Submitting Transcripts

Video Search Engine Optimization Tips and Techniques also suggests that you provide a transcript for your visitors and the search engines.

“Many videos on the net simply aren’t seen because they can’t get discovered. This can be due to lack of promotion, search engine optimization or effort on the part of the creator. But adding closed captions to a video may be one way in which to get some additional traffic to it as well as make the video accessible to those without sound-capable PCs (e.g. many office workers) or those with hearing impairments. Using translation techniques to provide multiple language captions can also drive additional traffic to your content from non-English speakers….”

Video Accessibility, Closed Captions, & Video SEO

Transcripts Add Accessibility

This is yet another demonstration of how easy it is to make a website or blog accessible which also improves the usability and search engine optimization of your website or blog.

Website ROI

Your website is an investment in your business and as such, you would want a return on that investment. We’ll look at website ROI in this article and why it is good business sense to invest time and money into your website.

First, let’s look at ROI (return on investment).

ROI (Return on Investment)

ROI is a comparison between how much you invest, the return on your investment and how much you gain on the investment.

Take the potential increase in sales and deduct the cost of the investment. This gives you the net gained.

Now, divide the net gain by how much you invested. This gives you the ROI (return on investment).

Choosing to Invest in Your Website

Take all the investments you want to make into your business (including investing in your website) with the projected ROI on each investment. Sort the list with the items with the most ROI at the top of the list.

While making your list keep in mind that fixing up or creating a website is a one time initial investment to improve sales while hiring a salesperson and/or buying link traffic will be reoccuring expenses.

Now don’t cheap out on the budget for the website. This is an important investment in your business and just as with everything else for your business, you want to make a good first impression to help land the sale. Focus on adding features and information that enhance the website, not just glitz and glamour, to improve the website ROI.

Your website is a 24/7 salesperson and has much more potential of attracting clients than a salesperson who you pay commisison or a salary to.

What Ruins Your Website ROI

Improved ROI can be accomplished by keeping things simple and making small changes in your website plan or your existing website.

Here’s a few things that can ruin your website ROI:

  1. Prioritize elements and features that give the best ROI. Don’t just focus on the visual elements of the website. You need information and features your target audience are looking for.
  2. Check your ego at the door. The website needs to be built for your target audience if you want it to make money for you. Just because you like something, doesn’t mean your target audience does. Show others what you have in mind and be open to the feedback.
  3. Just because your competitor is doing something, doesn’t mean you have to copy them. Be unique. Be different. That’s what people will remember.
  4. Don’t let your web designer’s ego take over. A good web designer will be more concerned about what works for your target audience than forcing what’s in at the moment.
  5. Be sure to be clear on what you want in your website design when asking for a quote. The more homework you do ahead of time, the better price you will get and the less chance for miscommunication between you and your web designer.

Areas That Improve Website ROI

There are some specific areas to look at to improve website ROI:

  • Usability – if the website is easy to use then your visitors will be happy and recommend your business to others.
  • Informative – providing all the information a potential customer needs to make the decision to buy can be the crux of making a sale.
  • Know your audience – I know, this is the fourth time I have mentioned your target audience in this article. Are you getting the idea that researching and knowing your target is very important yet?
  • Goals – know your goals for the website. To increase sales? Reduce staffing costs? Be a source of information for your clients?

How Do I Measure My Website ROI?

To measure the success of your investment you need to compare what the website is now doing for you with what the goals were when you started.

Are you getting the targeted traffic you set out to get?

Have your sales and/or leads increased?

Are you getting any feedback from visitors on what is working and what is not then taking the negative feedback and making the necessary changes?

When you look at your website stats, is the increase in website traffic converting to an increase in sales? More traffic isn’t any help if it’s not increasing your sales and/or leads.

If you have an ecommerce website, how’s your checkout rate? Are people completing the sale or abandoning the shopping cart?

Website ROI – It is Important

As you can see from the points above, taking a serious look at your new or existing website then making the required changes and tweaks to match target audience you are going after is a smart investment in your business. Listening to feedback from visitors, analyizing the website stats and sales stats then tweaking the website can only improve your website ROI.

Recommended Reading on Improving Website ROI

web design for ROI by Lance Loveday & Sandra Niehaus is a 200 page book on “Turning Browsers in Buyers & Prospects into Leads”. This book goes into more detail about how to increase your website ROI.

Don’t Make Me Think by Steve Krug is also a 200 page book. It’s subtitle is “A Common Sense Approach to Web Usability”. As noted above, increasing the usability of your website will in turn, increase your website ROI.

Why We Buy, “The Science of Shopping”.This book is a bit heavier read than the first 2 suggestions. It is written in a friendly style like the other recommended reading and is full of all kinds of hints on what little things can be done to increase sales for your business. It was written for brick an mortar businesses, but I got some ideas that could be implemented on the web.

Is Your Blog Accessible?

How accessible is your blog (or website for that matter)?

Today’s post in the Accessibility 100 series at Glenda Watson Hyatt’s Do It Myself Blog covers 5 Ways to Increase the Accessibility of Blogs.

Add Accessibility to Your Blog

We have covered some of the points Glenda brings up here at Web Page Mistakes before:

Accessibility Helps Usability and Search Engine Optimization

Other accessibility issues (which are also usability and SEO – search engine optimization issues) we have covered here at Web Page Mistakes are:

As you read through each of the articles above, you will come to find that making a website or blog accessible is not that hard and adds the benefits of being more user and search engine friendly.

Related Reading

“…Numbers don’t lie: According to the American Foundation for the Blind and Statistics Canada, there are 12.8 million blind and print-restricted Americans and 2.8 million similarly disabled Canadians. And with an aging population, expect that number to rise.

The disabled love to surf: Almost half the disabled in North America maintain their independence by using the web. In fact, they spend more time logged on than most nondisabled users….

Add 2.8 Million Readers With Accessible Writing

How all Your Web Pages Fit Together

To better understand how all the different web pages fit together on your ecommerce website (or any website actually) let’s look at different scenarios of how someone can enter your website. Remember that a person can enter your website on any page that is indexed by the search engines, they won’t always arrive to your home page.

Scenario # 1 – Arriving at the Home Page

The visitor typed something in the search box that showed your home page in the results and they clicked it. The person could be totally new to the subject of your website, somewhat versed in the subject of the website or someone with enough knowledge of the subject that they just want to get right to what they visited the website for.

What we all do as website owners, is try and get everything onto the home page because we thing everything is important. Through a well planned navigation system and well written content on the home page to introduce the “departments” of the website, a visitor will be taken to/find what it is they came looking for.

Scenario # 2 – Arriving at a Category Page

The visitor typed something in the search box that showed your category page in the results and they clicked it. Like scenario # 1, the person can be new to the subject, somewhat versed in the subject or someone who knows exactly what it is they are looking for.

Having an introduction to the category at the top of the page summarizing the category not only helps the user confirm that they are in the correct section of the website, it helps with your search engine optimization if it includes the keywords and phrases people use to find this selection of information. The content should always be written for the users but with tweaks to improve your search engine optimization program.

Keep in mind, this person has not read your home page introduction, so some restatement of what this section of the website covers would be necessary.

Now you are going to say that the “big guys” don’t do this. This is true for some. But what you have to keep in mind is that they have much bigger marketing budgets than the average small business owner to use other means to drive traffic to their website besides the results in the search engines.

Once the person is at the category page and you have subsections of the category, the visitor needs some indication what is in the subsections. Again, having a short description as to what they will find in this subcategory will improve the visitor’s experience by leading them to what it is that they are looking for. This is another avenue to improve your search engine optimization program if the description includes keywords or phrases a person would use to find the information (without going overboard).

Scenario # 3 – Arriving at a Sub Category Page

The person typed something in the search box and clicked your result that takes them to your sub category page.

Depending on how you decided to structure your website, the sub category page could also be your category page.

Remember again, this person hasn’t come from your home page so reintroducing this section of the website would confirm to the user they are in the right section of the website.

Just like any other page on your website, this page, needs to include some written words to entice the user to purchase your product or read on if it’s information they need. Having written words on the sub category page not only improves the user experience, it is yet another opportunity to improve your placement in the search engine results.

This page is also an opportunity for the person who knows what they want, without further persuasion, to make their purchase. By including the price and a Buy Now! button or link on this page you have satisfied the person who knows this is exactly what they want.

For the person who needs more information/persuasion include a link to a product specific page.

Scenario # 4 – Arriving at the Product Page

The individual product page has various jobs. This page could be the page the visitor was taken to from your result in the search engines (therefore doesn’t know anything about your website yet), or a person who has worked their way through from the home page, from the category page or the sub category page.

Once on this page, the person may need more persuasion to purchase the product or need more information to make their decision.

Keeping the above in mind and that the person could have come directly from the search engine results this information would need to be on the page to keep all visitors happy:

  • Web page content that describes how the product will improve the visitor’s life.
  • Includes marketing and search engine optimization techniques.
  • Technical information for those who need/want this information before making the purchase.
  • Easy way to purchase the product (e.g. Buy Now button).
  • Information on your shipping, privacy and return policies (these can be links to single pages within the website).
  • Answers to all the questions the purchaser might have about the product.
  • Links to how to use the product articles (another avenue for people to find your website!).
  • Quality pictures of the product including it being used and different angle shots.
  • Testimonials from happy customers.
  • Related products and/or accessories available that compliment this product.

Summarizing How All Your Web Pages Fit Together

All the above pages have the potential to make a sale. It doesn’t matter what page the visitor arrives on, if you provide enough good quality information on the higher pages in your website hierarchy to lead them to the purchase you will accomplish what you set out to do, make the sale.

Put you shopper hat on, what would you need to see on the page to convince you to buy this product? Get a few friends or other potential buyers to look at the pages and give feed back on what parts are missing from your web pages and holding them back from making the sale.

Each page is part of the puzzle in making a sale. Building a website that gives a clear overall picture of how all your web pages fit together will improve your search engine results standing, make your website popular by word of mouth, improve the user experience and create return visitors/customers.

Recommended Reading

web design for ROIwritten by Lance Loveday & Sandra Niehaus is a new book released in 2008 which covers techniques to improve conversion rates on your website.

Don’t Make Me Thinkwritten by Steve Krug is a book on how to improve the usabililty of your website. It is now in it’s Second Edition and includes three new chapters covering usability as a common courtesy, web accessibility, CSS (Cascading Stylesheet) use and what to do when the Boss wants you to … (fill in the blank) and it just isn’t a good idea.

Both of these books are short books, written for anyone involved in the creation of a website, including website owners, content writers, marketing people and web designers.

Make It Easy to Order Right Now! A look at what website owners miss when optimizing their ecommerce websites.

Did Poor Usability Kill E-Commerce? A look at how poor usability of your website affects your sales. Mr. Nielsen’s website is referenced in both of the books recommended above plus many more. He is an usability expert therefore, spending come time on his UseIt website reading through the many articles available would be time well spent.

Accessibility 101: Tips for Improving Accessibility

Glenda Watson Hyatt will be starting a series of accessibility related posts on her Do It Myself Blog starting the first week of June to coincide with the National Access Awareness in Canada.

This promises to be very informative as Glenda would be giving first hand experience. If you don’t know Glenda Watson Hyatt, she is a woman with cerebral palsy that has written and published her autobiography plus has become known as the Left Thumb Blogger.

The topics she plans to cover include:

  • Tips for communicating with People with Disabilities
  • Ways to improve accessibility of blogs
  • Making your writing accessible
  • Making job interviews accessible
  • Making job postings accessible
  • Increasing your attitude’s accessibility

On the other ideas list:

  • How to make locations more accessible
  • Simple customer accommodations

She’s looking for other topics her readers would be interested in, so pop over to her blog and leave your suggestion or question.

Update: Accessiblity 101 Tips Launched

The Accessibilty 101 Tips series was launched May 13, 2008. Glenda’s first guests were Emese Szücs, Manager of Accessibility Programs, and Karen Thompson, Project Coordinator, from Social Planning and Research Council of British Columbia (SPARC BC) discussing Access is Everyone’s Business. This first interview discusses a few simple things businesses can do to make their businesses more accessible.

You will be able to find all the tips under Accessibility 100 at Glenda’s Do It Myself Blog.

Custom Error Pages

Have you ever visited a website where you clicked a link and were taken to a none descript error page? Maybe you clicked a link on another website or in the search engine results and ended up at an error page. This is because the website you are visiting (or trying to visit) does not use custom error pages.

As a website visitor, wouldn’t you find something like this a little more useful:

404 error page sample

Than seeing something like this:

404 Not Found error sample

What are Error Pages?

Error pages are web pages shown to the website visitor when something has gone wrong with the web page they have requested. They will also been shown when there is a server error.

Common errors you may encounter:

  • 403 Forbidden

    You have requested to view a web page or directory to which you are not allowed.

    The webmaster may have put security in place so that certain web pages are not available to the general public (you have to be logged in to view) or that certain directories on the web server are not available for viewing.

  • 404 Not Found

    The web page you requested cannot be found on the web server.

    This is caused by:

    • A link to a non existing page was clicked.
    • A page has been moved or renamed and the web designer did not put a permanant 301 redirect in place.
    • Someone found an old listing in a search engine or directory results and clicked it.
    • The user made a typing error when manually typing the url of a web page.
  • 500 Internal Error

    There’s something wrong on the web server and it cannot process your request or update.

What are Custom Error Pages?

Custom error pages are pages shown to your website visitors which match your website theme when an error has occured within your website. The error can be caused by different things, the most common is the 404 – File Not Found error.

How Do I Create a Custom Error Page?

Note: Consult your web hosting documentation how to implement custom error pages, if allowed. A free web hosting account or when a hosted solution is being used, you may not be able to use custom error pages.

  1. Start by taking a copy of your website template and saving it with the appropriate name for the error you are creating it for. Consult the web hosting documentation as to the naming convention you should use.
  2. Include in the body (content) area:
    • a precise description of what has happened, written in plain english, not a techical explaination.
    • a search box if you have website search enabled on the website.
    • a link to the website sitemap. (the traditional type, not to be confused with the sitemaps for Google or Yahoo)
    • a list of possibly related links.
    • a contact form (or link to) so the visitor can notify you of the error.

    For more ideas on creating a custom error page, refer to:

    The Perfect 404 – Article on creating the perfect custom error page by AList Apart.

    Improving the Dreaded 404 Error Message – An article by usability expert Jacob Nielsen on creating a user friendly custom error page.

  3. Make the links to the images and styles for the page absolute as you may not know in advance what the relationship between your error page location and the page requested will be.
  4. Add the necessary server side instructions to implement your custom error pages.

    On an Apache server you would use the .htaccess file for example. Consult the web hosting documentation for what they require.

Further Reading on Custom Error Pages

3 Ways to Turn Your 404 Error Page Into a Marketing Asset

Trap 404 Errors on ASP and Report to Webmaster 404 Error Report – Used to catch 404 errors and report them to the webmasters email address. Also gives user a friendly message.

404 Research Lab – Research and information on custom 404 error pages.

Create a custom error page on 1and1 Linux Hosting

Custom Error Pages for Blogs:

Do It Yourself 404 – contains techincal information for different web servers.

A More Useful 404 – A List Apart

Designers Creative Solutions for Necessary Error Pages

25 Beautiful 404 Error Pages

60 Really Cool and Creative Error 404 Pages

404 error, File not found: What your custom error pages must contain!

“The Page Can’t Be Found” Coolest Error 404 Pages In Web Design

How To Design a 404 Page That Keeps Visitors On Your Site

Website Navigation

Website navigation is important to the sucess of your website visitor’s experience to your website. The website’s navigation system is like a road map to all the different areas and information contained within the website.

Using a consistent navigation scheme from page to page helps the website visitor learn your website navigation system.

Types of Website Navigation

There are different types of website navigation:

  • Hierarchical website navigation

    The structure of the website naviation is built from general to specific. This provides a clear, simple path to all the web pages from anywhere on the website.

  • Global website navigation

    Global website navigation shows the top level sections/pages of the website. It is available on each page and lists the main content sections/pages of the website.

  • Local website navigation

    Local navigation would the links with the text of your web pages, linking to other pages within the website.

Styles of Website Navigation

Styles of website navigation refers to how the navigation system is presented.

  • Text Links

    Text links are words (text) which are surrounded by the anchor set of tags to create clickable text which takes the visitor to another web page within your website, a downloadable document from your website, or to another website on the Internet.

  • Breadcrumbs

    Breadcrumb navigation shows the website visitor the path within your website to the page they are currently on.

  • Navigation Bar

    A navigation bar is the collection of website navigation links all grouped together. A navigation bar can be horizontal or vertical.

  • Tab Navigation

    Tab navigation is where the website navigations links appear as tabs, similar to the tabs you use in a binder to divide the contents into sections.

  • Sitemap

    A sitemap is a page within your website that lists all the sections and web pages (if you don’t have too many) that are contained within the website. This is different from Google Sitemaps and Yahoo Sitemaps.

    A traditional sitemap provides navigation for your website visitors should they get lost, a shorter path to the different areas of the website for those who know what exactly they are looking for and a means for the search engines to find all the pages within your website.

  • Dropdown Menu

    A dropdown menu is a style of website navigation where when the visitor places their mouse over a menu item, another menu is exposed. A dropdown menu can include a flyout menu (see next item).

    A dropdown menu system can create accessibility issues and a problem as far as the search engines not being able to read the links in the menu, but if constructed properly, these issues can be overcome.

  • Flyout Menu

    A flyout menu is constructed similar to the dropdown menu. When the visitor places their mouse over a link, another menu “flys out”, usually to the right, from the link where the mouse is placed.

    Flyout menus face the same challenges as dropdown menus but if constructed properly, they can be accessible and readable by the search engines.

  • Named Anchors

    Named anchors are the type of links that take you directly to a spot on the current page or on another web page.

Website Navigation Use

To be effective, the website navigation system needs:

  • To be consistent throughout the website.

    The website visitors will learn, through repetition, how to get around the website.

  • The main navigation links kept together.

    This makes it easier for the visitor to get to the main areas of the website.

  • Reduced clutter by grouping links into sections.

    If the list of website navigation links are grouped into sections and each section has only 5-7 links, this will make it easier to read the navigation scheme.

  • Minimal clicking to get to where the visitor wants to get to.

    If the number of clicks to the web page the visitor wishes to visit is minimal, this leads to a better experience.

    Some visitors can become confused or impatient when clicking a bunch of links to get to where they want to be. In large websites, this can be difficult to reduce. Using breadcrumbs is one way to help the visitor see where they are within the website and the path back up the navigation path they took.

Creating the website navigation system at the planning stage of the website will effect the overall design of the web page layout and help develop the overall plan for the website.

Further Reading

Jakob Nielsen’s Alertbox Newsletter of March 31, 2008 points out:

“Between the ages of 25 and 60, people’s ability to use websites declines by 0.8% per year — mostly because they spend more time per page, but also because of navigation difficulties. …problem is that people have more trouble navigating websites as they age….”

Middle-Aged Users’ Declining Web Performance (Jakob Nielsen’s Alertbox)

Don’t Make Me Think,A Common Sense Approach to Web Usability, Second Edition by Steve Krug is a short book written for web designers, website owners and anyone else involved in the development of a website. Well worth reading as Mr. Krug works through website navigation and other issues related to the usability of websites.

Web Pages That Suck and Son of Web Pages That Suck by Vincent Flanders and co authors is another good set of books to read. Mr. Flanders coined the phrase “meatless navigation” for navigation systems that leave the website visitors clueless as to what each symbol in the website navigation is for.

Colour blindness on the Web is written by a person with colour blindness. Within the article he points out:

“…aspect of red-seeming-black that causes me problems on the Web. The issue arises when designers specify links to be dark red but don’t underline or embolden them. This means the link is indistinguishable from the rest of the text. …So be careful with your link colours (or simply make sure they are all underlined or emboldened)…”

Colour blindness on the Web

Importance of link architecture – Part of Google Webmaster Central Blog’s Linking series October 2008.

“…Link architecture—the method of internal linking on your site—is a crucial step in site design if you want your site indexed by search engines….”

Importance of link architecture.

Search Engine Friendly Design

When looking into having a website created for your business or how you can improve your existing website’s results through the search engines you will often hear and see the buzz words “Search engine friendly”. Creating a search engine friendly website has two main parts:

  1. Search engine friendly website design.
  2. Search engine optimization.

A third part, if you are creating a dynamic website (a website that uses a database e.g. an ecommerce website) then you need to consider search engine friendly web development also.

In this article we are going to concentrate on search engine friendly design.

What is Search Engine Friendly?

Generally, search engine friendly means to have a website that has been built which the search engines will visit, find out all about your website and include it in their index.

This does not mean to have your website built just to please the search engines. The website should be built to suit your target audience first, then incorporate techniques to help the search engines add your website to their databases.

There different techniques used to create a search engine friendly design.

Search Engine Friendly Website Design

While discussing the design of the website with your designer there are a few things to keep in mind to create a search engine friendly website design:

  • Images, Javascript and Flash

    Search engine do not see (read) images, javascript or Flash as of this writing. A search engine bot (the little program that travels the internet looking at websites) only reads text. Therefore, all important information needs to be actually coded into the web page.

    Update June 30, 2008 – Google and Yahoo have partnered with Adobe to use technology that will make Flash files readable by these two search engines. Search Engine Friendly Flash

  • Crawlability

    A search engine bot does what is called crawling. It uses the links on a web page to find other pages within the website and on the internet. This means that your links need to be in a format the search engine bot can read. So going back to our first point, search engines do not read javascript, you have to make sure that any fancy menus used can be read by the search engine bot or provide regular links to those pages for the search engine bot to find.

    Providing a sitemap not only helps your visitors if they get lost, it helps the search engine bot find the rest of the pages on your website.

  • Frames

    You have seen websites built with frames, those sites where you see additional scrollbars within the web page. This is not a search engine friendly design.

    In the background coding all there is for the search engine bot to see are the links to the pages that are used to build the page you see.

  • Splash Pages

    Splash pages are the introduction pages you see on some websites. They do not contain a whole lot of content, usually a picture or a Flash introduction and a single link to enter the website. There is no content on these type of pages for the search engine bot to evaluate and add to the search engine database.

There is a series of articles entitled Web Page Content Search Engines See which covers some other design issues related to building a search engine friendly design.

To learn more about search engines and how they work, see the Search Engine Optimization series of articles available at HTML Basic Tutor.

Once your website has a search engine friendly design, you can then work on the search engine optimization of the content you will be adding.

Search Engine Friendly Design Updates

June 3, 2008 Google updated their definition of doorway pages. They have also updated other SEO documentation.

Search Engine Friendly Design Related Reading

The Importance of Page Layout in SEO

…”A search engine doesn’t really want to pay too much attention to sections of a page that it might consider noisy, such as navigation bars, or banner or targeted ads when extracting information from a page….

…That most significant element of the page would be based on the amount of weighted content of elements and the position of the elements within the page as approximated by the visual layout process….

Also at SEO by the Sea, Google and Document Segmentation Indexing for Local Search.

The “Design” Part Of Search Engine Friendly Design

“…Allocation of screen real estate, use of color, font/typeface selection and formatting, use of graphic images and multimedia elements, file format, categorization, and labeling are important components of the design process. A person who truly comprehends search-engine friendly design knows how to combine all of these elements to meet user expectations, accomplish business goals, and meet the terms and guidelines set forth by the major web search engines…”

Standards Compliant Coding

Some web designers and web developers advertise on their websites and blogs that they use only standards compliant coding. Others write on the cost of not standards compliant coding. As a small business owner or a novice website creator you might not know exactly what standards compliance coding is, nor why you should take this into consideration when having a website designed or selecting a template. So, what is this standards compliant stuff all about?

What is Standards Compliant Coding?

There is a group called the World Wide Web Consortium (W3C) that creates standards for technologies used on the web. Each part of the different technologies has a set of specifications (standards) set out for web designers and browsers to follow so everything on the web gets along.

For example, there are standards for HTML coding. HTML coding is what presents a website in the browser you are using.

Each browser interprets the HTML standards a different way, especially some of the fancier techniques used to create a website.

What Difference Does Using Standards Compliant Coding Make?

How your website is coded can affect how it is presented in the web browser your visitor is using.

A website created using old technology or browser specific coding can cause your website to break (also known as crash) in your visitor’s chosen browser.

By using standards compliant coding, the presentation attributes (the coding that makes the website look pretty) are moved to a separate file called an external stylesheet, leaving just the basic HTML coding required to present the web page content. This will make your web pages:

  • appear to load quicker.
  • easier to read for the search engines.
  • easier to read for those who use technology to read web pages to them.
  • render in any browser your visitor chooses to use.
  • will be easier to upgrade as web technology advances.
  • cheaper to maintain.

Note:  Some tweaking of the external stylesheet may be required to make special effects work in all browsers. As mentioned above, each browser interprets the HTML elements (tags) differently but an experienced web designer will know how to overcome these problems.

How Do I Determine a Web Page is Standards Compliant?

There are various tools on the web to check that the HTML coding of a web page is using valid standards compliant coding. The W3C has it’s own markup validation service which we recommend you use as it would be most up to date.

Before you can check a web page is standards compliant the web page coding needs to contain:

  1. A DOCTYPE declaration.

    The DOCTYPE declaration tells the validator (and the browser) which (X)HTML standard the web page is coded in.

  2. A character encoding specification.

    The character encoding specification tells the validator (and the browser) what character set is being used within the web page.

  3. A properly constructed web page.

    A web page has a document structure. If this is not followed properly, the web page will not validate and can cause problems for the more standards compliant browsers.

If you want to test your own work, a website template or a web designer’s work then:

  1. Copy the URL (web address in the address bar of your browser).
  2. Go to the W3C’s validation service.
  3. Paste the URL in the box provided for Validate by URI.
  4. Left click the Check button.

The validator will check the (X)HTML coding for the selected web page and return if it is valid.

If you see something like this:

This Page Is Valid XHTML 1.0 Strict!

Then the web page contains valid (X)HTML coding.

For those creating their own web pages and they have not yet been posted to the webspace the W3C offers:

I Have Heard Standards Compliant Coding Costs More

A web designer or web developer who has kept up their training to the current standards would be knowledgeable about standards compliant coding. Generally, it does not take any more time to actually code a web page to be standards compliant. There is a bit of time required to properly plan how to layout the website project and how to create the web page and it’s accompanying files efficiently.

A website project price for a standards compliant website might be a bit more because you are paying for the expertise it takes to create the website. You will have to consider whether having a website that is viewable by all your visitors is more important than having a website that will annoy potential customers and drive them away.

Other Code Validation Services at the W3C

Further Reading on Standards Compliant Coding

Standards Compliant Coding and SEO (Search Engine Optimization)

Custom Web Design vs Website Templates

As a business owner you are always looking how to save money and make your business profitable. When it comes to creating an online presence for your business, just like your marketing materials and office’s appearance, your website needs to project a professional image. The more professional looking your business appears, the more creditable it looks.

Many business owners don’t really understand the difference between having a custom web design done and using website templates. In this article we’ll look at both ways of having your website built and the costs involved.

Custom Web Design

Many think having a custom web design is too expensive but let’s look at the advantages of hiring a web designer over using a free website template or purchasing one.

Benefits of custom web design:

  • Unique design.

    With a custom web design it is created just for your business. Your website will be different from anyone else’s.

  • By hiring the right web designer, it will be constructed so it is search engine friendly.

    How the background coding of your website is done will influence your success in the search engines.

  • The website will be more adaptable to your company’s needs.

    If you have done your website planning, you will have a list of features you wish to have. By prioritizing this list of website features, you will give the web designer an idea of what to accommodate for in the future if your current budget doesn’t allow all the features to be implemented from the start.

  • Scalability.

    Just like adaptability, if you have planned what you want in the future for your website, a good web designer will take this into consideration as they select the technologies to use while building the website.

Other points to take into consideration when deciding if custom web design is for you are:

  • Are you planning to maintain the website yourself?

    If you do not intend to learn how to code a website (or have someone on staff that can do this well) then you are going to have to request that a content management system be incorporated into the web design. There are limitations on some content management systems so be sure to review our Choosing a Content Management System article so you ask all the right questions about the proposed content management system the web designer is planning on using.

  • Are you permitted to use the graphics created for the website for other purposes?

    The website design should incorporate your company’s branding. If you have already established your company branding, then that branding should be incorporated into the website.

    For a business that hasn’t established a branding or is under going a revamping, then you are going to want to know if you can use the graphics on the website elsewhere, like your letterhead, brochures and signage to mention a few. This will increase the price of the custom web design, but then you will have everything match.

Another idea if considering a custom web design is, just have a template made incorporating the website theme. You can then, if you have the skills, recycle the template theme to create the web pages for your website.

Website Templates

There is a misconception on how beneficial and economical using free website templates or purchased website templates is. Let’s look at some points about website templates:

Website templates are good for:

  • Getting inspiration on colours, layouts and features.

    You cannot have your web designer copy these, but they do give the web designer an idea of the look you would like.

  • Very low budgets where you need to get up and running as soon as possible.

    If budget is holding you back from getting your business up on the Internet, then maybe a website template might be the way to go.

  • Shorter development time.

    It would appear that using a website template would include a shorter development time required for your website. Not really, read on.

Now onto other considerations when choosing a website template.

Using website templates do have some downfalls:

  • There is going to be a ton of other people using the same template.

    Unless you pay the “Exclusive” price for the template, the template website is going to keep selling that same template to anyone that comes along. Keep in mind, even if you pay the exclusive price, there are others who have bought the template prior to you and they still have the right to use it.

    If it’s a really appealing template, there may be lots of other people who have already bought that very template.

  • You will be limited on the customization of the website template.

    Without web page coding skills, you are still going to have to either spend the time and money to learn how to code a web page or hire someone to help you.

    Some templates are laid out very specific. Meaning if you incorporate your own graphics or have extensive content, the template could break.

  • Some website templates are not built to be search engine friendly.

    As explained above, it is important how the background coding of your website is done. If not done correctly, it could hurt your marketing efforts on the internet.

  • Antiquated coding.

    If the website template uses antiquated coding, it might not work in all browsers.

    Browser specific features are another sign of antiqated coding.

Custom Web Design or Website Template?

When deciding if a custom web design is the way to go or if a website template is a better choice keep in mind that you want your business to stand out from the crowd and be memorable.

In either case, you are still going to have to do some work to get up there in the search engine results. Having a website that looks nice is only part of the internet marketing package. You will have to research the phrases that your target audience would type in the search box to find you then incorporate those phrases into the content of each of your pages.

To maintain or build the website yourself you are going to have to invest some time (and money possibly) into learning all there is to building a web page.

Now, sit down and figure out exactly how much each method of building the website is actually going to cost. Include the time it is going to take you learn whatever you need to learn to use a website template and compare that to the cost of a custom web design where you will have time to market or build your product in the same time frame.

There is an old saying:

“Time is money”
Author Unknown

Keep that in mind when choosing between custom web design and website templates.

Blog Tag

Ok, my good friend Cricket Walker has tagged me.

This is new to me, I don’t usually participate in blog tag.

Here’s my rules:

  1. You can do anything you set your mind to! Honest.
  2. Even if you think you are too old to learn something new, try it anyways, it will keep your mind fresh and active.
  3. Being organized helps keep things less stressfull.
  4. Don’t go half way. Even if it is taking longer to accomplish the goal or task, keep with it, it will pay off in the end.
  5. Vacations are the rework for all your hard work.

Now, I’m supposed to tag someone else. I tag Glenda Watson Hyatt, the Left Thumb Blogger. An inspiration to us all.

Web Hosting Checklist

Expanding upon the web hosting checklist we started in our small business web hosting article, here’s some more features to consider when making your decision on a web hosting company:

Control Panel

A control panel is used to maintain your webspace. There can be links or icons on the main page of the control panel used to access different features of the webspace.

  • add or delete features
  • add or delete email addresses
  • check your website statistics
  • monitor your webspace usage
  • monitor your website bandwidth usage
  • list of what programming and types of databases can be used
  • list of databases you have setup
  • access to setup and maintain your databases

These are just a few of the things you should look for in the web hosting’s control panel. If they don’t list what is available on their list of webspace features, check out the support and frequently asked questions sections of the website.

FTP Access

FTP (file transfer protcol) is the process of transferring files across the internet from the web server to a computer and back again.

This is a useful feature because it enables you to build or work on your website right on your computer and then transfer the updated files to the webspace via special software called FTP software. There are for purchase FTP software programs and there are also open source (free) programs.

Some HTML editors have a built in feature to accomplish this (FrontPage, Expression Web, Dreamweaver, GoLive, to name a few) but these may need extra setup on the web server to accomplish this. Where as, having FTP access does not, the web server just has to be able to accept FTP connections.

The ability to use FTP is important for backing up your website.

This is definitely something to add to your web hosting checklist.

Microsoft FrontPage Extensions

If you or your web designer are using special features created by FrontPage you may need FrontPage extensions. You’ll have to check how the web pages are being built to determine if this is a necessity.

Providing FrontPage extensions may be an extra to the web hosting package.

Update:Microsoft FrontPage extensions are no longer supported by Microsoft therefore web hosting companies are not offering this anymore, well, most.

Password Protected Directories

If your website is going to require sections of your website to be password protected (meaning a person has to have a user name and password to access the area) then you need a web hosting plan that allows this.

Custom Error Pages

When the web server can not find a page, access to an area of the website is denied or there is a server error an error page is shown to the visitor. You may have seen sites where you get a generic “Sorry but….” page that is sent by the web hosting company’s server.

You may have also seen errors pages where they are styled exactly like the rest of the website. These are custom error pages.

Being able to create your own custom error pages is important so the visitor does not feel lost. They know they are still on your website but there has been an error. You can also help them out on the error page by providing suggestions as to where they might have intended to go or a site map to help them find their way to where they intended to go.

Definitely something to be on your web hosting checklist!

Secure Server Access

Ever noticed in the address bar that there’s https: at the beginning of the web page address? Or the browser may have a closed lock showing. These indicate you are in a secure area of the website.

If you are going to process sensitive information, such as credit card or detailed personal information, then to give your visitor the confidence to provide this information, you are going to need secure server access.

You can buy a security certificate for your website at an extra cost if required.

Sub Domains

Sub domains are subsections of your website. A large website may have a sub domain for different areas of their business (e.g. Yahoo uses a sub domain for their finance section, finance.yahoo.com) A smaller website might have their blog on a sub domain or their shopping area.

Being able to do this in the future is something to consider, even if it’s not in your immediate plans for the website.

Database Support

Database support may not seem important when first starting your online business but keep in mind that later on, when you realize the benefits of blogging or decide to add a database driven shopping catalog to the website, you will need this available in your web hosting package.

Email Accounts

To look like a professional business you will need to be able to setup email accounts at the web hosting that include your domain name.

The number of email addresses you will need will depend on the size of your business.

Being able to use POP3 / IMAP4 / Web Mail Support are all important features to add to the web hosting checklist.

Web mail is for when you check your email via the web. A great feature if you travel.

With POP mail access you can setup your email program to pickup and send mail via your computer or laptop.

Webspace Storage

Webspace storage is the amount of web server space you are renting from the web hosting company. The more pictures, pages, movies, downloads and/or databases you are going to use, the more space you require.

A basic traditional website would have to have a lot of pages and images to fill 50mb of webspace for example.

Bandwidth

Bandwidth is how much of the web hosting’s web servers resources you use to present your website and/or your visitors use viewing or downloading movies or files from your website.

The more pictures, files for download and movies available on the website, the more bandwidth you will be using.

This is something to consider when writing your web hosting checklist.

Server Side Includes

Server side includes are a method of including sections of a web page when the web page is shown. These are different than FrontPage, Expression Web and design time includes.

You will have to check with your web designer if they intend to use server side includes as this may be something that has to be on your web hosting checklist.

Finalizing Your Web Hosting Checklist

Above were some basic web hosting features to look for and add to your web hosting checklist.

Double check your features list that you made when assessing your target audience to see if any additional items need to be added the web hosting checklist for your particular project.

Now you have your web hosting checklist complete, and once you have your website built, it’s time to secure quality web hosting.

Further Reading on Securing Web Hosting

Web Hosting Consumer Guide: 9 Tips You Should Know

Opening the Lines of Communication

I'll Do It Myself book cover

With the advant of computer technology, the internet, blogging software and assistive technolgy a whole line of communication has become available for those living with disabilities. Today we’d like to share how technology has been key in opening the lines of communication for a person living with cerebral palsy.

Previous we hosted an interview with Glenda Watson Hyatt, a woman with cerebral palsy who is a business woman and has written and published her own autobiography.

Wondering how she’s doing?

December 2010:I’ll Do It Myself is now available for your Kindle.

YouTube Video Introduces the Left Thumb Blogger

Today, Glenda posted a video showing how she blogs using only her left thumb and assistive technology.

The video shows how she writes entries for her blog using only her left thumb, a joystick and special software that helps her complete words as she types. She also uses software to speak in the video.

This video was produced by her husband who also has cerebral palsy.

It is truly amazing how these two just won’t let their disability stand in the way of being successful business people!

On the Road Again

This summer Glenda was back on the road again with her virtual book tour.

On this tour she visited:

  • Thousand Oaks, California, USA
  • Esterhazy, Saskatchewan, Canada
  • Scottsdale, Arizona, USA
  • Southport, Queensland, Australia
  • Sterling, Virginia, USA
  • Bolingbrook, Illinois, USA
  • Terre Haute, Indiana, USA
  • Australia Capital Territory, Australia
  • Cleveland, United Kingdom
  • Brisbane, Queensland, Australia

That poor old left thumb must be plumb tuckered out!

Left Thumb Blogger to Attend Blog World Expo

Glenda and Darrell are going to the Blog World Expo in Las Vegas!

How cool is that!

The Left Thumb Blogger Celebrates the Magical W-List

Glenda has been added to the Top 20 PR PowerWomen go Everywhere — the W-List.

Blog for a Year

In pursuit of fulfilling a childhood dream of writing to share her personal experiences of living with cerebral palsy, Glenda has entered the Blog for a Year contest.

The winner wins a paying blogger position for a year.

January 8, 2008 Update:

  Glenda didn’t win the Blog for a Year contest. She came in Third. Congrats Glenda! This is a great accomplishment.

But….she did get a pro blogging position writing 1-3 posts per week at Disaboom as of December! Her first post, Finding Creative Workarounds within Arbitrary Limitations, was published January 7, 2008.

Left Thumb Blogger Nominated for a Canadian Blog Award

Glenda has been nominated for a Canadian Blog Award!

Blogging Opening the Lines of Communication for the Disabled

This is just one example how the internet, blogging and technology has made life enjoyable and successful for those less fortunate.

How the Internet Has Helped Others

“The internet was made for deafblind people
Equipped with a screen reader and a braille display, the online revolution has been life-changing for many deafblind people.”

The internet was made for deafblind people continued.