Internet Explorer 8 has now been unleashed upon the Windows world to a small ripple of applause and a snigger from every other browser manufacturer. It’s a big step forward for Microsoft, the IE team have put in a lot of hard work and should be proud of everything they’ve done to enforce standards on the web.

Now it’s your turn.

IE6 still accounts for 20% of all web browsing, and its even higher for corporations where policy gets in the way of letting people upgrade.  This browser is now so far behind in terms of security, speed and browsing experience that it’s not even funny, and has become a perennial headache for all web designers who want to push the Internet forward as a medium.

So, I implore you, upgrade your browser today. I’m going to do so and declare from the rooftops that I shall no longer support IE6. My web sites will be standards compliant and I will not be making any exceptions for this browser.

So, farewell IE6. It’s been a long time coming, but you’re gone.

If you liked this, you may also like:

1. Browser Wars: The SlickSpeed Test
2. Ditch this doctype talk until IE6 is dead
3. Why I Use Opera – A case for the browser underdog

Last week, Apple announced the Safari 4 beta with a whole host of updates and enhancements. Whilst all of this is great for Mac users, it renders the browser completely obsolete for Windows users. Let me explain:

Lets go through the list of new features.

• Top Sites – Opera first added this feature 3 years ago, Google Chrome has it, all Apple did was make it fancy and unusable
• Cover Flow – I like the live page preview (other browsers do have that) but cover flow, to me, is something that windows users will never understand
• Full history search – Safari is the last browser to get this function
• Tabs on top – Google spent a lot of effort getting this right, Apple haven’t put the same level of thought into it. If anything, it makes Apple look like they’re copying Google, badly.
• Nitro engine – Makes pages run fast. Cool
• Native look and feel – looks good in Vista, awful in XP. Considering Vista usage is < 10%, that’s not a good thing
• Developer tools – once again, Apple is playing catch-up

So, what does this all mean exactly? Well, Safari is becoming more and more like Chrome. In fact, all Google has to do is update their Webkit rendering engine and they will be the same browser. In this manner, Safari for Windows has just shot itself in the foot by removing any differentiating features between itself and its nearest competitior.

I fully expect Safari 5 to make itself even more like Google Chrome (whatever that may look like in 2 years time).

If you liked this, you may also like:

1. It’s time to upgrade your browser, no, really

Opera 9.5 is has now been released. The browser underdog (and my personal favorite) now has more features than ever! It’s also faster (see my SlickSpeed test article) and includes lots more CSS3 features including media queries, full selectors capabilities and new properties like text shadows and box sizing.

Download Opera 9.5

View full release notes and new features

If you liked this, you may also like:

1. Why I Use Opera – A case for the browser underdog
2. Opera Dragonfly – Some Suggestions
3. Firefox 3 Out Today

Recently, I’ve been asked a lot of questions about CSS and my commitment to it. I’m a purist when it comes to the web. I firmly believe that the only way to create a web site is to use standards-compliant CSS that is cross-compatible with all major browsers. Javascript should only be used as a progressive enhancement technique and should certainly not be relied upon (yes, I’m looking at you ASP .NET). Most of my colleagues regard this stance as noble, but somewhat stupid in the “real world”, where it’s not always getting it done “right”, it’s just getting it done. Why is CSS considered such a black art?

Cascading Style Sheets are a mystery to most programmers. There’s nothing object-oriented about it, there are no methods, no variables, just a series of properties attributable to classes, identifiers and HTML elements. Such a simple thing can hardly be described as a programming language, and it’s not exactly difficult to pick up, there is a definitive resource at W3Schools, excellent tutorials at professional sites like sitepoint, and hundreds of blogs (like this one). It’s a simple markup language, what’s so hard about it?

Well, in principle it’s all roses. Take your basic elements, set the fonts, colours, padding and positioning. If you want, set a background image, it makes everything much prettier. However, great site design certainly isn’t as easy as this. It takes well laid out simple elements or well laid out beautiful graphics, and it’s making those graphics look beautiful with CSS that’s the hard part.

Because CSS is a markup language and it is “just that”, positioning complex lists, understanding floating elements and the use of the box model can be annoyingly tricky, especially when dealing with IE6. Using properties to control web elements that don’t perform the same on every browser is the principal reason why CSS is a black art. If a regular programmer can tell you exactly where a CSS positioned element will end up on every browser first time, they’re lying. Principally, it’s the work-arounds that get to developers. Having to have conditional styles, or negative margins to control where an element will end up (cross-browser) can be incredibly frustrating, especially when you get it working for firefox then it’s still broken in safari/opera. By this time, most developers have given up.

