Slashdot is powered by your submissions, so send in your scoop

 


Forgot your password?
Close
typodupeerror
×
The Internet

Saving Bandwidth With Standards-Compliant Code 76

Posted by timothy from the look-feel-do dept.
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)"
This discussion has been archived. No new comments can be posted.

Saving Bandwidth With Standards-Compliant Code More

Saving Bandwidth With Standards-Compliant Code

Comments Filter:

  • Oh the irony! (Score:5, Informative)

    by Andy_R ( 114137 ) on Monday March 24, 2003 @12:26PM (#5583637) Homepage Journal
    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! (Score:5, Informative)

      by EnVisiCrypt ( 178985 ) <[groovetheorist] [at] [hotmail.com]> on Monday March 24, 2003 @12:39PM (#5583729)
      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! (Score:3, Informative)

        by Andy_R ( 114137 )
        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-des

        • Re:Oh the irony! (Score:2, Informative)

          by pbrammer ( 526214 )
          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

          • 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
        • Holy crap... if you only knew how terribly buggy Netscape is. There are so many workarounds web designers have to implement to get around the fact that Netscape 4 has a poor HTML/CSS implementation. Creating a dynamic (Uses things like "CSS" and "JavaScript") web site that works in both Netscape 4.x and well-made browsers is hell.
          • So use an html editor like Dreamweaver which can handle all that bs for you. And Communicator does JavaScript pretty well. You just have to stick to the features that were available in that version. Also, doing dynamic html with Netscape 4's layers is not so hard. Take a look at this using Netscape 4 [fuse.net]

            • Re:Oh the irony! (Score:4, Informative)

              by jilles ( 20976 ) on Monday March 24, 2003 @05:38PM (#5586098) Homepage
              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 :-).
          • It's not the fault of the browser if a website isn't robust.

            While I can understand ESPN's business decision to go with a pretty but fragile design instead of paying the extra for robustness, I don't think it's fair to blame the browser for not anticipating changes to the standards - remember that Netscape 4.7 was widely hailed as the MOST standards compliant browser when it was launched.

            It is worth remembering that HTML was never originally intended to be a page layout language - think about what the abbr
        • If you care about speed, get a cable modem. If you cant get a cable modem where you live, move to where you can. If you cant move, then deal with the speed. It is not the responsibility of a web designer to make a page accessable to people who decide to use 4 year old browsers.

          Shifting responsability is a sickness in society today, nobody just stands up and takes responsibility for their own actions. Cmon people, if you want to look at a web site that was done with CSS, has flash, etc., then UPGRADE
          • I agree with your intent, but your argument is dangerously flawed.

            One could use the same argument to say that no one should run anything but IE.

            Cmon people, if you want to look at a web site that was done with CSS, has flash, etc., then RUN IE
            • Actually, I use phoenix, and have yet to find a page that does not render properly. It handles css just fine, does flash, everything. And its tiny, and runs great on even slow PC's.
          • Either you're too young to ever have used a computer slower than 400mhz (x86) or you're plainly ignorant.

            It is true that upgrading from a 400mhz machine to a 4ghz machine will not give you a 'faster internet experience' as Intel may wish for one to think; however, older equipment may not always hold to that.

            I have several computers, on cable modem or faster internet connections. However, it can take minutes for webpages to display. Try using Mozilla on a 60mhz 486 with 8 megs of ram. Laughable. Mozilla wi
            • Dude, I cut my teath on an 8088 doing basic programming. :P And we have 233's here that run phoenix just fine. And there is no excuse for having a 486 60 mhz PC now, I have bought and sold full 233 mhz+ systems for 30 - 40 bucks, and with memory as cheap as it is, I dont think developing for 2% of the population is what a web master has in mind when he's making his boring ass web site for those 300 lynx users out there.

              Cmon, just let go of the past, you can do it...

              just let go....
        • I care more about...stability...which is I why I use Netscape 4.7

          HAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHA!

          <gasp>

          HAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHA!

          You may not be aware of this, but Netscape crashing only once a day isn't something to brag about anymore. Practically [mozilla.org] every [konqueror.org] recent [opera.com] mainstream browser [microsoft.com] is more stable than Netscape 4.7x. Some of them are faster too.
          • I haven't had a single Netscape related crash for weeks, but the final version of Mozilla for my OS falls over every 50 pages or so.

            As for the others, I'll install Opera when it does something extra that is worth learning a whole new program for, Konqueror when it does that AND has a Mac OS version, and Internet Explorer when hell freezes over.
            • Konqueror when it does that AND has a Mac OS version

              It's called Safari. Duh. Same rendering engine, nice and stable (during beta at that!) and very fast. Or Chimera -- I mean Camino, which is essentially Mozilla without the bloat (and the kitchen sink) with the native Mac OS X interface. Again, fast and stable.

              Or are you still mired in the world of the classic Mac OS? If so, that's sad.

            • Re:Oh the irony! (Score:3, Informative)

              by Moses Lawn ( 201138 )
              ...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.

    • Re:Oh the irony! (Score:4, Informative)

      by qengho ( 54305 ) on Monday March 24, 2003 @12:41PM (#5583743)

      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.

    • I just fired up Netscape 2.01 and the article is perfectly viewable (if you like black text on a grey background)!

      Even more surprisingly, I never got the upgrade message (with the article or with devedge homepage).

  • Commentary on ESPN's site overhaul (Score:5, Informative)

    by qengho ( 54305 ) on Monday March 24, 2003 @12:29PM (#5583662)
    As usual, CodeBitch [macedition.com] has something interesting to say about standards in general and ESPN in particular.
    • I see about half a paragraph about ESPN. The rest is just the usual rant about crappy browsers, and in this case, crappy browsers that aren't even worth ranting about since nobody uses them.

      Anyway, they aren't exactly bitching about ESPN either. That's what I was hoping for :-)
    • crappy browsers that aren't even worth ranting about since nobody uses them.

      If one runs a Mac-oriented site, OmniWeb and iCab are still too important to ignore. That said, usage of these two browsers has plummeted in the past twelve months, in the face of superior offerings from Chimera/Camino, and more recently Safari. If MacEdition's logs are any indication, about two-thirds of OS X users are using Safari. It used to be that OmniWeb accounted for nearly half of our OS X-using readers, which was much too

  • ...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."

  • Want to save bandwidth... (Score:5, Informative)

    by Pentagon13 ( 166309 ) on Monday March 24, 2003 @12:42PM (#5583751)
    After their latest homepage update I finally had enough. All my ESPN bookmarks now point to http://lite.espn.go.com [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 (Score:4, Informative)

    by DeadSea ( 69598 ) on Monday March 24, 2003 @12:44PM (#5583761) Homepage Journal
    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 [ostermiller.org], 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 (Score:4, Insightful)

      by Anonymous Coward on Monday March 24, 2003 @01:00PM (#5583864)
      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.
      • There's no point in sucking up to users who use software from half a decade ago.

        The big problem is corps who are too braindead to upgrade.

        Did you know that Sun's standard PC software load is Windows 98/Netscape 4.79?

        Give me a break.

    • Re:Netscape Navigator 4.x (Score:4, Informative)

      by brianmf ( 571620 ) on Monday March 24, 2003 @01:05PM (#5583898)

      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 [incutio.com]. It has some good tips.

    • If you are going to the trouble to maintain a lite version of your site, then it is not that much more work to also have a NS 4 capable version. NS 4 does support some style sheets, just in a very limited and non-standard way. When I design pages that use css I creat several templates. One for Standard browsers, one for text only browsing, and one for old versions of netscape. Then just add the content to the templates. The key differences are that NS 4 uses <LAYER> tags instead of the <DIV

    • 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 [w3development.de], 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 c

      • 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.
        So it should have been written: div {float:left;width:200px}
        Netscape 4 still doesn't like it.
      • 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>

        Yeah, neither would MSIE 5.x for the Wintel platform. From how many browsers were you attempting to hide the CSS rules again? ;)

    • 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 [shef.ac.uk] is still useable if you for example disable JS

  • A good move (Score:4, Insightful)

    by trajano ( 220061 ) on Monday March 24, 2003 @12:57PM (#5583850) Homepage Journal
    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.
  • Since when are tables not standards-compliant?

    • Re:Standards (Score:4, Interesting)

      by qengho ( 54305 ) on Monday March 24, 2003 @01:22PM (#5584005)

      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.

      • Re:Standards (Score:4, Informative)

        by d-Orb ( 551682 ) on Monday March 24, 2003 @01:37PM (#5584109) Homepage
        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 [glish.com], or (shameless plug) a site [shef.ac.uk] I have mostly finished coding :-)

        • Re:Standards (Score:1, Informative)

          by Anonymous Coward
          One problem with these examples is: Content of dynamic columns overflows when the browser window is too narrow for the content. Table based layouts don't shrink in these situations. They add scrollbars to the browser window and keep things readable.
        • I just went to your site skint.shef.ac.uk which doesn't render correctly at all on IE6. If you reply back here, I'll send you a screenshot.
      • The biggest reason we've needed to use spacer gifs when using table-based layout is because browsers don't handle table layout correctly in the first place. Since all browser makers refused to fix such problems, new technologies like CSS were created by the W3C, a group of amazingly naive people who thought that the new technologies would be implemented better than the previous technologies. A simple look at CSS implementation in current should be enough to disabuse anyone of that notion. You'd think that c
      • [...]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[...]

        You could just use CSS rule display:table or display:table-row or display:table-cell depending what you're after for. Pros: you can use table-like formatting without totally messing the markup. Cons: Internet Explorer doesn't support table* values for display property.

        MSIE6.x is becoming next NN4.x when it comes to standar

    • Re:Standards (Score:1, Interesting)

      by Anonymous Coward
      They are standards-compliant, but table-based *layout* very often isn't, because it stems from a certain attitude towards the web which doesn't encourage standard compliance.

  • View Page Source (Score:5, Insightful)

    by MobyDisk ( 75490 ) on Monday March 24, 2003 @01:27PM (#5584031) Homepage

    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 (Score:5, Insightful)

    by Evro ( 18923 ) <evandhoffman.gmail@com> on Monday March 24, 2003 @01:28PM (#5584045) Homepage Journal
    I love hearing about standardized web code on Slashdot [w3.org], which is so embarrassed about its HTML that it blocks the validator.
  • 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 [slashdot.org], 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.

  • 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 l

  • Here's a link [netscape.com] to the Second Part of the article

Slashdot Top Deals

He has not acquired a fortune; the fortune has acquired him. -- Bion

Close