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.

Advertisements

6 thoughts on “First steps into mobile

  1. It’s great to see you responding to my suggestion in such a positive way 🙂

    Note that one benefit I have found from writing blog posts is in getting responses from others who are willing to share experiences, make suggestions, etc. An example of that can be seen from a recent post on the ePub format, which is well-suited for reading publications on mobile devices – see

    http://ukwebfocus.wordpress.com/2010/08/04/epub-format-for-papers-in-repositories/

    It does occur to me that you may wish to thing about how use of this format might relate to your plans for development of a mobile service.

    I’ve added you blog to my RSS reader and I’m looking format to reading further posts from you.

  2. Hi
    Thanks for the post. What about the mSaint client makes the style sheets difficult to develop? Do you have a link to the mSaint app and details of which platforms it will target?

    Aaron

    • Hi Aaron,

      I don’t know enough about mSaint / Campus M to say. I have only been working on the University web pages. Don’t quote me on this, but from what I understand, it is primarily an iPhone app with Android and Java versions in the pipeline, and a web-based version as an alternative.

      The reason it’s difficult to create an mSaint-specific stylesheet is that basically mSaint essentially creates a hyperlink to the webpages, which are opened in a new browser window. These are the regular webpages, but the stylesheet I have developed has been designed with the mSaint users in mind. This has a negative effect for any users browsing the University website on their mobile device.

      While it is possible to create a stylesheet that is only applied to, for instance, devices with a maximum width of 480px, as far as I am aware there is no such code that says to the browser “display this stylesheet if the user has entered the Student Handbook via mSaint, otherwise display the normal one.”

      The only solution we can think of so far is to create two separate versions of the same content — one with the regular stylesheet with all internal links pointing to this ‘regular’ version, and another one with the mSaint stylesheet and with all internal links pointing to the mSaint version. But from a content management point of view, I would have thought this is best avoided.

  3. Pingback: Making the Student Handbook mobile-friendly | University of St Andrews Web team

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s