So this post will (almost) totally ignore SEO, and focus purely on some small changes I would make to the website of the Vhi, Ireland’s dominant private health insurance company, in order to improve UX by 100%.

Vhi – Voluntary Health Insurance (vhi.ie)

As a long-time Vhi customer I’m always delighted with the friendly customer-centric approach of their staff. Whenever I call their landlines the vibe and response of their call centre staff is quite inspirational. Seriously – I’ve never had a bad experience calling these guys.

But does that translate to a great online experience?

Replicating the Offline Experience to your Online Channel

Unfortunately for me the simple answer is no – I always find the UX on their website far less compelling. So I’ve put together 5 simple actions I would take to improve the online experience. My top tip is so simple, but incredibly the issue it fixes is quite likely losing Vhi sales. I’ll go in reverse order, keeping the best till last:

If it’s a button don’t tell me to ‘click here’…

I did say ‘if’. This is a pet hate of mine, but I think many people would agree. If you have to tell me to ‘click here’ so I know an element is a button then the element isn’t doing its job:

Click here.. oh it’s a button?

4. I’d love to talk…

These days there is real global push on business efficiency. And many companies are directing support and customer service to more effective communication channels. Judging by the Vhi site they must feel that email is more efficient than the phone line. How can I tell this? The phone number is buried 2 clicks from the homepage. Here’s what you see when you click the ‘Contact’ utility link in the header:

VHI Contact Page

Firstly – no phone number. Instead a form. Something that’s been borne out again and again through testing – users are put off by longer forms. I have a question about my policy and I’d like an answer now. Filling a (long) form doesn’t give me confidence that I’ll receive a timely and accurate answer. In fact, in my particular case I came to the site to find their phone number (as I’m sure many others do also). But I cant easily see any phone contacts. I’m certainly not being pushed into a phone session am I? (One thing I do like about this form is the ability to find my policy number – maybe I’m the exception to the rule, but my policy number is something I never have to hand.)

Without wanting to give away my next tip, there are in fact some further links to phone contacts. There not exactly screaming out however. Let me suggest a small change:

Using underline style helps links stand out

And again with some further styling changes:

Using conventional blue underlined links

And that leads me nicely to my next gripetip

3. Stick with convention – let the links be themselves

Over the past few years I’ve grown more and more convinced that convention is a good thing. When I land on a web page it’s great to easily and quickly identify either what I’m looking for, or how to get there. In the case of the latter using conventionally styled hyperlinks can be a real plus.

Here’s a page from Vhi’s Mutlitrip Insurance section:

Vhi Multitrip Insurance Homepage

And here’s another page one click deeper, the ‘How to Contact/Claim’ page:

Vhi Mutlitrip Insurance Contact and Claim Page

So can you tell where the hyperlinks are? OK – I did shrink the page to fit my blog, but even at that size you’d easily be able to see a blue underlined link. Here’s the last page, but this time using conventional styling on the links:

Example using conventional hyperlink styling

Did you notice that both original images used bulleted lists? But did you realise that one of those lists was actually live links while the other was not? That, in my opinion, confuses users. And confusion, or to be more correct, avoiding confusion, is one of the primary reasons I’m a convert when it comes to convention styling on links.

I know that occasionally blue links wont fit with the theme of your site, but I don’t think you should ever use purple non-underlined text hyperlinks. This is doubly confusing because, by convention, purple is the colour conventionally used to signify a visited link. It appears however that the styling used on Vhi.ie is purple non-underlined for links the user has already visited (did you notice that on the ‘Phone’ link in Point 4. above?). Not ideal in my view, and trivial to fix even for a large site like Vhi.ie (the joys of CSS!).

So there’s Tip #3 – within body content use conventional blue underlined text for hyperlinks, purple for visited links.

2. Show me where I am

Here’s the Vhi’s Multitrip Insurance page:

Multitrip Insurance Page – where I am within the site?

But if you landed on that page would you have any idea where you were on the site? Can you see any indication of your location within the hierarchy? There are some relatively simple ways to do this:

1. Use a current class on primary and secondary navigation – active class styling on the Products link in the main navigation, and similarly, on the ‘Multi Trip’ link in the secondary navigation.
2. Use a Breadcrumb to indicate current location – simple but effective tool that helps ‘ground’ users, and assist with internal navigation (and search engine optimisation)

Here’s what a breadcrumb device might look like on that page:

Use a breadcrumb to indicate current location

So my pen-ultimate tip – give adequate indication of current location. It helps ground the user, and facilitates vertical navigation.

1. Where are you vhi.ie?

