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.

Advertisements

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)

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.

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.