How Safari became the number one browser at St Andrews

Last week I logged into Google Analytics to take a look at browser statistics for the University website. I was surprised to discover that Safari is now the most popular browser among visitors to the University website.

In January 2012, 29.5% of all visits to the University website were made using Safari. This compares to 26.5% for Internet Explorer. Chrome has 21.4% and Firefox has 20.1%.

It is an unusual finding. Take Wikimedia’s statistics, which show 29.5% of traffic coming from IE users, and only 6.1% coming from Safari users.

Here at St Andrews, Safari was also the most popular browser in December 2011. But it hasn’t always been this way. So I decided to take a look through the previous months to figure out the trends.

Browser trends since September 2010

Browser statistics

I looked as far back as September 2010, the last month when Safari was still only the third most popular browser among our visitors. At that time, as you would probably expect, Internet Explorer had a healthy lead in front of the other browsers — 41.4%. Firefox had 24.4%, Safari had 22.1% and Chrome had 10.5%.

Since then, the big four browsers have converged, so that they each now account for 20-odd percent of visits.

There has been a strong decline in IE usage. Firefox usage has also decreased, although it now appears to be making a small resurgence. But, while Firefox was once the clear favourite among non-IE users, today it is only the fourth most popular browser.

Chrome has experienced massive growth. It has now overtaken Firefox and shows no sign of stopping.

Safari has experienced a steady increase over this period. Chrome is growing more quickly, but it began from a lower point.

Is Safari so popular anywhere else?

Last week I tweeted about the fact that Safari is the most popular browser among our visitors.

There were some interesting responses.

 

So I took a look at the operating systems used by the University website’s visitors.

In January 2012, 33.1% of visitors were using a Mac. I would guess this would be much higher than most other websites. For instance, Wikimedia estimates that only 8.6% of its visitors are using a Mac.

Usage of Macs among our visitors has grown from 26.0% in September 2010. This clearly contributes a great deal towards the popularity of Safari, which is further bolstered by the growth of iOS devices.

Quite what explains why we have so many Mac users at St Andrews is another question! Perhaps you can come up with some theories.

What developers think of Internet Explorer

I like this self-deprecating advert from Microsoft about Internet Explorer 9.

Only today I was thinking how refreshing it is that I now don’t have to worry too much about testing webpages in Internet Explorer 9. Everything just works now.

Sure, it doesn’t have the same level of support for HTML5 and CSS3 that Chrome, Firefox and Opera have but it does the basics really well and doesn’t have the same weird quirks that IE7 and IE8 have that require obscure hacks and workarounds.

Besides, at the moment all the major browsers have varying levels of support for these new Web standards-in-the-making. That’s why we’ve got tools like Modernizr.

Let’s hope that Internet Explorer’s support of Web standards grows from strength to strength.

Either that or they see sense and move to using the WebKit rendering engine! 😉

My favourite Web developer add-ons for Firefox

Mozilla released Firefox 4.0 on Tuesday—it has already been downloaded 16,041,437 times; that’s about 92 downloads a second!— and there is a lot to commend it for: a clean look, that’s not too far away from both Google Chrome and Internet Explorer 9 and it’s much faster too.

While I use Google Chrome for most of my day-to-day browsing I still use Firefox for Web development, largely thanks to the number of mature add-ons available for it. These are my favourites:

1. Firebug

20110324-firefox4-firebug

Firebug is the number one reason that I use Firefox. Sure, Chrome and Internet Explorer have their own Web developer tools but none of them come close to Firebug for its awesomeness.

That said, I recently tried out Opera Dragonfly and I was really impressed.

2. Web Developer

20110324-firefox4-webdeveloper

A close second is Chris Penderick’s Web Developer toolbar that adds all sorts of useful tools to Firefox: disable CSS, outline headings and tables on the page, show HTML classes and IDs, show image sizes as overlays on the images. Brilliant!

3. ColorZilla

20110324-firefox4-colorzilla

The most useful feature of ColorZilla for me is the eyedropper tool that allows me to sample a colour on a Web page and find out the RGB or HEX value for it.

4. HTML Validator

