Saving Bandwidth With Standards-Compliant Code

RadioheadKid writes "DevEdge has an interview with ESPN associate art director Mike Davidson. In the interview Davison talks about the decision to switch to a standards-based, non-table layout. The interview touches on the process he went through to make that decision and the rewards in both bandwidth savings and browser compatibility. An interesting read for those who have not switched to a standards-based, non-table layout. (hint, hint)"

Comments

Oh the irony!

[Andy_R]

I tried to read the article, and guess what I saw...

"Please Upgrade Your Browser

You are using a browser which does not support the minimal standards required to get the full experience of DevEdge website."

Re:Oh the irony!

[EnVisiCrypt]

Although, it should be noted that the site will continue to work for you, just not the spectacular fashion in which it was designed. But if you're using a text-mode browser or Netscape 6, you probably don't care about things like layout.

Re:Oh the irony!

[qengho]

I tried to read the article

That's just an informational notice. The page contains a link that allows you to view the site anyway. No irony here.

ESPN does the same thing, and provides a "lite" version of the site for standards-impaired browsers. I hope this hastens the demise of NN4.

Re:Oh the irony!

[Andy_R]

I do care about layout, but I care more about speed, stability, memory footprint, and most importantly user interface familiarity, which is I why I use Netscape 4.7

I do have an old slow and buggy version of Mozilla on my computer for those few pages that would rather display a ".css not found' error than their content, but since the Mozilla people dropped support for Mac OS9, I would have to either go with an obscure browser, install a Microsoft product or change my entire OS just to look at a few over-designed web sites.

Re:Oh the irony!

[pbrammer]

Well, then you fall into the mentioned 2% category of audience members that they don't care about. If you can't view the page, then too bad. Don't let the door hit ya where the good lord split ya.

But seriously, their take was that their site is offered for free, and if their users want to see the site then they need to be using a standards-compliant browser. Otherwise, they have no sympathy for those users who do not upgrade. They do however have sympathy for those users that cannot upgrade due to a tight IT staff who locks down user's machines.

And by the way, I've found Opera to be quite fast. Just keep an eye out for the memory leak!

Phil

Re:Oh the irony!

[jilles]

I've heard a lot of strange things in my 28 years on this planet. Running netscape 4.x for stability reasons however is new to me. I can't begin to imagine the stuff you missed out on the past half decade or so. The phoenix nightlies I run, last longer than any version of netscape 4.x ever did on my machines.

The approach of using dreamweaver or otherwise include netscape 4.x code doesn't scale up. It is much more cost effective to tell netscape 4.x users to go f*ck themselves (and most of them seriously need to get a clue by now). If only netscape 4 didn't bother to interpret css, it would be much easier for webdevelopers. I've converted my sites to XHTML 1.0 strict in the past year so netscape 4 should be able to process the html. Unfortunately it messes up badly trying to do stuff like css positioning. It's beyond hopeless trying to work around that since it requires a totally different approach to modeling your page. I refuse to do browser detection and only test in IE 6 and mozilla (not in that order, phoenix is my primary browser). Working like this I can use like 98% of the standards and safely assume things work in most common browsers. I never tested or saw my sites in Safari. Yet I'm fully confident that either it will display everything as intended or it still has some undiscovered bugs that will be fixed in the near future. Unfortunately IE 6 doesn't support some of the cooler things like "position: float". However, telling IE 6 users to go f*ck themselves would effectively eliminate 80-90% of the visitors :-( so I reluctantly refrain from using such features. I don't care about IE 5.5 and lower anymore (and nor does MS I should add, see the register for details :-) but if it works in those browsers that's fine with me.

I'd be very pleased if slashdot dropped the table layout. As long time proponents of open standards, OSS, and generally cool nerdy stuff (i.e. stuff that matters) it is disgraceful that they are actually still whoring themselves supporting obsolete proprietary netscape shit. Even the original netscape developers turned their backs on that stuff and chose not to support layers in mozilla!

If you're still on netscape 4, you're probably better of using netscape 3. As I remember it was always more stable and it does a much better job of rendering XHTML since it doesn't understand CSS at all. Alternatively you can install opera (if your os supports it). I've found it to be quite fast on an old windows 95 machine with only 16 MB. And it even renders my sites correctly :-).

