Where are my rounded corners? | Boagworld - Web & Digital Advice

Web & Digital Advice

Digital and web advice from Headscape and the addled brain of Paul Boag... tell me more

Paul Boag Posted by: Paul Boag On Monday, 9th May, 2011

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.

Design:
The estimated time to read this article is 4 minutes

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.

Become a web expert with our newsletter

Receive invaluable advice every three weeks and get two free video presentations for subscribing. You can unsubscribe in one click.

Blog Updates

You can follow all my posts by subscribing to my RSS feed or signing up to my email newsletter above.

Podcast Updates

Subscribe to the podcast via itunes or RSS. You can also subscribe to my quick tips via itunes and RSS too.

Social Updates

I am completely addicted to Twitter so try following me there. I also have a Facebook page which contains considerably less waffle.

Comments

Boagworld is a community, not just the voice of one blogger. You've read the post, now its time to get involved.