Improving the Europeana Exhibitions user experience on mobile – a Responsive Design approach

Like many other GLAMs we at Europeana have been thinking about how to best adapt our sites to the fact that the proportion of people using smartphones and tablets to access the web is growing quickly. For many people a mobile device is their only device they use to access the web! The latter is estimated to be true for about 25% of web users in the US.

The strategy we’ve adopted at Europeana to meet this challenge has two parts:

  1. To gradually re-design our sites according to the responsive design paradigm, rather than develop native mobile applications
  2. To develop our API to be as mobile development friendly as  possible and so indirectly support development of native mobile apps

The first of our sites to get the responsive once-over is our exhibitions area. This is our first attempt at responsive design and has been very much learning by doing! There’s plenty of polishing and optimization (download weight and performance) to do but it was time to release the responsive exhibitions into the wild. Please let us know how it works for you!

In terms of tech our exhibitions are based on the excellent Omeka platform with a Europeana specific and heavily modified theme. It’s this theme that now has been upgrade to be responsive. We developed the them based on the Foundation framework from ZURB.

Screenshot from Screenfly form Quirktools. It shows a page in our exhibitions as accessed via an iPad in portrait mode.

Screenshot from Screenfly by Quirktools. It shows a page in our exhibitions as accessed via an iPad in portrait mode (768 pixels width).

As part of the update we’ve also added and adapted a couple of features to our exhibitions platform:

So what have we learned from this experience? Well, since I don’t code I’ll focus my main three take-aways on process and organisation:

  1. With responsive design it’s more important than ever for product manager, UX designers, web developer, front-end developer and test engineer to work closely together!
  2. In terms of the design process, with responsive design I find lo-fi wireframes on paper to be fairly useless. I recommend going quickly from sketching by hand on paper stencils or whiteboard to prototyping in HTML on screen.
  3. Use real mobile devices to test! Services like Screenfly and emulators can help to test your fluid grid but they are not of much use in testing your interaction design or the real user experience.

Currently we’re working with a general, and responsive, re-design of Europeana 1914-1918 which will soon go public. After that we do the same with our portal. More on those projects later!

Do you have any feedback on our exhibitions? Do you have any experience developing responsive sites for GLAMs? Please share!

Advertisements
This entry was posted in Europeana and tagged , , , , , . Bookmark the permalink.

2 Responses to Improving the Europeana Exhibitions user experience on mobile – a Responsive Design approach

  1. Mike Smith says:

    Great to see that you’re working to get your site working on mobile devices – well done!

  2. Pingback: Europeana 1914-1918 re-designed: Designing and implementing the user experience | Kadmeian Letters

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