Where are my rounded corners?

Do you struggle to explain or understand why a website looks different in different browsers? If so, I might just be able to help.

One of the biggest areas of confusion among our clients is progressive enhancement. They wonder why the beautiful design they signed off doesn’t look the same in older browsers. To overcome this problem we are making two changes. First, we are trying wherever possible to show them designs in the browser rather than as static images. Second, I have put together a short document outlining why progressive enhancement is ultimately better for their site.

Below is the copy of the factsheet. Feel free to reuse it as you see fit. As with the Kickoff Agenda Builder and other documents I am releasing it under creative common licensing.

Download the factsheet

Sometimes we see confusion among our clients when they see their new site in their browser and it looks different to the design they signed off. In this fact-sheet we explain why accepting these differences has many benefits and doing so outweighs the limited drawbacks.

For too long we have treated design on the web like designing for print. This is changing. The web is a very different medium to print.
When people view your website they do so with a variety of different browsers (from Internet Explorer to Google Chrome) and devices (from laptops to mobile phones). Each device and software version displays websites in subtlety different ways. Where in print you know everybody will see the same thing, on the web there are no such guarantees.

Many have tried to fight this intrinsic characteristic by forcing all browsers to display their websites in the same way. For example, it is possible to display rounded corners on Internet Explorer 7 or 8, but this can only be achieved at a cost.

By accepting that the web is different, a number of benefits become available. Here are the advantages as we see them:

More time for what matters

Creating design details like rounded corners, gradients and drop shadows are time consuming and expensive to implement in browsers like Internet Explorer 7 or 8.

On projects with limited budget and time, effort is better allocated to important elements such as understanding business objectives or user testing. Spending too much time on small aesthetic details at the cost of more important issues can be damaging to the success of your site.

A growth audience

Spending time designing for older browsers such as Internet Explorer 7 or 8 is ultimately counter productive as these browsers are being replaced by more capable versions (like Internet Explorer 9, for example) that support these visual enhancements. Why spend money supporting a shrinking market when you can ensure the long term future of the site by designing for the next generation of browsers?

Improve site performance

Getting a website to display exactly the same in all browsers involves adding a lot more images to your site and adding considerably more code. This will slow your site down.

In a world of impatient users it is important your website downloads lightning fast.

Better search engine rankings

Google knows that users want fast sites. That is why they have started using page size in their search algorithms. If your website downloads fast it will, in time, rank better in search engines. Including bloated code to accommodate older browsers will undermine this.

A future proof website

By not designing primarily for older browsers you ensure that your website is ready for the future. We know the direction that browser support is heading and want to build you a website that will stand the test of time. Including code to accommodate older browsers such as IE7 and IE8 could mean that your site won’t work in new browser versions.

Easier maintenance and updates

Clean lightweight code makes it easy to change your site. Code designed for older browsers can make updates a headache. Imagine for a moment you want to change the colour palette on your website. If your website has been designed to show rounded corners in Internet Explorer 7 or 8 changing the colour would mean producing a large number images with the new colour. This is time consuming and expensive.

However, if your site has been built focusing on ease of maintenance rather than older browsers, these changes can take a matter of minutes.

More design possibilities

Finally, some design approaches are just not possible in older browsers. Internet Explorer 7 and 8 cannot display some designs that would look amazing in more advanced browsers.

But, my audience will hate it!

Absolutely not! For a start a considerable number of users will be using more advanced browsers like Internet Explorer 9 or Google Chrome. However, more importantly, the website will look good in Internet Explorer 7 and 8. The chances are most users will never know they are missing some of the design subtlety because they will never open another browser to make the comparison. It is likely that the only voices of discontent will come from colleagues who are scrutinising the new design. And, it is worth remembering that they are unlikely to be a part of your target audience.

