.htaccess file is a small Apache file that lets you do all sorts of funky things with requests made to your server. It’s also one of SEO’s best tools. I have a lot of custom 301 redirects set up, including a redirect which makes my site available only via the www subdomain.

WordPress Permalinks

Well WordPress has a habit of rewriting the .htaccess file to allow some of the SEO-friendly URLs you regularly see (also known as ‘permalinks’). And each time it does so I lose my rules. It’s a royal pain in the arse and when this happened just the other day I thought I’d take the time to fix this for once and for all. I had to dig through the WordPress Codex to see what was causing all the trouble. save_mod_rewrite_rules() is the culprit. That little function, and my own ignorance of how WordPress processes the .htaccess file.

The solution

As with most solutions it’s really very simple. As with most simple solutions it’s only simple if you know about it. So here it is:

WordPress .htaccess file looks like this:

# BEGIN wordpress
<ifmodule mod_rewrite.c>
rewriteEngine On
rewriteBase /
rewriteCond %{REQUEST_FILENAME}!-f
rewriteCond %{REQUEST_FILENAME}!-d
rewriteRule . /index.php [L]
</ifmodule>
# END wordpress

Now here’s the really important bit:

Never place your own rules within the ‘wordpress’ block

The WordPress block is the bit that starts with # BEGIN wordpress and ends with # END wordpress. My mistake was to place my rules within this block (after the rewirteEngine On line). This seemed the sensible thing to do – after all rewrite rules must come after rewirteEngine On, and my understanding was not to repeat this command.

How WordPress rewrites .htaccess files

When WordPress rewrites the .htaccess file it does so by first checking that the file is writeable, then exploding the file using the # BEGIN and # END strings. Anything outside of those markers should be left intact after WP rewrites the file.

In my case I had to add a new block with a second rewirteEngine On so that Apache wouldn’t break (although I don’t think this is strictly the correct way to write the file). Here’s what my new revised .htaccess file looks like:

<ifmodule mod_rewrite.c>
RewriteEngine On
[... ]Funky custom rules go here[ ...]
</ifmodule>
# BEGIN WordPress
<ifmodule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</ifmodule>
# END WordPress

Perhaps the WordPress folk could add an additional comment into the .htaccess file that explains this better?

Well there you have it – how to stop WordPress overwriting your custom .htaccess file rules.

Have thoughts on this post? Head over and leave a comment on the blog: Stop WordPress Overwriting Custom .htaccess Rules

Follow RedCardinal on Twitter!

Take for instance all the great apps Google makes freely available. Gmail would still work, but the crippled Javascript-free version doesn’t cut it for me. And then there’s Reader, another of my most used apps. It doesn’t degrade quite so gracefully. Actually, like Calendar, it doesn’t degrade at all.

Complicated web apps can be forgiven for not degrading in the absence of Javascript. By their nature they rely on JS to handle heavy lifting functions. For more elementary functions graceful degradation can enable similar functionality. Personally I favour scripting to the DOM after the web page loads and replacing HTML functionality with a Javascript alternative that adds behaviour to the page. That way your site remains functional without Javascript.

But what happens when you use Javascript when you really shouldn’t?

The $65m Javascript Links

Back in 2006 one of Ireland’s largest Internet acquisitions saw Ireland.com, the web property of The Irish Times newspaper, purchase MyHome.ie for a reported $65m. I covered the story here. MyHome.ie is (apparently) an extremely profitable property (real-estate) website.

But apparently MyHome.ie has a smaller sister, a little known site called MyHome2Let.ie. And perhaps little known for good reason. Here’s a shot of their site:

Looks innocuous enough. But the kicker is in how the primary navigation is coded:

<td id="mainmenu_td_t0" class="mainmenu mainmenu_t_on" valign="middle" align="center" onclick="window.open('http://www.myhome2let.ie/','_self');" onmouseout="mainmenu_Roll(0);" onmouseover="mainmenu_Roll(0);">HOME</td>
<td width="1" rowspan="2">
</td>
<td id="mainmenu_td_t1" class="mainmenu mainmenu_t_on" valign="middle" align="center" onclick="window.open('http://www.myhome2let.ie/search/', '_self');" onmouseout="mainmenu_Roll(1);" onmouseover="mainmenu_Roll(1);">SEARCH</td>
<td width="1" rowspan="2">
</td>
<td id="mainmenu_td_t2" class="mainmenu mainmenu_t" valign="middle" align="center" onclick="window.open('http://www.myhome2let.ie/advertise/', '_self');" onmouseout="mainmenu_Roll(2);" onmouseover="mainmenu_Roll(2);">ADVERTISE</td>
<td width="1" rowspan="2">
</td>
<td id="mainmenu_td_t3" class="mainmenu mainmenu_t" valign="middle" align="center" onclick="window.open('http://www.myhome2let.ie/services/', '_self');" onmouseout="mainmenu_Roll(3);" onmouseover="mainmenu_Roll(3);">USEFUL SERVICES</td>
<td width="1" rowspan="2">
</td>
<td id="mainmenu_td_t4" class="mainmenu mainmenu_t" valign="middle" align="center" onclick="window.open('http://www.myhome2let.ie/info/', '_self');" onmouseout="mainmenu_Roll(4);" onmouseover="mainmenu_Roll(4);">INFO & ADVICE</td>

In case your wondering what all that code does, well it does what should have been accomplished in about 10% of that mark-up. It instructs the browser, in the most convoluted way possible, how to handle the primary navigation links that you can see in the image.

But worse still, those links, the primary site navigation links, are implemented in Javascript. Turn off JS and the site no longer works. You simply can’t navigate the site.

And the real cherry on this particular pie is that search engines have never been good at handling Javascript very well. Do you think that any of the pages linked to via the Javascript code are cached by Google? I’ll let my silence answer that question.

The Motto of this Story

Javascript is a great language. Used well the potential of the web expands massively. But make sure you use HTML where it was designed to be used, and Javascript only when you need to do some heavy lifting that HTML can’t handle.

Have thoughts on this post? Head over and leave a comment on the blog: $65m, And Some Of The Worst Use Of Javascript Ever

Follow RedCardinal on Twitter!

Well today Google announced some new features of Google Apps.

You can now register your domain name as part of the service. The cost is $10 per year with free private registration. Regardless of your feelings about privacy and Google seeing your WHOIS info, that price is still cheaper than GoDaddy who charge $4.95 per year for privacy on top of $8.95 for a .com registration.

Funnily enough the service is actually through GoDaddy

Have thoughts on this post? Head over and leave a comment on the blog: Google now Selling Domains

Follow RedCardinal on Twitter!

What is RSS?

Really Simple Syndication is a format for publishing web pages and other content.

In essence RSS is very similar to the content you would find on any website, with a few differences. RSS does not include any styling information that would give the ‘page’ a custom design or layout. If you can imagine reading this page without the header up top, the sidebar on the right or anything else that is superfluous to the viewing this story.

An RSS ‘feed’ can also contain more than one ‘page’ in a single file. That’s the real beauty of RSS – you can look at many stories or pages from a website without leaving the RSS ‘page’ or feed.

But perhaps the biggest difference between RSS and a regular web page is the ability to aggregate or combine multiple RSS ‘feeds’ (published RSS files are often referred to as a ‘feeds’) in your ‘reader’. A ‘reader’ is a program used to read and display the ‘feeds’ or RSS pages. Here’s what mine looks like:

I read the feeds from over 100 websites just about most days. Now if I was to visit all those sites it might take me 3 or 4 hours, but my reader shows me the feeds fom all those sites on one page. I can view the website name, the title and a snippet of each item. When I click on a story title I can read the content of that ‘page’:

Using my reader to aggregate thee feeds I can keep track of many, many blogs and websites.

RSS Readers

I use Google Reader. It’s free and rather than sit on my computer it sits on the Internet so I can access my feeds from any computer with Internet access.

The main web browsers and email clients now incorporate RSS features also. Firefox, Internet Explorer, Safari and Opera allow you to track and read feeds right in your browser.

So how can you tell if a site publishes a feed?

When you visit a website you might see the following icon appear in your address bar:

That icon has been adopted by all the major browsers for the purpose of depicting RSS feeds. It is available for download at Feed Icons. Older feed icons might look like this:

You can see that orange is the predominant colour used to depict RSS.

Making your feed icon appear in the address bar

Since most of the major browsers now support RSS it is a good idea to notify the browser that you have a feed so that the RSS icon appears in the address bar. To make your feed visible to agents you should include something similar to the following META in the head section of your page:

<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://www.site.tld/path/to/rss2.0/feed/" />
<link rel="alternate" type="text/xml" title="RSS .92" href="http://www.site.tld/path/to/rss0.92/feed/" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="http://www.site.tld/path/to/atom0.3/feed/" />

This auto discovery technique is also used by most readers and blog aggregators so it is a good idea to include it.

RSS features and uses

RSS can be used for many purposes. E-commerce stores can publish their products via RSS. Employment sites often offer customised search feeds so users can keep tabs on particular job-type vacancies. Many large sites offer multiple feeds so you can track only the information of interest to you.

Search engines and RSS

Search engines love RSS. They just devour feeds because they are very machine readable. Feeds also contain something search engines love: TEXT. And lots of it.

Very often my feed will rank well for specific search phrases and my site might have 2 or 3 pages ranking on the first SERP (Search Engine Result Page) – the post, my homepage and my feed . When multiple results from my site appear on a results page the probability of receiving a referral increase dramatically.

So does RSS matter?

RSS is here. It has not reached the tipping-point just yet, but the integration of RSS into the major browsers during 2006 means that RSS should become more and more mainstream over time.

And just as I finish this what appears in my reader?

the latest research done by Japan.Internet.com and goo Research shows that RSS’s bringing more accesses to the sites.

Q1: Do you visit more sites due to RSS feeds?
- More, 34.6%
- Hasn’t changed, 59.5%
- Less, 5.8%

Q2: Do you visit sites you read on RSS feeds?
- Always, 23.5%
- Sometimes, 58.1%

From Multilingual-Search.

Perfect

Have thoughts on this post? Head over and leave a comment on the blog: Really Simple Guide to RSS

Follow RedCardinal on Twitter!

You can now search the US patent corpus using the the interface used for Google Book Search (worth a look itself just to see the progress of web-based UI’s).

I’m sure Bill Slawski over at SEO by the Sea will be interested in this.

Have thoughts on this post? Head over and leave a comment on the blog: Google Search for US Patents

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!

The following is taken from a press release from Movistar.ie’s Public Relations firm Thinkhouse PR:

“Best Website Launched in 2006! We are absolutely thrilled,” said Gavin McConnon of moviestar.ie. “We spent a lot of time researching and trialling the website ensuring that it was designed in a browser-friendly way.”

The press release goes on to say:

Beating off stiff competition from sites such as callcosts.ie; sellityourself.ie; the Golden Spider was awarded to Moviestar.ie for its performance, as a functioning site in addition to design, innovation, content, navigation, technology, interactivity and ease of use.

An apology

I try very hard to not be subjective. I feel the quality of what I write here is dependent on being as objective as possible. The next line is purely my subjective belief:

If the above is correct, and the judges did indeed award a Golden Spider to Moviestar.ie (the site has been updated since the GS awards) for “its performance, as a functioning site in addition to design, innovation, content, navigation, technology, interactivity and ease of use“, I think they should hang their heads in shame.

