Saving Bandwidth Through Standards Compliance, Pt. 2

elijahao writes "In case part one of the interview with Mike Davidson of ESPN was interesting, the second part has been posted today."

Comments

Redesigning

[Anonymous Coward]

Having recently been involved in a site redesign of a large site using a CMS I can sympathize with the issues at work. The biggest struggle I faced was that our company used an outside design firm to come up with a "look." There was little understanding of the issues around building a template driven site and they came up with a design totally unsuited to the project. We (IT department) were given a handful of layered Photoshop files and expected to code behind them.

Re:Redesigning

[cymen]

Whomever hired this group to deliver a look without html to back up their approach should be put in charge of something they understand.

Re:Redesigning

[Nachtfalke]

Oh, the joys of working with ignorant pixelpushers...
And don't try to tell them, that what they cooked up won't work. Even if it's just a small change in the layout to make it work in the template without resorting to voodoo, they get all worked up, as if you were personally insulting them.

What they don't know is that the real insults start as soon as they are off the phone :-)

Doesn't comply..

[Anonymous Coward]

..with Jack.

Re:Doesn't comply..

[daeley]

Damn, that was real clever of you. Did you actually RTFA?

Bad example

[JimDabell]

One step forward, two steps back:

Positioning footers is a huge Achilles heel of absolute positioning. It is ridiculous that you cannot embed three absolutely positioned columns within a master div and then position a footer below that master div. This is a well known problem of absolute positioning and there are a few workarounds, none of which are very elegant.

Actually, it's dead simple to do this with css 2. Unfortunately, Internet Explorer doesn't support a decent amount of css 2. Having said that, there are plenty of workarounds that work in Internet Explorer that aren't anywhere near as bad as this:

The workaround we settled on for the front page was simply positioning our partner's footer a concrete pixel value from the top of the screen. 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.

Excuse me? How on earth can they possibly know how high their home page is? That would depend on the size of the text, which depends on the font size I've picked to surf with.

Then there's validation. Telling me my site needs to validate in order to be standards-compliant is like telling me I need a flag in my lawn to call myself an American.

What a fucking idiot. Validation is a mechanical syntax checking of the document. If your site doesn't validate, you aren't conforming to the rules of HTML/XHTML. It's more like saying he needs to be an American citizen to call himself an American.

For a simple, small, text-heavy site like a blog, validation may come relatively easily, but when you have a site like ours which dynamically writes out a lot of content, uses third-party statistical tracking, makes liberal use of Flash, and offers complex and flexible advertising modules, validation is simply a pie in the sky.

Okay, let's take these things one at a time:

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.

If you are closing an element (not tag), then it had better be open. If you open the element via a script, close it via a script, otherwise you are not following the specifications. The validator can't "figure it out" because it isn't compliant code. This guy seems to think that the use of client-side scripting somehow makes invalid documents magically valid.

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.

It's a one-liner in most languages to fix this. If you are using a third-party ad server, then ask them to give you compliant code, it should be part of your contract to reduce business risk anyway.

Our statistical tracking code puts id attributes to certain script tags, which the validator claims is not valid.

Sounds like exactly the same thing. Ask your suppliers to give you code that follows the specifications.

We sometimes do not include alt tags for images which aren't important unless they are physically seen. Some people will say "Just include alt=''", but I simply don't agree with including alt tags for the heck of it.

Well existing user-agents treat empty alt attributes differently to missing alt attributes, and for good reason. It may mean little to him, because he doesn't use that software, others do. That is why you follow specifications, so all user-agents get a good deal.

We display all of our Flash elements using a home-spun JavaScript delivery method which is way more flexible and compatible than even the method Macromedia recommends.

Re:Bad example

[sigwinch]

Indeed. I'm looking at ESPN.com on a 1600x1200 screen under a recent Mozilla, and it is an unreadable, shitty looking pile of dreck:

• Text hanging across columns
• Inter-line spacing too small so the characters of one line physically overlap the previous line
• Ugly line breaks in the scores sidebar
• Content boxes that stick down too far and chop of the top of the box below
• Boxes that have their bottom part chopped off by the box below (they screwed it up both ways)
• Shitty Javascript menus with expander buttons tiled when they should be singlets
• Their "lite" site has hideous colors