In summary, we believe that permitting the small aesthetic differences for a subset of your users is worth the benefits it provides.

  • http://josemota.net José Mota

    I absolutely subscribe what you said about the audience. They will never know what’s different if they don’t switch browsers.

    What matters most is the content. If a user can’t use a better browser to enjoy the website to the fullest, at least he can rest assured that what he came for in the first place is there, still readable and enjoyable.

  • http://kingwebsites.co.uk John King

    Thank you, thank you, thank you.

    I normally tell my clients half as much with twice as many words. I’ll just use this from now on.

    10/10 for succinctness!

  • http://dustypixels.com Adam

    great doc, just wanted to point out there are a variety of ways of doing rounded corners that do work fine in IE6/7 without the need for images, e.g curveycorners : http://blue-anvil.com/jquerycurvycorners/test.html

  • http://www.channelship.ie/blog facundo

    Great points Paul. You are definitely helping us all explain better these functional decisions. I’d be careful on the “future proof website” argument. In my case, it happened a lot recently for instance with Facebook Apps not rendering correctly in IE6 and 7 (yes, sigh, who would use IE6?). To my argument that only a small minority uses IE6 I was told that the whole floor in that company used it (client). They probably have the worse IT manager ever, but we had no choice but re-working scripts. My point is that sometimes it is difficult to tell even an important brand that we are building for the future if their present is IE6 :)
    Thanks again

  • http://www.wijzijnrood.nl Jaap Rood

    Another great factsheet that does a great job in translating our concerns into values that matter to our clients. Going to use this for sure!

  • seal

    It’s an absolute “no go” with the idea that a client’s website will look different on different browsers! Don’t get me wrong, old browsers like IE6 shouldn’t be supported, but IE7+ and FF3+ are a must and everything should look identical with very small compromises.

    Rounded corners, shadows, etc. are easily achieved with images rather then fancy css3 attributes. By trying to achieve something with a very weird approach that works only on FF3.6+ (for example) we are not simplifying thing but we complicate them, no need of that.

    • Matt Bee

      Sorry seal but you’re completely wrong there! Yes maybe some clients have that requirement, for example I know NHS clients that use all manner of browsers all over the place, best for them to look the same.

      But if you’re talking about everything, then you really shouldn’t be here, that isn’t best practice, that’s a waste of time, effort and encourages nobody to improve on anything.

      You want a slow site with loads of images, go for it, but I’ll never work with or recommend you!

    • http://www.wijzijnrood.nl Jaap Rood

      I truly think you miss the point. This article is all about how, if you inform your client properly and get them in the right mindset, they will accept changes. Why would we pretend web is a print business and guarantee pixel perfect websites? And how would websites ever progress, how will browsers progress (and actually work towards all supporting these technologies) if there is no demand created by end users?

      In my opinion it’s not a bad idea to let the client and end-user see that browsers are all different, and that some lack in features and technology. Atleast that will create an incentive to go for the modern browsers. Presenting them this non existing reality that every browser is the same slows down the progress of websites, in both design and usability.

  • seal

    I agree, browsers are different, but it’s your job to make the site look as much identical as possible for all supported browsers. The right approach should be to define a list of supported browsers and screen resolutions at the beginning based on client business and visits statistics. If, for example, you are selling high end gadgets it’s not worth it to support old browsers since the target group is different. But if you have so far 25% visits from IE7 and suddenly you decide to let those people go only because you are lazy or stubborn enough – I’m sorry but this is just plain stupid.

    You want to “teach” people to upgrade their browsers? Fine, go ahead, but be prepare for a visits/sales drop. Unless you are facebook no client will care that your site requires a browser upgrade – they will simply go to the competitor’s website

    • http://www.northumbria.ac.uk Graham Campbell

      As Japp Rood stated previously, it does seem that you have missed Pauls point somewhat.

      The article doesn’t (the way I read it anyway) ever speak of letting users go as you suggest… “But if you have so far 25% visits from IE7 and suddenly you decide to let those people go only because you are lazy or stubborn enough”.

      It seems more of a discussion of how properly informing your clients of the medium, ie “the web is not print”, and how accepting slight cosmetic differences between browsers can actually allow you to create lighter, faster applications that will work better in the long run.

      I personally develop my own projects now in HTML5 (buzzword) and with my latest site have concentrated on providing more semantic markup, with no visual clutter to it. What I mean is, there are no extraneous elements in the markup to do anything like background shims, rounded corners, gradients etc. After a few weeks of trialing this new site, google was categorizing the whole thing really well, even giving sub links for categories on each listing.

      There is real power in what Paul is saying in this article.

      It’s the future! Like Garlic Bread!

  • seal

    @Graham
    well, you speak for a project of yours where you can make things the way you like. Right or wrong – it doesn’t really matter if you are happy and you’ve achieved your goal. However it can not be summarized for all.

    As for lighter vs. heavier it’s open for debate here. For example sprite is a pretty decent solution for 80-90% of the situations.

    As for the future – nobody knows what the future is:-). Some has promoted silverlight as the future and that flash is dead. In reality nothing similar happened:-) so…

    @Matt
    Please keep you tone according with this discussion, I have no problems with someone’s opinion as long as he watch his language. I really don’t care would you recommend me or work with me, I have 13 years of experience on the field, 90%+ of returning customers/referals and projects for world known brands that attract MILLIONS of people every month so I somehow trust my opinion more than yours:-)

    • http://www.northumbria.ac.uk Graham Campbell

      @seal – flash and silverlight? You appear to have deviated so far from the point of the article, i’m sort of wondering what your next post might be about.

      My own project is actually a startup business i co-own and has been built on the principles of light markup that is heavily optimised from a semantic standpoint. Also the site simply works in any client/browser (as all sites should).

      Past the point of the site working on a basic level for all users it’s then progressively enhanced via javascript to provide a better, more helpful experience for users, and also enhanced with some newer css such as corners and shadows.

      If the bulk of this works, the user is able to find the pages on google in natural listings, and arrives at the site to find an easy to use application where they buy a product. In this case the fact that a div had no rounded corners in IE6 would seem to be beside the point.

      Hence the point of this article!

      Incidentally i work for an employer who lets me develop solutions for an audience of around 15million a year so I too trust my own opinion.

  • http://blogs.perficient.com/spark Molly Malsam

    A visual designer I am working with recommemds the following tool for achieving rounded corners and he says it tests well for load time:

    http://css3pie.com/

  • seal

    I really hope this is not the site you have created:
    http://www.northumbria.ac.uk/
    It has so many problems on so many levels which only show lack of professionalism. Hence, I can’t no longer value your opinion as a professional designer

    p.s. you trusting your opinion is like a broken watch – it happens to be accurate twice in a day after all:-D

    I think I’m done with this topic

  • seal

    Damn, I’m so willing to make good things tonight…
    Ok, here are some point on the obvious issues with your site:
    http://imageshack.us/photo/my-images/683/uglyeq.png/

    Don’t need to thank me

    • Clinton

      So nice of Seal to critique others work without showing any of his. With a bit of research I was able to track down a website about about him. http://en.wikipedia.org/wiki/Pinniped

  • http://twitter.com/emrecamasuvi Emre

    This is so nice, for whole web development ecosystem. Customers need to be educated this way.

  • Marcello

    Absolutely brilliant post and documentation! Many, many, many thanks for sharing!

  • http://www.55px.com Alan

    That’s a great post. Thanks very much Paul.

    Something like 1 year ago, if some ‘early-adopter’ had asked me about HTML5 and CSS3 I would have said go away ;). I just thought that website not only has to be cross-browser compatible but also ‘cross-browser identical’.

    Fortunately, using some CSS3+HTML5 in my projects gave me some perspective. Some CSS3 features like transitions, shadows and rounded corners can save a lot of time, which is of course limited. Applying these basic effects quickly allowed me to focus on extra work like AJAX contact form, subtle jQuery animations, improved SEO, mobile browser testing and so on, which weren’t included in the initial estimation.

    I agree, that couple years ago the concept of ‘cross-browser identity’ was vital since majority of visitors used IE, FF, Safari, Opera and that’s it. Designer could additionally do some SEO, CMS or simple Java Script effects but his work was mainly focused around the ‘website must look the same’ idea.

    Today however, developers and designers can use abundance of web technologies thus, you need to interview you customer thoroughly and prioritize. If he/she wants a website to look the same on all browsers then no problem but this will consume developer’s time and the client may miss some other exciting features which would bring him more benefit.

    To sum up, in my opinion a good freelance developer/designer should know a variety of web technologies and be able to clearly explain their benefits to his customers or suggest solutions for their needs.

    Take care ;).

  • Anonymous

    He’s right. You should see this site in IE 7. Pretty bad. Granted, this isn’t a site for average consumers, but I hope you wouldn’t do that to a client who needed image reflected well crossbrowser. 

  • Anonymous

    Seal is right. There’s no way, with consumer site traffic stats showing IE at 50%+ and IE 6/7/8 in the mix at 35-40%, that you can in good conscience lead clients to follow your advice and ignore certain browsers.

    • Anonymous

      1. We did not design Northumbria.
      2. At no point in my post did I propose dropping support for any browser. 3. IE6 is the only one I am suggesting will look visually weaker and that consists of less than 2% market share. 4. You seem to be striking a very aggressive tone over this and I am not quite sure why.

      • Anonymous

        Apologies. As a designer concerned with these issues lately and trying to stay sharp on this issue, I’m getting worked up bouncing from blog to blog reading similar sentiments. I latched onto Seal’s comments, because Seal and I share some beliefs. I felt I stumbled onto yet another more public blog.

        I am in no way making comments about your personal or company’s design work for your clients. I’m not studying that.

        I do think if I were to build a site for my clients like boagworld.com that showed so poorly in IE 7, that would not be acceptable to my clients, but again, this blog is not the average consumer site.

        Apologies. I’m leaving this blog. Just worked up from so much discussion today.

        • Anonymous

          Thanks for the apology. I really do appreciate that. I love it when people get passionate. That is the way it should be.
          For what it is worth, I agree about IE7. I would never build a site for a client that renders like boagworld does in IE7. But when so few users to my site use it then the return on investment didn’t justify the development.

          • Anonymous

            Understood. You know your blog’s traffic pattherns and know what is acceptable browser support. I’m certainly not reading it in IE 7. :) As one of a few designers here, I do actually have IE7 installed just to be that guy… Anyway, I need to get some work done. :) Sorry again.

  • Anonymous

    These are really the typical arguments designers are making. Really, they’re disingenuous. Worst case, these are misleading to clients who rely on us to provide a good quality experience across browsers. We have to pay attention to today’s traffic patterns.

    1. Accurately reflecting your client’s brand across browsers is what matters. If the site looks like a dog to 40% of traffic, then 40% of traffic perceives low quality.
    2. You’re not being genuine in saying that a couple 1k 4 corner sprite graphics and a 5k shadow png sprite and some filter styles are really slowing things down, right? People who say this are simply being argumentative in this day and age.

    3. Wrong again. See above. In literally 100′s of sites including my own marketing site, I’ve never seen a few corner graphics slow things down to the point where they were be near affecting SEO. Argumentative.

    4. You need a today-proof site. Traffic is today. When’s the future, 2 years? 4 years? It was 4 years ago. We’re still talking about it today. Today proof your site.

    5. Easier maintenance. This is true, for you as the designer. This is the only honest point here.

    6. More possibilities?? Not true. What can’t you accomplish with an older technique that you can only accomplish with css3??

    7. If you’re going to have fallbacks, they should be very minor differences. Apple.com wouldn’t rely on fallbacks that drastically altered the delivery of their brand. If you would take apple.com seriously, why not your own clients?

    • Anonymous

      Thanks for your opinion. I believe you are fundamentally misunderstanding my position and probably the definition of brand (brand is nothing to do with rounded corners). However, its good to see the other side of the discussion. If you feel so strongly about this that you wish to stop following my work then that is probably for the best. I obviously have a VERY different approaches to serving our clients needs. To be honest I would prefer if you are careful when posting again to my blog. I find it offensive that you accuse me of ‘misleading my clients’. I am happy for you to post opposing views but don’t like you questioning my integrity on my own blog. Further comments of that nature will be removed.

  • http://twitter.com/playerj James Player

    Hi Paul

    Your article was so great it inspired me to write a song. Hope you like it! http://soundcloud.com/james-player1/where-are-my-rounded-corners

    Cheers
    James

  • http://gainpips.com/forex-contest/ webmaster ninja

    Thanks for sharing this wonderful tip. I appreciate your effort in putting this write ups. forex broker reviews

  • http://www.seemly.co.uk/ Seemly

    Paul has already stated he did NOT design the Northumbria site. What is the relevancy on critiquing it?

  • http://www.seemly.co.uk/ Seemly
  • http://twitter.com/c5cloud c5cloud

    I am relatively new to development and on my last contract came across the problem with cross browser design. I agreed to do work at a fixed price but eventually realised that the client wanted pixel perfect to design over all browsers IE7/8 and the rest. This took me much longer than expected which was my fault so I guess I should have checked or agreed with the client what browsers and how much deviation they would accept . Is this the correct route ?

Headscape

Boagworld