

Where are my rounded corners? - chime
http://bigseadesign.com/wp-content/uploads/2011/05/Factsheet-Where-are-my-rounded-corners.pdf

======
bane
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.

This post is spot on.

~~~
huhtenberg
> _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.

~~~
bane
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.

~~~
huhtenberg
> _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_.

------
chime
The creator's website appears to be: <http://boagworld.com/design/where-are-
my-rounded-corners/>

I found the PDF while browsing through a local design firm's website (
[http://bigseadesign.com/2011/05/where-are-my-rounded-
corners...](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.

------
pak
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/> .

~~~
kysol
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.

------
davidu
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.

~~~
zachrose
A web page explaining why rounded corners are expensive in IE, showing both
rounded and unrounded corners...in IE.

I would actually stick with a PDF.

~~~
beaumartinez
Because you can't embed images in HTML, right?

~~~
pornel
and then you'll get asked by the client to "just embed images".

------
rimantas
Short version: <http://dowebsitesneedtolookexactlythesameineverybrowser.com/>

------
lisperforlife
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.

[1]:
[https://encrypted.google.com/search?hl=en&safe=active...](https://encrypted.google.com/search?hl=en&safe=active&biw=1280&bih=658&tbm=isch&sa=1&q=google+chrome+billboard+india&oq=google+chrome+billboard+india&aq=f&aqi=&aql=undefined&gs_sm=e&gs_upl=25679l27670l0l12l8l0l0l0l0l549l549l5-1l1)

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.

------
huhtenberg
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.

\--

† Calibri looks much smaller.

~~~
rmc
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.

~~~
dasil003
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.

------
broot
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

------
petercooper
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.

