I would encourage webmasters to design pages for users, not just search engines. When you're designing your AJAX site, think about the needs of your users, including those who may not be using a JavaScript-capable browser (for example, people who use screen readers or mobile devices). One of the easiest ways to test your site's accessibility is to preview it in your browser with JavaScript turned off, or to view it in a text-only browser such as the Lynx browser. Viewing a site as text-only can also help you identify other content which may be hard for Googlebot to see, such as text embedded in images or Flash.
Whilst in the mode of testing, consider reviewing the browser screen resolution. I feel that it is important to test a web site in as many ways as possible. View it in different screen resolutions, various computer platforms and different browsers. Find out how your web page looks like with the viewer's monitor set to different screen resolutions as you want to be sure your visitor can see everything or at least the important navigation links:
Browser Shots - My Favourite
http://browsershots.org/
Browser Screen Resolution Checker - Markhorrell
http://www.markhorrell.com/tools/browser.html
Screen Size Tester - AnyBrowser
http://www.anybrowser.com/ScreenSizeTest.html
Screen Resolution Checker - AndyLangTon
http://andylangton.co.uk/stuff/screen-resolution-checker
Showing posts with label usability. Show all posts
Showing posts with label usability. Show all posts
Friday, August 13, 2010
Monday, August 2, 2010
ALT tags for images - usability and SEO
The hidden text. Remember that Google and search engines are smart, but they don't have eyes looking at the page itself, so use the code to determine what is happening. NEVER ever, forget to put ALT tags for images in pages, and again, be descriptive and keyword focused.
ALT tags are of course a very good design methodology to utilise as they are required for disabled visitors to your site who may be viewing with a speech device that reads the content on the web page out aloud. And of course there are still other web browsers that allow users to “turn off” images when browsing… this is an approach used by users on very poor line connections or bandwidth starved who just want to get to the good stuff!
ALT tags are designed to ensure that the Internet is usable for everyone, irrespective of handicap or impediment. The Australian Government has been vocal about enforcing the use of ALT tags in the past, and it is always a good idea to ensure that they are used throughout a site.
Every image should have an ALT tag, and these should either describe what an image is, or where an image leads to if it is a link. E.g., if an image is a picture of a man standing on a mountain and links to a page about South American tours the image’s alt tag should read as follows: <img src="image_name.gif" width="10" height="10" align="middle" border="0" alt=“Information on Peru & Bolivia tours” />
ALT tags should be kept short, no more than 10 words, and should not repetitively use keywords. This is referred to as “keyword stuffing” and is likely to get a site either flagged for spamming, or outright banned.
Google will only read ALT tags for images that are links, and many other search engines are aware of the past strategy of keyword stuffing in ALT tags. For Organic SEO purposes, ALT tags are often very important due to the extensive use of image-based navigation. For sites that use such a navigation structure, it is important that ALT tags are added to the images in order to maximise the benefit of Link Reputation.
ALT tags are of course a very good design methodology to utilise as they are required for disabled visitors to your site who may be viewing with a speech device that reads the content on the web page out aloud. And of course there are still other web browsers that allow users to “turn off” images when browsing… this is an approach used by users on very poor line connections or bandwidth starved who just want to get to the good stuff!
ALT tags are designed to ensure that the Internet is usable for everyone, irrespective of handicap or impediment. The Australian Government has been vocal about enforcing the use of ALT tags in the past, and it is always a good idea to ensure that they are used throughout a site.
Every image should have an ALT tag, and these should either describe what an image is, or where an image leads to if it is a link. E.g., if an image is a picture of a man standing on a mountain and links to a page about South American tours the image’s alt tag should read as follows: <img src="image_name.gif" width="10" height="10" align="middle" border="0" alt=“Information on Peru & Bolivia tours” />
ALT tags should be kept short, no more than 10 words, and should not repetitively use keywords. This is referred to as “keyword stuffing” and is likely to get a site either flagged for spamming, or outright banned.
Google will only read ALT tags for images that are links, and many other search engines are aware of the past strategy of keyword stuffing in ALT tags. For Organic SEO purposes, ALT tags are often very important due to the extensive use of image-based navigation. For sites that use such a navigation structure, it is important that ALT tags are added to the images in order to maximise the benefit of Link Reputation.
Wednesday, July 21, 2010
SEO with Breadcrumb Navigation
Breadcrumb navigation shows the user's path to their current location, and should be located at the top of the page.
Breadcrumb navigation is wonderful for both usability and for SEO. This text-based navigation shows where in the site hierarchy the currently viewed web page is located and your location within the site, while providing shortcuts to instantly jump higher up the site hierarchy.
Example from Google's Webmaster section:
Google Help > Help Center Home > My site and Google > Creating a Google-friendly site > Working with AJAX-enhanced sites
If the breadcrumb contains text links with relevant keywords in the anchor text, that is a significant SEO benefit. The anchor text provides the search engines with an important, contextual clue as to the topic of the linked page. That equates to improved rankings.
One throwaway phrase that’s used almost universally within breadcrumbs is “home.” Try revising that link to something more search-optimal version of the anchor text with words like “computing” or “IT” or “technology” along with perhaps “store” or “products” that is site relevant.
You should also consider the amplifying effect of breadcrumb navigation. A link in the breadcrumb will be “voted for” more times if that linked page is higher up in the site hierarchy and if there are more pages underneath that page in the hierarchy. A supercategory page receives more internal links than a subcategory page. A category page covering hundreds of products will receive more internal links than one with only a dozen products in the category.
Breadcrumb Separator (for Horizontal Breadcrumbs)
Here is a summary of what designers tend to use as separators:
67% Right Arrow
10% Pipe
9% Colon
5% Slash
3% Left Arrow
3% Bullet
3% Text Treatment
Orientation of Breadcrumbs
95% Horizontal
5% Vertical
Breadcrumb navigation is wonderful for both usability and for SEO. This text-based navigation shows where in the site hierarchy the currently viewed web page is located and your location within the site, while providing shortcuts to instantly jump higher up the site hierarchy.
Example from Google's Webmaster section:
Google Help > Help Center Home > My site and Google > Creating a Google-friendly site > Working with AJAX-enhanced sites
If the breadcrumb contains text links with relevant keywords in the anchor text, that is a significant SEO benefit. The anchor text provides the search engines with an important, contextual clue as to the topic of the linked page. That equates to improved rankings.
One throwaway phrase that’s used almost universally within breadcrumbs is “home.” Try revising that link to something more search-optimal version of the anchor text with words like “computing” or “IT” or “technology” along with perhaps “store” or “products” that is site relevant.
You should also consider the amplifying effect of breadcrumb navigation. A link in the breadcrumb will be “voted for” more times if that linked page is higher up in the site hierarchy and if there are more pages underneath that page in the hierarchy. A supercategory page receives more internal links than a subcategory page. A category page covering hundreds of products will receive more internal links than one with only a dozen products in the category.
Breadcrumb Separator (for Horizontal Breadcrumbs)
Here is a summary of what designers tend to use as separators:
67% Right Arrow
10% Pipe
9% Colon
5% Slash
3% Left Arrow
3% Bullet
3% Text Treatment
Orientation of Breadcrumbs
95% Horizontal
5% Vertical
Subscribe to:
Posts (Atom)