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?

Internet Explorer from version 1.0 to 9.0

Since Microsoft Internet Explorer 9 was released Andy—you know! Andy!—wondered what it would be like to install every version of Microsoft’s Web browser starting at IE 1.0 under Windows 95 and working all the way up through IE 6.0 on Windows XP to IE 9.0 which is only available for Windows Vista or 7 and compare them. His video is fascinating.

Acid tests

In the video he mentions Acid1, Acid2 and Acid3 (these links take you to Wikipedia) which are test pages that are used by browser manufacturers to check for problems in the way that they display Web pages.

  • Acid1 tests how a browser uses the Cascading Style Sheets (CSS) 1.0 specification.
  • Acid2 tests CSS 2.1 styling, HTML, PNG images, and data URIs (a way to include data within pages as though they were external resources).
  • Acid3 tests the Document Object Model (that is the structure of the page) and how the browser handles the JavaScript scripting language which is often used to add interactivity to a Web page.

You can check how well your browser does by clicking on the links above, which take you to the tests themselves.

The browser that I’m using to write this in (Google Chrome 11 beta) passes all three tests, even scoing 100/100 in Acid3. Internet Explorer 9.0 passes tests 1 and 2 and scores an admirable 95/100 in Acid 3; Firefox 4.0 scores 97/100.

But I digress…

Internet Explorer 3.0… without the internet

My first introduction to Internet Explorer was IE 3.0 under Windows 3.11 for Workgroups when I was learning HTML back in 1997. I wasn’t even connected to the World Wide Web, which is fine because the readme file suggested that the internet was just one option:

This product enables you to browse and view HTML documents on the network, in addition to documents on the World Wide Web or Internet. Other services, such as Gopher and FTP, and NNTP news support, are also available.

I still have the installer for Microsoft Internet Explorer 3.0 for Microsoft Windows 3.1 from November 1996).

Here are the system requirements:

  • A personal computer, 386 processor or higher
  • Microsoft Windows 3.1 or 3.11 or  Microsoft Windows for Workgroups 3.1 or 3.11
  • At least 4 megabytes (MB) of memory
  • A VGA monitor or better
  • A mouse
  • A modem with a speed of at least 9600 or a LAN  connection

Personal computers and the Web have come a long way since then.

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:

PDF problems? Check your filenames

We have been contacted a couple of times recently by content maintainers who were concerned that some users of the website were unable to open PDF files. Our users have particularly been having problems opening some PDFs in Firefox, while I have also known of Google Chrome being affected. Internet Explorer has been fine (for once!).

These odd problems have only been cropping up recently, and not just on the University website. I have heard reports from other people who have been having difficulties opening PDFs in Firefox and Chrome in general. Strangely, despite hearing numerous reports “in real life”, I have seen little chat about this on the web. So I am not entirely sure what is going on. But here is what I think has happened.

What might be causing the problem?

Both of the times I have been asked to investigate this issue, the same thing appeared to be causing it. I noticed that the PDFs in question had filenames that were not web-friendly. They were something like Example File Name.pdf.

A filename that contains capital letters, special characters or spaces is quite common, and is normally adequate if you just want to open your file from your desktop. But they are unsuitable in a web environment. URLs are not designed to contain spaces. But if you upload your PDF with a filename that contains spaces, this is what will be created. This is also what causes the dreaded “%20” ugliness that we are often asked about.

For instance, if I was to upload my hypothetical document with the filename Example File Name.pdf, its URL on the web would be http://www.st-andrews.ac.uk/media/Example%20File%20Name.pdf. This is not ideal.

Normally the software we use is smart enough to work around it. But it seems (and this is just a guess on my part because I have been unable to find any firm information) that a recent update to the Adobe Reader software (perhaps the release of Adobe Reader X) has caused a few bugs in the way certain browsers handle PDFs.

How to avoid these problems — name your files correctly

Both times I have remedied the issue by downloading all of the PDFs onto my computer, renaming the files so that they had web-friendly filenames, then re-uploading them. It seems that the best way of ensuring that your PDFs will open in all browsers is to give them a web-friendly filename in the first place. As a nice bonus, they will end up having nicer URLs as well!

If you are preparing a document to be uploaded to the website, please ensure that you have a web-friendly filename before uploading it. Avoid using any special characters, capital letters or spaces.

Do ensure that your filename is all lowercase and replace any spaces with hypens.

So if you have a file that’s called Example File Name.pdf that you want to upload to the web, create a copy and name it example-file-name.pdf. Upload this new version of the file. That way, you can help prevent users having problems viewing your documents.

This advice also applies to any sort of file you are uploading, including Word documents and  images.

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.

T44U – TerminalFour global user conference

