IWMW 2012 in Edinburgh

Neil Allison presenting on Experiences in User Centred Design at the University of Edinburgh

Neil Allison presenting on Experiences in User Centred Design at the University of Edinburgh

About a month ago (this blog post has taken ages to write) I travelled down to Edinburgh with my colleague Duncan for the annual Institutional Web Management Workshop (IWMW) which this year was being hosted by the University of Edinburgh under the theme of “Embedding Innovation”.

Venue

This was my fourth or fifth IWMW conference, since I started working in higher education in 2006, and was by far the easiest to get to. I know Edinburgh fairly well, having lived there for five years; two of those years was spent in Marchmont, just a stone’s throw (using a bionic arm) across the Meadows from the conference venue at Appleton Tower, which I discovered was named after physicist Sir Edward Appleton (1892-1965).

Appleton Tower—bless it—isn’t the bonniest of buildings, either inside or out. It is joked that Appleton Tower offers one of the best views of the Edinburgh skyline as it is the one view that absolutely guarantees that Appleton Tower isn’t a part of it. In my experience, it wasn’t the most comfortable conference venue but it also wasn’t the worst.

The accommodation on the other hand was lovely, at nearby Pollock Halls.

View from my room at Pollock Halls

View from my room at Pollock Halls

In fact, it was lovely in both my rooms. I noticed that the shower was broken in my first room, which had a pleasant view (above) of the accommodation office and St Leonard’s Hall, which you’ll notice was built in the Scottish Baronial style, so I was moved to a room with a fabulous (and gently uncomfortable) double bed and a view of the Salisbury Crags.

Workshop sessions

I signed up for three workshop sessions:

  1. #A2: Experiences in User Centred Design at the University of Edinburgh, with Neil Allison (University of Edinburgh).
  2. #B3: Large-Scale Responsive Websites: Tools and Techniques, with Keith Doyle (Navopia) and Paddy Callaghan (University of Bradford) .
  3. #C1: Responding to the Cookie Monster, with Claire Gibbons (University of Bradford) and John Kelly (JISC Legal).

Each ‘workshop’ session was 90 minutes long—too long in my opinion, and suited more for those whose learning style has ‘lectures’ right at the top. The thing about workshops is that I expect to leave it with something useful, something usable. To my mind ‘workshop’ implies a more hands-on approach, more discussion, more trying-it-out for ourselves.  The word ‘workshop’ implies that something is going to be built; the context implies that it’s me that’s going to do the building. Criticisms aside, I enjoyed at least something from each of the sessions.

A few things that I took away from each of the sessions:

Experiences in User Centred Design

I particularly enjoyed Neil Allison’s explanation of user personas: “hypothetical archetypes of actual users” who represent real users during the design process, such as departmental secretaries, heads of school, international students, etc. One neat tip was to use alliteration in choosing their names to make them more memorable, e.g. Angela Admin, Herbert Head-of-school.

I would have enjoyed working in a small group to create a persona for ourselves, as an exercise. That would have really given it more of a hands-on feel.

Large-Scale Responsive Websites: Tools and Techniques

This was a very popular session that would have had the building’s fire officer sweating with worry; in fact it had us all sweating the room was so packed.

This workshop was in two parts. Paddy Callaghan gave a high-speed tour of a recent responsive web design project he’d been working on. There were two main elements here: the design decisions about what should show or hide at different sizes, and the practical coding of the responsive site (meta tags used, how media queries work, etc.) I would have appreciated 90 minutes on this alone—even given my previous comments about workshop length.

Keith Doyle then gave us a tour through a design pattern library for responsive sites, which I found particularly interesting and helpful. I took copious notes… and then lost my notebook on the train on my journey home. Bah!

I wasn’t surprised how popular this session was. Responsive web design is on a lot of people’s radars. My only criticism, really, is highlighted in a post by Garr Reynolds about scope vs depth. This presentation tried to cover both. In the end I experienced quite a bit of information-overload. I would have happily listened to half of the material but in greater depth.

Responding to the Cookie Monster

Ah! The session looking at the recent EU cookies legislation was, as you might expect, popular; unlike the legislation.

While it was interesting listening to someone from JISC Legal, I didn’t leave with any clearer an idea of where we go from here. Except that I now have a sneaking suspicion that we need to do more about this.

Conclusion

Like many of these conferences the most valuable thing that I got was the opportunity to network with members of other university web teams, to make new connections and build on existing relationships.

A huge thank you to everyone who was involved in making IWMW 2012 such a success. I’d better go now, I’ve got some innovation to embed…

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.

First steps into mobile

I thought I would try and take the advice of Brian Kelly who has suggested that web team members write a post a month about their work. It is particularly interesting that after coming back from IWMW I was struck by just how much focus there was on the mobile web. It felt like it was becoming something we would be getting stuck into sooner rather than later.

Sure enough, since my return I have spent around a week working on how web pages are displayed on mobile devices. It has been a tricky problem to solve, not just because of the complexity of developing a website for mobile devices, but also because of the nature of this particular project.

Integration with mobile applications

The part of the website in question is the new web version of the Student Handbook. In this past, the Student Handbook has been produced as a physical booklet. This year, for the first time, the handbook is being offered on the web — and not as a hard copy.

One of the drivers for this has been the development of mSaint, the new mobile application that is due to launch in time for the start of this coming academic session. The application is being designed to give students access to important information any time, any where. The Student Handbook will be one of the guides incorporated into mSaint.

The challenge has been to make the new Student Handbook webpages integrate well with mSaint without compromising the standard version of the webpages. The mSaint application works by linking to the individual webpages, opening up in a new browser window on the mobile device. As such, these pages need to be displayed without the website’s normal navigation, as this is different to the navigational structure of mSaint.

This has provided us with the ideal opportunity to take our first steps into designing for mobile devices. But it has also posed a tricky problem. We need to optimise these webpages for mSaint without it having an adverse effect on the experience of other users.

Foremost in my mind has been the experience of those who are navigating through the website on a mobile browser, rather than accessing these pages through mSaint. It is (relatively) trivial to create a separate stylesheet for mobile devices. But creating an mSaint-specific stylesheet or section that does not impact on other mobile users has been an impossibility so far.

It looks like for the time being we will have to make do with offering a stripped-down version of the Student Handbook to all mobile users. Perhaps we will put a disclaimer about how the Student Handbook should be viewed on a mobile device via mSaint  — but this is far from ideal. Thankfully, the regular ‘desktop version’ (if that is what you can call it) of the Student Handbook will be unaffected.

In a separate post tomorrow I will write about what I had to do to make these webpages more mobile-friendly.

Next steps

This has been a steep learning curve. There is a lot still to learn. Just as you always learn while developing for a desktop environment, there is more than this to keep on top of for mobile.

The mSaint project has brought mobile into focus a bit more quickly than I was perhaps expecting. We are anticipating that a good mobile experience will come to be expected across the University website, and it will become a larger part of our work over time.

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.