Optimized For…

I must apologize to the small number of my readers who are still on Internet Explorer 6 (IE6). If you are, you’re looking at a broken website with weird gray margins and a third column that resides at the bottom of the page. It’s a bummer, and I’d love to fix it, but here’s the deal…

Internet Explorer 6 is an 8-year-old, non-standards compliant browser. I no longer have access to a computer that has IE 6 installed, and Microsoft doesn’t allow you to run multiple versions of their browser on the same computer, so I have no way of testing my layouts in IE6. Just this fact makes it nearly impossible to resolve the broken layout – you can’t fix what you can’t see.

IE6 is notorious for breaking pages that work perfectly well on every browser that came after it, all of which are far more standards-compliant. Also, being such old technology, it doesn’t properly display transparent PNG files – this is where the gray margins come in. It’s possible to fix the 3-column issue (but not easily and not with the same layout), but there’s no reasonable way to fix the gray margin problem without diminishing aspects of the design that I’m not willing to compromise on.

I’ve always hated those “optimized for so-and-so browser” buttons. It’s always been my opinion that web developers/designers should do whatever is necessary to make websites work reasonably well on all current and most not-so-current browsers. There is a limit though; at some point, designing for defunct browsers becomes an exercise in futility. Up until now, I’ve always made sure my sites work properly in Internet Explorer 6, but at this point I can no longer justify the considerable time and effort it would take to get EcoVelo working properly in an 8-year-old browser. So I’m going to break my own rule and for the first time say my site is “Optimized for Firefox 3, Safari 3, and Internet Explorer 7“. If you are using anything other than one of these current browsers, all bets are off. And if you’re stuck on IE6, consider doing yourself a big favor by upgrading to a modern browser (they’re all free). These new browsers are far superior to what you’re currently using and they will considerably improve your web browsing experience.

UPDATE: The column wrapping issue is resolved (Thanks Colin!).

Firefox 3
Safari 3
Internet Explorer 7