And none of this is Mozilla's fault. When Part 1 of the interview came out last week, I looked at the side from Internet Explorer while I was at work. It looked more reasonable, as long as you used a magnifying glass: they hardcode all sizes in terms of pixels, and I have a decent monitor/video card. Morons, you're bus is leaving...

Another thing: the whole site is branded as "ESPN.com", but they forcibly redirect to espn.go.com. Forget the technical idiocy: these folks can't even manage a coherent branding strategy.

People make fun of the work I do using HTML 4.01, but they render nicely on most browsers, render usably on nearly all browsers, and validate so I have confidence that there aren't any lurking bugs.

Re:Bad example

[ceejayoz]

I'm looking at it on a 1280x1024 screen, in Mozilla 1.3, and I see none of the problems you describe (except for the colors in the lite site - that yellow needs to go). Perhaps it's time to upgrade your pre-1.0 Moz build?

I'd imagine the reason it goes to espn.go.com is the same reason all C|Net sites go to .com.com - so a single cookie can be used across multiple sites on their network.

Re:Bad example

[sigwinch]

Perhaps it's time to upgrade your pre-1.0 Moz build?

I'm running 1.0.1.

I'm looking at it on a 1280x1024 screen, in Mozilla 1.3, and I see none of the problems you describe...

Crank your resolution up to 1600x1200 and set the font to a comfortable size: the site disintegrates into unusability. Leave the original fonts alone and the characters are 8 pixels tall--small enough to draw 120 lines of text on the screen--which is hideously painfully small.

ESPN.com is simply an amateurish disaster, designed by people who know little about standards, browsers, or usability.

Re:Bad example

[Spoing]

ESPN.com is simply an amateurish disaster, designed by people who know little about standards, browsers, or usability.

I wouldn't be that harsh...though they aren't a good example of standards compliance. On a practical note, even on a 1280x1024 with Mozilla 1.3 the text chop/overlap problem is obvious. Just increase the font once or twice and look at the menus.

BTW...what's the point using a fixed width page? Why not use variable width columns?

Re:Bad example

[phoenix_rizzen]

You need to fix the DPI (dots per inch) setting on your monitor, then.

A 12pt font should be the same size across all screens and all resolutions.

If you vid. card's drivers don't come with the ability to change the DPI setting, then it's time to get a better vid. card (or possibly OS). Shoot, even my ancient ATI Rage 128 Pro drivers let me do this.

At home I have a 20" IBM P202 monitor running off an ATI Rage 128 Pro card at 1280x1024 and the fonts are set at standard 12pt -- I just cranked the DPI up to around 133. Now everything is the same size as before, just a heck of a lot clearer, cleaner, and sharper.

Re:Bad example

[Anonymous Coward]

When I looked at the source, I seem to recall that the font size was specified not in points, but in pixels.

Specifying font size in points on the web is idiotic. What use is a 12pt font on a handheld? What use is a 12pt font on a projector screen 20 feet away? I know people who use both of these environments to display websites, surfing devices are getting more diverse every day.

Re:Bad example

[sigwinch]

The other reply is correct: ESPN.com specifies absolute pixel sizes.

The DPI setting on XFree86 is erratic anyway, but that's beside the point.

Re:Bad example

[Anonymous Coward]

Wow, I think you've successfully managed to miss the entire point of the DevEdge interview. I'd love to pick your site apart right now to the degree that you've cherry-picked ESPN, but all I see is a few pages of you apologizing about your own site, bragging about how it works in Lynx, and all this in a design style that probably looks better in Lynx than it does in a graphical web browser.

I am so sick of engineers giving the profession in general a reputation of being unable to relate to business concepts. Engineers are often left out of important business decisions at companies because of this reputation. I can remember a meeting at a large company I was at where the choice of what network security to employ was made without a single engineer in the room. It sucks but it happens.

Seeing the hardheaded myopia of a post like this makes me wonder if engineers are sometimes kept out of important decisions for a reason.

Re:Bad example

[JimDabell]

Wow, I think you've successfully managed to miss the entire point of the DevEdge interview.

Which was what? That there is a business case for complying with published specifications? I think it's completely appropriate to point out that you can't promote "web standards" without actually conforming to them.

I'd love to pick your site apart right now to the degree that you've cherry-picked ESPN

Why? That website is not the subject of a case-study, it's just a place to stick a few files from time to time. Sounds to me you are attacking me rather than the points I am making. Feel free to do so, but you lose credibility when you resort to ad-hominem attacks. You'll notice I specifically referred to the details of the case study in my post - you, however, have not.

