Why The Release of IE8 Matters (to us at least)

Internet Explorer 8 Logo

Yesterday Microsoft finally released the latest version of the Internet Explorer browser, IE8, which can now be downloaded from Microsoft’s official site.  Hopefully within a few weeks it will get pushed to people via Windows updates and the majority of people using IE7 right now will be upgraded to IE8.  Why do I say hopefully?  Because for us there is one little feature that will drastically increase the quality of the new Detailed Image – CSS table support.

Let me explain.   Way back when I started doing web design, people used tables to lay out pages.  They worked great for complex grid layouts, but the problem was that the <table> tag was intended to be used for tabular data and not for visually laying out a site.  A few years later, the web design world switched to using floated div’s for layout.  Much harder to use than tables, and again, not the intended use.  So, when CSS2 was conceived, it included support for something called CSS tables:  a way to lay out a web page in a tabular grid format that is simple to use and is actually intended to be used for layout (by the way, CSS stands for Cascading Style Sheet  – it’s these style sheets that control the layout and design of almost all HTML web pages these days).

Great, awesome.  Except for one problem – of all of the grade A browsers, only IE6 and IE7 do not support CSS tables.  IE8 finally does, in addition to Firefox, Chrome, Safari, Opera, etc.   Essentially now, web developers can begin to use CSS tables without fear that the majority of their visitors will have trouble rendering their site.

When we sat down to plan out the new Detailed Image, we decided we wanted to do it right across the board.  While not necessary (although potentially beneficial), we decided to write code that passes W3C validation. Now, you can do layout any of the three ways above and still write valid code.  But after both reading the book Everything You Know About CSS is Wrong, Mike and I decided that the right thing to do was to develop our site layout using CSS tables.  Here’s an excerpt, which should explain why:

Our Part of the Bargain

For years, we in the web design community have bemoaned the state of CSS support in Internet Explorer, and the limited (and, in many cases, buggy) set of tools it gave us. Page layout with CSS was a black art that rarely worked perfectly, predictably, or reliably, even for its most experienced practitioners.

After Internet Explorer’s long sleep, Microsoft has finally responded with a browser that passes the Acid2 test, providing us with all the tools we’ve been demanding. With the imminent release of IE8, Microsoft has fulfilled its part of the bargain; now it’s time to fulfill ours.

It’s time for us to abandon the arcane CSS layout techniques we worked so hard to develop while Internet Explorer lay dormant. It’s time for us all to learn and begin using the new CSS, lest Internet Explorer decide the time is right for another nap. It’s time to embrace new ways of web design practice, seizing the new features that IE8 now joins the other major browsers in supporting. It’s time for us to show the beginners who are just now learning to design web pages for the first time that CSS isn’t too hard anymore.

I know exactly what you’re thinking now:  that’s great, but what are you going to do about people using IE7 and IE6?  We decided to create a separate style sheet for those browsers that uses floated div’s to almost replicate the desired layout.  Yes, it’s more work, but until those browsers are deprecated there really are no other options if you want to utilize CSS tables.  We are also going to display a one-line message on the top of the site to them suggesting they upgrade to a newer browser for the best experience on our site in hopes to subtly push more people to upgrade.

Currently, our year-to-date browser breakdown is as follows:

  • Firefox – 37%
  • IE7 – 37%
  • IE6 – 13%
  • Safari/Chrome – 11%
  • IE8 – 1%
  • Opera and many others – 1%

We hope that the majority of those IE7 users (and some of the IE6 users) will upgrade.  My guess is that well over 50% of people using IE7 have Windows updates enabled and will automatically be upgraded, but that’s pure speculation.  Should be interesting.

As far as the actual browser is concerned, I give it a mixed review.  It’s fast – faster than Firefox but not quite as fast as Chrome (although my Firefox is bloated with add-ons so that may be why it’s as slow to load as it is). My biggest concern is a feature called “Compatibility View”, which essentially tries to solve the problem of sites that cannot be rendered in IE8 by displaying them as if the browser was IE7.  It attempts to work automatically (at least in the Beta version I’ve been using for the past few months), but is wrong quite often.  It also allows the user to switch, which is the part that scares me:  most people haven’t the faintest idea about browsers and versions and rendering, and now you’re putting page rendering in their hands?  Seems like a recipe for disaster.