Most of the developers at my office code by hand, some use the visual editor to create their pages. This is great for them, it increases their productivity and makes life easier, giving them more black boxes instead of having to know about every component, but this can introduce a lot of extraneous code, like tables and extra paragraph tags. ASP .NET is very bad for this, most of their pre-built elements use tables. Some, like the Login control, insert a table into the markup even when you ask to lay out the control yourself! Creating CSS that works in all of these situations, where pages are marked up differently, is a very hard task where you are constantly fire-fighting, making new exceptions for dodgy markup. Developers blame CSS for this, when it is the browser, and the markup that should be blamed (though it’s alright to blame ASP too).

So, is CSS a black art? Well, if you don’t know the work-arounds, it’s going to frustrate the hell out of you and it’s more than likely that you will give up, go for inline styles and tables. If you have the patience for it, and want a pure web experience that loads fast, looks amazing, and you’ll be able to completely change the look of a web site just by switching stylesheets.

If you liked this, you may also like:

1. Classitis (class-eye-tiss) – The new CSS disease
2. Easy Semantic Forms with CSS
3. Why CSS Multi-Columns aren’t ready for prime time

With the impending release of Firefox 3, a new chapter to “browser wars” is upon us. In this short series, I’ll be looking at what each browser offers to a user, and hopefully pick a champion.

The first battleground is JavaScript. In the late 1990s, JavaScript was shunned by many web developers because of browser incompatabilities,  bugs and that it wasn’t very useful for things other than fancy clock (which flash is better at anyway). Since the rise of the XmlHttpRequest, JavaScript has become a way to enhance a website and provide new ways of interacting with the users. Combine this with JavaScript libraries such as jQuery, mooTools, Prototype and DoJo, JavaScript has had a renaissance of biblical proportions. With the Web Standards Project releasing Acid 3 as a JavaScript test, the JavaScript comeback has been set high standards of compliance in the same way that Acid 2 did for CSS

This is where the browser comes in. A user’s internet experience is only as good as their browser, and with JavaScript being used to drive the user’s experience, testing how well a browser performs in JavaScript is as essential test. The team at mooTools have developed the SlickSpeed selectors test. This tests all four major JavaScript libraries on their ability to navigate and modify the DOM and measures their performance in response times. The results vary significantly from browser to browser, each library claiming to be the fastest on certain platforms. Yesterday, I ran every browser, current and upcoming, against this test and have collated the results below:

As you can see, Internet Explorer doesn’t fare well on this test. In fact, it seems to be getting worse as time goes on in the Prototype test! The IE team have said that their aim for IE8 is not to make things worse, and they’ll work on speed once the rest of IE’s problems have been solved. If I were them, I’d start with a full re-code as their rendering engine lags so far behind the others that it’s just not funny.

The other browsers in this test fare much better, showing decent results throughout. The crown, however, goes to Opera 9.5, beating the competition in every test, often halving the next-lowest time. Such an effort is phenomenal, especially for the 68ms in the Prototype tests, a 3600% improvement over IE 7. That said, these results also show us that some libraries are simply faster than others. Dojo is consistently the fastest, with jQuery and mooTools fighting for second place. Prototype has always been a ‘heavier’ library than the others, though this is shown very clearly now. It’s also a 150KB library, which is huge compared to jQuery’s 23KB compressed library.

JavaScript is just one area that the browsers are competing in. CSS support, productivity features and extendability are all key areas for the major browsers. I’ll do another browser wars post soon.

If you liked this, you may also like:

1. Why I Use Opera – A case for the browser underdog
2. jQuery to be Integrated with ASP .NET
3. It’s time to upgrade your browser, no, really

I’ve been using Opera since it reached version 9.0 in 2006. I have used it every day since in one form or another. I use Opera on my PA laptop, on my Mac, on my TV, my games console and on my Phone, and since Opera’s rendering engine is now built into some Adobe products (Photoshop, Dreamweaver and GoLive) I’m using Opera even when I don’t realise it.

I use Opera for its productivity features. Opera Desktop contains keyboard shortcuts for almost every action, but I’ll start with the most important features:

Speed Dial – Opera lets you pick 9 web sites that you visit the most and assigns them to the number keys. Now, if I want to go to my e-mail, I simply press Ctrl+3 and the browser goes to the page I want. I could also type 3 into the address bar and press enter or use the voice commands.

