Slashdot Mirror

← Back to Stories (view on slashdot.org)

Saving Bandwidth With Standards-Compliant Code

Posted by timothy on 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)"

15 of 76 comments (clear)

  1. Oh the irony! by Andy_R · · Score: 4, Informative

    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
    1. Re:Oh the irony! by EnVisiCrypt · · Score: 4, Informative

      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.

      --


      *everything* is Orwellian to cats.
    2. Re:Oh the irony! by qengho · · Score: 3, Informative

      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.

    3. Re:Oh the irony! by Andy_R · · Score: 2, Informative

      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.

      --
      A pizza of radius z and thickness a has a volume of pi z z a
    4. Re:Oh the irony! by pbrammer · · Score: 2, Informative

      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

    5. Re:Oh the irony! by jilles · · Score: 3, Informative

      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 :-).

      --

      Jilles
    6. Re:Oh the irony! by Moses+Lawn · · Score: 2, Informative

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

      --

      What if life is just a side effect of some other process and God has no idea we exist?

  2. Commentary on ESPN's site overhaul by qengho · · Score: 4, Informative

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

  3. Want to save bandwidth... by Pentagon13 · · Score: 5, Informative

    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.

  4. Netscape Navigator 4.x by DeadSea · · Score: 3, Informative
    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.

    1. Re:Netscape Navigator 4.x by brianmf · · Score: 4, Informative

      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.

    2. Re:Netscape Navigator 4.x by JimDabell · · Score: 2, Informative

      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.

    3. Re:Netscape Navigator 4.x by d-Orb · · Score: 2, Informative

      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.

  5. Re:Standards by d-Orb · · Score: 4, Informative
    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 :-)
  6. Re:Standards by Anonymous Coward · · Score: 1, Informative

    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.