7 ms·

Where are my rounded corners?

99 points by chime 15y ago

chime 15y ago
The creator's website appears to be: http://boagworld.com/design/where-are-my-rounded-corners/ 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 https://zetabee.com/weave/share/3f476353. Turns out Chrome, FF, Safari, and Opera all support box-radius without any special browser-specific properties.
pak 15y ago
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/ http://code.google.com/p/ie7-js/ .
- kysol 15y ago
  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 15y ago
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.
- natesm 15y ago
  PDF is a standard...
- chime 15y ago
  > 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.
- zachrose 15y ago
  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 15y ago
    Because you can't embed images in HTML, right?
    - pornel 15y ago
      and then you'll get asked by the client to "just embed images".
huhtenberg 15y ago
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.
- dasil003 15y ago
  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.
  - smackay 15y ago
    Identifying whether the client wants a cutting edge design or one that has the widest possible browser support would seem to be requirement #1.
rimantas 15y ago
Short version: http://dowebsitesneedtolookexactlythesameineverybrowser.com/ http://dowebsitesneedtolookexactlythesameineverybrowser.com/
broot 15y ago
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
bane 15y ago
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 15y ago
  > 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 15y ago
    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.
petercooper 15y ago
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.
lisperforlife 15y ago
This post is spot on. While building http://keeprecruiting.com 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&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 https://encrypted.google.com/search?hl=en&safe=active&#3... 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.

99 points by chime 15y ago

chime 15y ago

The creator's website appears to be: http://boagworld.com/design/where-are-my-rounded-corners/ 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 https://zetabee.com/weave/share/3f476353. Turns out Chrome, FF, Safari, and Opera all support box-radius without any special browser-specific properties.

pak 15y ago

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/ http://code.google.com/p/ie7-js/ .

kysol 15y ago
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 15y ago

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.

natesm 15y ago
PDF is a standard...
chime 15y ago
> 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.
zachrose 15y ago
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 15y ago
  Because you can't embed images in HTML, right?
  - pornel 15y ago
    and then you'll get asked by the client to "just embed images".

huhtenberg 15y ago

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.

dasil003 15y ago
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.
- smackay 15y ago
  Identifying whether the client wants a cutting edge design or one that has the widest possible browser support would seem to be requirement #1.

rimantas 15y ago

Short version: http://dowebsitesneedtolookexactlythesameineverybrowser.com/ http://dowebsitesneedtolookexactlythesameineverybrowser.com/

broot 15y ago

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

bane 15y ago

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 15y ago
> 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 15y ago
  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.

petercooper 15y ago

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.

lisperforlife 15y ago

This post is spot on. While building http://keeprecruiting.com 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&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 https://encrypted.google.com/search?hl=en&safe=active&#3... 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.