20110324-firefox4-htmlvalidator

HTML Validator does exactly what it suggests that it does: it shows HTML validation information in the Firefox add-on bar (what used to be the status bar) at the foot of the browser viewport.

It’s very useful for at-a-glance error checking; obviously, recognising that HTML validation is an ideal and a guide rather than a hard-and-fast rule.

5. Wappalyzer

20110324-firefox4-wappalyzer

Wappalyzer is a new add-on for me that adds to Firefox the functionality that I’ve been enjoying with the Chrome Sniffer extension in Google Chrome.

It shows you in the AwesomeBar what technologies are being used, e.g. JavaScript framework, server type, content management system, web statistics, etc.

6. RSS Icon in Awesombar

20110324-firefox4-rssiconinawesomebar

For some unfathomable reason Mozilla has removed the RSS icon that appears in the AwesomeBar when you visit a page that has an RSS autodiscovery tag, such as the University homepage.

That’s where RSS Icon in Awesombar (sic) comes in. It… well, puts an RSS icon in the AwesomeBar.

7. Tab Mix Plus

20110324-firefox4-tabmixplus

There are some options within Firefox that I still cannot believe are missing. There is still no way to, by default, open your homepage when you open a new tab.

Tab Mix Plus allows you to set this option—and a whole lot more, like being able to duplicate existing tabs, or protect or lock tabs so that you don’t accidentally close them.

Over to you…

What are your favourite Firefox add-ons, for Web development or otherwise?

Saying goodbye to Internet Explorer 6

Today, Microsoft launched a big push aimed at “Moving the world off Internet Explorer 6”. IE6 Countdown aims to educate people about why they need to upgrade their browsers. The target is for IE6 to account for less than 1% of global share.

Web developers have long bemoaned the amount of work it takes to make modern-day websites work properly in IE6. It is a 10 year old browser — almost half as old as the web itself — but it is only in the past year or two that many web developers have begun to feel that it is reasonable to drop support for IE6.

Even so, even to have a website that does not work well for 1% of visitors may be deemed to be unacceptably high. While it is unreasonable to expect a website to work on a stone tablet as well as it does on an Apple iPad, if enough people are using certain software to surf the web — no matter how old it is — we need to make sure it works.

Worldwide usage of IE6

Internet Explorer 6 usage around the world In February 2011, 3.5% of UK users were using Internet Explorer 6. Worldwide, 12% of users still use this decade-old browser. Most staggeringly of all, over a third of web users in China are still using IE6.

It looks like Nordic sufers are particularly savvy. Norway and Finland are the only two countries coloured green on Microsoft’s map, signalling that they have gone below the target of 1%.

St Andrews poised to go green

I have just checked the statistics for visits to the University of St Andrews website, and the percentage of IE6 users stands at 1.01%. This is a tiny smidge above Microsoft’s target of 1%. While the UK is still painted blue on Microsoft’s map, it looks like the University of St Andrews will go green soon!

Although most pages on the University website should work adequately on IE6, we have begun to stop supporting IE6 for some of the fancier, newer designs. There comes a point where supporting IE6 just becomes a waste of time — time that we really don’t have.

Why upgrade?

IE6 was a revolutionary browser for its time. But that was ten years ago, which is an absolute eternity in terms of the web. Not only are IE6 users unable to visit many websites as the designers intended, the continued prevalence of this ancient browser is discouraging developers from innovating more — making all web users worse off. Using a 10 year old web browser is also seen as a security risk.

Microsoft have been criticised for being too slow to update their browser. It was five years until Internet Explorer 7 came out. In comparison, Mozilla are poised to release Firefox 4, two and a half years after Firefox 3 was launched. Google Chrome has reached version 10 just over two years after the first ever version.

Now even Microsoft finds the continued prevalence of IE6 to be an embarrassment. Today, Microsoft are playing catch-up with other browser vendors, but have made great leaps to improve their browser in recent years.

As such, we fully support all initiatives to encourage users to upgrade from IE6. If you still use IE6, please upgrade to the latest version of Internet Explorer.

