Moving the University website to HTML9 Responsive Boilerstrap JS

H9RBS.js (v0.0001) is a flexible, dependency-free, lightweight, device-agnostic, modular, baked-in, component framework MVC library shoelacestrap to help you kickstart your responsive CSS-based app architecture backbone kitchensink tweetybirds.

H9RBS.js (v0.0001) is a flexible, dependency-free, lightweight, device-agnostic, modular, baked-in, component framework MVC library shoelacestrap to help you kickstart your responsive CSS-based app architecture backbone kitchensink tweetybirds.

When we redesigned the University website in 2008 we adopted the Blueprint CSS framework which greatly cut down our CSS development time. It offered us a solid, cross-browser compatible foundation on which to build our site.

With the advent of HTML5 and responsive web design we started using the Bootstrap framework which offered not only a mobile-friendly grid but also at least 12 JavaScript plugins to provide design patterns such as modal windows, carousels, tabs and accordions.

As you are probably aware the web is now developing at an astonishing rate. Browsers are updated now on a six-weekly basis, HTML5 is nearing completion, and CSS4 is already being discussed. So we are looking to the future for a new framework that will support our needs and the requirements of our ever more mobile-friendly users for the next few years to come.

In consultation with Prof. Ailol from the University’s School of Computer Science we will be planning a migration to the HTML9 Responsive Boilerstrap JS starting today.

The framework describes itself as

a flexible, dependency-free, lightweight, device-agnostic, modular, baked-in, component framework MVC library shoelacestrap to help you kickstart your responsive CSS-based app architecture backbone […]

In other words: it meets our needs perfectly. Or as the developer of the infamous “All your base are belong to us” might say: All proof I.

A few of the many reasons we’ve selected this framework:

  1. It is entirely suited to today’s web.
  2. Unlike many other frameworks this uses a poor fill rather than a polyfil.
  3. It supports the new JavaScript flair loop.
  4. It is compatible with the forthcoming Commodore 64, Spectrum 48 and BBC B platforms, as well as popular browsers such as IE 6, Netscape Navigator 4 and Mosaic.
  5. No polar bears were harmed in its creation; in other words it is in keeping with our IT strategy for green computing.
  6. It is 100% compatible with JaxelScrobd 8.1.π.

From a usability point of view the only difference you may experience is a mild sense of foolishness.

Hardboiled Web Design

This time next month my colleague Chris and I will be sitting in the Surgeons’ Hall on Nicholson Street in Edinburgh at Andy Clarke’s Hardboiled Web Design workshop.

I’ve just started reading his latest book, of the same name, published by Five Simple Steps and it is excellent.

20110322-hardboiledwebdesign

As it says in the blurb: “It’s for people who want to understand why, when and how to use the latest HTML5 and CSS3 technologies in their everyday work. Not tomorrow or next week, but today.”

We’ve had some interesting conversations within the Web team about when to start using HTML5 and CSS3. I’m all for using it now, others seem a little more hesitant. It ties in with recent posts here about when to stop supporting certain browsers <cough>IE6</cough>.

Clarke is pretty clear on the matter: websites do not need to be pixel-perfect clones in different browsers. Instead, adapt for the browser’s capabilities.

The hardboiled approach pushes graceful degradation further and demands that we use our creative talents to design experiences that are responsive and tailored to a browser’s capabilities. Hardboiled web design redefines graceful degradation for the challenges we face today.

If we’re going to create the inspiring websites that our customers expect, we must look beyond how we’ve approached progressive enhancement and graceful degradation in the past. Simply ‘rewarding’ people who use more capable browsers with rounded corners and drop shadows and generally settling for less isn’t enough.

Instead we should take full advantage of new technologies, and craft every user’s experience so that it’s appropriate to the capabilities of the browser they’re using. That will likely mean that designs will look different — sometimes very different — across browsers.

(Hardboiled Web Design, Andy Clarke, p.20)

Of course, that may require more development but who ever said this Web designing lark should be simple?

I’m really looking forward to the workshop.  Why not join me? Book online £299 + VAT (£358.80)

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:

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.