27 Responses to “Optimized For…”

  • Ows says:

    Point of note, Alan: same happens in Google Chrome (i.e. Large grey border between Header Bar and content area), even though Chrome should normally qualify as a “modern browser”!

  • simon says:

    although google chrome is beta and i’ve found it does that with many websites. I was very underwhelmed with it. I used it for a day and gave up.

  • Alan says:

    @Ows

    Thanks for the heads up. Chrome is so new that it’s entirely pointless to try to code pages to display properly within it, particularly since the Mac and Linux versions are still “in development”. It’ll be interesting to see what happens – so far I’ve been unimpressed…

  • Colin says:

    To fix the IE6 right column issue just add #center {overflow:hidden;} — This change should pose a problem with other browsers but if you want you could always enclose this in conditional comments (http://www.quirksmode.org/css/condcom.html ). There are hacks to fix the png issue but they are all kludgey so I’d ignore that.

    Also if you do want to test in IE6 you can use the IE Collection app to run all of them at the same time ( http://finalbuilds.edskes.net/iecollection.htm ).

    BTW, as an avid reader of your site, I would love it if you reduced the height of your header. I love white space too, but it’s rather annoying that even with my large monitor I need to scroll down to read anything more than the first paragraph of an article.

  • Ows says:

    Re: Google Chrome, I’ve actually found it quite a nifty tool. sure, there are things that annoy me, but I find the layout cleaner, the screen area larger, and the general intuitiveness of the software’s in-built Google Search while using the address bar to be a great tool during my 8hr working day. Aside from Chrome, I’m very much a Firefox junkie… having only become a VERY recent convert from IE7.

  • Alan says:

    Hi Colin,

    Very cool. Your fix brought the offending column back into place and it’s looking good so far on FF and Safari. I’ll have to check it on IE7 when I get home tonight. Unfortunately, the site is still hideous on IE6 due to the grayed out PNGs and other more subtle issues, but at least the sponsor banners are where they need to be.

    Thanks!
    Alan

  • Colin says:

    I just checked it here and it works fine on IE7 too.

  • Colin says:

    btw in my earlier comment, I meant to say “this change shouldn’t pose a problem” rather than “should”.

    What was happening is that IE6 allows content to stretch divs (even ones with set widths). Also, IE6 likes to add random space around images. As a result, the center column was pushed out and the right column pushed down. FF/Safari/IE7 just allows content to overlap instead of widening the div.

    With overflow=hidden anything too wide is clipped off and thus in IE6 the column doesn’t widen.

  • Alan says:

    Thanks again Colin, I owe you a beer/coffee/tea!

    Interestingly, I had overflow:hidden; assigned to the nested DIVs that contain the sidebar and main column content, but NOT the wrapping containers. Live and learn.

    Best regards,
    Alan

  • Simon N says:

    @Owl

    I’m using;

    Chrome 1.0.154.43

    IE 7.0.5730.13
    Firefox 3.0.5

    EcoVelo is identical in all browsers (the only gray bar visible between the header and the content in the “subheader.png” image).

    Apart from it’s occasional hiccups with Flash, I also find Chrome quite decent. Keeping every tab to its own process means I’m not swearing and gesticulating at the screen as often as with Firefox).

  • Simon N says:

    Argh, “its”, not “it’s”! Need more coffee..

  • Fritz says:

    EcoVelo is impossible to read with the mobile version of IE as well. When I found mobile browser religion a couple of months ago I added code (PHP) to detect and simplify the layout for those browsers. They’re now about 2% of my audience.

  • Alan says:

    @Simon

    Thanks a bunch for checking the site – I owe you a beer/coffee too… :-)

  • Alan says:

    @Fritz

    I may look into adding a mobile version – there are WordPress plugins that make the operation fairly simple I understand. I think of EcoVelo as a visual experience just as much as a textual experience, so I’ve been a little slow to move on this.

  • Darren says:

    FWIW, Ecovelo works great in Camino (OS X). If you want more of an edge case, I checked the Flock browser and you’re good there, too.

    Regarding Chrome, I actually have been using this more and more at work due to its speed. It’s by far the fastest and most responsive browser I have installed on my XP machine. I have FF, IE6 (testing purposes), Safari, and Flock also installed. As a user of Chrome I expect some sites to have issues due to its newness and often slap myself in the head when checking builds at work in it (it’s not a supported browser at my employer).

  • eva says:

    a related question: I’m subscribed to the “posts”" rss feed via google reader, but for some reason the full posts do not display–I only see the post header and a teaser sentence. I don’t have this problem with any of my other feeds. Is there a reason this happens? since you offer the feed, I’d love if the entire post came through on it…

  • Fritz says:

    I’m with Eva: I personally find partial feeds *really* annoying. My typical reaction is the unsubscribe, but EcoVelo is so full of good bikey crunchiness I haven’t been able to make myself do that yet. Just my 2 cents.

  • adam says:

    Hi, Alan-

    I don’t think that we should have to continue to support ie6 (or any version of ie for that matter), but often my bosses/clients do not agree. For these circumstances, I use a decent app called multiple ie. It even includes ie5.5.

    http://tredosoft.com/Multiple_IE

  • Alan says:

    @Adam

    I have those clients too, mostly in the public sector. On those projects, I design from the ground up for IE and my cohort in the web development department (I’m in design) does the code sniffing for me.

    Thanks much for the link!

    Alan

  • Alan says:

    @Eva, Fritz

    I originally posted full feeds, but when my content started getting scraped, I went to partial feeds, which appeared to eliminate the problem. I suppose I could try going back to full feeds, but if the scraping starts again, I’ll have to go back to partial feeds and explain why all over again (for the umpteenth time)… LOL.

    EcoVelo is intended to be as much a visual experience as a reading experience – I put a lot of effort into my photos and formatting. Thanks for making the effort to click through from your reader to have a “look”. :-)

  • Fritz says:

    Makes sense and I understand. I hate scrapers… Grrr.

  • eva says:

    it is indeed a visual experience, and a pleasing one, and I appreciate the work you put into it. I will probably unsubscribe, though, because a partial feed isn’t really that useful– I use a feed reader because as a techie and office worker, I use computers nearly constantly, which has led to serious RSI problems that inhibit my use of anything but bar-end shifters;) since I’m 24 and intend to keep riding bicycles happily for another 50 years or so, I have to reduce the number of sites that I click through each day, and feeds make it easy to keep up with content and photos without having to go to every site individually. that’s just me, though, and I know one reader less is not that big of a deal. so, thanks for explaining.

    (using Chrome 1.0.154.03, displays with no issues.)

  • Alan says:

    @eva

    Well, every reader is important to me, and I wish I could accommodate you. For the record, you’re not the first to ask about the partial feed, and I went back to full feeds once, only to have the scraping start up again. Maybe I shouldn’t be so fussy about it; my main concern is what it may do to my Google ranking, which I need to take care of since it’s so hard-earned and has a bearing on what I can justify charging for ad space.

    Personally, I subscribe to a fairly large number of feeds from the major media outlets and a majority of the larger sites only publish one line feeds. Because I’m so accustomed to receiving these partial feeds myself, I was surprised by the number of complaints I received when I initially went to a partial feed.

    Best of luck with your RSI – being a graphic artist I struggled with similar issues in years past. What finally solved it for me was trying a number of different pointing devices. The past couple of years I’ve been running a Kensington Expert Mouse (trackball) on my right hand, and a Wacom Tablet on my left hand. A few of us in the Graphics department at my work swear by Wacom tablets. They take some getting used to, but they can really be a God-send if you’re having wrist problems.

    Take care-
    Alan

  • Fritz says:

    Removing armrests on my work chair completely eliminated my wrist/forearm pain. YMMV.

  • Simon N says:

    Blogs relying on ad revenue can get hammered by RSS Feeders. Biking Bis is another partial feed blog. As with EcoVelo, the content justifies the click through.

    I usually skim through my feed and ‘open-in-new-tab’ anything I think looks interesting anyway, so it doesn’t really cramp my style that much. I understand that might be different for the mobile readers. :)

  • Duncan Watson says:

    re: RSS, one line feeds annoy me, but the ecovelo partials are fine. At least I get an idea of what I will see and don’t click through just to find it was a worthless oneliner in total. I don’t read most of the majors because frankly, their content sucks. In general the straight news isn’t so bad but anything involving analysis is fumbled by the corporate major sites.

    I click through a fair amount anyway because this is one of the sites I like to comment on. The comment feed is excellent and is one of the major reasons I click through.

  • Ruari says:

    Just thought I’d add that the site works nicely in Opera too :-)

 
© 2011 EcoVelo™