As a business I think Moviestar.ie may well be exceptional. As a website it most certainly is (was) not. Had the award been for the ‘Best New Internet Business in 2006′ I would have little or no complaint.

Moviestar.ie currently ‘owns’ the top 10 Google.com positions for the search phrase ‘moviestar.ie’.

Have thoughts on this post? Head over and leave a comment on the blog: Moviestar.ie

Follow RedCardinal on Twitter!

Well, not to dally about too much, the archive search facility is a tad bit broken. I’m not quite sure what the problem is. First I thought that perhaps each word of the search query was being truncated. But then I noticed some search words coming back with different spellings.

Here’s what I searched for and the returned query:

• searched for ‘ireland house’ – matched ‘ireland: 423756, hous: 101978′
• searched for ‘ireland house prices’ – matched ‘ireland: 423756, hous: 101978, price: 102252′
• searched for ‘irish property prices’ – matched ‘irish: 715996, properti: 164708, price: 102252′
• searched for ‘house price inflation’ – matched ‘hous: 101978, price: 102252, inflat: 13885′
• searched for ‘minister cowen’ – matched ‘minist: 134897, cowen: 5678′
• searched for ‘the irish times’ – matched ‘irish: 715990, time: 703415′
• searched for ‘mystery guest’ – matched ‘mysteri: 6967, guest: 10148′
• searched for ‘cavity’ – matched ‘caviti: 271′

I tried those last two to see if the results were correct. ‘mysteri’ would match with ‘mysterious’ but the search yielded pages without an occurrence of ‘mysterious’. While a search for ‘cavity’ returned results.

It appears, therefore, that the search is based on the correct phrase, but the results page is displaying the wrong search query.

As I mentioned, I thought that perhaps queries were split along word boundaries and then mistakenly truncated, but the appearance of i’s instead of y’s threw this theory. And then of course not all words seemed to suffer the chop.

Perhaps someone can see an obvious cause of this that I cant?

Oh, and there are absolutely no prizes for guessing how bad the mark-up in there is

Have thoughts on this post? Head over and leave a comment on the blog: Ireland.com Search Feature Broken

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!

GPS mapping software for your Symbian phone

Sometimes in the morning I have the radio on. Occasionally I hear Pat Kenny, not because I particularly like his show, but because he comes after whoever preceded him.

Yesterday morning there was a very interesting interview with a guy from OSI (Ordinance Survey Ireland). They’re the people who produce the maps of our country.

The discussion was about a new GPS mapping application that lets users view OSI maps of Dublin on their mobile phones. The benefits were spelt out in a very compelling manner. Tourists, it was mentioned, could guide themselves with the mapping software, while Dublin’s residents could use the maps to find unknown streets and locations. And if you use a Nokia GPS phone the mapping software will even guide you to your destination. Pretty cool, and definitely the way of the future.

Buy on-line

Users can purchase and download the GPS mapping software for €29.99 from the OSI website, and the product comes complete with 500 POIs (Points Of Interest) for many of Dublin’s top attractions and locations.

It sounds like a really fantastic product, and I was quite surprised that an Irish company (and a publicly mandated body at that) was actually at the cutting-edge of this type of technology.

Great exposure, dreadful follow-through

This morning I got a chance to visit the OSI website to learn more:

Hmm.. not much to go on there. I expected there to be some emphasis on this new cutting edge mobile phone GPS mapping software. Well I’m honestly none the wiser so I select ‘Browse our mapping products and services’:

I’m really not making much progress here. I cant see any mention of mobile phone GPS mapping software. Maybe ‘digital products’?

Not there, so back to the homepage and this time I try ‘GPS services’. The guy on the radio did mention that this works with GPS. Nothing there either. To be honest at this stage I’m beginning to wonder if this is just some big joke. So I try ‘OSi Trail Master’:

Well this might be it. Unfortunately there’s no real reference material here to tell me what I’m looking at. Alas, it’s another false hope. Only two more options on the homepage left, and next up is ‘OSi StreetSmart’:

Bingo. With hindsight the name makes sense, but without any pointers figuring this out is far from trivial. Anyhow, now that I’ve finally found what I came here for I’d like to find out more. I suppose I should click the image – it is an anchor after all:

How to burn great publicity

Now most people couldn’t buy the publicity gained from a nationwide radio interview. That type of broadcast is just marketing gold-dust. Businesses have flourished on the attention garnered from radio mentions…

Yesterday morning the OSI gave us a text book example of how to burn through fantastic publicity with poor follow-through.

What’s the lesson? When you do get great exposure make sure you’re ready and waiting to fully leverage it.

Have thoughts on this post? Head over and leave a comment on the blog: When You Get Exposure Leverage It

Follow RedCardinal on Twitter!

I’m looking now and it seems to be far better than Google’s poor attempt (outside of major cities).

Here’s the link.

Have thoughts on this post? Head over and leave a comment on the blog: Quick Fluffy Link :-)

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!

Bus Eireann is a wholly-owned subsidiary of C.I.E., which in turn has a single shareholder – the Irish Government. In 2005 C.I.E. received €283.4m of tax-payer funds to supplement their operating cash flow.

The C.I.E. group website makes reference to it’s accessibility credentials:

When I first entered the Bus Eireann site a noticed that the root directory was redirecting with a 302 header to site/, and the site/ directory was, you guessed it, redirecting with a 302 to site/home/.

I spidered 17 pages of the Bus Eireann site for validation. The 17 pages contained 2205 errors and 230 links to files producing either 404 or 302 response codes. The homepage is framed.

But I think the jewel here is the icon in the navigation bar on the left of the page:

Here’s the mark-up behind that particular image:

<div align="left">
<a onmouseover="MM_swapImage('Image28','','[...]',1)" onmouseout="MM_swapImgRestore()" href="../home/vip_index.asp">
<img width="205" height="43" border="0" src="[...]" name="Image28"/>
</a>
</div>

[Note: I removed the paths to the image files for admin purposes.]

I am curious how any visually impaired person is expected to find this link? If I use a text reader it has no idea what that link is for. The ALT attribute is omitted on each of the navigation images – to any screen reader those image anchors effectively mean nothing.

I won’t even start on the design….

[Thank you CreativeIreland.com for the inspiration :grin:]

Have thoughts on this post? Head over and leave a comment on the blog: Did Tax-Payers Money Pay For This?

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!

As the web continues to change and evolve, our algorithms change right along with it. Recently, as a result of one of those algorithmic changes, we’ve modified our webmaster guidelines. Previously, these stated:

Don’t use “&id=” as a parameter in your URLs, as we don’t include these pages in our index.

However, we’ve recently removed that technical guideline, and now index URL’s that contain that parameter.

So you don’t need to worry about id parameters in the URL any longer, with the following caveat:

….dynamic URL’s with a large number of parameters may be problematic for search engine crawlers in general, so rewriting dynamic URLs into user-friendly versions is always a good practice

This is great news for any site owner that has experienced issues associated with Google mistaking their URL query strings for session id’s.

Have thoughts on this post? Head over and leave a comment on the blog: Google Change Their Webmaster Guidelines

Follow RedCardinal on Twitter!

The real beauty for the RSS publisher however, is that by offering multiple channels for your content you are absolutely maximising the possible coverage you can receive.

People are more likely to remain loyal when you offer what they want on their own terms.

The other day I came across Downloadsquad.com and what really caught my attention was their RSS feed page (sorry for the long image but you’ll see why):

Alongside their main feed they offer feeds based on categories, feeds based on platforms, feeds about companies – the list goes on. Quite simply Downloadsquad.com are giving me what I want how I want it. Personally, I think it’s a fantastic feature.

Now, I wonder how long it will take Ireland’s main news and media properties to offer us this kind of choice?

