The Power of the Browser – Choose Your Weapon (Part 1 of 3)

Your browser is your gateway to the internet. It’s the computer equivalent of a car. You use it to go everywhere and you rely on it to get you there each time. Ideally, it’ll provide you with as comfortable and pleasurable an experience as possible. This is the first of three posts on making better use of your browser and the benefits of doing so. It will discuss some of the differences between them and hopefully convince you why it’s important to use a modern one.

So what is a browser?

For most of you, it’s likely to be that little blue ‘e’ you click on your desktop that magically brings the internet to your fingertips. Right now, there are 5 major browsers that are used by around 99% of the UK population online (Source: StatCounter Global Stats). Which prompts me to ask the question: how many of you know what browser you’re using right now? My guess is that about 50% of you are aware of whether you’re using Internet Explorer, Firefox, Chrome, Safari, Opera or another. For those of you that are aware, how many of you know what version of that browser you are using? Probably half again. Maybe less.

Five browsers dominate 99% of the market

Click the image to view the chart from StatCounter

Just tell me which is the best one so I can move on please

I will. Well, I’ll give you my opinion. But before the bias, it’s a good idea to get your head around some of the vital differences across various browsers and why some are limiting what you can do on the web, while others are opening up opportunities to do things which may just blow your mind. At which point you’ll be able to walk around with the same sense of smugness as me ;)

I’m sure some of you are thinking “I’m not a web designer so why is this even important?”. And it’s a good question. I understand why you might think that. But perhaps the best way to answer it is to talk about the benefits of knowing your browser better.

Performance – You Have to Have it

Each browser has different strengths and weaknesses. I won’t go in to the details which you can see in the following extremely helpful browser performance graphic. But in a nutshell, Chrome is the fastest overall when it comes to displaying websites, blowing away the competition. In second place is Firefox, closely followed by Safari, then Opera, and lagging way back in fifth is the world’s most popular browser – Internet Explorer. For a lot of you, that alone will mean that you choose Chrome as your go-to browser. For others of you, it may prompt a lightbulb moment that maybe IE isn’t necessarily your best bet, even though it comes bundled with Windows on most new PCs (until recently).

Browser performance chart

Click the image to view the chart from Six Revisions

As you might expect, all these figures show is how quickly they display websites and load various elements of a page such as images, videos, Javascript animations, Flash etc. Although this is very important, as people want more and more instantaneous access, there are other things to consider when choosing your browser.

Security – Do Not Compromise

This section, unfortunately, needs to be dominated by one browser vendor in particular. Microsoft’s Internet Explorer has been well documented in the last few years for having major security issues in versions 6, 7 and even their most recent version – 8. In fact, these security issues have become so prominent and severe that both the German and French governments have publicly advised against using the browser. Ouch.

Internet Explorer suffers from security flaws

Click the image to view the story

It seems hackers target IE browsers more than any other partly due to its global dominance and partly because of its closed source nature. What I mean by ‘closed source’ is that IE browsers don’t allow Joe Bloggs to look at how it is put together. Only Joe Microsoft can do that. While you might think that this level of secrecy should make it more secure than an open source browser such as Google Chrome or Mozilla Firefox, the opposite is actually true. How can that be, I hear you ask. Well, open source is, as the name suggests, open. Which means that anybody can look into the code behind the browser and spot vulnerabilities or security flaws and offer suggested fixes to the makers of the browser. Not just the guys at Microsoft. It’s a self-improvement cycle and it’s aided by the thousands of developers around the world who are allowed to contribute to it.

The very nature of open source software and the community behind it is what drives true progression in this extremely competitive environment. This is why you’ll find very few web designers and developers who use any version of Internet Explorer as their primary browser.

Why, then, does IE still manage to dominate the browser market today. The answer, quite simply, is that it is bundled with every version of Windows. At least it was until March this year. But that’s an entirely new topic.

Graphics – Display Beautiful Things Beautifully

Different browsers have different capabilities when it comes to displaying images, graphics, text and various other elements. Just like all TVs are different, so are browsers. These interesting benchmark tests – Text Rendering and Image Rendering (Source: graphicrating) show that this is an area where Internet Explorer finally does something right, topping the table ahead of the other 4 main browsers in text rendering and coming in second for image rendering. With images, Firefox surprisingly lags behind in last place. Although, since these tests were carried out, Firefox has made significant improvements to it’s graphics engine. Another example of community-lead development. Chrome features well in the images test but not so well with text, while Opera and Safari come in no higher than third in either test.

Graphic and text rendering

Click the image to visit the graphicrating website