Last week saw the annual T44U conference take place in Dublin. T44U is an annual event run by TerminalFour. It is designed to allow users of the content management system, Site Manager, to share their experiences with each other, to meet the staff of TerminalFour and to input into the future development of Site Manager.

This was my first time at T44U. Last year Gareth and Chris went. As we operate a strict rota system in the web team, it was the turn of me and Steve to make the sacrifice and spend some time in Dublin. Gareth made do with his T44Us conference, which he has told me was a roaring success.

The Gravity Bar at the Guinness Storehouse, Dublin

The Gravity Bar at the Guinness Storehouse, Dublin

Site Manager version 7

The morning of day one was a good opportunity to catch up with the latest developments in TerminalFour and Site Manager. There are lots of promising improvements in version 7. Although we feel that some elements of the interface could still do with some improvement, there have been some promising changes in this area. Chief among them is the WordPress-style dashboard with customisable widgets. I particularly liked the sound of the new chat feature, which could allow you to work collaboratively with another Site Manager user.

Worryingly, I have heard some grumbles that version 7 runs rather slowly on Internet Explorer 8. That would be a problem for us. However, we were surprised to learn that almost half of T4’s customers are now using version 7. Given the improved features that are available, we are now considering upgrading sooner rather than later.

New features

One major new feature that many of our users may be interested in is direct edit. This allows users to update content in preview mode. Hopefully this will make it easier to update content, although I feel there is still scope for great improvement in this promising feature.

The introduction of a pagination navigation object and custom fulltext filenames are other exciting feature that I can imagine making great use of, particularly in news sections and the like.

Powerful-looking personalisation features also seem promising and we are interested to learn more about that as we assess version 7 in the coming months.

Focus groups

For me, the best part of the whole event was the focus groups that were held on Friday afternoon. I found it hugely useful to participate in these group discussions about certain features of Site Manager.

TerminalFour staff seemed really receptive to my ideas, particularly on navigation objects. I think there is great scope to simplify the process of creating navigation objects. Site Manager users from other institutions also frequently report that they are creating several navigation objects that are very similar to each other over and over again.

Thinking about ways to possibly prevent this and to simplify the process of creating navigation objects in general was an interesting puzzle to think about. I think in our discussions we came up with some good ideas about how to make this features more user-friendly as a whole, and I look forward to seeing if these ideas can filter through to become real improvements to the feature.

I also took part in discussions about publish states. This is a more complex issue than I first thought! It is a real can of worms, but despite the complexities I think something resembling a consensus was reached as to how this aspect of Site Manager should be improved.

The Guinness Storehouse

View into the "pint glass" from the Gravity Bar

View into the "pint glass" from the Gravity Bar

The venue was the Guinness Storehouse. Not only is it one of Dublin’s top tourist attractions, it is also an impressive conference facility. Unfortunately the room on day one was a bit too small. The ceiling was so low that it was quite difficult to view the presenters’ slides.

However, that was soon forgotten as we were taken on a tour of the building at the end of the day. It is a cleverly designed museum. The building was redeveloped about ten years ago, and has been designed to look like it has a giant Guinness pint glass in the middle of it!

Once you reach the top, you are challenged to pull the “perfect pint” of Guinness. You even receive a certificate upon completion. I cannot express the deep privilege I felt upon receiving one of these certificates, which are no doubt extremely rare.

Then it was up to the seventh floor and the Gravity Bar. Going up the lift, you emerge out of the top of the giant pint glass. It is quite a dizzying sensation to suddenly be surrounded by spectacular views of Dublin, seven storeys up. The views from the Gravity Bar are astonishing.

In there, we were treated to excellent Guinness-based food (in the form of beef and Guinness stew, and a Guinness chocolate mousse!) and even more excellent Guinness-based booze (in the form of Guinness Guinness). Sadly the music, although good, was a bit on the loud side. This made it rather difficult to do much in the way of talking. So it was just as well the plates of beef and Guinness stew kept on coming.

Should we still be supporting Internet Explorer 6?

Keep calm and debug IE6

Keep calm and debug IE6

Every couple of months the same topic of conversation comes up in the Web team office: should we still be supporting Internet Explorer 6? The answer so far has always been a resigned yes, but that may not be the case for too long.

A little history: IE6 was released on 27 August 2001, three days after Windows XP was released.  Since then IE7 was released in October 2006, IE8 in March 2009 and IE9 public beta in September 2010.  So, surely it’s now time to withdraw support for a browser that is over nine years old.

Bring down IE6

In 2009 .net magazine started a campaign called “Bring down IE6“.

Bring down IE6

Their mission:

The premise is simple: Internet Explorer 6 is antiquated, doesn’t support key web standards, and should be phased out. This isn’t about being anti-Microsoft, it’s about making sure that we encourage people to move to modern browsers such as IE8, Firefox, Chrome, Safari and Opera.