Better still, you could opt to switch to a different browser altogether. The future version of Internet Explorer — IE9 — is a vast improvement, but is still not perfect. Only today, I worked on some new code that works perfectly in every other major browser, but does not work in IE9 due to its relatively poor support of CSS3.

If you have held off before, I can promise you that switching browsers it is rather pain-free. You will probably end up being much happier with your browsing experiences.

I suggest you consider the following browsers:

What browsers have our visitors been using this year?

Browsers used to visit the University website during 2010

The topic of which Web browsers are the most popular came up at our weekly Web team meeting this morning.  So I went away and did a little digging in our Google Analytics account.  (Bear in mind that I have no degree of expertise in statistics.)

The issue was raised because we’re currently debugging an issue in Google Chrome, and someone wondered out-loud whether it was really worth trying to fix in such a minor browser if it worked fine in IE, Safari, Firefox and Opera.  The statistics showed that Google Chrome really isn’t that minor a browser now with a share of 11.98% of all visits.

Google Analytics

Looking at the last 12 months (from 01 January – yesterday) I was surprised to see that in September Safari overtook Firefox as the second most used browser after Internet Explorer.

It makes sense that Internet Explorer and Safari, which are the default browsers in Windows and MacOS X respectively, should be first and second, but I don’t really understand immediately why Safari should overtake Firefox in September, even taking into account the new student intake which I would have assumed were also included in the January–June figures?

The Safari figures also include handheld Apple devices, such as iPhone, iPod and iPad, but overall those platforms together only make up 0.8% of the total annual figure.

As a general indication of trend, comparing the January figures to those for December so far, it’s interesting to note that both usage figures for IE and Firefox dropped while Safari, Chrome and Opera grew, with Chrome growing the most.

Chrome UP 5.58%
Safari UP 3.66%
Opera UP 0.13%
Firefox DOWN 4.76%
Internet Explorer DOWN 4.83%

Other browsers

This graph and table, of course, only mention “The Big Five”.  There are other browsers out there.

The statistics for 2010 to date show that 185 different browsers have been used to access the University website.  Most of the other browsers (not those listed above) are for mobile devices, .e.g.

  • BlackBerry
  • HTC HD2
  • HTC Touch
  • HTC TyTN
  • LG
  • Samsung
  • Opera Mini
  • Palm
  • Playstation 3
  • Playstation Portable
  • Xda Ignito

Interesting to see games consoles (Playstation 3 and Playstation Portable) appearing on the list. Over the past 12 months the University website has been visited 451 times using a Playstation 3.  Not quite enough to warrant commissioning a St Andrews level on Grand Theft Auto or Call of Duty.

Broken down by OS

Breaking the browsers down by operating system, across the entire year (01 January–12 December) here are the top 10 browsers by operating system

1 Internet Explorer Windows 43.6%
2 Firefox Windows 18.9%
3 Safari Mac 18.85%
4 Chrome Windows 8.7%
5 Firefox Mac 4.88%
6 Safari Windows 0.93%
7 Chrome Mac 0.91%
8 Firefox Linux 0.65%
9 Opera Windows 0.61%
10 Safari iPhone 0.55%

It will be interesting to see how that moves over the next 12 months and whether things have changed dramatically this time next year.

Making the Student Handbook mobile-friendly

Yesterday I wrote a post about our first steps into the mobile web. Today I will look at what I had to do to make it happen.

Learning about the principles

The first step was to think about the principles behind mobile web design. I am well versed in the principles behind desktop web design, but mobile is a different ball game. The focus is even more strongly centred on a streamlined approach — less is more.

The only other thing I really knew is that there are no easy answers. I had to do my research.

The first question to ask myself was, is a three year old book about mobile web design still relevant? Gareth let me borrow this book, and while parts of it feel out of date, there is still plenty of insight to chew over. It is particularly useful when thinking about older or non-‘smart’ mobile devices. There is a tendency nowadays for articles about mobile to be heavily focussed on iPhone and Android. While this book does feature the iPhone, it is much more about the wider principles of mobile web design.

I also found it useful to take a look at Patrick Lauke’s slides about the mobile web, which he delivered at IWMW. These are more up-to-date, and it was useful to refresh my memory about what I had learnt.

