Part Two of DevEdge Interview with Mike Davidson of ESPN
Friday March 28th, 2003
Doron Rosenberg wrote in to tell us that Netscape DevEdge have published the second part of their interview with ESPN's Mike Davidson. This final segment covers the more technical details of ESPN's standards-based redesign. Last week's first part is also still available.
#1 I'm quite impressed
Saturday March 29th, 2003 2:53 AM
The layout certianly looks convincing, even if it doesn't scale well with screen size. But I see some outstanding, easy to fix problems (in addition to those mentioned in the article):
As I look at the site, two pictures on the right hand side of the page are broken (this may be msn's fault, but it makes the site look quite unprofessional).
None of the scripts have a 'type' attribute. That seems to be very easy to fix.
All the scripts seem to be inline. Is there a good reason not to place the scripts in one or more external files?
The comment declerations are occasionally invalid.
It would also be good if the adserver accepted a reasonable syntax (i.e. not ampersand delimited). Although I guess this is out of ESPN's hands. I also wonder if the remaining presentational html is necessary. Is it used to work around bugs in browsers, or could it be removed?
Saturday March 29th, 2003 5:20 AM
"Since our front page is always roughly the same length, we don't need to worry about any of our columns creeping down into the footer."
"Sometimes we dynamically open divs and other tags with document.write and the validator can't figure out why we're closing a tag which appears not to be open."
Simple fix: close the div with a script. HTML should be valid both before and after document.writing, for the simple reason that some users have scripts turned off.
"Our ad server requires us to send ampersand-delimited variables to it which are not URL-encoded and the validator treats any ampersands in your code as invalid."
No, the validator treats ampersands in link hrefs as HTML entities (not to be confused with URL-encoding). The validator only complains because what follows the ampersand is not a recognized entity. If it was a recognized entity, browsers would replace the entity by the character it represents before requesting the URL from the ad server.
There's an easy fix, which is to replace each ampersand in a link href with ampersand amp;. The same URL will be requested from the ad server, and the ESPN front page will be closer to validating.
#3 Re: responses
Saturday March 29th, 2003 6:42 AM
"There's an easy fix, which is to replace each ampersand in a link href with ampersand amp;. The same URL will be requested from the ad server, and the ESPN front page will be closer to validating."
unfortunately that doesn't seem to work in all cases... I have an & in an href attribute on our site, and some browsers (it's a tiny proportion, but then anything that isn't IE is ;) seem to send the & to the server when the link is followed rather than decoding it.
#4 Re: responses
Saturday March 29th, 2003 9:16 AM
Are you sure? Which browsers does this? (it must be fairly easy to find out just be grepping in the web server logs)
#5 Re: Re: responses
Saturday March 29th, 2003 10:44 AM
As far as I'm aware, it's only some really badly written bots (mostly spam harvesters) who show this behaviour, and you wouldn't want any of them on your site in the first place. I seriously doubt there are any browsers actually used by humans doing the same...
#6 Re: Re: Re: responses
Saturday March 29th, 2003 12:21 PM
that's quite possible - the UA strings are for netscape 4.x versions, but the same netscape 4.x versions also seem to work properly, so it's probably dodgy bots...
#7 "ESPN's standards-based redesign"?
Saturday March 29th, 2003 2:36 PM
Isn't it more correct to say "ESPN's table-less redesign" instead of "ESPN's standards-based redesign", because it seems like they argue against using standards..
#8 css positioning indeed sucks
Saturday March 29th, 2003 4:12 PM
I can symphatize with this guy on CSS positioning. The CSS positioning model is way too complex and lacks flexibility in key areas. On top of that, non trivial stuff is almost guaranteed to not work across browser because it is a very hard standard to implement as well.
I spent most of today trying to code some, in my view, trivial things. I had set two goals: it had to work in IE 6 & mozilla and no hacks were allowed (i.e. no ugly code to trick either mozilla or IE into correct behavior). This proved to be hard. Stuff like z-indexes, floats, relative positioning only brings tears to your eyes. Figuring out how it supposed to work is a pain, figuring out why it's not working like you think it's supposed to work is even harder and figuring why it's not working in the other browser (either) is a nightmare.
The hoops you have to jump through to get things centered, to get some div to display x pixels below some div with variable height, to display something on top of something else. It is just way too complex. I managed to get the site I was designing to look more or less the way I wanted too. And I even met my preset goals. However, I think it was way too much trouble to get a banner, three columns and a status bar.
#10 Re: css positioning indeed sucks
Saturday March 29th, 2003 4:33 PM
I think your problem was that you started using positioning. And then you get into all that crap with z-index and whatnot. I of course don't know exactly what you were doing, but from what you describe I think I'd have no problems whatsoever creating it using nothing but floats and some margins (unless the "something on top of something else" is what's _really_ required of course, rather than that "banner, three columns, and status bar").
#11 some details
Sunday March 30th, 2003 2:28 AM
Floats alone didn't solve my problem. So I had to use some relative and absolute positioning as well. The banner just sits in the flow with a display:block to cover the full width. The middle column sits below with margings-left and right set to get some space for the columns on the side. This is all necessary to allow the statusbar to diplay below all that (with a simple clear:both). The left column is positioned absolute in the left margin of the middle column. There is no right column. Instead I use that space to display inline sideboxes from the middle column.
I use relative positioning to display various other elements. Take a look at http://www.xs4all.nl/~jgurp/homepage
#9 hear, hear
Saturday March 29th, 2003 4:32 PM
Nice new layout. I am extremely impressed. I also like the browser upgrade page. Very good stuff.
ESPN and all other sites should still strive for standards compliance. The problem with not being compliant is that you run the risk that your page is being displayed and read differently by different browsers, especially browsers for blind users. I don't know if blind people are huge sports fans, but that isn't really my point.
I totally agree that the W3C needs to fix the problem with vertical positioning and divs. Is it so hard to allow us to do a footer easily? The W3C needs to get its act in gear
#12 Re: hear, hear
Sunday March 30th, 2003 5:06 AM
uhm.. That's not really standards compliant - I see tons of JS, Flash and even a Browser detection in there.. Maybe the validator feels ok, but they havened understood the standards
#13 read the article!
Sunday March 30th, 2003 5:52 AM
they do understand the standards - if you read the article you'll see he knows exactly which bits aren't standards-compliant, and explains why they've chosen not to follow them. and the validator doesn't feel ok either, for the reasons you've just given (which are also in the article)
"I'm sure many people who will be reading this interview favor strict standards-compliance more than we do, but just keep in mind that we are constantly working towards the highest level of compliance possible. It's just that complete compliance often isn't possible without making unacceptable sacrifices. I'd say that if a site is 95% compliant and it uses the other 5% to create a better user experience, then that's just fine."
they take it as a given that they have the presentational stuff, the JS, the flash, etc, and then make the rest as standards-compliant as possible, rather than starting from a point of standards-compliance, and dropping the stuff that can't be done in the real world with standards.