Case-by-case

In an article entitled “Calling time on IE6” Craig Grannell “asks designers and developers if it’s finally time to take IE6 behind the shed and shoot it”!  He leaves the conclusion of the article to Web standards hero Jeffrey Zeldman:

How much longer we prop up this ageing browser must be decided on a case-by-case basis. Not every site can afford to dump it today, but the writing’s on the wall.

I think that’s a really important point because until recently the primary browser on the University’s default PC setup, that was installed on every Windows PC in the PC classrooms, was Internet Explorer 6.  If we wanted our websites to be viewable and usable across the University then we had to support it, we had no option.

Supporting IE6 is a drag. As all web developers will know, you spend a couple of hours building something that works perfectly in Chrome, Firefox, Opera and Safari and then you spend twice as long again debugging it in IE6 and IE7 and IE8, which all appear to have introduced new bugs to the game.  Keep calm and debug IE!

Analytics

Since the University’s default PC setup (‘standard build’) has now moved to Windows XP (and will hopefully soon move again to Windows 7) the default browser is now IE8, and s the requirement to support IE6 has now been reduced.

This is backed up by the statistics from our Google Analytics account that tracks which pages are being view most often and by which browsers.

Unsurprisingly Internet Explorer, being the default browser on our standard build PC, is the most popular browser to use to visit the University website; Apple Safari (the default browser on Apple Macs) is second.  42.5% of all visitors in the last month have used one version or another of Internet Explorer.  The breakdown of which version is interesting:

  1. IE8: 79.8% (382,394 visits)
  2. IE7: 15.4% (73,944 visits)
  3. IE6: 4.4% (21,186 visits)
  4. IE9 beta: 0.29% (1,395 visits)

That means that only 1.8% of all visitors to the University website last month used IE6. But 21,186 visits is still quite a lot.

Frameworks

Adopting the Blueprint CSS framework a few years back made a considerable difference to our development time.  Blueprint comes with a build-in IE hacks/workarounds stylesheet that addresses a good number of common IE5, IE6 and IE7 issues that has literally saved us hours and hours of hair-pulling.

Similarly we’re using the jQuery JavaScript framework which still supports IE6 and so makes cross-browser coding much simpler.

My view is that with such good support built-in to these frameworks for IE6 there’s really no excuse at the moment to completely drop providing a certain degree of support for IE6. The bugs are well known and the hacks are well-documented, and so finding workarounds for those that are not already contained in the framework files really doesn’t take that long to code these days.

Yahoo! graded browser support

However, it doesn’t mean that pages need to look pixel-for-pixel identical in every browser.  Something that is made explicit in the Yahoo! Graded Browser Support chart:

Support does not mean that everybody gets the same thing. Expecting two users using different browser software to have an identical experience fails to embrace or acknowledge the heterogeneous essence of the Web. In fact, requiring the same experience for all users creates an artificial barrier to participation. Availability and accessibility of content should be our key priority.

Over the last two to three years I’ve used the Yahoo! GBS chart to inform the Web team about how much support we should be affording to the various browsers.  IE6 is still granted A-grade support but it appears from a blog post “Graded Browser Support Update: Q4 2010” on the Yahoo! User Interface Blog that this is all about to change.

Listed among the various changes, which includes dropping A-grade support for Firefox 3.0 and initiating support for WebKit browsers on iOS and Android OS, is this:

Forecast discontinuation of A-grade coverage for Internet Explorer 6 in Q1 2011; we expect to move IE6 to the C-grade browser list as of the next update.

C-grade browsers, according to the GBS page are “identified, incapable, antiquated and rare.”

I would say that the bell is tolling for IE6 but it would appear from some corners of the Web that it has already rung out.  Google has already held a Funeral for IE6 after it withdrew support for the aged browser.  Microsoft sent flowers!

Conclusion

According to Google IE6 is already dead and buried, while Yahoo! are expected to degrade support for it in early 2011. Microsoft themselves, on the other hand, have committed to supporting IE6 until Windows XP SP3 support is removed in 2014; but that just means removing security issues rather than adding new features.  IE6 will never, on its own, support HTML5 or CSS3, for example.

So, should we still be supporting Internet Explorer 6? I expect that we’ll follow Yahoo!’s lead next year and move to providing only a base level of support for it.  When we move to using HTML5 and CSS3 then I expect we’ll have to drop support for IE6 completely.

We’ll make sure that content is readable but not worry too much about the presentation (CSS) and behaviour (JavaScript) layers; we’re already kind of doing that already in places, to be honest.  But as we’re using frameworks for CSS and JavaScript which still support IE6 the elderly blue ‘e’ may be inadvertently supported for a little while to come.

Then all we need to do is try to kill off IE7.  Who’s with me?

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.