I am so sick of engineers giving the profession in general a reputation of being unable to relate to business concepts.

In any other type of engineering, I'd imagine that ignoring the relevent standards would be a sacking offense. It's a big business risk, and that was one of the primary reasons I posted what I did. It seems to have gone completely over your head though.

Now, was there a specific point that you wanted to address?

Annoying! *groan*

[usotsuki]

Why does everything have to be candycoated and designed in ways to discriminate against us people who would use Mozilla if we had the choice but are hog-tied down (at our public library) into using Netscape 4.7? It's only two years old, guys. It isn't like it's hard to code a page that will look correct in NS4. I'll go further and say that a decent Web page should be 100% viewable in ANY browser, not just the latest cream of the crop. Got Netscape 2.01 on one of those old 603e machines? Logged into some BSD box that uses lynx as its browser? I don't think it's proper to ban people from a site for stuff they can't help. If a page isn't viewable in Lynx, that's the coder's fault. All my pages are viewable with Lynx, *if I can help it*.

-uso.
In Soviet Russia, all our base are belong to you *g*

Re:Annoying! *groan*

[h3]

Netscape 4.7? It's only two years old, guys. It isn't like it's hard to code a page that will look correct in NS4

Well, while the specific dot version may only be two years old, I believe the NS4 series was released in the '97-'98 timeframe, making the codebase in the area of 5-6 years old! That's half the age of the web!

And no, it's not hard to code a page that will look correct in NS4. It is hard to code a page that will look correct and good, and do so in the most recent browsers, and use proper and conforming markup, and so on.