There are three major approaches to tackling mobile:

  1. Do nothing and hope for the best.
  2. Create a separate mobile site.
  3. Adapt what already exists.

Option 3 was the only one really open to us. This option requires compromises to be made. It probably also leads to the largest file sizes. But it is easier, and if you use web standards and code your website well, it should work well enough on a mobile device.

The stylesheet

The first step was to create a stylesheet optimised for mobile devices. A decision was taken early on to focus on the current generation of browsers, as mSaint is designed primarily for smartphones. Mobile Safari, Android and Opera Mini and Mobile all ignore stylesheets with the attribute media="handheld". Modern mobile browsers like to think of themselves as a cut above that sort of thing. They try to render a webpage more or less as you would expect it to on a desktop.

(Handheld stylesheets have always been shakily supported anyway. I have created one nonetheless as a fallback for any mobile browsers that prefer to deliver a webpage in this way.)

But accepting that modern mobile browsers will render the desktop version was not an option in this case. The technique around this is to use CSS3 media queries, which allow us to dictate which stylesheet is used based on the width of the device or browser window. Perfect for adapting content for mobile!

There is a good tutorial on how to use media queries. Guess which browser doesn’t quite like it? Internet Explorer’s issues were the source of some of the biggest puzzles I faced. But since I figured out how to make IE play nicely, it has worked well.

Design

So that it integrates well with mSaint, we have removed a lot of the devices that you find on a standard University webpage. The header, main navigation, left hand navigation and footer have all gone. Basically, everything except the content has gone. Thank goodness for display: none;!

Much of the rest of the stylesheet has been lifted straight from the existing stylesheets. So it should look and feel pretty familiar to regular users of the University website. The other major change I made was to lay out all of the content so that it sits in one mobile-sized column. So any items that appear in the right hand sidebar on the desktop version of the Student Handbook will appear beneath the main content on the mobile version.

When deciding on the ideal width of the column, I settled on a maximum width of 480px. This is the width of an iPhone in landscape mode. But I did not just make this decision with iPhone goggles on. Looking at standard screen resolutions for mobile devices (QVGA, HVGA, VGA and WVGA), 480px is the dimension that comes up the most.

Viewport

The main thing that I have learnt that I was not aware of before is to do with the viewport. The iPhone automatically displays every webpage as though it were 980px wide, and this becomes the scrollable area of the webpage. But if you have optimised the content specifically for mobile display, this is no good. The text is zoomed out and unreadable. The user must manually zoom in, even though there is absolutely nothing on the rest of the page.

The answer is to use the viewport meta tag:

<meta name="viewport" content="width=device-width" />

This tells your mobile browser to automatically zoom in as though the web page were as wide as the mobile device. You can also set a specific width, as well as setting an initial scale and control how far the user can zoom in and out. Originally introduced by Apple for Safari, it seems as though most modern mobile browsers recognise and support this — though this hasn’t been without its problems.

I have been a bit iffy about including the viewport meta tag on these standard web pages. From what I gather, its presence is supposed to indicate that the webpage has been optimised for mobile, which ours hasn’t. It also appears to alter the behaviour of Opera Mobile (by disabling the mobile view option). However, it appears to have no effect on the way desktop browsers display the page, while making it look much better on mobile devices. So we are sticking with it for the time being.

But just when I had got my head around how to control the viewport, imagine my shock when I discovered that a pixel is not a pixel. That is to say, the number of pixels on your device is not the same as the number of pixels that appear to be displayed. Accommodating different screen sizes and resolutions seem complicated at first, and unfortunately it only becomes more complicated as you learn more!

Apple have a very useful guide for developers called Safari Reference Library. It was hugely useful in helping me understand about the viewport and a lot of the other quirks of Safari for iOS, such as automatic text resizing. I think Safari tries to be too clever for its own good sometimes. This makes it a brilliant mobile browser overall, but it is quite frustrating as a developer to try and work out precisely what it is doing.

Incidentally, Opera also have a good mobile web optimisation guide.

Testing

