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)"
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."
A pizza of radius z and thickness a has a volume of pi z z a
As usual, CodeBitch has something interesting to say about standards in general and ESPN in particular.
...and on ESPN's redesigned site that is the subject of the article, with the supposed 'browser compatibility' benefits:
"You must be using a standards-compliant web browser."
A pizza of radius z and thickness a has a volume of pi z z a
I like using xhtml and css, and use it for my own personal web pages. When you're going for a larger audience, though, you are limited by their constraints. (Insert MS Windows joke here)
Do you even lift?
These aren't the 'roids you're looking for.
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.
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.
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.
Archie - CIO-for-hire
Since when are tables not standards-compliant?
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:
function changeiframe(iframemode) {... if (navigator.userAgent.toLowerCase().indexOf('webtv
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. :-)
I love hearing about standardized web code on Slashdot, which is so embarrassed about its HTML that it blocks the validator.
rooooar
My first thought was that absolute positioning is a mess if you change your font size. My laptop is 1600x1200, so I need larger fonts. I loaded up ESPN.com and changed the font size. No effect. Lame.
Then I read farther:
Greater user control over content display. Although our front page is the only page which has been converted over standards-based code [as of March 2003], our new story pages are on the way. With these new pages, users will have control over font, size, and leading of all body copy and their preference will be cookied and used throughout every other story page.
I understand this as a solution, but I find it ugly that this is being done server side.
And just like ESPNs website this site has a fixed font size. Grrr.
I can understand this on espn.com, where they have to fit stats in columns, but why on the text of an article.
The "upgrade" page crashed my NN 3.04, which is the only reasonable browser to run on my SGI Indy machine because of speed and memory requirements. And which still displays majority of sites I care about reasonable well.
I don't buy the "education" crap. It's the same as those sites that require you to use MS IE -- why don't they simply serve their standard page and let me decide if it is usable or not? Why do they think they know better than me what is good for me?
Oh well.
So, RadioheadKid, why haven't you switched to Light mode then? You save bandwidth, and there are no tables. Standards compliance, though ... dream on!
It is cool that for a site aligned with MSN, that they mentioned chimera, safari and (imho most importantly) konqueror. We have arrived.
That's what I'd like to know. How they tout espn.com as a standards-compliant website when they use such non-standard things as Flash??
Just because 96.1% of their "regular" viewers have the Flash plugin installed does not make it a web standard.
And here I was expecting something new and exciting, using XHTML, CSS, and all the other nifty new standards that have been approved over the past few years.
And by the way, I've found Opera to be quite fast. Just keep an eye out for the memory leak!
I think the memory leaks that Opera used to have in the 4.x - 5.x days are gone. You do have to be careful if you use the "Enable automatic RAM cache" option, though. My Opera (on W2k) is using 398,168k with that setting. Then again, I have 27 pages open and a 512 meg machine, so I'm cool with that. (Would you like to know my views on tabbed browsing?)
Back to the topic: I agree completely. If you want to see modern web pages, you need a modern browser. If you're happy with a 1996 web, more power to you, but you really can't complain.
What if life is just a side effect of some other process and God has no idea we exist?
I appreciate the argument that a lot of CSS advocates make about moving to CSS/box layouts and away from tables in order to a) force people to upgrade their old browsers, and b) encourage browser developers to better and more consistantly implement the standards. Seperation between content, presentation, and style becomes all the more important when working with web applications and making the content available for multiple platforms (pc, wireless devices, etc).
However, I'm also a strong believer in not locking anyone out or throwing up roadblocks for people to get at your content. I truly am beginning to feel that it's best to aim for as simple a layout as possible -- look at google or gnu.org. No headaches and everyone can easily read it.
Perhaps that just isn't an option for a large content mill like ESPN, although another poster did mention that there's an ESPN mirror that removes all the cruft...makes me wonder how much bandwidth they could save by just simplifying. I wonder if anyone's done an analysis to show the bandwidth cost for transfering all the unnecessary image files in a typical commercial site.
All one has to do is hit the right keys at the right time and the instrument plays itself. - Johann Sebastian Bach
Here's a link to the Second Part of the article