ONOFF: another failed redesign

This article is co-authored with Robert Nyman.

The large Swedish consumer electronics chain ONOFF recently launched a new website (www.onoff.se) with a brand new design and rewritten code. Normally we believe it’s up to every privately owned company to decide how accessible they want to make their website. It’s their call to decide how many potential customers they want to reach and how they want to treat their visitors.

With that in mind it was very interesting to see the full-page ads that ONOFF recently ran in national newspapers. In the ads they talk about their new website and tout just how accessible it supposedly is.

Loosely translated from Swedish:

The updated design is also mostly adapted accessibility-wise for customers with disabilities, e.g. visual or hearing impairments.

When taking a closer look at the new website, excited to learn that a major company has released a new, accessible website, you start wondering if you’re looking at the same website they’re talking about. A quick glance immediately reveals some major coding issues:

  • The code is very lacking in semantics. There is only one heading per page and no list elements are used, which is odd considering that the site contains many lists.
  • Links using the javascript: pseudo-protocol are scattered all over the place. The few links that do not use the javascript: pseudo-protocol are no better since they are still JavaScript dependant. An example: <a href="#" onclick="return goURL('/online/se/inet.nsf/vProdList/TVTV0-15tumvendor1?opendocument',this)" title="0-15 tum" class="tlink">0-15 tum</a>. ONOFF clearly has no interest whatsoever in search engines indexing their site.
  • Events are applied to elements that don’t have any built-in behavior for communicating with the server, i.e. there isn’t any way to make it work without JavaScript (their “buy” buttons are some of these…)
  • Keyboard and mobile phone users have to tab through no less than 341 links to get to the page content.
  • The layout is table-based.

When it comes to good coding in general and separating content from presentation and interaction, www.onoff.se is nothing short of a complete disaster. The homepage HTML is 111 kilobytes, has 271 (!) inline onclick event handlers, 79 links that use the javascript: pseudo-protocol, and suffers from a massive case of divitis and classitis. Talk about extra bandwidh usage and maintenance issues.

And all this makes us wonder: how hard can it be? It’s only HTML coding we’re talking about, not rocket science. But apparently HTML is much more difficult than the people who built this site realise. ONOFF’s accessibility claim has no merit. If we talk about the term accessibility in a broader sense, it’s just pathetic that people can’t navigate to their website without adding a www prefix.

Conclusively: If you’re going to use full-page ads in national newspapers to claim that your new website is accessible, you’d better make sure it really is accessible.

Seriously.

Posted on May 12, 2006 in Accessibility, Web Standards

