Developing mobile pages for our Open Day

Posted in: Archive

Open Day mobile homepageFor the 2 previous open days here, we have seen an increase in mobile views to our open day pages. For the last open day, the number of views on iOS and Android devices went up 230% on the day before, and stayed at that level on the open day itself, before falling back down.

With this in mind, we wanted to provide an improved experience for mobile users looking at our open day specific information on the upcoming open day in June.

Page mobilising

We had the following aims:

- Determine the most popular pages from previous open days
- Provide a mobile optimised view of those pages (iOS first, Android second)
- Use the existing page content from our CMS

The last point is important because we didn't want to create a second set of content for mobile devices. It is not feasible for us at the moment to maintain two copies of our content separately for desktop and mobile users.

We need to be able to re-template and re-style the existing (desktop) content for a better experience on mobile devices.

Open Day mobile getting here pageCMS templating

This is one area where our CMS (OpenCms) really shines. It is trivial to copy a template, modify it and present existing page content in the new template.

For our purposes we wanted to wrap the existing content in a mobile optimised template.

Mobile boilerplating

We decided to try the mobile HTML5 Boilerplate (MBP) from Paul Irish and friends, having had some experience with the desktop HTML5 Boilerplate. This turned out to be very easy to use. It worked straight out of the box so we could concentrate on adding the extra CSS and JavaScript that we needed without building the basics from scratch.

Clear styling

We took cues from our previous mobile open day landing page and tweaked the styles to look a bit more modern. We also introduced our open day colour, which is used in printed material and T-shirts worn on the day, to give a consistent experience. We wanted to present the information clearly and cleanly for mobile use and make the information easy to access on small screens.

Why not have a look at the mobile pages on your iOS or Android device and compare the experience with the desktop version.

Posted in: Archive