Re:Oh the irony!

[Moses Lawn]

...I'll install Opera when it does something extra that is worth learning a whole new program for...


Honestly, what's to learn? Click on a link to open it, Alt-left/right arrow (or just Z/X) to go back/forward, Ctrl-T to add a bookmark, Ctrl-space for the home page, Esc to stop loading a page. There. Now you know how to use Opera.

Oh, and F12 for the cool menu that lets you turn off popups/Javascript/cookies/GIF animation/etc. Trust me, it's worth trying Opera just for that.

Commentary on ESPN's site overhaul

[qengho]

As usual, CodeBitch has something interesting to say about standards in general and ESPN in particular.

Want to save bandwidth...

[Pentagon13]

After their latest homepage update I finally had enough. All my ESPN bookmarks now point to http://lite.espn.go.com. No Flash, no ads, no MS crap off to the right, just the content. You can always click on the big ESPN logo at the top to access the bloated homepage if you feel the need.

Netscape Navigator 4.x

[DeadSea]

The real problem with this approach is that Netscape 4 really barfs on many layouts. To go this approach you have to be willing to make sacrifices in the NS 4 department. Keep in mind than Netscape 4 still has about 3% of the browser market.

The big problem is that Netscape 4 thinks it understands CSS positionsing but it really doesn't. It will often fail to render properly, or even worse, crash.

It looks like these folks took the approach of not letting navigator on the site. I don't like this approach. Thankfully, there are some less severe approaches.

With my website, I put some javascript in to comment out the link to the style sheet if you are running ns4.

You could alse specify your style sheet link in a way that ns4 doesn't understand (I think there are a couple, but you lose the ability to provide a different style sheet for print media). You could also make your style sheet served dynamically and have an alternate or blank style sheet returned to NS4.

If NS 4 doesn't get a style sheet, the page is rendered as if it came out of the 1994 internet. But for folks who use an old browser, I say too bad.

The things I like to use most that NS4 doesn't like are floating elements (div {float:left;width200}) and borders (body {border:thick red}). For floating divs, in NS4 they don't float. NS renders them all on top of each other. For page borders, I find various versions of NS crash.

Re:Netscape Navigator 4.x

[Anonymous Coward]

Netscape Navigator 4.x is broken. There's no point in sucking up to users who use software from half a decade ago. If we keep cushioning the effects of their choice, they'll never switch. If their browser more or less works without changing the page specifically for them, fine. If it doesn't, let them see that their own choice breaks the page.

Re:Netscape Navigator 4.x

[brianmf]

You could alse specify your style sheet link in a way that ns4 doesn't understand (I think there are a couple, but you lose the ability to provide a different style sheet for print media).

I don't think you need to give up on media=print stylesheets just because you are trying to cater for NN4. NN4 wont do much with your print stylesheets but Moz and IE should use them fine.

What I would do is to include the stylesheets in the usual way (with a <link> element) and then if you want to cater for NN4 have the first rule in that stylesheet as an @import rule that imports all the advanced css rules (that are thus hidden from NN4).

I tend to avoid hacks (including the above one) at all costs because they increase the maintanence overhead, but if you are that way inclined, you should read the css-d Wiki. It has some good tips.

Re:Netscape Navigator 4.x

[JimDabell]

You could alse specify your style sheet link in a way that ns4 doesn't understand (I think there are a couple, but you lose the ability to provide a different style sheet for print media).

There are quite a few ways of hiding css from browsers, but there's nothing specifically preventing media-specific stylesheets. For exmaple, Netscape 4.x wouldn't see the contents of a print stylesheet referenced in this way:

<style type="text/css"> @import "/styles/print.css" print; </style>

You could also make your style sheet served dynamically and have an alternate or blank style sheet returned to NS4.

Bad idea for caching, http pipelining, and cpu time, unless you are willing to put a fair amount of effort into working around the various problems this causes.

If NS 4 doesn't get a style sheet, the page is rendered as if it came out of the 1994 internet. But for folks who use an old browser, I say too bad.

Ditto.

The things I like to use most that NS4 doesn't like are floating elements (div {float:left;width200})

What do you expect? You could at least have the decency to give it correct code. Go validate.

Re:Netscape Navigator 4.x