Searching with letters – With the multitude of services on the internet, I find myself having to go through many pages and lots of tedious loading in order to get to a search page. Opera does have a dedicated search box for many services, but you can do it another way. In the address bar, I can type “g PA Consulting” and it’ll perform a Google search for PA Consulting. It works for any search too and can be set up by the user, so I often type “a Web Design”, which will search Amazon.co.uk for “Web Design”.

“The Wand” – Password manager – A very simple and effective solution. On any form you can save the input to “the wand”. If you return to that page and want to put the same information in again, hit Ctrl+Enter. If you have saved more than one set of data to the form, it’ll ask you to select one. Managing your passwords couldn’t be simpler.

Built-in RSS reader – Most browsers have some form of RSS syndication functionality, but few come close to Opera’s easy-to-manage feed reader. It’s not as fully featured as a stand-alone feed reader or Google Reader, but it loads stories very quickly and does its job. Other features that I’ll mention here are an in-built download manager, BitTorrent client and POP3/IMAP e-mail program. Opera is a Swiss-army knife that doesn’t need extensions to make it powerful.

Presto Rendering Engine – The Opera team has produced their own rendering engine that renders web pages faster than any other browser (even Safari, depending on the test). Opera supports the full range of CSS2 and most of the CSS3 feature set. Put simply, if a web site renders incorrectly in Opera, the web site isn’t correct (according to W3C standards). Whilst this used to cause a lot of problems, this really isn’t the case today. In your day-to-day usage, you shouldn’t find many popular web sites that render incorrectly in Opera.

Opera is also the fastest web browser for JavaScript. Run the SlickSpeed test on all the modern browsers and Opera will come out on top every time (the 9.5 release excels at this test).

Voice Commands and Screen Reader – From a testing perspective, screen readers can be right at the bottom of the list for resource requests. With Opera, the UE expert need not worry about accessibility because Opera has a voice module built in. You can issue commands to read the page, go to a certain page (or a speed dial choice) and do all the commands that are available throughout the program.

The next few features are in the upcoming v9.5 release:

Bookmark synchronisation – A very popular extension for Firefox is a built-in feature for Opera. This allows you to synchronise bookmarks, speed dials and search engine preferences between instances of the browser on multiple computers. Perfect for using Opera on your desktop and your laptop.

Opera Dragonfly – Developer tools – Opera now has a suite of developer tools, including a full DOM and CSS inspection tool, JavaScript debugger and multiple error consoles. It will also be able to debug Opera Mobile and Opera TV devices. Whilst Dragonfly is not as developed as Firebug, it can be considered as a genuine alternative.

Opera includes even more features including mouse gestures, fraud protection, individual site preferences, thumbnail preview of tabs, widgets, notes, custom themes and a very useful kiosk mode. It’s also the least memory-hungry of all the browsers and the fastest to load.

So why isn’t it used more?

It’s used a lot on mobile devices (40 million phones have shipped with it pre-installed), though its take-up on the desktop is around 1.5% of the market. It’s partly to do with Opera’s rendering “problems” and the reputation that has gained it. Firefox tends to be kinder to web pages that are less standards-compliant, and so has gained a greater following. Opera has only recently (i.e. 6^th May 2008) received developer tools, something Firefox and Internet Explorer have enjoyed for years. This has discouraged developers for developing to Opera, which starts a vicious cycle of errors, a bad reputation and fewer developers fixing problems on it. It also doesn’t help that many large companies simply ban Opera from some of their services (RBS Banking doesn’t support Opera, though it supports Firefox).

It may also be that before version 8.5. Opera was supported by advertisements. This image has been a hard one to shake off, especially as Firefox was coming to fruition at this time and was completely free. Opera has recently gained some popularity in other channels like on the Nintendo Wii and mobile phones, emerging markets that will increase the profile of the company and hopefully the use of the full browser, though that remains to be seen.

Why should I change my browser now?

Most people simply “make do” with the browser they are given. Now people are realising there is a choice (Firefox), but they are simply making do with that. Changing to Opera will boost your productivity and supports the features that other browsers only seem to copy. If you’re even remotely interested in where the internet is headed (i.e. mobile devices/integrated computing), Opera will be at the forefront of that movement.

If you liked this, you may also like:

1. Opera 9.5 Released
2. Opera Dragonfly – Some Suggestions
3. Browser Wars: The SlickSpeed Test