Have thoughts on this post? Head over and leave a comment on the blog: Want Loyal Customers? Give Them What They Want How They Want It.

Follow RedCardinal on Twitter!

I have to say the video blew me away (but of course until we see the working application everything is based on a very polished teaser video):

That UI is very, very impressive looking.

It is unknown what architecture this app is built on, but there is some speculation it’s on Flash and Flex (the video looks too smooth to be html/js).

Regardless of the underlying technology, what is plain to see is that these guys are thinking outside the box and working on a very new and innovative way to organise our lives. The biggest break-through seems to be the ability to work off-line seamlessly and easily re-sync later on.

How long will they remain independent (if they are independent?) if they can actually deliver this application?

Looking forward to seeing the real-life version You can sign up for the Beta here.

Have thoughts on this post? Head over and leave a comment on the blog: Like To See The Organiser Of The Future?

Follow RedCardinal on Twitter!

A couple of weeks ago I came across this blog and thought the UI was pretty cool.

Now, via Ajaxian, I see that Jack Slocum has integrated a very new and very innovative commenting system:

The interface is built on Yahoo User Interface Library, and allows the ‘block commenting’ of posts – you can literally attach your comment to any block of the main post.

The code is available for download from Jack’s site and works with WordPress blogs.

Very interesting and might just change the way blogs are commented going forward.

Have thoughts on this post? Head over and leave a comment on the blog: Is This The Future Of Blog Commenting?

Follow RedCardinal on Twitter!

Look, I’m really, really sorry Funda, but I hope this isn’t the end product? Come on? After the great viral I know you have to have something else for us?

Well I suppose I’ll have to give them the benefit of the doubt for the moment. Their site obviously wasn’t ready in time (the help page is a bit of a laugh).

Maybe after watching that video I was expecting to get bells and whistles galore and some strong unique site features to attract home buyers.

Well it’s all very basic (especially when compared with funda.nl). I’m a wee bit surprised and somewhat disappointed to be honest. The dutch are well known for their JS coders, and those page refreshes onSelect of county/city are ugly. In fairness, the detailed views aren’t too bad, but again a bit of spiffing up with some JS and DOM scripting would make the user experience a whole lot better.

Curiously (for me anyway), Funda.ie don’t bother with the page title (unless they hope to rank for ‘Detail’) and file name structure is going to make it extremely hard to get the site indexed. (Come on, I had to get in something about the SEO!)

I did notice that Funda are looking for both a lead and a developer so I’m sure the website will improve soon.

Oh, and I’m still waiting for the big surprise follow-through that gets us all talking about Funda Ireland and not Dublin Coastal Development. Please don’t let me down Funda.

[Edit - Jason Roe has also been blogging about Funda and the Dublin Coastal Development and has conducted one or two experiments to rank for related key phrases.]

Have thoughts on this post? Head over and leave a comment on the blog: Dublin Coastal Development a LOT Slicker Than Funda.ie

Follow RedCardinal on Twitter!

I opened my RSS reader this morning to find that Google had completely renovated the place. And I’m not talking a lick of paint here.

The interface is so impressive relative to what was there previously, and a feature that I always wished I could have is now available – I can now browse by category simply by clicking on a folder:

The list view is great for a quick look at news headings (memo to self – re-read Brian Clarke’s entry about good titles), while the expanded view gives you all the stories in one pane:

In the expanded view items are automatically marked as read when you scroll by them (sweet!). You can elect to turn this feature off in your preferences.

The number of unread items is displayed in aggregate and next to each feeds name (although I noticed that if the feed had a long name then this number was hidden – I hope that maybe Google will fix this by adding it to the tooltip). You can also select ‘[only list updated]‘ next to your subscriptions to filter out all previously read entries.

Google seem to have added a number of search facilities also under the ‘Browse »’ tab. This should help people discover new content and easily add it to their reading lists.