Testing for mobile is notoriously difficult. There are hundreds of different devices, operating systems and browsers out there, with radically differing capabilities. Testing every possible combination is even more impossible for mobile. It makes designing for desktops look like a piece of cake.

The book Mobile Web Design by Cameron Moll contains a highly interesting section about Yahoo!’s procedure for testing their 2006 FIFA World Cup mobile site. By selecting a range of 5-10 devices from top- to bottom-end to test on, they felt that they had covered a wide enough range for the website to work on most mobile browsers. The technique paid off for them as it was a hugely successful website, attracting a peak of 290 million page views in one day. And that was four years ago. Incredible!

We are not aiming for that sort of audience, so our testing has been an even more modest affair. I used my own iPhone to test it in Safari and Opera Mini. But this has been quite frustrating as it is very difficult to get a signal in my office. Upstairs, my colleague has also been testing on an Android emulator.

The Opera Mobile emulator has also been hugely useful, particularly for comparing different screen sizes. How important Opera Mobile actually is, I am not sure. At the end of last semester, around 1% of visits to the University website were on a mobile device. Among those users, Opera does not appear to figure as highly as I had expected.

There is more information about mobile emulators here. These are highly useful tools for finding out how a mobile browser will render a page. But unfortunately they tell us little about how it genuinely feels to use a website on a particular type of device.

A few highlights from IWMW 2010

