We've spent almost zero effort trying to make our site "look" the same in all browsers. Our acceptance testing is simple, "does the site look good in the browser being tested?" AND "does the site function as a user would expect?".
That's it. It's probably saved us hundreds of frustrating hours trying to support the various issues with the different versions of IE (all of which may as well just be an entirely different browser for development and testing).
Our educated guess is that most users will use one browser, and not do side-by-side comparisons of browsers and how the particular site lays out.
So IE doesn't give them rounded corners, gradients and decent drop shadows...know what? They're already used to a crappy web experience anyways. No amount of design effort will turn IE into Chrome, Firefox or Safari. Just let IE be IE, make sure all the buttons are more or less where they are supposed to be, and everything works.
> So IE doesn't give them rounded corners, gradients and decent drop shadows... (snip)... They're already used to a crappy web experience anyways.
Of course IE gives them rounded corners, gradients and drop shadows, and - no - they are not used to a crappy web experience unless they happen to run into a site designed with the same attitude as yours, which is far less common than you would like to think.
Do you have some pointers for standards compliant (or at least relatively compliant) CSS and HTML for rounded corners, gradients and drop shadows in IE 7 and 8 that don't require using DXImageTransform?
All of the information we found that had information on those three components offered either code that didn't work, required dozens of tiny little images, or used DXImageTransform which renders very poorly, particularly when there is text in the same element.
IE users are used to a crappy web experience, I'm stuck on IE 7 all day at my day job and a very large number of sites simple don't work. From fields you can't fill out, to misaligned elements, to sites that simply refuse to work on anything older than IE 8, FF or Chrome.
In our own site development we spent twice as much time trying to use various "tricks" to get IE 7 & 8 to look exactly like it looks in FF or Chrome. Either they worked in 7 but not 8, or 8 but not 7, or if they did work, looked significantly degrades over the rendering in FF and Chrome. Drop shadows were a particular problem. But many elements on our site use gradients, and any of those elements with text were virtually unreadable once DXImageTransform got ahold of them. In the end, short of rebuilding the entire site with dozens of little images, we decided to treat it like we'd treat the same problem with a traditional desktop graphics app -- Level Of Detail.
Just like with a desktop app running on low end hardware, where you make things work by lowering resolutions, decreasing draw distance, lowering polygon count, turning off anti-aliasing, frame skipping, etc. We chose to offer a lower LOD to people using a low-end browser. The site fails gracefully to this lower LOD with all of the functionality still intact. A red box with rounded corners and a slight gradient simply becomes a red box.
As it turns out, this works also on other oddball browsers like Opera. The last version of Opera would successfully render our site with rounded corners, but no gradients. So they got that LOD. The new version renders everything.
There's nothing weird about it, or bad attitudy about it. IE simply represents a less capable platform that should be treated as such. Our philosophy is to spend our dev cycles making good software rather than trying to coax a black and white tv to show color.
> Do you have some pointers for standards compliant (or at least relatively compliant) CSS and HTML for rounded corners, gradients and drop shadows in IE 7 and 8 that don't require using DXImageTransform?
You clearly know that there are no such pointers, and I am pretty sure you understood perfectly well what I meant in general.
I do not care if it is beautiful HTML/CSS that makes a web designer shine with a glow of harmony with standards. What I care about is for IE visitors to see rounded corners. There are ways to execute them, none of which is too complicated, most are butt ugly in terms of involved markup, but they work. That's all that matters.
> IE users are used to a crappy web experience, I'm stuck on IE 7 all day at my day job and a very large number of sites simple don't work.
This is irrelevant. There is me, a guy with a product, and there is my audience. Why the heck would I want to be like other poor sobs that cannot make a website look decent in IE? What sort of backward justification is that? Especially if I am seeing a good chunk of my visitors using IE.
> short of rebuilding the entire site with dozens of little images
You do what you gotta to do if you happen to value your IE visitors' experience. What are several dozens little images compared to stunned visitors' jaws dropping on the floor and their hands reaching for the wallets? :)
> we'd treat the same problem with a traditional desktop graphics app -- Level Of Detail.
Do name a couple of such apps. Short of games I cannot think of any.
> Our philosophy is to spend our dev cycles making good software rather than trying to coax a black and white tv to show color.
Sure thing, it's your decision, but as they say - first impression lasts and presentation matters.
I sympathize with all arguments here. However, if the client expects a lot of the audience to be using IE, and is willing to pay for the extra effort, some conditionally commented CSS and JS could layer on the extra images for the corners that really need to be round without sacrificing any performance or SEO juice. You may also want to check out http://code.google.com/p/ie7-js/ .
If the client wants backwards compatibility, then it should be a billable extra. If you're billing on an hourly rate, it's in their best interest to get the project finished as fast as possible.
I don't think the document was anti-backwards compatibility, just well, you know clients... they are always wanting the look like a Porsche, while still driving a rusty old pick-up.
They are just trying to justify the lack of support in an easy to swallow way. You want support, expect to pay for it, but realize that the money you're paying will only benefit a small percentage of your audience (you included).
Everyone's had (and still get) those clients using IE5, saying that if it doesn't work for them, it won't work for the rest of the internet.
Am I the only one who finds some slight irony in this document being a PDF rather than an standards-based HTML document?
None the less, I agree with the author -- and it's how we try to design at OpenDNS these days. Too much time wasted to make it look the same everywhere; it just needs to look good everywhere.
> Am I the only one who finds some slight irony in this document being a PDF rather than an standards-based HTML document?
That would be my fault. Sorry! The original was a blog post that I linked in my other comment but I came across this PDF first and thought HNers would like it. Also, I'm pretty sure it is meant to be printed out like an informational booklet and handed to new clients along with brochures, portfolio, and business cards.
This post is spot on. While building http://keeprecruiting.com we did not obsess over IE. This wasn't planned or anything but we really did not have the time. We ensured that it displays alright and does not break the functionality but we did not bother to make it look pixel perfect. We have built this product for recruiters who are notoriously uninformed about technology. We were helping one of our beta customers and one of the forms in the app was misaligned in IE6. We do not support IE6 but it was the only browser accesible to her at that time (new WinXP image). She immediately closed the browser double clicked on IE again and googled for chrome. This is one of the typical recruiters who does not understand about computers but somebody has told her that if a site looks bad in IE open it in chrome. The machine did not have Chrome so she went ahead and downloaded it after briefly cursing the IT that they do not install Chrome by default and that she had to get it on to her machine.
This is probably because google has started advertising big scale in India[1] as a part of the "Install Speed" campaign. Given the unbearably slow internet lines in India, highlighting "speed" as one of the features is a clever way to market it.
So for a bootstrapped startup, spending the time on getting the product right is more important than making it look good in IE. In fact, most customers don't care. They will simply move on to a different browser. You can spend the time providing them the features they need. Everybody wins.
This sounds like a post-traumatic therapy session for the clients that accidentally saw their deliverables in IE7.
If designers were to show their clients how their pixel perfect Photoshop sketches would look in IE7/8, guess how many clients they will end up loosing? Heck of a lot. You can talk all you want about being SEO-friendly and what not, but if the site looses its polish in some browsers, then the execution is simply not good.
If rounded corners are a part of site's design, then they are presumably there, because they contribute to forming specific impression of a product in site's visitors' eyes. You drop them, all becomes square and that's a completely different feel that sends different product message. The same goes for "font stacks" - you just cannot fall back to Verdana when there's no Calibri and assume it's a work well done†, because it's not.
Consistent visuals are absolutely essential to forming correct branding perception. If you are told otherwise - run, you are being fed bullshit.
This post shows an astonishing lack of awareness of cost-benefit tradeoffs and indeed the very nature of the web.
If you design for the lowest-common denominator, where do you draw the line? IE6? IE5.5? Win98 fonts? Do you render images for everything in order to create the "correct" brand impression in as many browsers as possible while sacrificing organic search traffic? Do you sacrifice the mobile experience to cater to the 10-year-old computer crowd?
Even if you forge ahead through the cognitive dissonance to create a graphic-design/visual-brand-centric priority system, for a given budget you have to decide whether you want to dumb it down for consistency's sake or create a more polished design that 50% of people will see today and 90% will see in a few years.
The bottom line is that these decisions need to be made on a case-by-case basis, and pounding on some creative hubris about the sanctity of each pixel will not guarantee anyone a more successful project. If you ran some A/B testing on the rounded corner issue you might be horrified to find out how inconsequential it ends up being in any given case.
Agree 100% - and I would bet that the same A/B testing would show that those users who DO care about rounded corners, text shadows et al are using Chrome/FF/Safari.
I'd have thought identifying the target audience and the actual use-cases the site needs to meet as being the #1 requirement. Everything else derives from this, and is built to support it.
Unless you are willing to support lynx (the text only console browser), you need to draw the line somewhere. Where you should draw the line depends on your visitors and how much money you have.
Ironically if you need to support Lynx then you will need use simply SEO-friendly markup and likely will have more time for css3 bells and whistles in modern browsers.
If the client is expecting fancy visuals, I think it is obvious that lynx support is not needed. Whether the same goes for IE6 and other antiquities/exotics - that depends entirely on site's demographics. But that's off the point.
The point is that designing for optional rounded corners makes no sense IF the site design is considered an essential part of product marketing (and it obvious should be). Showing "degraded" version to IE users is not too dissimilar to selling unpainted cars in a poorer part of the town. People there are used to crappy experience after all, why bother.
This is something I've intentionally started to do with my start-up. As long as the design looks intentional, it's really not worth the stress and the bloat. Make it fast, make it good, don't make it an OCD nightmare
This just reminded me how refreshing it is nowadays when you see a very well designed site that doesn't use rounded corners, shadows, or custom fonts, especially since they usually scroll more smoothly, etc.
That's it. It's probably saved us hundreds of frustrating hours trying to support the various issues with the different versions of IE (all of which may as well just be an entirely different browser for development and testing).
Our educated guess is that most users will use one browser, and not do side-by-side comparisons of browsers and how the particular site lays out.
So IE doesn't give them rounded corners, gradients and decent drop shadows...know what? They're already used to a crappy web experience anyways. No amount of design effort will turn IE into Chrome, Firefox or Safari. Just let IE be IE, make sure all the buttons are more or less where they are supposed to be, and everything works.
This post is spot on.