KarovaHost

Posted June 3rd, 2007 by Phil Smears

The Karova Host site is a good example of a Cascading Style Sheet (CSS) driven site with strong visual appeal. The grey, greens and black work well together and it’s not often you get so much attention paid to a footer. Colour contrast on links and footer text, however, needs improving. A nice logo shows that simple is usually best. Valid, well structured, code has been used with headings on menus which screen reader users will appreciate and definition lists, abbreviation and <address> elements show attention has been paid to detail. Image replacement has been used extensively in an effort to keep images in the CSS. However, whilst the intentions here are to be commended, the implementation has to be revisited. In some cases, users of text only browsers are served up with significantly less text than is in an image.

Navigating by keyboard, is another area which needs to be improved to minimise confusion. Whilst styles have been provided for tab focus, the order is difficult to follow, with focus shifting up and down the page. Navigating through forms might also be problematic for screen reader users as the <fieldset> and <legend> elements have not been used in combination. Instead, heading elements, which screen readers will ignore in forms mode, have been used.

Finally, cross browser performance also needs some work so that everyone benefits from such a great looking site. The ‘Other services’ menu doesn’t work in the latest version of Firefox and it seems overly harsh to serve up Internet Explorer (IE) Mac with no styles at all. Some would argue, though, that it was getting what it deserved.

The KarovaHost site was crafted by Matthew Wilcox and has been granted an Award level of: “Notable Universal Design.” Congratulations Matthew!

Filed under The Showcase, Notable Awards —

11 Responses to: “KarovaHost”

Mike Cherim responds:
Posted: June 3rd, 2007 at 10:54 am →

Congratz Matthew. I must say we all love the design. Simply beautiful.
Koen Willems responds:
Posted: June 3rd, 2007 at 12:34 pm →

It’s a good design indeed. Especially i like those image replacements!!!

By the way: I believe IE on Mac is not a ‘current user agent’, as descriped on ‘Our criteria’.
Craig Francis responds:
Posted: June 4th, 2007 at 3:21 am →

Well done Mathew, the website really does look good, even the code

One question though, I’ve not really been too sure about the tag, the spec does not really provide a definitive description about its use with a postal address… I think its the example they provide which makes me wonder:

http://www.w3.org/TR/html4/struct/global.html#h-7.5.6

But as to IE5/Mac support, its the same technique we now use… having a black list of browsers to exclude JS and CSS… I know its not perfect, but when you have a limited time to built a website, the lack of time to fix the bugs can make the website completely unusable.
Matt Wilcox responds:
Posted: June 4th, 2007 at 3:21 am →

Thank you for the kind comments and very kind review. I’ll be taking on board the areas for improvement with the karova.com redesign which is coming up soon.

“The ‘Other services’ menu doesn’t work in the latest version of Firefox” - wow, I’m not sure how that error crept in. I’m fixing that this morning, it’ll be a z-index issue more than likely.

Mac IE not getting CSS is a concious decision. As it’s no longer supported by Microsoft or Apple, and we’ve found it to be a fraction of a percentage of our visitor base, we do not feel the extra time required to bring proper support for the design in that browser was economically viable. Sadly the line has to be drawn somewhere with browser support, and there seemed sensible.

I’ll be reading up on best practice for tab focus flow. Once again, thanks very much for kind words and useful critique.
Jojo Esposa responds:
Posted: June 4th, 2007 at 10:42 am →

Congratulations Matthew! What a good way of designing a site. I would certainly recommend your site to our web designer/members of Philippine Web Accessibility Group who are also web hosting company owners. Business sites like yours are great examples of accessible ones without diminishing their beauty and purpose.
Joe Dolson responds:
Posted: June 4th, 2007 at 10:50 am →

Congrats, Matt!

I’m inclined to agree with not delivering CSS to IE/Mac - the content is what’s important. Any IE/Mac users will still get the content, if they need it.
Matt Wilcox responds:
Posted: June 4th, 2007 at 3:17 pm →

Thank you both Incidentally, the menu bug with Firefox is now fixed, and I’ve been brushing up on my techniques thanks to accessites critiques. The karova.com redesign I’ve been working on today ought to be even more accessible.

@Craig

I realise that the use of the address element in this way can be seen as a grey area, however I don’t think a postal code is out of scope of the definition:

The ADDRESS element may be used by authors to supply contact information for a document or a major part of a document such as a form. This element often appears at the beginning or end of a document.

Postal information and telephone information is certainly contact information, despite the fact both are off-line mediums. I don’t see why the specification ought to limit itself to on-line only address information.
Martin Joergensen responds:
Posted: June 6th, 2007 at 5:44 am →

Phil,

Although I do agree with you on the visual appeal of the site, I have one small comment: one of the visually most significant elements, the prices, are embedded in images and do not appear in clean text anywhere. The same thing goes for the bandwith and disk space information. If you strip the CSS, there are no traces of this important information.

Only the prices of the domains appear in plain text as well as in images.

It seems to me that having this information embedded in images is not quite comme-ils-faut?

Martin
Mike Cherim responds:
Posted: June 6th, 2007 at 7:42 am →

Hello Martin. Good eye. That was one of the major beefs we had with the site.
Phil Smears responds:
Posted: June 6th, 2007 at 8:28 am →

Hi Martin,
Yep - loss of text and headings when CSS is disabled was noted:

‘In some cases, users of text only browsers are served up with significantly less text than is in an image’.

The issue is not so much putting it in images but rather that implementation of image replacement technique needs to be revisited or just substituted with plain jane inline images with alt text.
Craig Francis responds:
Posted: June 8th, 2007 at 3:22 pm →

Just been reading though the draft HTML5 spec… and its starting to become a little bit better defined…

——
The address element must not be used to represent arbitrary addresses (e.g. postal addresses), unless those addresses are contact information for the section. (The p element is the appropriate element for marking up such addresses.)
——

http://dev.w3.org/cvsweb/~checkout~/html5/spec/Overview.html#address

Sorry. Comments are closed.