Comments

  1. It gets better… Try accessing onoff.se without www. Ta-daa! Not working. As usual.

  2. I suspect their web developer(s) told them they were making the site accessible, and management never bothered to check up on it. It wouldn’t be the first time.

  3. What a joke… I bet they paid top dollar for it too.

  4. I saw the same ad and checked it out to see about the same as you describe. You know, accessibility sells, but the buyers have no clue how to check if the site is really accessible (if they haven´t read your series about “Evaluating website accessibility”).

  5. Most interesting; where is the equivalent accessibility statement on the website?

  6. Talk about another terrible script kiddie thing. The new Sterling site, http://www.sterlingticket.com/, although very nice looking, has over 1.500 lines of inline javascript on its front page. Before any of the content starts.

    1.500 lines … that is amazing.

  7. The funny thing is that sterlingticket.com works fine when you disable javascript, so: 1500 lines of bull?

  8. And what about the javascript redirection on the index page ?

    See it on web-sniffer at the bottom of the page.

    With the FF NoScript extension, all you can see is a nice white page.

  9. Umm… why is their favicon the icon for Lotus Notes??

  10. May 12, 2006 by Choke

    Unfortunately you see this sort of thing happen all the time. Clients don’t know better because they trust that the web developer will deliver what is promised. You see this a lot in .edu. It really irks me when these so-called “higher ed consulting firms” tout a new site that they recently launched and the coding is horrible and out-dated. It is worse than “planned obsolescence” because you realise it is really “dependent obsolescence”. These schools and consulting firms are locked in now. I know of a school that needed some drop-down menus on its homepage and it took 6 months to launch at the cost of $10,000 USD. What clients need to realise is WYSIWYG cannot be the standard (no pun intended) by which you judge your website.

  11. Wow, that’s just absolutely horrible. Even if you enable Javascript temporarily to let the stupid forward do its task, the front page is about 90% Javascript-based links. Meaning, one in every ten clicks will actually do something, and 9 times out of 10, your click on a link or object will do… nothing.

    Which is about the same amount of money this website should have cost. But sadly didn’t.

  12. I’m quite shocked. These people should be ashamed of themselves.

    I think you should have an actual link to the site in the first paragraph, so that this page shows up in their referrer logs. They might learn something then!

  13. Phil, you really think they will be checking referral logs? The people that care? Or should care?

  14. May 12, 2006 by Roger Johansson (Author comment)

    Johan: Yup. We mentioned that in the article ;-).

    Amber: LOL! I didn’t notice that at first.

    Phil: Like Faruk I doubt they even look at their logs :-p.

  15. I think I’ll have to march into ONOFF’s offices, armed with a PowerBook and 24 cans of Special Brew, and have a serious discussion with their web developers.

    And I noticed that Lotus Notes icon as well. That says it all, really.

  16. Well let’s have a look here…

    Transitional DOCTYPE

    No matching labels with form elements

    No skip navigation

    Images without alt attributes

    No accesskey attribute on the navigation anchors

    A smattering of inline styling

    Not-so-semantic markup

    Ridiculous class names (class=”divbutton divbuttonmediumsize greenbackground”)

    I could go on, but I don’t want to. It just reestablishes the unprofessional attitudes of the ‘web developers’ (using the term loosely) and their view on the communication of information.

    They say that the site is ‘mostly adapted accessibility-wise for customers with disabilities, e.g. visual or hearing impairments’? People should be held accountable for this type of statement and held to it.

    I get tired seeing these type of claims from the developer. They figure that by putting in an accesskey here and there and using div elements is all that is needed for maximum accessibility?

    Ridiculous.

  17. OMG…That code is awful. I think every link has its own ID. Crazy, somebody needs to teach the developer about styling elements under div’s.

  18. Wowsers. Whats up w/ May 12th, green and sub-par redesign launches (i.e. TechCrunch)?

  19. First off, that javascript redirect on the index page was a first for me! Amazing!

    I often see this with big clients, they go for the larger companies with huge sigars as I tend to call it. Large companies tend to enjoy other firms with salesreps with lots of time which they can wine and dine with. However, problem is that many of theese relationships are often mostly based on beein seen with the right people not focusing on the product they are infact purchasing.

    Another problem which omes to mind is that large companies like On Off most likely purchase their websollution directly from their print company (the comany doing the ads and logoes and such). Theese companies are great at printed marketing, but often doesnt have a clue on the web. This often results in great visual experiences which fall apart as soon as you do a view source.

    Many developers on the larger firms also are picked for their nice CV, being educated in .NET is usually a great thumbs up. However - doing database and information structuring has not very much to do with coding a webpage as we all know. This is usually where it’s lacking.

    Most of us smaller companies, my company included, has understood the importance of semantic code. We see the value of getting pages indexed, and we put pride in delivering great webpages. However - a larger company with stock holders care for profit so the end result doesnt contain any pride, only passed deadlines.

    I guess this sounds abit depressing, but I think there lies alot of truth in this.

    Most of us readin this article, could probably make onoff.se much better in a couple of hours - and a few days work getting to know the system I’m pretty sure the whole site could be pretty much perfect. The irony that onoff.se could probably fix all their problems for a small amount of swedish kroners if contacting a smaller company.

    I didn’t see the ads you mentioned, however - going out publically anouncing accesibility and at the same time starting with a javascript redirect is just plain stupid! instead of attacking onoff.se maby we should bully the company which created the pages instead? They probably have the salesreps that told onoff that the site was going to be super accessible aswell, :D

  20. I hope to see lots of these articles that showcase a doubtful accessible site.

    Live examples are the best.

    Semantically a mess too: each div has an id-classname starting with div

    So many divs in a table - nesting !!

    A lack of modern knowledge in CSS, DOM, JS and progressive enhancement

  21. May 13, 2006 by draco

    It’s almost like the developers reinvented web linking(anchors) altogether with the magical javascript onclick on the site.

  22. What are you complaining about?

    That ONOFF site is very standard-compliant: it uses CSS for font styling! Isnt that what CSS is for?

    ;)

  23. I have come to the conclusion that you just have to be friends with people to make websites. In my area, it has NOTHING to do with quality - but all about who you know. I used to freelance around here, then realized its not worth it because no one values their website. They see it as just another part to marketing - but they dont care to put time/money into it and make it something useful. It is an unfortunate state, and one that makes me cringe when I have to look at the websites around here - or talk to the ‘web designers’ (basically anyone with dreamweaver or go-live - NONE of them know basic HTML).

    So, I could give you a handful of failed redesigns in my area.

    Though this has been brought up before, the challenging question is this: how do you prove to a client that a website is a powerful tool - and that there is a right and wrong way to build a website? They have to see the value before they see the cost.

  24. May 13, 2006 by Paul

    Get a wap phone with the opera browser on it, get a latop with Lynx and JAWS installed, and show them what their site looks like on these two mediums.

    Then turn off javascript and styles, and show them what their page looks like.

    Then resize the text, up or down, a few times.

    That should show them.

  25. May 13, 2006 by Paul

    Sorry for the double post, but this code made me cry:

    code view

  26. 200,000 moving parts put together by the lowest bidder

    Kind of makes you proud.

  27. Shame on them.

    They should rename the site to: “Turn javascript ON, not OFF”

  28. You need a viewport of at least 1005px to view it without a horizontal scrollbar. Quite often the vertical scrollbar will be wider than 19px, causing a horizontal scrollbar even on 1024x768 machines.

    They havn’t made the navigation menus use block-level anchors. I thought that effect had become ubiquitous by now.

    The layout falls apart in IE5.01/Win. Seems alright in IE5.5/Win and later browsers, though.

    It responds fairly well to text resizing, too. There’s always a silver lining! :)

  29. Very interesting. First I thought that there was something to applause for, DIVs, bit no, not really, after having read the whole article I also noticed the table. I have also found they are using iframes. www.onoff.com/online/Dictionary.nsf/Start?ReadForm

  30. RE: Paul I would like to think that doing these things would convince people, but it just doesnt seem enough. Try dealing with a marketing department - they want the pretty (chaos). They dont care HOW - they just want it NOW. They completely ignore the value to standards and building a website properly. To them, its just another advertisement - they don’t realize the power they could have through their website.

    Ive tried explaining accesibility, and get just plain ignored. I hear comments like “Yeah, but how often will we get a blind person, deaf person, or colorblind person come to our site?” - basically laughing in my face as if it werent important. In the mean time they are missing the headlines talking about ACCESIBILITY with larger organizations.

    I just find that people dont care. sadly.

  31. “Yeah, but how often will we get a blind person, deaf person, or colorblind person come to our site?”

    A good argument against that is to explain them that Google is blind too.

  32. Just because it’s Lotus Notes doesn’t mean it has to be bad. Just like other environments, you can create good and poor sites in Lotus Notes. It’s not Notes fault that they had substandard developers.

    Sorry for the rant, but I get enough of this at work where I have the only web standards sites in the whole company and they are created using Lotus Notes as the web platform.

    The groups that use Websphere, .NET., and Dreamweaver create sites full of nested tables and tag soup.

  33. May 15, 2006 by Roger Johansson (Author comment)

    Tanny: I don’t think anyone’s suggesting that Lotus Notes is to blame for the state of this site. What I personally find amusing is that the site uses the Lotus Notes favicon instead of a custom icon (or no icon).

  34. The updated design is also mostly adapted accessibility-wise for customers with disabilities, e.g. visual or hearing impairments.

    This is called communication :-) The term “communication” refers to a subtle form of telling lies.

  35. I don’t know if you checked this but look at what’s in their noscript tag

    Nice touch … ;)

  36. May 15, 2006 by Erwin Heiser

    Man, the code on that frontpage just bites! WTF?

  37. May 16, 2006 by Jamesface

    My guess is that you get the Notes icon as the favicon because it’s hosted on a Domino server - the clincher is when you start getting ‘?opendocument’ in the links.

    It’s been a long time since I worked on a Domino-hosted site (I only ever did front-end templates so thankfully I know nothing about Lotuscript), but I do recall that no sane person would ever use it to build a website except in two very specific cases:

    First, because you’re a general IT consultancy (or IT department) and you don’t know the first thing about websites, but you are used to conversations that start “I need a collaboration tool for 10,000 users across 150 sites.” If ONOFF have outsourced their IT, or even just standardised internally on Notes, that could be a very strong candidate for choosing Domino.

    Second, because your product database already runs on some deep layer of Domino (which in my flaky memory is the name given to both Notes’ database and its web server). Domino allows you to define views into its database, and you can configure a set of views as webpages if you choose. So by building the webapp directly on top of your core database, you get realtime product updates, stock levels and price changes effectively for free. It certainly cuts down your development time.

    (The corollary, of course, is that if Option 1 is in play, some poor sod is going to have to convert all your data to a Domino-happy format. Shudder.)

    Does running on Domino automatically preclude writing accessible code? Well, bearing in mind that I never handled implementation and I was working on an older version of Domino… Absolutely. Working with Domino templates is the worst kind of voodoo. It may not be impossible to make pages accessible, but it’s a damn sight harder than just quietly sweeping the issue under the carpet. And Notes developers are a particular breed - even if Domino has moved on, there will be nothing forcing them to adopt new practices.

    Domino alone doesn’t explain the ludicrous overuse of javascript: calls though. But it does sound like a symptom of getting Notes developers who aren’t web designers to build a site. “Why bother making a link when I can build a reusable function?”

    Ho hum. At least you can console yourself with the thought that if their Domino servers are anything like the one I worked on, they’ll have the joy of rebooting once a day. How many servers in their farm, do you think?

  38. May 16, 2006 by Jeremy

    The layout is table-based.

    Whats the problem with it being table-based? And whats the alternative? Div tags?

  39. So who’s responsible for ONOFF’s failure of a website?

    I recall your post on FSB’s new site, another total failure. It’s not as if there’s a lack of talented people in this country. Perhaps the best firms have to become better at getting contracts and putting the benefits of standards compliancy in clear finanical terms as money is the only language people seem to understand these days.

  40. May 18, 2006 by Paul

    Whats the problem with it being table-based? And whats the alternative? Div tags?

    Er … . yes?

  41. May 18, 2006 by micke

    Some of the pages actually end with this:

    </body>
    </html>
    </tr>
    </table>
    

    Very nice.

  42. May 18, 2006 by micke

    Damn, didn’t get the html code right in that one (though it looked ok in the preview)..

    Anyway, they’re closing a tr and table tag after closing the body and html tags..

  43. Sorry, my swedish is non-existant. Is anyone able to translate that noscript tag?

    I find it kinda funny that a site with such blatant disregard for non-javascript users would bother with noscript tags…

  44. May 18, 2006 by Paul

    From the good old internet, it says this:

    Welcome to ONOFFs Internet-varuhus. We hold presently on with an updating (also new technology needs service sometimes).

    We open again shortly and then is you welcome once more to a välfyllt department stores full with offers and possibilities to new technology.

  45. May 18, 2006 by Jon

    Well, the crudy site onoff.se ‘Passed Automated Verification’ on a Section 508 Standards report - The company involved really sets their sights high…

    In my eyes 508 isn’t worth the pixels its posted on with regards to standards and accessability - As it has proved with this site.

    Discuss!

  46. May 18, 2006 by Roger Johansson (Author comment)

    Jamesface: Thanks for shedding some light on the Domino problems.

    Jakob: I don’t know who built the site. I do know that an old version was built by IBM. Maybe they are responsible for this redesign as well.

    I also find it frustrating that so many bad sites are built in a country with a lot of knowledgeable people. I think a major reason is that in general the largest web consultancies are still building websites the same way they did in the nineties.

    micke: Sorry about the preview. I’ve given up trying to fix it as it seems impossible.

    Paul: LOL, hilarious translation. But at least that’s the gist of what it says.

    Jon: I think it’s more a proof of the danger of relying on automated accessibility checks. Onoff.se site would never pass a manual accessibility check.

  47. May 19, 2006 by Paul

    LOL, hilarious translation. But at least that’s the gist of what it says.

    Well, insta-translate IS a bit iffy at times … but I couldn’t be bothered trying to get it to make sense :P

  48. May 19, 2006 by Digi

    Movie & TV industry has always used end credits. Perhaps web companies should start to include ‘end credits’ pages in to their designs or at least put link in meta author. No more quessing of who did what.

  49. May 21, 2006 by Roger Johansson (Author comment)

    Jeremy:

    Whats the problem with it being table-based? And whats the alternative? Div tags?

    Tables have been replaced by CSS as a layout tool. There are many reasons, most of which are explained well in Why tables for layout is stupid.

    The alternative is using CSS to style semantic markup, which often means adding div elements to create a suitable page structure.

  50. On part of me says we ought to be able to sue onoff for false marketing, another thinks they have been punished already. All that extra bandwidth they are paying for, all those extra hours it must have taken to develop this piece of crap. And should they in the near future need to change anything… I know who gets that job - the one they want to punish!

    BTW, I noticed another thing. Most warnings that a link will open up a new browser window are in the alt-attributes. Even non disabled FFox users won’t see them. That’s bad usability - and more lost customers - as well.

  51. CSS is often hailed as the be all and end all to formatting and the ideals have great potential; separate content from design and keep everyting in divs, etc.

    The reality is that many complex structures are still easier, faster and better to create in a hybrid table/css environment rather than a pure CSS environment, without dire consequences to non-standard browsing.

    For references, see below.

    (https://www.decloak.com/Dev/CSSTables/CSSTables16.aspx)

  52. The sad thing is that many clients don’t realise what they are getting until it is too late. For my mind it would really help to have an internationally recognised qualification or quality mark that would allow clients to know what they are getting. It looks like this client has been taken in by an agency that promises much but delivers little.

  53. @ Roger

    “Tables have been replaced by CSS as a layout tool. There are many reasons, most of which are explained well in Why tables for layout is stupid. (…) The alternative is using CSS to style semantic markup, which often means adding div elements to create a suitable page structure.”

    Yes, I’ve been thinking about this alot, and my experiance with table based layouts or the DIV layouts is the same. But, the problem is the company that wants me to build a website. And many, many, many times i tryed to work “webstandarish” and while this cost me more time, in the end, they just wanted a quick table layout site. Or an imagesliced slick design. Bu they really won’t listen and just want to see what they have in mind. So in regard to ONOFF i can level with them on the design they made, although it’s not correct.

    I’m sorry to say, but this is real life working experiance.

  54. Jamesface: Sounds like you’ve had nuthin’ but bad times with Domino. I’m pretty happy working with it as a web developer. And yes, you can get Domino to deliver valid and accessible code to web browsers quite easily as well as serving up your favicon of choice.

    There is however some debate on the lack of accessibility when it comes to Domino validating forms.

  55. August 22, 2006 by Stephen Hill

    I’ve only just stumbled over this article, and being that this was written about 3 months ago, I thought the website in question might have made some alteration to the site. But unfortunatly not!

  56. August 28, 2006 by John

    Also finding this late I must disagree with the negative comments regarding Domino. It is quite easy to build accessible sites/applications with Domino. The modular advantage of CSS is just like all domino development. The sad part is most people don’t take the time to learn and implement the product they are using. OnOff is a prime example. However, to make generalized statements about a product without proper knowledge is ignorant.

  57. September 5, 2006 by Jeremy

    Roger, which of the big players are into accessibility? Maybe you could provide links to some of their sites…. cheers

  58. September 5, 2006 by Roger Johansson (Author comment)

    Jeremy: Do you mean big players in the web business or big players as in “big sites”?

  59. September 6, 2006 by Jeremy

    I was really thinking of big players in the web business (if there are any?!).

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.