Here’s the biggest flaw, and also the easiest to fix. It still stuns me when I find this flaw, even more so for a large corporate site which is a profit-center in its own right. I’ve written about this issue previously for nch.ie, and here it is again. (And just in case you don’t think this is widespread – for months http://iedr.ie showed the same behaviour. This has since been fixed though.)

Requesting http://vhi.ie (non-www) resolves to a blank page

Here’s the link – try it for yourself

Now generally I would advise serving content on either www or non-www, but not both. If you do serve on both then you should ensure that each is the same.

This case however is the worst possible schenario – consider the number of Internet users who do not know the technical difference between www and non-www. Many less-savvy web users will not know to re-try www.vhi.ie when they see that blank page, and it should be a simple configuration change to ensure that both URLs resolve properly.

Given that www.vhi.ie is a transactional site fixing this issue will increase sales for Vhi.ie. Absolutely no doubt in my mind.

So there’s my #1 tip – don’t serve a blank page on http://vhi.ie

So there you have it – how in 5 quite simple steps I think Vhi.ie could improve their UX (and perhaps their SEO also) by 100%.

[Postscript: I first started writing this post in December 2007. It has sat in my drafts since then collecting dust. Luckily (for me anyhow) the VHI have not changed any of the behaviour I discuss above. I hope that might change shortly however.]

Have thoughts on this post? Head over and leave a comment on the blog: VHI.ie – 5 Simple Steps to Improve UX 100%

Follow RedCardinal on Twitter!

That’s the view you get if you visit their site in Lynx.

But as if that’s not bad enough, there is an even worse issue with this site which will seriously affect Lily O’Briens at the business level.

Being at SES London, and meeting guys who are literally making millions from SEO (some of these guys are billing €1k per hour), is teaching me that I shouldn’t be just giving away my knowledge. So in this case I’m going to keep my powder dry for the moment.

Have thoughts on this post? Head over and leave a comment on the blog: Blind People Can’t Eat Chocolate

Follow RedCardinal on Twitter!

Summary

The websites of a number of Government Departments, Agencies and Political Parties were tested for accessibility and coding standards. The sites were also checked for contemporary web technologies such as RSS.

Results Overview:

Government Department websites tested: 16
Valid CSS, (X)HTML & passing WCAG 1.0 Level A: 4 (25%)
Sites passing WCAG 1.0 Level A: 12 (75%)
Sites utilising RSS: 4 (25%)

Other Public websites tested: 18
Valid CSS, (X)HTML and passing WCAG 1.0 Level A: 0 (0%)
Sites passing WCAG 1.0 Level A: 12 (67%)
Sites utilising RSS: 2 (11%)

Political Party websites tested: 7
Valid CSS, (X)HTML and passing WCAG 1.0 Level A: 0 (0%)
Sites passing WCAG 1.0 Level A: 3 (43%)
Sites utilising RSS: 3 (43%)

Introduction

There is one entity that impacts daily on each of our lives. That entity is the Government.

The Irish government is the body tasked with the administration of the land of Ireland. As such the government is responsible for making the law, enforcing the law, and maintaining the welfare of the citizens. It is no surprise that the interface of citizen and government is one of the most important elements of any political system.

Technology is the new interface

The first Information Society Action Plan was published in January 1999 and in November 2001 Ireland had become the top performer in an EU benchmarking report on public service on-line delivery.

In March 2002 the Irish Government published “New Connections – A strategy to realise the potential of the Information Society”. The document set forth an action plan identifying key infrastructures that required development, one of which was eGovernment.

eGovernment

eGovernment refers to the use of information and communication technology (ICT) as an interface between the citizens and government of a nation. Most often the term refers to the use of the Internet as a communication platform to allow the exchange of information and the execution of processes that had previously been undertaken via direct human interaction.

Introduction of eGovernment is an EU-level policy, and part of a broader EU strategy to make Europe the most dynamic and efficient economic block in the world. ICT is seen as the key facilitator of this strategy:

The successes and potential of eGovernment are already clearly visible with several EU countries ranking amongst the world leaders. Electronic invoicing in Denmark saves taxpayers €150 million and businesses €50 million a year. If introduced all over the EU, annual savings could add up to over €50 billion. Disabled people in Belgium can now obtain benefits over the Internet in seconds, whereas previously this took 3 or 4 weeks. Such time savings and convenience can become widespread and benefit all citizens in Europe in many public services. (Source: COM(2006) 173 final)

ICT is also seen as an enabler and facilitator of inclusive strategies as set out by the EU.

The 2002 document makes a number of references to the availability and accessibility of government websites:

• 3.2.1 Website standards – Guidelines and standards for all public sector websites were produced in November 1999, building on best practice in relation to design, search facilities and accessibility guidelines.
• 7.2.7 Accessibility – Under the eEurope Action Plan, all public sector websites are required to be WAI18 (level 2) compliant by end-2001.

National Disability Authority

The National Disability Authority is a statutory agency tasked with policy development, research and advice on standards designed to safeguard the rights of people with disabilities.

Is the eGovernment interface accessible?

The purpose of the study is to measure the accessibility of the primary government agency websites. The websites of the main political parties were also tested as those organisations are inherently connected to the administration of a democracy through their stated goals and policies.

The following tests were conducted to ascertain a measure of web standards and accessibility:

1. W3C CSS validation service (here);
2. Visual inspection for W3C badges;
3. W3C Markup Validation Service v0.7.3 (here);
4. HiSoftware Cynthia Says Section 508 Validation service (here);
5. HiSoftware Cynthia Says WCAG 1.0 Priority 1 Validation service (here);
6. HiSoftware Cynthia Says WCAG 1.0 Priorities 1&2 Validation service (here);
7. HiSoftware Cynthia Says WCAG 1.0 Priorities 1&2&3 Validation service (here);
8. Total Validator Professional desktop HTML & Accessibility validation tool (available here);
9. WAVE WCAG 1.0 and Section 508 visual site overlay tool (here);
10. Usability analysis of page in text browser (Lynx);
11. Manual inspection of the mark-up to identify ‘cut-and-paste’ coding;
12. Visual inspection for RSS feed, search for auto-discovery of RSS feed (Firefox);
13. Visual inspection for blog;
14. Visual inspection for real-time chat function.

In this study the 3 automated accessibility validators were used and in some case supplemented by manual evaluation in the Lynx text browser. Tests were limited to the homepage of each site (in some cases an inner page was tested – e.g. where splash pages were used and the home page was therefore an inner page). All tests were conducted during the period 20-31 November 2006.

While these tests cannot be guaranteed to properly ascertain the accessibility of any webpage, they do serve to highlight a number of flaws that would ordinarily render a page inaccessible via screen-reading technology.

Why search for RSS, blogs, real-time chat?

The Internet is evolving. Buzzwords such as web2.0 are common place. In my view what we are seeing is not a change but a natural progression. Today’s Internet is about interaction, multiple-way dialogue, and innovative communication channels.

This study therefore includes tests for interactive techniques and alternative distribution channels.

RSS

Homepages were checked for RSS (Really Simple Syndication) feeds. RSS is fast becoming the de-facto transport for on-line information syndication (note the recent integration of RSS into the latest browsers from both Microsoft and Mozilla). In cases where a feed was not apparent on a homepage the Press section (or similar) was also checked.

It would seem both appropriate and desirable that any entity which relies on news agencies to broadcast their message would utilise RSS.

Blogs

While not appropriate for every context, blogs have been found to add transparency and openness within a political setting. Blogs also allow for meaningful dialogue between writer and audience.

Real-Time Chat

Used by the software industry for many years, real-time chat facilities allow Internet users to ‘chat’ with a support agent through a real-time messaging system.

Detailed Results

[NOTE: Please click on the above image for a larger resolution and an alternative accessible version.]

Is the eGovernment interface accessible?

The study tested a total of 41 websites: 27 sites passed the automated WCAG 1.0 Priority 1 (A) validation tests.

Of the Government Department websites tested 12 from a total of 16 were compliant with WCAG 1.0 Priority 1 (A).

The lack of RSS feeds on 12 department websites was a particularly odd result given the relationship of Government with the public and press, and the Government’s need to shape public perception through the news channels.

The websites of the main political parties were found to be lacking in terms of contemporary Internet technologies: Only 3 of the 7 party websites included an RSS feed and none offered multiple feeds targeting different content and audiences.

4 of the 7 party websites tested failed WCAG 1.0 Priority 1 (A), and none validated for valid CSS/HTML coding standards.

Is it all Bad News?

A positive feature of this survey was the number of Government websites that aspired for a higher standard of validation than the basic WAI WCAG 1.0 Priority 1 (A).

At least 4 sites displayed WCAG Priority 2 (AA) badges on their homepages. Unfortunately only 1 actually attained that level of Accessibility.

At least 2 sites displayed or made claim to WCAG Priority 3 (AAA) Accessibility, the highest level of accessibility, however none did validate to this standard.

Some websites tested stated a clear aspiration to achieve high accessibility and informed visitors of the ongoing effort toward attaining that goal.

Validation is a binary test – a site either validates or it does not. In some cases failure can be remedied with minimal effort, while in others achieving compliance with both WAI WCAG 1.0 and W3C coding standards will require a substantial undertaking.

Creating a website that complies with WCAG is perhaps the easier phase of providing an accessible website. Maintaining WCAG compliance is by far the most difficult area of website accessibility, even more so given the dynamic nature of many of the sites tested.

Web standards, such as those developed by W3C and WAI, are the foundation of the ‘Inclusive Web’. Websites which comply with these standards will ensure that the broadest spectrum of visitors can access their information and benefit from the full potential the Internet has to offer.

Lynx Browser Results

In cases where accessibility anomalies were flagged by automated evaluation tools the site in question was manually evaluated in the Lynx text-browser.

The search facility on a number of Government sites was found to cause practical accessibility issues:

1. Department of the Taoiseach:

Here is the mark-up for the search feature:

<form id="basicSearch" action="search.asp" method="get">
<div class="searchTop"><label for="searchWord" accesskey="4" /></div>
<div class="searchMiddle"><input class="searchFormInput" type="text" name="searchWord" id="searchWord" size="16" value="Enter keyword" /></div>
<div class="searchBottom"><input type="image" value="submit" name="search_go" id="search_go" src="/images/search/button_search.gif" alt="Search" /></div>
</form>


This is Andy Harold’s opinion on the above code:

This is an attempt to resolve the need to have a label tag and to put some default text in the text field. But appears to be done purely to satisfy accessibility checkers than real life requirements, and may even upset some screen readers. I’d say this is poor practice. The label should have some text within it and there shouldn’t be a ‘value’ attribute in the text field.

Putting default text in comes from 10.4 (Priority 3): Until user agents handle empty controls correctly, include default, place-holding characters in edit boxes and text areas. But this became outdated almost as soon as it was written, because all the user agents used by people with sight difficulties can handle empty controls. So the use of label tags meets all needs.

2. National Disability Authority

The mark-up powering the search facility:

<label for="query" accesskey="4">
<input name="q" id="query" title="Enter keywords to search for" value="" size="30" type="text">
<input title="Submit your search and view results" value="Search" type="submit">
</label>


Andy Harold’s opinion:

Enclosing input’s within a label is allowed by the standards so that you don’t have to supply a ‘for’ attribute as it the label implicitly refers to the enclosed input. Having the two inputs enclosed by the label, as in your example, makes this confusing. The fact that there is no text in the label tag makes this more confusing still. So although technically you can do this – ie passes automatic validation tests – it’s not the correct use of the label element and so wouldn’t be what a user agent (eg a screen reader) would be expecting and so may cause it problems. So, on that basis I wouldn’t pass it as P3 simply because it makes little sense.

Remember that the standards can’t cover every situation and so are purely there to guide you into making good decisions. In this case you could put some text in the label (and take the input elements out of it) if you really want it to be passed as P3. But if this makes the search facility too visually unappealing, just drop the label altogether. This may not make it technically ‘P3′ but more importantly it will still be accessible because of the title attribute, so it shouldn’t matter.

3. Pobail

Here is the Lynx view of the English version Pobail homepage:

And here is the underlying mark-up:

<label for="search">
<input type="text" name="qt" id="search" value="" maxlength="1991" />
</label>
<input type="submit" value="Go" class="submit" />


While the search element may pass automated validators, the form itself has little value to users of screen reading technologies. The ‘Advanced search options’ link is in another div.

[NOTE: Andy Harold is the developer of Total Validator. The tool is available as either a free Firefox plug-in or a professional desktop application.]

Study Notes:

1. Strange use of JavaScript that depreciates in Lynx but prohibits access to links in non-JavaScript enabled browsers.
2. The Department of Arts, Sport and Tourism displayed a WCAG 1.0 AA Badge.
3. The Department of Arts, Sport and Tourism did not validate WCAG 1.0 AA
4. RSS feed not included in META section and was not auto-discovered by browser. Auto-discovery allows browsers to display and bookmark RSS feeds.
5. The Department of Enterprise, Trade and Employment displayed a WCAG 1.0 AA Badge and passed that standard.
6. RSS feed found on inner page with no META auto-detection.
7. Address in footer is an image – ALT=”Department Address”. This is a particularly poor implementation as the address can neither be read by screen-reading technologies or copy-pasted form the browser.
8. www.pobail.ie uses a splash homepage. Inner English language homepage tested.
9. Empty LABEL (no text node) in page’s search form.
10. Empty LABEL (no text node) in page’s search form.
11. BASIS carried a WCAG 1.0 AA Badge and failed that standard.
12. Framed site – each frameset was validated individually.
13. WAVE cannot validate framed sites.
14. In-line style attributes – no CSS file to validate.
15. http://www.cso.ie/accessibility/accessibility.htm claims site is WCAG1.0 AAA compliant with timestamp. That page, which is unlikely to have been updated, failed AAA validation.
16. RSS feed found on inner page with no META auto-detection.
17. RSS via auto-discovery, but no mention on page.
18. RSS feed found on inner page with no META detection.
19. FAS Ireland carried a WCAG 1.0 AAA Badge but failed AAA validation.
20. FAS Ireland homepage contained 6 errors when tested for WCAG 1.0 AAA.
21. www.examinations.ie carried a WCAG 1.0 AA Badge.
22. www.examinations.ie contained 30 errors when tested for WCAG 1.0 AA.
23. In-line style attributes, framed site.
24. No publicly published link was found.
25. Resolved to the website of Clare County Development Board.
26. www.libraries.ie uses JavaScript links to popup new pages – blocked in FF and IE7. The site was virtually unusable.
27. Server not found error.
28. Website did not respond for http://nda.ie – this could cause problems for many visitors. WAVE validator was served the login page so WAVE analysis could not be performed. There were also some issues with the search form which are discussed toward the end of this document.

Page URLs

Government Departments
Foreign Affairs, Dept. of
Agriculture and Food, Dept. of
Arts, Sport and Tourism, Dept. of
Communications, Marine and Natural Resources, Dept. of
Health and Children, Dept. of
Education and Science, Dept. of
Enterprise, Trade and Employment, Dept. of
Environment, Heritage and Local Government, Dept. of
Finance, Dept. of
Defence, Dept. of
Justice, Equality and Law Reform, Dept. of
Community, Rural and Gaeltacht Affairs, Dept. of
Community, Rural and Gaeltacht Affairs, Dept. of
Taoiseach, Dept. of the
Transport, Dept. of
Social and Family Affairs, Dept. of

Government Informational Portals
Business Access to State Information and Services
Public Service Information for Ireland

Other Government Websites
Office of the Revenue Commissioner
Official website of the President of Ireland
The Courts Service of Ireland
The Office of Public Works
Central Statistics Office

Political Party Websites
Fianna Fail
Fianna Geil
The Labour Party
The Green Party
Progressive Democrats
Socialist and Workers Part
Sinn Fein

Websites Highlighted in Society Action Plan
Revenue Online Service (ROS)
FÁS e-recruitment
Land Registry
Examination results
CAO (Central Applications Office)
Driving tests
Government Contracts
Public Service Recruitment
National Sheep Identification System (NSIS)
eForms
Welfare.ie
Libraries
Infrastructure.ie
Farmer IT Training

National Disability Authority

Errors, Ommissions & Corrections:

1. 11-December-2006 12.01PM Since publishing the report it has been brought to my attention that the Sinn Fein website does indeed have an RSS feed. The feed is available at http://www.sinnfein.ie/news/ in the side-bar. My apologies to Sinn Fein for any inconvenience caused by this ommission.

Have thoughts on this post? Head over and leave a comment on the blog: eGovernment Accessibility Analysis

Follow RedCardinal on Twitter!

And let’s be honest, immitation is the highest form of flattery.

But if you’re going to rip off someone’s design by hot-linking directly to their CSS file then you’re just plain looking for trouble…

Original Site:

Lifted Site (after a little bit of CSS injection :mrgreen:)

Images link to sites. Take care of lifted site – really not work safe.

While you’re here can you please spread the word about this nasty bunch of spammers that are trying to scam donations to a children’s hospital in Moscow. More info here.

Have thoughts on this post? Head over and leave a comment on the blog: If You’re Going To Steal Someone’s Design…

Follow RedCardinal on Twitter!

So i found the results over at Silicon Republic:

1. AOL Best Financial Website
   Winner: aib.ie/personal
2. SalesOnLine.ie Best Travel, Tourism & Hospitality Website
   Winner: hostelworld.com
3. Daft.ie Best News, Media & Entertainment Website
   Winner: RTE.ie
4. Comreg Best Sports, Health and Leisure Website
   Winner: RTE.ie/sport
5. FÁS Best Social Networking, Community & Not For Profit Website
   Winner: trocaire.org
6. RTÉ Best Education Website
   Winner: gaelscoildehide.ie
7. HostelWorld.com Best Marketing Campaign
   Winner: carbuyersguide.ie
8. Department of Communications Best Web Design Agency
   Winner: clearscape.ie
9. IEDR Best Technology Innovation Award
   Winner: cashcollector.com
10. Allianz Best Retail Website
    Winner: gohop.ie
11. Cash Collector Best Professional Services Website
    Winner: Raymondpotterton.com
12. Irish Jobs Best e-Business Website
    Winner: Myhome.ie
13. ArgusCarHire.Com Best New Website Launched in 2006
    Winner: moviestar.ie
14. Best Broadband Application Award
    Winner: tg4.ie
15. Arekibo Best Public Sector Website
    Winner: callcosts.ie
16. Red Ribbon.ie Best HR, Training and Recruitment Website
    Winner: monster.ie
17. Internet Hero 2006 Award
    Winner: Cormac Callanan
18. Eircom 2006 Golden Spiders Grand Prix Award
    Winner: RTE.ie

Well done to all the winners.

Cathal Magee, managing director of eircom commented:

The entries this year were outstanding and testament to the strength of the Irish internet industry. These awards provide an important opportunity to recognise and showcase online excellence.

[Emphasis mine]

I have to say that my research begs to differ with you Mr. Magee.

Have thoughts on this post? Head over and leave a comment on the blog: Golden Spider Awards – The Results

Follow RedCardinal on Twitter!

Ok, so the story about Cork City Council winning a 2005 Golden Spider is old news. And everyone knows that their site’s only happy in IE:

The text is a wee bit small in that shot, so let me quote the warning in the footer:

Due to browser compatibility issues at present, this site will only operate correctly by using Microsoft Internet Explorer 5.5 or greater

and then I’m offered a link to ‘upgrade?’.

Well that’s all fine and dandy. So how about the site in Internet Explorer 7:

I think they need to rewrite their warning to:

Due to browser compatibility issues at present, this site will only operate correctly by using Microsoft Internet Explorer 5.5 to 6.0

*If* they are sniffing the browser, they must be doing it server-side. Actually, requesting with an IE6 user-agent still returns the upgrade link.

And considering that IE7 is now a high priority update, they might want to try and sort this out.

Honestly, how can a site that only works in IE 5.5 – 6.0 be given an award for ‘Best Public Sector Website – Local’?

I am now relatively sure that standards and compatibility are not criteria in any part of the Golden Spiders judging process.

Does anyone know if corkcorp.ie was built in-house or contracted out?

Have thoughts on this post? Head over and leave a comment on the blog: If I Had Taken My Own Advice….

Follow RedCardinal on Twitter!

Bring on the code

It’s all about the code. Writing good code is easy. When you know how, that is. Behind every website you view are a number of coding technologies that make things tick. Hyper-Text Mark-up Language (HTML) and Cascading Style Sheets (CSS) are probably the most important and common of these, and form the backbone of virtually every web page.

So many ways to view

With a variety of browsers (Internet Explorer, Firefox, Safari etc.) and an increasing number of platforms (pc, tv, hand held devices etc.), the need for a consistent user experience has never been more important.

That’s where standards come into the equation. At their most basic level, web standards exist so that the widest set of users can access and use your data via the broadest number of channels.

What’s the fly in the ointment?

Web standards seem to be very elusive for many websites on the Internet today.

After testing the Golden Spiders nominees, I thought it might be helpful to detail the top coding problems that ‘broke’ so many of the websites considered to be Ireland’s best.

(Some of the following is somewhat technical, so you can skip to my conclusions if you wish.)

1. Document Type Definition

   Every HTML document should contain a Document Type Definition (DTD) before the <html> tag. The DTD tells the User Agent which rendering mode to use when displaying the page.
   The most common DTD DOCTYPEs currently in use are:

   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

   If your website doesn’t contain something similar to one of the above on every page then it will not validate.

   It is possible to use proprietary attributes and still ensure validation. To do so your site should carry a custom DTD. More details on custom DTD schema can be found here.

2. Character Encoding

   Character encoding tells the browser what characters the page will be displaying to the user. Remember that visitors can originate anywhere on the globe, and not all will use Latin characters.

   Letting the browser know the Character Encoding required (or ‘charset’) can be achieved in two ways:
   1. within the HTTP header sent by the server (e.g. using .htaccess on Apache);
   2. within the HTML document header, e.g.:

   <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">

   It is extremely important that if set by both the server, through the HTTP headers, and within the HEAD section of a HTML page that the charsets match. A mismatch will invalidate the page.

   If you want to test your site this tool will show you whether the charset is set on your page.

3. Closed or self-closing tags

   If you look at the code behind any web page you will see a bunch of tags like

   <div><a href="www.somesite.com">Click here</a></div>

   Most recent HTML specifications require tags to be closed. So you can see in the example that there was an opening <div> followed by an opening <a> (with a href attribute set), some text, and then the closing </a> followed by a final </div>.

   So each tag was opened and then closed. Notice also that the tags were nested. The closing </a> preceded the closing </div>. Had it been any other way the code would not validate.

   XHTML requires all tags to be closed or self-closing. So it is important to ensure that all your elements are closed, e.g. <head [...] /> or <div> [...] </div>.

4. Lower case tags

   The XHTML 1.0 specification requires that all element and attribute tags be in lower case. So if your document uses a XHTML DTD then you can not use a mix of upper and lower case mark-up throughout your document.

   Whenever I see mixed case mark-up I immediately think of ‘cut ‘n paste’ coding, which in my view is an extremely lazy and dangerous way to author web pages. If you are going to cut and paste, you have 10 times more reasons to validate your page afterwards.

   If you take a look at the source code of your own web pages (in IE6 select Tools->View Source, IE7 select Page->View Source, FF2 View->Page Source) and see something like this:

   <head>
<title>...</title>
<META HTTP-EQUIV="TITLE" CONTENT="...">
<META NAME="KEYWORDS" CONTENT="...">
<META NAME="DESCRIPTION" CONTENT="...">
<META NAME="ROBOTS" CONTENT="index, follow">
<META NAME="AUTHOR" CONTENT="...">
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<META HTTP-EQUIV="PRAGMA" CONTENT="no-cache">
<link href="..." type="text/css" rel="stylesheet" media="all">
<link href="..." type="text/css" rel="stylesheet" media="all">
</head>

   I would be slightly concerned about the overall quality and standard of coding produced by your development team / design agency.

   (The fact that this style of coding appeared in some of the nominee sites for ‘Best Web Design Agency’ is somewhat disconcerting.)

5. Proprietary tags, attributes and CSS

   Unfortunately in the early days of the Internet the browser vendors were less interested in standards (*glances at IE*). This led to a number of proprietary tags and attributes coming into existence. Recent years have seen considerable improvements to the browsers we use. Unfortunately many designers and developers have not kept pace with the times.

   Generally, the use of proprietary code has one major outcome – the code will only work in one brand of browser. While Internet Explorer enjoyed 95% dominance of the browser market during the 1990′s this was fine. But now that new standards-compliant browsers such as Firefox have a 15-20% market share, you can understand why proprietary code has become such an important issue.

   For example, the use of leftmargin, topmargin, marginwidth or marginheight attributes in the body tag involves proprietary code. Similarly, the embed tag is a proprietary tag.

   If you would like to see an excellent example of what can happen when a web site works only in one browser take a glimpse at what happened Enterprise Ireland.

6. CSS Hacks

   Unfortunately different browser platforms have a nasty habit of rendering content in non-standard ways (*glances again at IE*). It’s a feature of life that hacks are often required to make pages render consistently cross-browser.

   Placing hacks in CSS files has a nasty habit of breaking any validation performed on that file. A far more effective way to introduce hacks is to use conditional includes.

   Conditional includes are special commands that are only read by Microsoft browsers. Such an include might look like:

   <!--[if lt IE 7]>
<link href="path/to/IE/lte6/stylesheet.css" media="all" rel="Stylesheet" type="text/css" />
<![endif]-->

   For a good guide to using conditional includes and their syntax see quirksmode.org.

7. WCAG Accessibility

   They say that the Internet is a great levelling ground. Not just for business, but also for people with disabilities. That’s why Accessible web pages are so important.

   WCAG 1.0 and Section 508 are the most common accessibility standards used on the web today. They dictate certain coding requirements that apply to accessible web pages. For instance:

   All image elements must contain an ALT attribute. Even spacer images must contain at the least an empty ALT attribute – alt="";

   And a very common error is the omission of proper labels for form elements:

   Form input elements should be accompanied by a corresponding label, e.g. <label for="fname">First Name</label><input type="text" name="firstname" id="fname">

   If you would like to learn more about Accessibility please visit WAI. diveintoaccessibility.org/ offers an excellent primer on web site accessible.

8. Legal Color Names

   Many people don’t realise that there are just sixteen legal color names in HTML 4.x and XHTML. If you use color names in your mark-up and they don’t appear in the following list your document will not validate, and you run the risk of inconsistent rendering across browsers/platforms.

   The Legal Color Names (with HEX values):

   Aqua (#00FFFF)
Black (#000000)
Blue (#0000FF)
Fuchsia (#FF00FF)
Gray (#808080)
Green (#008000)
Lime (#00FF00)
Maroon (#800000)
Navy (#000080)
Olive (#808000)
Purple (#800080)
Red (#FF0000)
Silver (#C0C0C0)
Teal (#008080)
White (#FFFFFF)
Yellow (#FFFF00)

9. Unescaped special characters

   Unfortunately certain characters have a special meaning to the computers that run the Internet. In particular the ampersand (&) and the less-than and greater-than characters (<, >) cause problems when they are left unescaped.

   The inclusion of these characters on your HTML page will invalidate the mark-up. In all cases they should be properly escaped to either their equivalent HTML entity or ISO Latin-1 code. In the case of the ampersand &amp; or &#38;, less-than &lt; or &#60;, and greater-than &gt; or &62;.

   For a full list of HTML special characters see here.

So what’s the solution?

My own personal opinion is that those responsible for coding and designing websites need to take web standards more seriously.

The fact that web sites nominated for ‘Best Web Design Agency’ failed to validate (and one or two had truly awful coding) is indicative of the wider issues faced by Ireland’s Internet community.

On the other side of the fence, those commissioning new sites should start to consider, as a decision criterion, the quality of the underlying code and the impact on areas such as Accessibility and compatibility poor code can have.

Design and development briefs should include web standards as a requirement. In fact this is one of the easiest metrics to collect for subsequent evaluation.

Failing the above I think a quote from theMenace is particularly apt:

If we don’t have regulation (which we never really can) then we need 1) peer honesty and 2) client education.

Well said.

Have thoughts on this post? Head over and leave a comment on the blog: The Quick & Easy Guide to Better HTML

Follow RedCardinal on Twitter!

Total Sample: 128 sites;
Valid CSS: 33 (26%);
Valid HTML: 12 (9%);
Valid Section 508: 28 (22%);
Valid WCAG 1.0 Priority 1: 26 (20%);
Valid WCAG 1.0 Priority 2: 4 (3%);
Valid WCAG 1.0 Priority 3: 3 (2%);
Valid TV Core: 37 (29%);
Valid TV HTML: 15 (12%);
Valid TV WCAG 1.0 Priority 1: 43 (34%);
Valid WAVE Overlay: 27 (21%);
Sites with consistent mark-up: 76 (59%);

CSS, HTML, Section 508 & WCAG 1.0 Priority 1 Compliant: 6 (5%)


Special mention should be made of both www.ssiaoptions.ie and www.ulsterbank.ie. Both sites validated to WCAG 1.0 Priority 3 standard and require only limited changes in order to become fully compliant with all tests conducted.

And just one final piece of analysis:

Update as per Ricardo’s suggestion

This analysis was born from the comments left in this thread about W3C standards compliant coding.

Have thoughts on this post? Head over and leave a comment on the blog: Golden Spider Awards – Are These Really Ireland’s Best Websites?

Follow RedCardinal on Twitter!

#1 Framed Site
#2 Unable to test framed site in WAVE
#3 Very minor issue possibly from CMS
#4 Site not accessible without JavaScript enabled
#5 Very minor error in CSS
#6 Very minor omission
#7 In-line CSS could not be validated
#8 In-line CSS could not be validated
#9 Parser failed to access file
#10 Parser could not access file – possibly behind a firewall
#11 No CSS used on page
#12 Flash Website with no HTML alternative
#13 Parser failed to parse file.
#14 No CSS used on page
#15 Could not validate – maybe __VIEWSTATE value?
#16 Validation errors were caused by non-critical image elements. But ALT attribute was missing not empty.
#17 LABEL for attribute != input ID attribute
#18 Empty LABEL tag
#19 WAVE couldn’t parse page overlay
#20 Cynthia – HTTP Transfer Error – 12007: [12007] Internet Name Not Resolved.

Have thoughts on this post? Head over and leave a comment on the blog: Golden Spiders Analysis Notes

Follow RedCardinal on Twitter!

The Golden Spiders Accessibility Results, Categories 13-16

(NB You can click on the image for a larger version.)

The final four categories contained 29 websites of which 1 passed the benchmark for standards compliance – www.primaryscience.ie.

I will post a complete ranking overview of the final results shortly.

Have thoughts on this post? Head over and leave a comment on the blog: Golden Spiders Take #4

Follow RedCardinal on Twitter!

Please note that I have made a very slight change to the legends used. ‘DUAL-CASE’ has been changed to ‘SINGLE-CASE’ to denote the use of consistent type-case throughout the HTML document.

The Golden Spiders Accessibility Results, Categories 9-12

(NB Again you can click on the image for a larger version.)

In these four categories no websites fully passes the benchmark for standards compliance.

Quite notable, however, was the Professional Services category. Four of the eight sites short-listed passed both Section 508 and WCAG 1.0 Priority 1. A number of these sites also displayed high coding standards.

It is possible that the professional service firms may have a better grasp of the accessibility standards. This may be due to the inherently human nature of many of these businesses.

Categories 9, 10 and 12 contain primarily Internet-based businesses. Thus far these categories are tending toward the least standards compliant.

These are the latest running totals (1-12):

Total Sample: 99 sites;
Valid CSS: 26 (26%);
Valid HTML: 10 (10%);
Valid Section 508: 20 (20%);
Valid WCAG 1.0 Priority 1: 18 (18%);
Valid WCAG 1.0 Priority 2: 4 (4%);
Valid WCAG 1.0 Priority 3: 3 (3%);
Valid TV Core: 32 (32%);
Valid TV HTML: 11 (11%);
Valid TV WCAG 1.0 Priority 1: 32 (32%);
Valid WAVE Overlay: 23 (23%);
Sites with consistent mark-up: 59 (59%);
CSS, HTML, Section 508 & WCAG 1.0 Priority 1 COMPLIANT: 3 (3%).


Have thoughts on this post? Head over and leave a comment on the blog: Golden Spiders Take #3

Follow RedCardinal on Twitter!

After a somewhat disillusioning start to my analysis of the Golden Spiders short-listed websites I’m quite sure that things will be getting better.

The next 4 categories include the Best Web Design Agency group and they, being experts in this field, are more likely to have a higher compliance with coding and accessibility standards.

I wont go into the methodology used, full details of which are included in my first report (Golden Spiders Take #1).

The Golden Spiders Accessibility Results, Categories 5-8

(NB Again you can click on the image for a larger version.)

In categories 5 not one single site passed the coding and accessibility tests performed, while category 6 entertained two sites which had virtually 100% compliance (each had un-encoded ampersands or brackets within text elements).

Category 7 showed some promise. bluecubeinteractive.com/property_news was fully code and accessibility compliant (although the page in question is very, very basic), and I have to tip my hat to Ulster Bank – their site was WCAG 1.0 Priority 3 compliant and the two failed tests were nominal at best (1 hours work and this could be one of the most code-compliant sites in the land).

A note about this methodology

It is worth stating at this time that the tests I perform are in no way meant to be full audits of these websites’ accessibility levels. Such testing requires a more wholesome array of tests which would include subjective evaluation. My methodology is restrained purely to those tests that can be automated and require no subjective input.

Best Web Design Agency category

The Web Design category short-list contains those design agencies who, as experts in their field, should have the highest knowledge of both coding and accessibility disciplines. Well done to Lightbox.ie and Tower.ie who both achieved a very high level of compliance with the coding and accessibility standards. To be fair, a number of the failed tests in this category were marginal and those pages could be easily repaired.

Unfortunately, I was particularly surprised at the results for Magico.ie and Strata3.com. Both pages analysed displayed an extremely high level of coding errors.

One final notable point was the proliferation of dual-case coding. By this I mean the coding of some tags in lower case and others in capital or upper-case. Generally, although not always, this is a sign of ‘cut-and-paste’ re-use of old code.

Overview of categories 5-8

Within the second sample of 34 websites there was an improvement in coding and accessibility standards. ThreeFive sites fully conformed with the accessibility guidelines. A special mention of the Ulster Bank site is also worthy.

This is the latest update to the running totals:

Total Sample: 66 sites;
Valid CSS: 18 (27%);
Valid HTML: 8 (12%);
Valid Section 508: 15 (23%);
Valid WCAG 1.0 Priority 1: 13 (20%);
Valid WCAG 1.0 Priority 2: 3 (5%);
Valid WCAG 1.0 Priority 3: 3 (5%);
Valid TV Core: 22 (33%);
Valid TV HTML: 9 (14%);
Valid TV WCAG 1.0 Priority 1: 24 (36%);
Valid WAVE Overlay: 18 (27%);
Sites with consistent mark-up: 33 (49%);
CSS, HTML, Section 508 & WCAG 1.0 Priority 1 COMPLIANT: 5 (8%).

Further updates will appear shortly. Again, any feedback on this is greatly appreciated.

Have thoughts on this post? Head over and leave a comment on the blog: Golden Spiders Take #2

Follow RedCardinal on Twitter!

The eircom Golden Spiders are widely regarded as the oscars of the internet industry and were established exactly this day 10 years ago – to reward excellence in design, functionality, creativity and innovation in Ireland’s internet industry.

After receiving some feedback on this issue, I thought it might be appropriate to conduct a small study into one particular area of web design that is not alluded to directly, but is extremely important – ACCESSIBILITY.

But first a word on my methodology

It is generally accepted that objective measures of accessibility are defined relative to global standards as set out by the World Wide Web Consortium and other bodies.

The W3C has responsibility for the Web Accessibility Initiative (WAI) and also sits on the advisory commission for the revision of U.S. Section 508 standards. The WAI maintained Web Content Accessibility Guidelines (WCAG) and U.S. Section 508 are the accepted international standards for Web accessibility measurement.

Validation of Mark-Up and CSS

Alongside these accessibility standards it is a generally accepted wisdom that valid mark-up (the code that runs all web pages) is a best practice for ensuring standardised delivery across client platforms.

The Study

Using the URLs listed at www.goldenspiders.ie I set about constructing a testing mechanism to appraise the accessibility and coding practices of the short-listed websites.

Each site underwent the following tests:

1. W3C CSS validation service (here);
2. W3C Markup Validation Service v0.7.3 (here);
3. HiSoftware Cynthia Says Section 508 Validation service (here);
4. HiSoftware Cynthia Says WCAG 1.0 Priority 1 Validation service (here);
5. HiSoftware Cynthia Says WCAG 1.0 Priorities 1&2 Validation service (here);
6. HiSoftware Cynthia Says WCAG 1.0 Priorities 1&2&3 Validation service (here);
7. Total Validator Professional desktop HTML & Accessibility validation tool (available here);
8. WAVE WCAG 1.0 and Section 508 visual site overlay tool (here);
9. Manual inspection of the mark-up to identify ‘cut-and-paste’ coding.

3 separate tools were used to assess the accessibility of each page short-listed for the Golden Spider Awards. This methodology conforms to the best practice as set out by the WAI. No other pages within those sites were tested for this study.

The Golden Spiders Accessibility Results, Categories 1-4

(NB Click on the image for a larger version.)

Legend

• CSS = CSS validation;
• HTML = HTML validation;
• Section 508 = Section 508 validation;
• WCAG 1.0 1 = WCAG 1.0 Priority 1 validation;
• WCAG 1.0 1,2 = WCAG 1.0 Priorities 1 and 2 validation;
• WCAG 1.0 1,2,3 = WCAG 1.0 Proriteis 1, 2 and 3 validation;
• TV Core = Total Validation Core Errors;
• TV HTML = Total Validation HTML Errors;
• TV WCAG 1.0 Priority 1 = Total Validation WCAG Priority 1 Errors;
• WAVE wcag 1.0, 508 = WAVE 3.0 site overlay WCAG 1.0 Priority 1 and Section 508 Validation;
• DUAL-CASE = Analysis of page mark-up to identify the use of both upper-case and lower-case element tags. This can identify ‘cut-and-paste’ coding . It can also be the result of Content Management Systems or the use of third party code (e.g. Google Analytics scripts).

Of this initial sample of 32 websites one site comes close to fully conforming to the accessibility guidelines. In fact www.ssiaoptions.ie actually conformed to the highest level of WCAG 1.0 – Priorities 1, 2 and 3. Although the site’s CSS failed to validate it is an extremely accessible website.

Results Categories 1-4 Overview

Total Sample: 32 sites;
Valid CSS: 9 (28%);
Valid HTML: 2 (6%);
Valid Section 508: 4 (13%);
Valid WCAG 1.0 Priority 1: 3 (9%);
Valid WCAG 1.0 Priority 2: 2 (6%);
Valid WCAG 1.0 Priority 3: 2 (6%);
Valid TV Core: 10 (31%);
Valid TV HTML: 1 (3%);
Valid TV WCAG 1.0 Priority 1: 9 (28%);
Valid WAVE Overlay: 7 (22%);
Sites with consistent mark-up: 16 (50%);
CSS, HTML, Section 508 & WCAG 1.0 Priority 1 COMPLIANT: 0 (0%).

[I updated the above overview at 12:30pm Nov 5 to correct an error in the 'No. of sites with consistent mark-up' and also to include the figure for 'Zero visible WAVE Errors'. Second update at 10:45pm Nov 5 to correct some figures and typos in the overview.]

I would be very interested to hear any views you might have on the above. Further results will be posted later today.

Have thoughts on this post? Head over and leave a comment on the blog: Golden Spiders Take #1

Follow RedCardinal on Twitter!

Without naming names I came across an Irish web design company (offering SEO of course) that touted their W3C credentials:

W3C compliant design

Professional web site design using CSS and XHTML to W3C standards.

Suffice it to say the W3C Validator didn’t agree.

In fact it almost got sick :mrgreen::

# Error Line 1 column 0: no document type declaration; implying “< !DOCTYPE HTML SYSTEM>“.
# Error Line 13 column 6: required attribute “TYPE” not specified.
# Error Line 52 column 16: there is no attribute “TOPMARGIN”.
# Error Line 52 column 31: there is no attribute “LEFTMARGIN”.
# Error Line 241 column 123: there is no attribute “BORDERCOLOR”.
# Error Line 241 column 140: there is no attribute “HEIGHT”.
# Error Line 259 column 69: required attribute “ALT” not specified.
# Error Line 263 column 69: required attribute “ALT” not specified.
# Error Line 266 column 27: there is no attribute “BACKGROUND”.
# Error Line 266 column 27: an attribute value must be a literal unless it contains only name characters.
# Error Line 268 column 91: required attribute “ALT” not specified.
# Error Line 276 column 69: required attribute “ALT” not specified.
# Error Line 294 column 34: document type does not allow element “DIV” here; missing one of “APPLET”, “OBJECT”, “MAP”, “IFRAME”, “BUTTON” start-tag.
# Error Line 301 column 34: document type does not allow element “DIV” here; missing one of “APPLET”, “OBJECT”, “MAP”, “IFRAME”, “BUTTON” start-tag.
# Error Line 307 column 20: document type does not allow element “DIV” here; missing one of “APPLET”, “OBJECT”, “MAP”, “IFRAME”, “BUTTON” start-tag.
# Error Line 313 column 20: document type does not allow element “DIV” here; missing one of “APPLET”, “OBJECT”, “MAP”, “IFRAME”, “BUTTON” start-tag.
# Error Line 319 column 20: document type does not allow element “DIV” here; missing one of “APPLET”, “OBJECT”, “MAP”, “IFRAME”, “BUTTON” start-tag.
# Error Line 342 column 69: required attribute “ALT” not specified.
# Error Line 354 column 69: required attribute “ALT” not specified.
# Error Line 358 column 75: required attribute “ALT” not specified.
# Error Line 386 column 100: value of attribute “ALIGN” cannot be “ABSBOTTOM”; must be one of “TOP”, “MIDDLE”, “BOTTOM”, “LEFT”, “RIGHT”.
# Error Line 416 column 160: document type does not allow element “TABLE” here; missing one of “APPLET”, “OBJECT”, “MAP”, “IFRAME”, “BUTTON” start-tag.
# Error Line 535 column 105: required attribute “ALT” not specified.
# Error Line 608 column 75: required attribute “ALT” not specified.
# Error Line 612 column 75: required attribute “ALT” not specified.
# Error Line 680 column 6: end tag for “DIV” omitted, but its declaration does not permit this.

Now that is just bloody awful. It borders on the criminal. OK, I exaggerate, but leaving out the DOCTYPE is just THE cardinal sin in compliant standard web coding.

If you’re going to promote W3C standards you should at least practice what you preach.

Have thoughts on this post? Head over and leave a comment on the blog: If You’re Going To Promote Your W3C Credentials…

Follow RedCardinal on Twitter!

Here’s a list of my top 13 sins (in no particular order) that will see your advances spurned by Google:

1. Flash-only sites

   No matter what people tell you, getting any sort of decent ranking for Flash-based websites is always going to be far tougher than for the HTML-based equivalent. Flash may look great and often offer a great user experience, but from a Search Engine point of view Flash is a death-trap.

2. Canonical URL issue

   It’s quite well documented that Google sees the non-www and www version of any website as different pages. If your site is accessible via both www and non-www URL you may have some indexing and supplemental issues with Google (to test this type your website address into your browser using first the www.yoursite.com and then yoursite.com and see if either redirects to the other). You can find an entire post about this over on Matt Cutts’ blog.

3. Zero backlinks

   I am yet to see Google index any site that has no backlinks from an external website. While Google may crawl your site (e.g. if you use Google’s submission tool), your site must have at least one backlink to get any pages indexed. The higher the quality of any backlinks the quicker your site will be indexed. (Oh, and just a quick mention that Google’s link: operator only displays a sample of the backlinks your site has. If you want a more complete listing head over to Yahoo SiteExplorer.)

4. Nothing or little to index

   By their nature Search Engines love text. They really love text. Text contained in images cannot be indexed by Google so that beautiful page you just created in Photoshop and uploaded to your webserver as an image file won’t get much lovin’ from Google tonight. Similarly, if your pages contain little text you shouldn’t expect Google to attach much importance to them. (Flash sites also come under this heading but are so notoriously difficult to rank that they deserved their very own listing :))

5. Duplicate content

   Google has a thing for original content. It just eats it up. On the other hand it particularly likes spitting out content which the filters think has been ripped off. So when you copy someone else’s website word-for-word Google isn’t going to think you’re too clever. Duplicate content issues can also occur when pages on your site are accessible via more than one URL (the canonical URL issue in #2 above can also come into play here).

6. Where’s your server? What’s your ccTLD?

   If you are thinking about what TLD domain to use and where to host your website consider this: a site hosted in the US with a .com TLD will not show up in the ‘pages from Ireland’ index. Only sites which Google deems Irish will appear in the Irish search index.

7. Linking to ‘bad neighbourhoods’

   Google tries very hard not to penalise sites based on where their backlinks come from (which makes sense). They do however come down hard on sites that link out to bad neighbours. What constitutes a bad neighbour? Well you can be pretty sure that if you link to adult sites, drugs (pharma) sites or gambling sites that Google isn’t going to look favourably on you.

8. Dead-end objects

   Have you ever clicked on a link to be taken to page with no links? Doesn’t make for a good user experience and search engine spiders aren’t too hot on these pages either. Spiders like to be able to move from one page to another via links. When there are no links on a page the spider is likely to head off elsewhere. So be friendly to the Googlebot and give him as much direction as you can.

9. Cloaking/doorway pages

   Now this is a really big no-no. If there’s one thing Google dislikes it’s when a website displays one version for human visitors and another for the Googlebot. Commonly referred to as a black-hat technique, cloaking is becoming far less prevalent. Do you remember what happened to BMW?

10. Artificial link networks

    When your site goes from having a handful of backlinks to having several thousand overnight you can be quite sure your site is going to be flagged by Google’s quality algo. Google is constantly on the lookout for link networks and rapidly devalues links found to be less than genuine.

11. Hidden text

    Another big no-no is hidden text. As with cloaking, Google likes to see exactly what your human visitors see. If you hide text via CSS or otherwise on your pages you risk the wrath of a Google ban. (If you want to quickly check a page for hidden text press CTRL+a to highlight all text. FireFox users can click CTRL+Shift+s do disable external style sheets.)

12. Build it and they will come

    Well no they wont actually. If your content has no link popularity then don’t expect to come top of the SERPs for anything other than the most off-beat search queries. The most important variable required to achieve good rankings for any page in Google is the link swarm pointing at that content (note: this is my opinion and relates to all but the least competitive search terms). This variable is measured across both the quality and quantity axes – the right links are far more powerful than a mulitude of ‘wrong’ links.

13. Session id’s in your qury string

    Google explicitly states that having any variable in your URL that could be mistaken for a session ID is likely to cause problems for the Googlebot. If your URLs use anything that looks like

    www.mydomain.com/index.php?id=234523353

    you might want to consider revising your page names.

The above list is not meant to be a comprehensive guide to Google indexing problems, but I hope it covers some of the issues that I see recurring fairly often on many webmaster forums and the Google Webmaster Group. (I post under the nickname RedCardinal on quite a few forums and the Webmaster Group.)

In my next post I will be looking at the steps you can take to get the most love from Google.

P.S. If you are looking for Google’s webmaster guidelines they can be found here.

P.P.S If you have any items you would like to add to this list why not leave a comment below

Have thoughts on this post? Head over and leave a comment on the blog: 13 Deadly Google Sins – Is Your Website Committing Any of These?

Follow RedCardinal on Twitter!

Hi Richard

Just to let you know that our IT Department have been working on browser incompatibility and the site is now compatible with IE 6 & 7, Netscape 8, Firefox 1.5 and Opera 9.

Regards

- Mary

When you are the primary body tasked with representing Ireland’s business dealings with the world it makes sense to create a professional and, more importantly, usable website for your customers:

Sorry the picture is a bit small but hopefully you can see the layout issues (this is the view using Firefox 1.5.0.7). The site is still usable (in Firefox anyhow) but quite ugly to look at. Rendering in Opera actual made the site semi-unusable as content overflowed to the right and off the page:

My guess is that the developers (whoever they are) work in Internet Explorer (I was going to write IE but thought it might confuse issues with EI!). For a site as important as EI’s this is a true blunder – you have to maximise the compatibility across as many platforms as possible.

So I decided I would send EI an email to let them know about the problem. As most people would do I clicked ‘Contact’:

The page contains the address, phone numbers, links to maps and, if you look very carefully, a mailto link for ‘Client Services’. The problem with this link is that the convention used to highlight the links to the maps (blue underlined text) does not apply:

I plain didn’t see it on the first run. So I clicked ‘Feedback Form’ in the left navigation panel:

Still no direct email address in view (I thought). Now I don’t know about you, but I prefer to send an email through my mail client so that I have a record of that email. I tend to avoid email forms like the plague. So to give you a better image of the form itself:

I have highlighted the mailto link for the webmaster (again not easy to discern that you are looking at a link).

As the baton carrier for Irish business around the globe I think Enterprise Ireland need to conduct some serious compatibility and usability tests on their website. At present it is not entirely clear that all their customers can quickly and efficiently find the vital information they want.

[EDIT - Could someone with IE7 please test the page and let me know how it renders? IE7 would never install correctly on my system (buggered up my network settings). A screenshot would be most helpful also.]

[UPDATE 1] The EI site is also broken in Safari 2.0 on Mac OS X:

[UPDATE 2] Not looking any better on Konquerer 3.5.4 on Debian:

It’s quite obvious now that this site will only render in IE (and I doubt it will render correctly in IE7). I just looked at the source code: 150 errors and 3 warnings.

[UPDATE 3] Thanks to ph3n0m I have a render from IE7 and it is the ugliest thus far:

and from browsershots (thanks again danger):

[UPDATE 4] Just noticed that I wasn’t the first person to notice this – Joe Drumgoole blogged about this back in May!

Have thoughts on this post? Head over and leave a comment on the blog: Enterprise Ireland Doesn’t Look Too Good

Follow RedCardinal on Twitter!

Unfortunately, browsers don’t always stick to standards and layouts can break.

If you want a nice service that lets you see your web page across multiple browsers and platforms try out BrowserShots.

The free service lets you submit any web page which is queued for processing. Within a couple of hours screenshots of your web page will be taken on multiple browsers/platforms and displayed on the BrowserShots site.

Handy service!

Have thoughts on this post? Head over and leave a comment on the blog: Check Website Layout in Multiple Browsers

Follow RedCardinal on Twitter!

If you take a look at the SalesOnline.ie source you will find gems like:

<td width="14%"height="23" style=" background-color:#006699"
onMouseover="this.style.backgroundColor='lightblue';"
onMouseout="this.style.backgroundColor='#006699';"> <div align="center" class="style41"></div>
<div align="center" class="style39"><a href="index.html">Sales Online </a></div></td>

Now this is the most inefficient use of code I have seen in a really long time. Using JavaScript events to trigger the style changes is, well, just plain crazy. Never mind the obvious errors in the mark-up (missing space between width and height attributes). Good God, the more a look at the worse it gets…

Anyhow, the navigation menu could easily have been rendered with plain anchors within the table cells (not the complete code, but you get the idea I hope):

<table cellpadding="0" cellspacing="0" id="nav">
<tr>
<td width="14%" height="23px"><a href="index.html">Sales Online</a></td>
<td width="19%" height="23px"><a href="advertisersagencies.html">Advertisers/Agencies</a></td>
</tr>
</table>

with CSS:

#nav {
background: #069;
border: 2px solid #999;
width: 100%;
}
#nav a {
display: block;
line-height: 23px;
margin: 0;
padding: 0;
text-align: center;
text-decoration: none;
}
#nav a:hover {
background-color: lightblue;
}

The above code could be refined still further (I only spent a couple of minutes looking at it). You could parse the menu as an unordered list within a <DIV> element:

<div id="nav">
  <a href="#">Sales Online</a>
  <a href="#">Advertisers/Agencies</a>
  <a href="#">Media Owners/Publishers</a>
  <a href="#">Websites & Audiences</a>
  <a href="#">Latest News</a>
  <a href="#">Contact Us</a>
</div>

and CSS:

#nav {
  background: #069;
  border: 1px solid #999;
  width: 888px;
}
#nav a {
  background: #069;
  border: 1px solid #999;
  color: #fff;
  display: block;
  float: left;
  font-size: 10px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  line-height: 23px;
  margin: auto;
  padding: 0;
  text-align: center;
  text-decoration: none;
  width: 146px;
}
#nav a:hover {
  background-color: lightblue;
}


Ok, so you lose the exact widths (easy to re-apply though), but you gain simplicity and good light mark-up.

Just to mention, you will need to make a few changes to get this to render across browsers. The #nav element width needs to be changed to overcome the IE box model. You could use conditional IE comments to include a separate style sheet for IE.

Have thoughts on this post? Head over and leave a comment on the blog: How Not to do Hover Background Colors – Using CSS rather than JS Events

Follow RedCardinal on Twitter!