And then you have the ‘Goodies’ under your settings tab. The ‘Subscribe as you surf’ feature is something I like a lot. I’m now off to find or create a Google Toolbar button to add this feature (it has always annoyed me that the ‘Add To Reader’ feature of the toolbar didn’t give Reader as an option). I also noticed a mobile reader (reader.google.com/m) although I’m not 100% sure if this is new or not. I do wonder whether a reader might be a killer-app on mobile platforms (all those millions of commute man-hours every day)?

I liked the old Reader. I have a preference for browser-based readers and have tried quite a few others. In the past I overlooked the lack of filtered views in Reader but now I have just that.

The slickness of the interface is what really appeals to me though. Google really have got the user experience to a T. Their apps just keep getting better and really are an indicator of the future of on-line services.

Now I really need to get some work done – if it weren’t for all these cool distractions…

Have thoughts on this post? Head over and leave a comment on the blog: Another Distraction

Follow RedCardinal on Twitter!

Well even if you haven’t heard of either of these Javascript libraries there’s a high chance your made use of them somewhere or other in your travels around the interweb. Both libraries are used extensively in ‘Web 2.0′ applications such as Digg, a couple of 37signals properties, and Fluxiom (the teaser movie for this application was very cool and the application itself has the best web UI I have seen). Scriptaculous has been responsible for adding a new depth of interactivity and content dynamism that had previously been the sole domain of Macromedia’s Flash application.

A post over on Ajaxian mentioned that Gucci, the world famous fashion house, had implemented a new website built on the Sriptaculous library. I think this is a huge vote of confidence in Javascript in general, and Scriptaculius and Prototype in particular.

The site itself has an extremely clean look-and-feel and I’m sure that many visitors will believe they are in a Flash environment. I did find getting to grips with the navigation a little testing, and from a usability perspective I think this is a bit of a letdown. One feature I liked (but I’m sure it was a necessity) is the system of loading on-demand the glossy images on the site (although, this system is based on a bastardised src tag in the mark-up which I don’t like).

I have used these libraries previously for a database application running on a corporate intranet and the results, from a usability perspective, were really impressive. Of course, on an intranet it was possible to control the client environment. On the Internet you have issues such as cross-browser and cross-platform compatibilities, to name but a few.

If you are interested in other sites that use Javascript to mimic Flash then the portfolio page of Christof Wagner, which was built by Thomas Fuchs’ to showcase the Scriptaculous library, might also be worth a look.

Of course one further issue, which is probably more peculiar to Ireland than many other locations, is the additional overhead these libraries add to page-load (circa 100Kb). If you have seen the Digg homepage load on dial-up you will know what I’m talking about!

Have thoughts on this post? Head over and leave a comment on the blog: Gucci places faith in Scriptaculous over Flash

Follow RedCardinal on Twitter!

The work I do (which, yes I know, I need to document if I am ever to turn this website into a lead-generating medium) helps Irish companies to rank well for their chosen keywords and phrases. Generally these keywords and phrases relate in some way to Ireland and/or a particular geographic location in Ireland.

Most of the largest Internet forums are based in the US and while webmasters and web professionals from around the globe frequent these forums daily discussions specifically about the Irish market are, well putting it bluntly, non-existent.

Recently I have come across a plethora of sites run by Michele Neylon (who also runs Blacknight Web Hosting). I’m not sure how he manages so many Internet properties AND runs a large business, but somehow he does (are you sure there aren’t two of you Michele?).

Anyhow, one of the sites run by Michele is irishwebmasterforum.com. Originally the forum board of Search.ie, Michele has recently spun the board out to it’s own domain. There are many highly experienced and IT literate people posting on this particular board and it is a great resource for Irish-centric webmaster information.

It’s well worth a look in – I have always found someone willing to offer a response to any question I have posted there (I answer one or two SEO related questions myself from time to time ).

Have thoughts on this post? Head over and leave a comment on the blog: IrishWebmasterForum.com

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!