Supporting Web Standards – Build it Right

This may sound like a really boring subject, but when you see it in action, you’ll understand why it’s important, so bear with me.

Many people look at websites and believe they are not dissimilar to printed works. Draw a blue box, stick it there. Write out menu links, stick ’em over there. And everything will stay where it is. If it were that easy, I would do it for free :)

Unfortunately, it isn’t that easy. The way a website displays relies on various different coding languages used by the web designer. The language that controls the visual layout of all modern websites is called CSS (cascading stylesheets). Now, the problem with this is that all browsers interpret CSS slightly differently.

As a visual example of what that means to you as the end-user, let’s have a look at some screenshots of this website displayed in Internet Explorer 6 – which has notoriously poor support for web standards.

Websites can render incorrectly in IE6

Extra white-space is thrown in, things are mis-aligned and the main body background image has disappeared altogether

No support for .png transparency

IE6 doesn't support transparency in images and instead puts an ugly grey box around them. More white-space is thrown in and some floated elements drop below eachother

If you’re viewing this site in recent versions (at time of writing) of Firefox, Opera, Safari or Chrome, it should look pretty much as intended.

This inconsistency across browsers means designers often need to spend many hours correcting bugs and issues in older, poorer browsers (quite possibly for a very small user base), even though it may display perfectly well in modern ones. This usually means writing a general stylesheet, then another one for IE6 and sometimes even one more more for IE7, because each one displays websites differently. But with so many people still flogging the dead horse of IE6, can you really afford not to design for it?

The end result, as you might expect, is that the designer needs to offset the extra hours against the client by charging more. It’s a necessary evil and will never be completely eradicated unless it can be guaranteed that all browsers will behave consistently. But with the rate at which new technology and devices are coming into the market, it looks as though there will forever be this necessity for fixing things across different platforms.

Incidentally, WHD renders reasonably well in IE6 – I just turned off the IE6 stylesheet for the purpose of this post :)

Your turn to take part. Go to this website and wait a few seconds until the number stops increasing. That number is the generic score given to your browser for its adherence to web standards. The Acid3 test is:-

…the third in a series of test pages written to help browser vendors ensure proper support for web standards in their products.

Given that the Acid Test is the standard to which many developers and designers build websites to, it would help if all browsers were made to support the same high standards. Unfortunately, no matter how well built a website is, some browsers such as IE6 have such poor support for web standards, that until there is a major shift in the amount of people using it, the web will never fulfill its potential. Unsurprisingly, there are plenty of designers, developers, companies and organisations taking action and trying to hasten the demise of IE6. Here are just a handful –

Of course, not everybody is able to upgrade their browser. Some companies won’t allow you to for fear of breaking their outdated systems that rely on it. Which is fair enough. But you have to ask the question of whether it can really be safe/productive running systems on a browser with such well-documented security and performance issues and whether the benefits of running a more modern and powerful browser outweigh the cost of upgrading aged systems.

There is so much more that can be said about the merits and drawbacks of designing for antiquated browsers. But to keeps things light, we’ll leave those for another day.

Customisation – Make it Yours

If I lost your attention in the previous section, this is where I’m hoping to get it back. When I talk to people about browsers (yes, I do talk to people about browsers), this is normally when they actually start to listen!

Providing you’re using a browser that supports add-ons and extensions you can do just about anything you can think of with it. Currently, the most highly customisable browsers are Firefox first and Chrome second. You can give your browser a theme, install countless helpful tools, edit the layout of your buttons, block pop-ups and ads and much much more.

Want to publish Facebook updates without having to visit the Facebook site? You can do that from a toolbar. Want to keep track of Twitter feeds without visiting the Twitter site? You can do that with an add-on. Translate entire websites into any language? Instant screenshots? Export saved passwords? Sync bookmarks across computers? Instant messenger in the browser? Customise Google’s appearance? Share news within 2 clicks? Email notifier? Whatever you can think of, somebody has built an add-on just for that. Not to mention the hundreds of themes you can install to give your browser a completely personalised look and feel.

Hundreds of themes available for Firefox and Chrome

Click the image to view the different themes available for Firefox

In the next post I’ll go into a little more detail about ways you can customise and improve your browser through the use of add-ons and plugins.

Check out the other posts from this series:
The Power of the Browser – Make it Yours (Part 2 of 3)
The Power of the Browser – My Browser Breakdown (Part 3 of 3)

Leave a Reply

Your email address will not be published. Required fields are marked *

4 × three =

This site uses Akismet to reduce spam. Learn how your comment data is processed.