A couple of weeks ago I attended my fourth Institutional Web Management Workshop (IWMW 2010), which this year took place at the University of Sheffield. (Twitter tag: #iwmw10)

The event provides an opportunity for those involved in institutional Web management (mostly universities and colleges) to hear about case studies, share best practices, find out about new, emerging technologies and develop professional networks (mostly around coffee, in the pub, or sitting around a table in Pizza Hut with a handful of Welsh blokes looking very damp and hungry … it’s a long story!).

Turbulence

The theme of the event this year was ‘The Web in turbulent times‘ and as you might expect the message at times wasn’t entirely encouraging, particularly when one plenary speaker invited us to look around the hall and told us that a lot of us won’t have our current jobs this time next year. Cue nervous laughter.

I’m fairly confident that the magical St Andrews bubble that we inhabit in this small corner of Fife will hold out, particularly since we’re currently advertising for a new post: Website Migration Project Officer, but I certainly wouldn’t want to become complacent and I welcome anything that can help us to become more efficient and effective.

Mobile and Agile

It was encouraging throughout the conference to see both mobile Web and Agile practices popping up in a few plenary (keynote) presentations, as well as in workshops and barCamps.

The mobile Web is something that is clearly going to grow and grow, and it was both encouraging and inspirational to see how universities are addressing it.  It was equally encouraging to hear the debate between device-specific apps (e.g. iPhone apps) vs open-standards (e.g. HTML5-based apps). I don’t have an iPhone, and love my Opera Mobile browser on my Windows Mobile-based device, so no guesses on which side of the debate I sit on.

HTML5

One of the presentations that I was most eagerly looking forward to was HTML5 (and friends) from Patrick A. Lauke from Opera and he didn’t disappoint; you can view his slides here …

… except that I could have listened to him for another 45 minutes. And probably the 45 minutes after that too. HTML5 is one technology that I’m really looking forward to exploring more of this year.

Agile project management

When I signed up for the conference I chose to attend a workshop entitled “A little project management can save a lot of fan cleaning … or (Agile) project management for the Web” because we’ve begun to employ Agile methods in our project management and developments and I wanted to hear more about what an experienced Web team is doing.

The workshop abstract promised:

  • Common misapprehensions about project management.
  • Nightmare situations when dev work goes pear shaped.
  • How project management can save your sorry ass.
  • The ‘light’ project management approach.
  • Is agile a better model for the fast paced work of the Web?
  • Are agile and traditional project management complimentary or mutually exclusive?
  • Sexy web based tools to avoid the dreaded MS Project.
  • 100% death by PowerPoint free, guaranteed!

Unfortunately, the workshop also appeared to be largely Agile-free.  I was disappointed to discover when I turned up that about 50% of the workshop was looking at PRINCE2 project management, which follows a more ‘waterfall’ project management approach, rather than Agile.

I got the feeling that the person who was presenting the Agile aspect of the workshop had been thrown in at the last minute (which I guess fits in with the Agile Manifesto: “We … welcome changing requirements, even late in the development”!) but I’m not sure that it really did Agile, and SCRUM in particular, justice, unfortunately, and didn’t go into the depth that I was either hoping for or the abstract suggested that it might.  Unfortunately, the workshop didn’t do as it said on the tin.

WordPress

The other workshop that I attended, WordPress beyond blogging, was really encouraging.

There can be a tendency in some sectors to dismiss WordPress as not robust because it runs on PHP and MySQL (rather than, say, Java and Oracle database), but it was great to hear how WordPress is being used in other institutions (and for some pretty key services) and gave me a courage to return to St Andrews and explore how we might be able to use it in a number of projects that we’re working on.  Besides, there are currently 11.4 million blogs hosted on WordPress.com which is running their own software, so I guess they must be doing something right.

What I bought back

From most other IWMW conferences I’ve returned with something practical to try out: in previous years it’s been microformats, RSS auto-discovery, OpenSearch, etc.  but there wasn’t so much of that this time.  Maybe I just attended the wrong workshops and barCamps, but what I did bring back was:

  • A desire to start exploring HTML5 now.
  • Encouragement to blog more, and encourage the Web team to blog more (which is why we moved our 3 post WordPress blog from a self-hosted installation to WordPress.com!) Brian Kelly will be so proud of us!
  • Keep exploring Agile/SCRUM and build on the progress that we’ve already made.
  • Explore how we can use WordPress.

And of course, one of the most valuable aspects of IWMW was that I returned with existing friendships strengthened and new ones made.

Horizon scanning at IWMW10

Earlier this month Gareth and I attended the Institutional Web Management Workshop 2010 (IWMW10), held at the University of Sheffield. It was my first time at IWMW, and since I still feel slightly new to the Web in a higher education environment, it was a good opportunity for me to take in the sorts of issues that are commonly faced by institutional web teams.

Turbulece (sky before a thunderstorm)

Turbulent times - we certainly experienced that in Sheffield's weather

It turns out that, right now, the main issue is the effect of the economy. The theme for this year’s IWMW was ‘the web in turbulent times’. Many of the presentations focussed on the doom and gloom. This, coupled with the horrendous weather we experienced while in Sheffield, did little to dispel the stereotype that it’s grim up north (or, in our case, a couple of hundred miles down south).

Luckily, there was plenty of techy chit-chat too. It still fits in with the theme. The web is permanently turbulent. (I think it was designed like that because turbulence creates bigger waves, leading to a more enjoyable surfing experience.)

One of the key characteristics of the web for me is the fact that it is always changing, always developing. Once you’ve got on top of it, something else comes along for you to learn. That is what makes working in the web such an interesting challenge.

An update to the language of the web

Two of the biggest developments on the horizon were covered by one speaker, Patrick H Lauke from Opera Software. The first was HTML5 (and friends), the upcoming update to the language of the web.

The headline is that HTML5 does not replace the existing version of HTML. It is the same but with “more bling”. By the looks of it, it will be much easier and more intuitive to code as well. But the specification is not yet complete, and there are hurdles still to leap in the form of compatibility, accessibility and a question mark over video formats.

We were given a demonstration of some HTML5 functionality in the Opera browser. A lot of what HTML5 adds is exciting and sensible. But I think there will be a rough period while the creases are ironed out. The demonstration was promising, but it is clearly not yet the finished product.

Nonetheless, I read an interesting article recently outlining five reasons why you can use HTML5 today. It’s definitely something we should be turning our attention to sooner rather than later.

Mobile web

Later, in a smaller breakout session, Patrick H Lauke spoke about the mobile web and how to make your website mobile-friendly. Phones are becoming ‘smarter’ and connectivity is advancing. People will increasingly come to expect to be able to browse the web while out and about just as efficiently as they can on a desktop machine.

But the mobile web throws up a whole extra set of issues, adding to the already-complex set of challenges we have been accustomed to facing for years. There is a huge range of screen sizes and browsers in use, and mobile web designs must try to accommodate them all. Then there is the question of how to streamline the website for mobiles without ‘dumbing down’ the content.

Like HTML5, the mobile web still has a bit to go. As we found out in Sheffield, the mobile web cannot yet be fully relied upon in the same way we can rely upon the web on a PC. But that is why HTML5 and the mobile web are for the future, even though we need to start thinking about them now.

Reflections on my first IWMW

Overall, I found my first IWMW to be a great learning experience. It has given me plenty to think about. Although I was of course aware of the issues surrounding HTML5 and the mobile web, what I learnt at IWMW has helped me focus on the key aspects to look towards.

In addition, there were plenty of other interesting talks. Particular standouts included Jeremy Speller’s about disaster communication in a crisis and Paul Boag’s persuasive presentation about cutting down the amount of content on an unwieldy website.

Due to the anticipated sector-wide cutbacks, there is uncertainty about whether IWMW will take place next year. I think it would be a real shame if it was not held in 2011, because at my first IWMW it was clear that the event is a hugely useful way to discuss ideas and meet people facing similar issues.

Browser Wars – the next generation

On Monday Steve and I attended an Opera Software University Seminar hosted here at the University of St Andrews, one of many stops on their world tour of educational institutions.

I found it an interesting and encouraging hour long presentation which looked at the Opera range of browsers (did you know that there are four main products: Desktop, Embedded, Mini and Mobile, which all use the same rendering engine?), Web Standards and a brief dive into HTML 5 and CSS 3.  I’ve blogged about it elsewhere if you want to read more.

On our way out of the PC classroom (it was hosted in the School of Computer Science) in exchange for a completed feedback slip we were given a FREE umbrella. I know! FREE!  We didn’t even have to download it from one of over 80 download locations.

Comparisons

However, the question I know you’re all asking: how does it compare with the St Andrews Web Team’s Mozilla Firefox umbrella, which was purchased from the Mozilla store a few months ago?

Mozilla Firefox umbrella next to the Opera umbrella

Mozilla Firefox umbrella next to the Opera umbrella

Size

As you can see from the image above the Opera brolly is considerably smaller than the more cumbersome Mozilla brolly.

That observation correlates with my experience of the two browsers, currently Firefox is hogging 236 MB of RAM, while Opera is displaying the same three pages using only 34 MB. This is clearly the Opera Mini of umbrellas.

Opened each fares as you would expect: the Mozilla browser is considerably larger offering protection for more than one user.  The Opera Mini umbrella is clearly designed for single tab user use.

Mozilla Firefox umbrella open

Mozilla Firefox umbrella open

Opera Mini umbrella open

Opera Mini umbrella open

Rendering

Opera has clearly taken HTML 5 and CSS 3 to heart with this umbrella as in particularly windy situations the brolly dynamically re-renders itself … mostly inside out.  Ironically, for such a stable browser their umbrella does have a tendency to ‘crash’ alot in bad weather.  I suspect, however, that the weather we threw at it just had the wrong !DOCTYPE.

The Firefox umbrella on the other hand does appear to bend and sway a little but resolutely and reliably continues to do its job.

User interface

Both umbrellas feel robust enough, although I have to say that I would feel more confident taking the Firefox brolly out in the winds whistle down the streets of St Andrews.

In fact, in tests the Firefox umbrella proved to be easier and quicker to use simply due to the sturdiness of the fastenings and other hardware.

It is said that the first umbrella was likely to be nothing more than some largely-waterproof fabric stretched over a wooden or wire frame, and both models follow this tradition in terms of construction.  However, again, the Firefox brolly feels more robust with the stretched fabric stitches into the end of the spokes; the Opera brolly relies on small metal ‘cups’ slotting over the end of the spokes, which are too easy to knock off.

Security

Clasps on Firefox and Opera umbrellas

Clasps on Firefox and Opera umbrellas

Security is no less important on an umbrella as it is on a browser, and both models’ security features are built to impress.

The Mozilla model uses the traditional ring on a piece of elastic which wraps snuggly around the shaft of the umbrella and afixes on a button, while the Opera model relies on a vecro fastening.

One particularly impressive security feature though was the clear plastic sheath that the Opera umbrella came in.  It keeps your umbrella safe and secure when not being used.

Open Source

As an open-source product you are welcome to take the code of Mozilla Firefox and redevelop it.  While the brolly is available to anyone within the Web Team we discourage any modifications to the overall structure, and as far as I’m aware there are currently no official add-ons for the brolly.

Opera is not an open-source product, which is reflected in our need to go directly to Opera to obtain it on request.  Although, as I understand it, 3rd parties such as Oxfam may be able to sign up to distribute copies.

Conclusion

Other than the fact that I clearly have too much time on my hands during the lunch hour, I’d say that the Firefox umbrella is probably the one you want if you need to stay dry (in all sorts of weather), although it is more cumbersome. Perhaps, a bit like Firefox Portable.

The Opera umbrella on the other hand is wonderfully compact, so you can take it anywhere you want … a bit like their Opera Mini and Mobile browsers.

Opera Software University Seminar

Chris Mills, Opera's Developer Relationship Manager talking about Web Standards

Chris Mills, Opera's Developer Relationship Manager talking about Web Standards

Yesterday Steve and I attended the Opera Software University Seminar being held in the Jack Cole Building (the School of Computer Science).

Opera has been one of my favourite browsers for years — from the days that you had to pay for it! — so it was really interesting to hear from the company themselves what they’re up to, where their focus is and where they’re heading with their range of browsers.

The presentation

The presentation kicked off with an introduction from Eric Hoppe, Opera Marketing Manager, who then handed over to Roberto Mateu, Product Manager for Opera Desktop who explained about the four products within the Opera range, as well as the importance of the mobile Web browsing experience which is a vastly growing area, particularly in developing countries.

Four product ranges

If you don’t know about Opera, or haven’t tried it out, then I urge you to: it’s a great browser now available in four different flavours:

  1. Opera Desktop
    Browser for your Windows, Linux or Mac machine.
  2. Opera for Devices
    Browser for set-top boxes, games devices such as the Wii, portable media players and more.
  3. Opera Mini
    Browser for your Java-enabled mobile phone.
  4. Opera Mobile
    Browser for smartphones and PDAs.

I was interested to learn that there is only one rendering engine for all four product ranges, which explains why it’s such a nicely consistent and robust browser regardless of the platform.

I currently have 7 different versions of Opera installed on my PC in the office, for testing purposes you understand.  I also have Opera 5 on my Psion, Opera Mini on my old Nokia phone and Opera Mobile 9.5 beta on my PDA/phone.  I think Firefox Mobile which is in development just now is going to have to do something pretty special to beat the mobile Web experience that Opera offers.

Web Standards

Finally, Chris Mills, Opera’s Developer Relationship Manager (and the man behind the Opera Web Standards Curriculum) gave the longest presentation of the hour, about where the Web has come from, where it is now and the importance of open Web standards, before delving into a demo of some of the features of HTML 5 and CSS 3.

There are some cool features to look forward to once HTML 5 goes live and starts to be adopted by browser manufacturers.  Needless to say Opera are already embracing some of the new tags and capabilities.

Dragonfly

One nice feature of Opera for developers is their Dragonfly debugging tools, currently in Alpha 2.  While not quite as advanced as Firebug for Firefox, since Firebug has been around for much long, they do offer a good set of tools allowing inspection of DOM, CSS and JavaScript.  There is also the ability to debug pages running on another computer or even your phone, which is great.

My biggest niggle with Dragonfly though is that it displays all my nicely constructed lowercase XHTML tags in uppercase.  The IE Developer Toolbar does the same.

The latest version of Dragonfly allows you to add a Debug menu to the menu bar, which is a welcome addition, saving you from having to weave your way through Tools > Advanced… > Developer Tools to get to the features.  This has to be downloaded from the Opera Dragonfly page.

Chris promised that his slides would appear on his My Opera site sometime soon, so keep an eye out for those.  In the meantime download Opera and give it a spin.