I've given up on NS4 as a developer. I make sure my pages are viewable and functional but I completely strip them of any layout- basically, they don't get styled at all, except for any tweaks required to make them viewable and functional- and provide a little notice of what to expect and urge them to upgrade. They work, but it looks like crap, but I think anyone using NS4 in this day and age probably understands the consequences of that decision (whether it's their own, or not).

-h3

Re:Annoying! *groan*

[JohanV]

.. Netscape 4.7? It's only two years old, guys.

XHTML is 3 years old.
CSS 1 is 7 years old.

And neither standard appeared overnight.

Re:Annoying! *groan*

[mgkimsal2]

If a page isn't viewable in Lynx, that's the coder's fault. All my pages are viewable with Lynx, *if I can help it*.

So, your pages aren't viewable in Lynx 100% of the time then, is what you're saying.

Netscape 4.7? It's only two years old, guys. It isn't like it's hard to code a page that will look correct in NS4.

Yes it is - at least, as someone else pointed out, to have it be visually normal in modern browsers. No, NS4.7 isn't two years old.

http://www.blooberry.com/indexdot/history/browse rs .htm

NS 6.0 is over 2 years old. 4.5 was done in late 98, and 4.7 is pretty much just incremental upgrades and patches, as have been all the point releases (.71, .72, etc). It's old, and it doesn't have decent CSS support. It's a waste of time trying to make things look the same in NS4.7 as in modern browsers.

There's a reason Netscape themselves doesn't support it. MS doesn't expect people to be using IE3, they expect people to be using more recent browsers. NS is the same way - they want you to use the latest stuff (NS6beta was release *3* years ago already).

Standards Compliant?

[Alethes]

The only downside is that it doesn't validate. Boohoo.

How can ESPN.com be touted as a site that is "saving bandwidth through standards compliance" when they're not standards compliant? It's possible to do all the absolute-positioning and other CSS tricks without making the site completely standards non-compliant.

I think the intentions are noble (encouraging upgrades to compliant browsers, reducing page weight with less code), but it seems like somebody didn't finish the job. That's fine if that's what they want to do, of course, but the behavior shouldn't be acclaimed as something other web developers should duplicate.

Re:Standards Compliant?

[GigsVT]

They're not saving bandwidth either really. The page is still loading in another window on their slow server, it's up to something like 220K at this point.

What's rendered so far doesn't look so hot.

I applaude the effort, but fixed pixels is never a good solution. The whole idea behind standards compliance is seperating content from presentation. The side effect is that you don't have absolute control over the presentation as an author. People just need to get over it. If they want absolute control over layout, maybe their front page should just be a PDF.

Bad Example

[Anonymous Coward]

I guess ESPN.com should just start serving up the amount of useful information your site has. That would be the solution to all their problems.

i'll compliant your standards!

[BortQ]

One excellent stooopidity of the validator that he points out is the practice of not allowing & delimited variables in URLs. (Look at your /. URL and you'll see some).

This is the reason that my website does NOT validate.

I wanted to validate. I tried to validate. But the ampersands screwed me.

Re:i'll compliant your standards!

[Jamie Lokier]

Well, duh, you should be writing "&" instead of "&" in the URLs.

Re:i'll compliant your standards!

[BortQ]

Yeah, i could do that, but why should I have to?

What's the problem with &'s in URLs?

Re:i'll compliant your standards!

[Ed Avis]

You just need to change the & character to & in your attributes. This is because HTML entities such as é are allowed in attribute values just as in normal text. So when you want a plain ampersand you have to escape it.

BTW, some web application libraries (such as Perl's CGI.pm) are moving to a newer style of URL that uses semicolons rather than ampersand to separate the parameters.

Relax, man

[michaelggreer]

Well, this guy is clearly not a "fucking idiot." He simply believes in practical solutions, and is not interested in abstract validation. I am a bit more to your side (I find, for instance, the opening of tags in javascript to be a nightmare maintanance idea), but I respect his approach. All of us know the difficulty of turning a Photoshop document from a designer used to print publishing, and turning it into a compliant web page.

Calm down. He's on your team. Don't be so absolute.

Re:Relax, man

[Anonymous Coward]

If someone on the team is disregarding the rules of the game, it makes the whole team look bad. If you claim standards compliance, you better actually have standards compliance.

Arrogant and Clueless

[ajwade]

The absolute positioning trick destroys the layout in Galeon (I've got the minimum font size set to 22 for the sake of my sanity). The left hand column overlaps the centre column (although gecko should arguably character-wrap to prevent that), and some of the text in the boxes on the right is missing because it doesn't fit. And the only reason the line spacing isn't far to small is because I've overridden it in my user stylesheet to fix similarly brain-damaged sites. The "lite" site isn't much better.

To be sure, the page would likely look fine if I let Mr. Davidson dictate my choice of font size and browser. Presumably I should set my video mode to 800x600 as well, so as to conform to the desires of espn marketing.

Espn does have "every right to not consider the non-upgrader person". They also have every right to lock out the non-upgrader until they upgrade. But doing the latter is moronic. I don't visit warnerbrothers.com at all anymore due to similar rudeness despite the fact that my current browser is probably allowed.

Oh, and the whole point of "alt=''" is to indicate to the browser that the "images ... aren't important unless they are physically seen". It's to prevent the page filling up with [image] or similar notations in browsers that aren't displaying images.

& in HTML

[LiamQ]

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.

It's a one-liner in most languages to fix this. If you are using a third-party ad server, then ask them to give you compliant code, it should be part of your contract to reduce business risk anyway.

There's no need to bother with the third-party ad server. Just replace & with & in the href and src attribute values as you would anywhere else in HTML.

& in HTML

[LiamQ]

& begins an entity or character reference in HTML, so a literal & needs to be escaped as &. Otherwise, you would have confusion in a case such as href="foo.cgi?bar=baz&copy=yes" (which is valid HTML but probably not what the author intended with that copyright sign in the URI).

Nice effort but...

[BladeMelbourne]

I commend their development efforts, but such a task is not easy. I am a web developer too. I write in XHTML Strict sometimes, and XHTML Transitional most of the time.

http://www.froggy.com.au/mike.skinner/Mike Skinner - Resume.htm

If I am building a site for a target browser and version (MSIE 6 on an intranet, etc), I will build to XHTML Strict, just to keep my brain active. XHTML Strict is a pain in the butt, some things are virtually impossible to do (or workarounds are not elegant).

Otherwise I like to use XHTML Transitional. Accessability is more important than bandwidth considerations, IMHO. Many people use old browsers, and they have the right to. They do not need to download Mozilla every 2 months or update MSIE when a new version/patch comes out. Useability is very important too, although often over-looked. If a site is not accessable and usable, people will not use it.

Table layout's DO have their place. A well designed table can easily use less code than positioned layers. Plus tables are rendered more similarly in more browsers than layers. I'm not talking about a master table with 3+ columns and many rows, I'm talking about a 3x3 (or less) tables.

ZDNET bad html example

[Anonymous Coward]

So bad it is funny.

http://news.zdnet.co.uk/story/0,,t269-s2132622,0 0. html