Where are my rounded corners?
bigseadesign.com
bigseadesign.com
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.
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.
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.
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 found the PDF while browsing through a local design firm's website ( http://bigseadesign.com/2011/05/where-are-my-rounded-corners... ) which I came across while searching for cross-browser rounded corners effect for my CSS3 pattern generator: https://zetabee.com/weave/share/3f476353. Turns out Chrome, FF, Safari, and Opera all support box-radius without any special browser-specific properties.
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.
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.
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.
I would actually stick with a PDF.
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.
[1]: https://encrypted.google.com/search?hl=en&safe=active...
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.
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.
--
† Calibri looks much smaller.
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.
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.