Adobe: Do as we say, not as we do

Adobe launched its Open Source initiative website the other day and I took at a look at the page. After highlighting some of the text as I read through it, I quickly realised I had stumbled through a warp-hole and landed in 1995. Warning: bad coding practices in this post!

It's been a while since I've picked apart a design implementation but Adobe's Open Source site shocked me so much that I'm going to open up the floodgates on these guys. There are just so many issues and webdesign faux-pas lurking around it.

Adobe might not be the first name that jumps to mind when you think of good clean web design. They own Flash and Flex, two things I keep telling people are a clear path to the dark side. They own Dreamweaver — the tool responsible for almost as many accessibility-related woes as Microsoft's unworldly FrontPage. But that said, they are trying to improve. Dreamweaver now ships with standards-compliant templates, has standards-checking features built in and even allows you to leverage the more accessible features out of Flash, had you chosen to implement them in your animation.

Let me be clear: this design isn't bad — it's actually quite pretty in places — but it's let down by poor HTML, lacklustre CSS and gives the impression that it was coded by a chimpanzee on a hearty mixture of steroids, coffee and crack cocaine. How can I say that? Well load up their site and press Control-A. You should see something like this:

The markings are my own, to show what you should be looking for: scuzzy  s, images used for design (corners and logo) and the use of | instead of a CSS border.

But these are just the immediately noticeable issues. Look what happens when we pass the site off to the validator:

But by this point, I'm not surprised. Lets have a look for <br /> tags — things that you shouldn't need if you know the smallest bit of CSS: what a surprise 34 of them!

Oh but wait, what's this? Oh it's not... Christ... I think I'm going to be sick...

<table width="955" height="135" border="0" cellpadding="0" cellspacing="0">

Adobe! What went wrong? Oh god, there's another table inside that table! Nested tables! Oh the humanity!!!

<table cellpadding="5" width="97%" cellspacing="0" bgcolor="#DBDEEA">
<tr><td bgcolor="#8C95AB"><font color="white"><b>Blogroll</b></font></td></tr>
<tr><td>
<table class="sectionMacro" border="0" cellpadding="5" cellspacing="0" width="100%">

At least there isn't any hideous inline CSS or JavaScript, or a combination of the two? Wrong again! Take a look at this wonderful line (line:446 - please notice how the initial span is never closed)

<span class="style34">
    <a     href="http://www.adobe.com/aboutadobe/" 
        target="_blank" 
        style="color: rgb(255, 255, 255);" 
        onmouseover="this.style.color='#000000'" 
        onmouseout="this.style.color='#FFFFFF'">
        Company
    </a>  <span class="style47">|</span>  

How was a site like this let through QA? Even ignoring all my nit-picking, the site doesn't even render properly. I've sent Adobe an email for some sort of response and I'll publish any reply but just let this be a lesson: pretty doesn't mean good.

Written by Oli on Thursday, 28 February 2008. Tagged with design, webdev. Read 931 times. If you liked it, please give it a digg.

#1 /* 6 months, 1 day ago */

It's sites like this that make it hard to convince some classes of people that standards and accessibility really, really are necessary. The big players that still use these "cardinal sins" of web design are putting the rest of us at a disadvantage.

Quote

Jacob Hume Anonymous User

#2 /* 6 months, 1 day ago */

Hey, Thanks for the feedback.

The http://opensource.adobe.com site is based on a skinned wiki.

We opted to use a wiki here, because it gave us a bit more flexibility when it comes to content publishing. (As our web team can tell you, I’m not a CSS guru <grin>). And since it comes with built in capabilities like RSS, and user management, we had many things we wanted out of the box.

So we opted to go down this route, focused on flexibility and convenience. The current result may not support some standards or all best practices, and we'll be looking to see how we can better improve to meet the standards. Honestly, our first thoughts were to get the information out and make it accessible to the community

You noted that you sent an email to Adobe about this. Who’d you send this to? (since this site is new, we’d like to make sure we talk to the same people within Adobe about our plans for the site).

Feel freeto drop me a line at dmcallis@adobe.com

thanks,
davemc
Dave McAllister
Director, Standards and Open Source
http://blogs.adobe.com/open

Quote

davemc Anonymous User

#3 — Author comment /* 6 months, 1 day ago */

Dave, I dropped a message through the feedback system. I was going to ping out another couple of emails today but somehow (how, by the way?) it reached your eyes. Thanks for reading and getting back to me.

As I drafted up the post, I did notice that you were on a CMS but I don't quite understand why that means you're limited to 90s-markup. If that's forced on you by the CMS, it's time to consider moving to one of the many systems that do support standards and good design practise natively.

Jacob also raises a very valid point: we, as the smaller guys, are trying to push the web forward through education clients so when a name like Adobe comes out with something like this, and they notice, they start to question standards' importance. If a behemoth in design can skimp on the ground work, why should they pay me to go the whole hog for their tiny business?

I am a perfectionist but I think I just expected better and that's why I'm shocked. When I think of Adobe's design team, given the number of creative tools you make, I imagine a horde of elite HTML/CSS ninjas, armed to the teeth with the latest-generation tools at the top of their game in standards support.

I dare say there are ninjas working there and they're probably on their way here to sort me out so I'll back-peddle a little. I understand that the message you have is important to get across. As a full-time Linux user, I wish you every success in getting as much as possible open-sourced (Flash Player would be a fine example of something that needs drop-kicking into the public domain for improvement).

By the way, I fixed your links - for some reason my system ate them.

QuoteSiteProfile

Oli Numero Uno

Don't just sit there like a lemon! Reply!

Got something to say? Now's the time to share it with the author and everybody else that reads this posting! Lemons need not apply.

Name (required)

E-mail (required but not displayed)

Send me an email when somebody replies

Message