I’ve been experimenting with browsers for the past few days. Ever since Firefox 4b11 blew up (literally couldn’t do anything, even with a re-install) I’ve been playing with other browsers. I’ve been an Opera user since 9.5 and I’ve been very happy – but you can’t help thinking, “is life greener on the other side of the fence? Is Chrome better?” So, I tried to answer that

No, it’s not.

After setting my default browser to Chrome 10 dev channel, I set about finding extensions to match what Opera gives you out of the box. I end up with the speed dial, gesture and colour picker extensions, as well as a funny little flag icon that is supposed to tell me where a server is from, but doesn’t work. Overall, none of these extensions were as good as Opera’s default functionality. The speed dial slowed my computer down more than sped it up and it didn’t have the Ctrl+(num) navigation that I love so much. The gesture plugin was good but not as quick as Opera. The colour picker was fine and matched Dragonfly fine.

Just, in general, browsing seemed slower. Tabs seemed slower to change and page rendering wasn’t as smooth. Font rendering wasn’t as smooth and, although it was GPU accelerated, didn’t feel right.

So, what was better in Chrome? Well, the web inspector has a better UI, but Dragonfly has come on leaps and bounds in terms of performance. Neither of them are as good as Firebug, but web inspector currently trumps Dragonfly. To be honest, that’s about it. The Omni-bar is good but just as good as Opera’s. Weirdly, Chrome works better on my company’s network. I guess software designed for windows just understands NTLM authentication better than browsers designed for Unix.

So, for me it’s back to Opera. Have a go with both yourself, download Opera and Chrome today and see which you like best. Let me know in the comments.

If you liked this, you may also like:

1. Opera Dragonfly – Some Suggestions
2. Why I Use Opera – A case for the browser underdog
3. Opera 9.5 Released

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. Ditch this doctype talk until IE6 is dead
2. Browser Wars: The SlickSpeed Test
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
2. Vista – Ready or not
3. Chrome or Opera

Just a quick message to say that Firefox 3 will be released today at 10am PDT (6pm BST if you’re in the UK like me).

Easiest way to get it is to go to www.getfirefox.com
Or, download from www.spreadfirefox.com and add to their guiness world record attempt of the most downloads in one day.

Firefox 3 looks to be a great release so give it a go.

If you liked this, you may also like:

1. Opera 9.5 Released
2. v3.04 and upcoming development
3. 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. Chrome or Opera
3. Opera Dragonfly – Some Suggestions

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. It’s time to upgrade your browser, no, really
2. Why I Use Opera – A case for the browser underdog
3. jQuery to be Integrated with ASP .NET

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 Dragonfly – Some Suggestions
2. Opera 9.5 Released
3. Chrome or Opera

Opera Dragonfly, the opera web browser’s developer tools, were released into alpha yesterday. It features tools like a DOM inspector, CSS style tracing, Javascript console with breakpoints and step-through inspection, and support for debugging other opera browsers (opera mobile and opera tv, though not opera mini). However, it’s not all roses.

First off, I like opera. I use it every day as my primary browser because it’s fast, standards-compliant and has great time-saving features like search shortcuts, speed dial and a great password saving facility. So, I’m the type of person that the announcement of an this is aimed at. I’ve been using the tools today and there are some very good things.

First-off, the CSS inspector is pretty good. It’s not as clear as firebug as if you switch the shorthand styles off there’s just a mass of styles and along with the initial browser styles it gets a bit too much. Whilst I’m being picky, I’m finding the buttons hard to use, and it’s hard to tell what’s going on at first. The difference in on and off positions for active buttons isn’t clear enough and will flummox most users.

The DOM inspector is pretty good, though the element highlighting doesn’t select “invisible” elements i.e. anytihng that’s “visibility:hidden;” which is something that I really value in firebug.

There’s a good javascript debugging facility available, though finding the right script is a bit of a mission as any inline scripts are named the same with line numbers. If you’re debugging an ASP .NET site, there’s javascript everywhere and that makes it very difficult to find what you’re after. I also found it quite hard to tell what line I was on when stepping through a simple AJAX call as there was no visible line highlighting; something that will need to be fixed before I use it again.

This alpha’s big downfall is that it’s not dockable i.e. it has to be in a separate window. For those of us on laptops or without large monitors it’s hard to see what’s going on when you have to flick between the two. This is coming in a new release in a few weeks time, which will update itself, thanks to the way Dragonfly is built.

There are some other niggles too, some of which are bugs:

• Searching the DOM is case sensitive
• Lots of different consoles, though only javascript and CSS have produced results so far
• The console thinks that CSS3 styles (rgba) and mozilla/webkit specific styles are errors
• The close button keeps disappearing on the settings menu
• It badly needs header inspection. Debugging AJAX isn’t worth much without it

All in all, a very good start which I’m certain will improve. It’s not going to change the way I work as almost anything that’s wrong in opera is also wrong in firefox. It’s better than IE6/7′s debugger, though not as good as firebug. With the addition of mobile browser debugging, a useful feature I’ve not had time to test, Dragonfly could be amazing. We’ll wait and see…

If you liked this, you may also like:

1. Chrome or Opera
2. Why I Use Opera – A case for the browser underdog
3. Opera 9.5 Released

With the release of Internet Explorer 8 beta 1 this week, MS debuted a few new features for the browser. Not only is it more standards compliant etc (read about all the features here), there are two major features which developers can utilise to make web sites and services more accessible through IE8. I’m talking about Activites and WebSlices.

Activities is a browser feature where you can right-click on the page and bring up a context-sensitive menu where you can perform actions based on the content of the page. You can also select some text, say the address of a restaurant, and a drop-down menu will appear with options for a map or wikipedia entry. You can also get a preview of the resulting page if you hover over the link.

The best thing about activities is that anyone can define them. They’re installable XML files which define aspects of the activity. As far as I can see they’re like firefox extensions but only for the right-click/context-sensitive menu and they seem really easy to make. If you want to know how to develop them, read the whitepaper.

WebSlices are mini-RSS feeds that integrate with the favourites bar (now a permenant fixture) allowing users to “discover” areas of web sites where they can get regular updates of small parts of a site. The example MS are using is an auction site where you can watch an individual item.

The code behind this uses CSS selectors and special keywords to describe the content. It’s easy enough to implement but I’m unsure as to how many sites will be able to do it without the risk of upsetting a site’s CSS stylings. I’ll put an example of a web slice-able section up when I get a few minutes (if you want a go yourself, read the whitepaper).

So, IE8 is doing well, seems to be some good reaction to it, but it does definitely need some work (:hover class it a bit buggered). I’m looking forward to see it develop.

Steve

UPDATE: IE Blog has done a mini-article on this same subject.

Currently Listening to: We Are Scientists – Brain Thrust Mastery (brilliant album)
Currently Watching: Top Gear on Dave
Currently Eating: the week’s left-overs
Currently Reading: IE8 white papers!
Current stage of re-design: on paper

If you liked this, you may also like:

1. 8 HTML5 Features You Haven’t Seen Before at #lwsdeep
2. 2 weeks in
3. “Click here” for basic SEO