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.
- How Twitter, WordPress, and Google Contacts Influenced Notify My Team’s UI
- Our Exhaustive Shipping Project – What We Learned and What New Features We Added
- Integrating Customer Reviews into our Cart
- Apple Pay and Google Pay Now Live – Step 2 of Our Braintree Integration
- We Recently Migrated Detailed Image to Braintree Payments: The Good & Bad From This Large, Unplanned Project