Slashdot Mirror
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
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
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).
This is not the greatest sig in the world, this is just a tribute.
One of our biggest constraints is people in corporate settings that are still running NT4 with NS4.x. If you have any kind of corporate-type audience, there's a good chance you've got enough people with this older set up than you can just write off.
It's getting there, though. We're slowly deprecating older browsers. We have to be more conservative than ESPN; most of our clients are targeting a different audience. Hopefully we'll be able to make the full switch for most of our clients in about a year's time.
It's slow, but I'm just glad I don't have to check in NS2 and IE3 anymore....
This is the voice of World Control. I bring you Peace.
Since when are tables not standards-compliant?
Of course you can. It's called an opportunity. For instance, I work at a place that wasnt' ISO country code compliant. We fixed our databases so that we can later open ourselves to use other ISO country code compliant software. Nothing was particularly broken.
All that's need for any system change is either an opportunity, a requirement (thing gov't) or a request (think biz).
What about a gov't requirement to purge certain data?
I know, it sounds like knitpicking, but it's the truth
-
ping -f 255.255.255.255 # if only
Redesign or reimplementation? You certainly don't have to redesign a site to use XHTML and CSS. If existing content is the problem with reimplementation, have you considered that you are only creating more work for yourself in the long run? Implementing redesigns when you already have XHTML + CSS is far easier than doing the same with tag soup, and the longer you put off moving to a better structure, the more content you'll have to change over.
Some older browsers have problems with gzip encoding (yes, even though they say they can handle it). Specifically, you'll want to avoid encoding your external files (js, css) in this way.
Is your content mostly static or mostly dynamic? when 40% or so of the markup in a page is presentational, and those pages also go stale frequently, it can make a large difference. Four or five static css files can be cached very efficiently, especially as they can be used across the whole site.
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?
Of course you can. It's called an opportunity. For instance, I work at a place that wasnt' ISO country code compliant. We fixed our databases so that we can later open ourselves to use other ISO country code compliant software. Nothing was particularly broken.
Well, to *be* nitpicky, you didn't redesign because you weren't standards compliant, you redesigned to allow for future functionality. Changing a bunch of things just to be able to say "we're compliant with FOO.197" is harder to justify, unless you can do more business or save money by being FOO compliant. Which seems to have been ESPN's motive.
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
Well.. to be more nitpicky, you sometimes NEED to go by standards. What if the gov't required you never to store a credit card number ever again? Then you are redesigning because someone told you, you need to. not a business reason. I can give you references in books about this if you'd like :)
-
ping -f 255.255.255.255 # if only
Here's a link to the Second Part of the article