Display Block Creative

The conversations
“But that’s not what I see in Internet Explorer; your code is broken.”
“Nope, I can’t do that. You’re gonna have to make this more boxy.”
“Wait- where’s that rounded corner?”
“It’d take way too long to align all that on one line. Days.”

Hmmmm. Each of those can be a perfectly valid point, by any given person, in some circumstance. A designer may not understand why having an unrepeated background fused together to form a great collage can’t work when it looks perfectly fine in Photoshop (or Fireworks for those of you out there). A developer may not understand why it makes any difference in the world why the font needs to be Lucida Grande, not Arial. After all, no one’s going to notice, right? And of course there’s the client who just inevitably wants a little more ’swoosh’ in each site. But that’s another topic altogether.

The solution? That we finally come to terms that it is unrealistic to get the same functionality and effects on all browsers, at least at right now. One one side, we have the “modern browsers”:

Modern browsers at this time

• Firefox 3.5
• Safari 4
• Google Chrome
• IE8
• Opera 10

And on the other hand we have…

Deprecated browsers

• IE6
• IE7

Now you may be aghast at seeing IE7 on this list, and to be honest Internet Explorer 7 is leaps and bounds better than Internet Explorer 6. But does it support all the functionality of CSS3, or at least many of the working specs? The answer is no. And while it might be surprising- Internet Explorer 8 doesn’t, either. Want to test it? Take your  browser over to CSS3.info’s selector test suite and see what happens. Now try it in any of the other browsers. You’ll see how lacking Internet Explorer 8 is, at least for now. And while it doesn’t support many of the selectors in this suite, it’s put in the ‘modern browsers’ category in this post because it has fewer headaches with the box model than its predecessors.

Picking your design/coding battles

We’re going to use this site itself as a test-run of the way browsers render differently. Take a look at the various screenshots, and figure out if you see the differences.

IE6

Yep, it looks awful, doesn’t it? And it’s meant to, by design. If coders and designers keep building for this antiquated browser, all that’s being done is that we as a web community are enabling its usage while holding ourselves back from HTML5 and CSS3. But the site is actually still functional, and it’s only the glaring visual miscues that are in place, with a ‘friendly’ notice telling people to upgrade to a better browser.

So what’s going on here? First off, the png’s aren’t transparent. Is it easy to fix? Sure, it could be if there weren’t any css sprites being used, which they are, on the navigation. So if we did the Microsoft AlphaImageLoader Filter or even a small Javascript solution like Supersleight to fix the issue, the navigation wouldn’t be able to change background position as it is utilized and separate graphics would have to be created in order just for IE6. Is it worth increasing bandwidth (not to mention creating oh-so-fun slices!) for a browser that came out in 2001? No.

However, there ARE about 8 lines of CSS served up just for IE6 so that the navigation doesn’t show up at the bottom ( because of IE’s broken box model ), and a few other glaring errors. Why? Because it’s a fine balance of whether the site should still be usable for those on IE6, if not aesthetically pleasing.

IE7

This one doesn’t seem as bad, and it’s definitely usable. Ironically, IE7 was served up about 12 lines of code as of this writing to hack its look, partially because some of the glaring visual miscues that are allowed in IE6 shouldn’t be allowed in IE7 because it is a newer browser. Of course ideally we, as web-folk would like to imagine that everyone upgrades their browser as soon as an update is available (nightly builds, anyone?), but the reality is that this isn’t feasible.

IE8

Only one screenshot was included here for Internet Explorer 8, and that was just to illustrate that it looked about the same as IE7, except without having to do any extraneous hacking at all which already shows progress.

So what’s missing?

These may look absolutely fine to most people, but designers are all about the details. The final touches; the cherry on top. And using CSS3 we finally have a way to implement some gee-whiz effects without extra graphics, extraneous markup, and sans-hackery. So let’s take a look at what that looks like.

Safari 4

Did you notice any differences? If not, look a teensy bit closer:

1. On the side bar, there is now a shadow underneath each heading
2. On the search button, there’s the same shadow
3. On the thoughts page and on each blog entry, there is a soft rounded corner at the edge of each headine
4. On each link, the background has the same rounded corner

Granted, this is just an example of two properties of a vast variety that can be used- box-shadow and border-radius, but it’s a start. Does the site still function in Internet Explorer and look moderately good? Sure. But it has a bit more panache/flair with the standards-compliant browsers.

You may also notice that the text just looks smoother. Unfortunately, that has to do with the rendering on the OS itself. The Safari example is taken on OSX, whereas the IE examples were taken on XP. For those who would like to extol the virtues of Windows 7, it should be noted that firing up this site in Win7 has the same look as on WinXP. But that is another consideration to be taken into account: that there is no such thing as pixel perfect, and that there is no such thing as making a design comp looking exactly the same on all browsers, whether through aliasing issues or otherwise. It’s all about finding a happy balance.

So what now?

Is the point of this post to bash on Internet Explorer while building up Safari / Firefox 3.5 / Chrome? No. Of course not. It is instead to point the immense opportunities web developers are starting to have, and how much flexibility designers too can now employ easily. If anything the point is that designers and developers need to work together to figure out what aspects of a design are possible while still having graceful degradation or progressive enhancement as the backbone of their workflow.

*Update: This post also has another CSS3 selector now added: attribute contains. On standards-compliant browsers, if the anchor tag has an attribute that starts with “lightbox”, the background png is not shown.  On older browsers, it is.