[d-Orb]

A problem with CSS layouts is that the table hacks (by now pretty much standarised in most usual browsers) need to be translated into CSS hacks. Stuff like Gecko, newer IE, Opera and all are making progress, but still hacks are needed. The beauty of XHTML+CSS layouts is that if you don't have the latest compliant browser, the page should still be useable in your browser. As an example, a website I put up for some course I taught in the past at skint.shef.ac.uk is still useable if you for example disable JS (I use a very crude hack to select what CSS to serve depending on the offending browser).
And yes, I know it is a crass way of doing things, but I don't have time to do all the hacks so that the site works in NN4, Gecko, Opera and IE.

A good move

[trajano]

This is a good move by ESPN. Though i don't really like the way they implemented (embedded JavaScript bad) it is still a step in the right direction.

A simple JavaScript to check if you are using a standards compliant browser and load the style sheet is a good way of ensuring your content is visible even on non-standard compliant browsers without affecting people who use the standard compliant browsers.

It is unfortunate that Netscape had released version 4.0 of their browser which is laden with badly implemented standard specifications (IE 3.0 to 4.0 was pretty bad early on too, but at least it was somewhat better than what we got with Netscape).

However, with more standard supporting browsers out there and more to come in the future since the XHTML standards are actually getting simpler (XML based parsing) instead of more complicated (like the addition of the BLINK tag thanks Netscape) we should start moving our content to be more standard compliant.

If you need a business case, throw this one to your financial rep. Say 1,000,000 web pages hits per month, each page adds 10K for table layouting (usually its more than that), that's 10 GB of wasted bandwidth that can be saved. Its also 10GB less to process through the HTTP data compression if you are keen with HTTP standards.

Also don't forget the amount of time it would take to maintain or make changes to these pages. Or worse, integrate them with JSPs.

If you are an employer, be wary of those that say they know HTML but also have Dreamweaver or FrontPage on their resumes. You may end up with a pig headed graphics artist who should've been a graphics artist not an HTML developer.

Re:bandwidth savings more myth than reality

[Eric Savage]

I think you're missing the point, you don't redesign solely for the purpose of becoming standards compliant. You redesign for lots of purposes, and you do it when your needs warrant it. The key is that WHEN you redesign, move to standards compliant pages.

As far as bandwidth savings being minimal, were you comparing old site w/mod_gzip to new site without? If so, then your results are obviously to be expected. If you did both with mod_gzip, then you likely need to build your CSS skillset some more (no offense intended, it really does take a while to master it).

Re:Standards

[qengho]

Since when are tables not standards-compliant?

They are, for tabular data. Using them simply for positioning is frowned upon. Having said that, CSS makes it difficult to do some things that tables can do easily (columnar layout), which is why many people still use very simple tables for basic layout, without going to the extremes of spacer gifs, multiply-nested tables, etc.

View Page Source

[MobyDisk]

After reading the article, I decided to follow the link to their web site and peek at the source. I was quite surprised by what I saw. Here are some quotes from the article and the related HTML I saw:

Do we want to send a 100KB index page full of Flash?

// CALLED BY FLASH HEADER
function changeiframe(iframemode) {...

...no code forking, no alternate stylesheets, and no box model hacks.

if (navigator.userAgent.toLowerCase().indexOf('webtv' )... ie = "Microsoft Internet Explorer"; ns = "Netscape"; if (navigator.appVersion... if (document.cookie.indexOf("ESPNMotionClient=true") != -1 ) { document.write('

I don't see that they've followed a single one of the guidelines. Maybe I'm looking at the completely wrong site or something?!?! I see browser-specific javascript, ActiveX controls, checks for browser and javascript versions, and flash.

No, this post is not CSS/XHTML compliant. :-)

Standards Compliance

[Evro]

I love hearing about standardized web code on Slashdot, which is so embarrassed about its HTML that it blocks the validator.

Re:Standards

[d-Orb]

Having said that, CSS makes it difficult to do some things that tables can do easily (columnar layout), which is why many people still use very simple tables for basic layout, without going to the extremes of spacer gifs, multiply-nested tables, etc.

I take offence to that :-) !! It is quite simple to do. For some examples, see Glish.com, or (shameless plug) a site I have mostly finished coding :-)