Just last week my girlfriend hopped on my computer, started up IE8, and tried to pay her monthly college loan payment.  When the site didn’t work, I hit the “compatibility view” button and then it did.  I explained it to her, and at that moment realized what a horrible feature this was.  She’s pretty tech savvy, but wouldn’t have been able to pay a bill in IE8 if I wasn’t there to explain browser rendering.  Not good.

Anyway, long story short, when we pushed up our release date, I was concerned that IE8 might not be released in time.  Thankfully that’s not an issue now.

5 comments on Why The Release of IE8 Matters (to us at least)

  1. Anthony says:

    Adam,

    Being a web developer myself, this post leaves me extremely conflicted. Of course, I strive to be as compliant as possible, whenever possible. But one thing I’ve learned the hard way, year after year, client by client, is that 100% compliant websites (that attempt backwards-compatibility) lead to two things: much more work than is necessary for you, the developer, and a worse user experience for at least a couple of years.

    You wrote a post just the other day that I liked, about not thinking *too* long-term when making business decisions. To me, this post should be an extension of that idea. The technicalities of your ecommerce layout is essentially a business decision – something that will determine how successful your website is and how much work you will have to put into it. I absolutely guarantee that IE8 won’t have majority market share at *least* until the next time you change your designs. That is the time to be thinking more seriously about IE8. When IE6 came out, it took a good couple years for IE7 to even the playing field. IE8 will be no different. And coding for a 2-year minority is like releasing a product today that a market doesn’t exist for until 2 year for now. You should be planning that product, of course, but in the meantime, something easier for you to maintain and sell should be released today.

    That being said – you expressed your concern that without programming for IE8, you’re forced to use either tables or floating divs. While this is technically true, there are solutions out there that make floating divs extremely to understand & use. Blueprint CSS is an *excellent* CSS framework that we use extensively:
    http://www.blueprintcss.org/

    Also, this is a very important note: you mentioned IE8 and issues with the new “compatibility view”. There is actually a way for you, as a web developer, to force your website into compatibility view, thus causing the user to not have to choose themselves. It’s as simple as a META tag:

    Here’s the joke: Despite IE8’s enhanced standards compliance, there’s one issue – I’ve been keeping tabs on this subject for the past 6 months, and many web developers are apathetic to IE8. For the time being, the general consensus is to simply throw that META tag in your site, have it render exactly as it did in IE7, and call it a day… I’m not saying it’s a longterm solution. But you know what, I agree. IE8 has no market share, and it won’t have significant market share for at least another 1-2 years. That is the time to overhaul code. In the meantime, tools like Blueprint CSS do an amazing job making CSS2 easy to use in a modern-day standards-compliant way.

  2. Anthony says:

    Sorry, it looks like your website stips META tags from comments! (go figure…)

    Here’s a website with examples of META tags you can use in IE8 to force IE7 compatibility:
    http://www.thesitewizard.com/webdesign/prepare-your-site-for-ie8.shtml

  3. Adam McFarland says:

    Anthony –

    All of your points are definitely valid. We considered everything you mentioned, but at the end of the day decided to go this route. The IE7/IE6 stylesheet is extra work, but the way we have it set up I don’t think it will take much more than a day or two to get it to work 95% as well as our CSS tables do. It’s something Mike is tackling in the coming week or two, so if it doesn’t turn out to be as easy as we think maybe we’ll change our mind.

    Adam

  4. Anthony says:

    Fair enough – although you might find the true test is time itself. I look at web design & development kind of like playing Jenga. It’s not *too* tough to get the pieces/stylesheets to fit in the beginning. The hard part is actually as time progresses, and you need to modify & add to those building blocks… that’s when you actually question why you built something the way you did.

    But regardless! Let me know how it goes. Maybe I’ll be pleasantly surprised and be preaching your strategy for new projects moving fwd.

  5. […] his work.  It’s even more impressive when you factor in that it works cross-browser (even in old versions of IE that don’t support CSS tables) and that it all passes W3C validation.  George and Greg did a great deal of work overhauling the […]

Leave a Reply

Your email address will not be published. Required fields are marked *

Commenting Rules

I'm honored that you found this post interesting enough to leave a comment. Before posting, I have a few ground rules:

  • Please keep your comments as relevant to the post as possible.
  • No personal attacks or any other nastiness.
  • Your first comment is subject to my approval.

Thanks!