Notre Dame & responsive design

I’m back again to bang my responsive design drum  … this time to share a really interesting blog post about the University of Notre Dame site:

Delivering an Amazing Site on Every Device: Notre Dame Edition

There’s lots to mull over in the article, but I specifically want to highlight that in the last two years, they’ve seen a 900% increase in traffic to their mobile site … and, over the same time period, a 500% increase in mobile traffic to their main site. Even with that increase, mobile traffic constitutes only 5% of visits to their main site overall – it seems like a no-brainer to me that we are only going to see the proportion of mobile traffic grow and grow, what with all the tablets and smartphones flooding the market.

Notre Dame: mobile trafficWhile the Libraries’ mobile site has yet to see that kind of increase, the statistics on mobile visits to the Libraries’ main site show an increase of about the same proportion as ND saw – since February 2010, mobile traffic to libraries.iub.edu has increased by approximately 550% … and mobile traffic makes up about a percent and a half of our overall site visits. Plenty of room for growth!

Watch this space for some news relating to the Libraries’ mobile site in the near future. In the meantime, we’re always interested to hear your thoughts and comments on responsive design, ideas for our mobile site, or would love it if you have other examples of responsive sites you’d like to share with us.

Responsive *library* design

I was very excited to see the announcement last week in Walking Paper about a library site employing responsive design.

GVSU: Mary Idema Pew Library | responsive siteThe site is for the Mary Idema Pew Library Learning and Information Commons at Grand Valley State University, slated to open in Fall 2013. Very cool! We’d be very interested to hear of any other library sites employing responsive design, so please share in the comments if you are aware of any such.

More responsive design

Call me a nerd (I admit it! It’s true!), but I just can’t get enough of looking at responsive design. Ethan Marcotte, Mr Responsive Design himself, recently wrote a piece for .net magazine listing his twenty favorite responsive sites. I had the pleasure of hearing him speak at re:build this July – not only is he tops for UX & such, but he also came across as a super-nice guy with a sense of humor (exhibit A: his website, unstoppablerobotninja.com).

Check out our earlier post on responsive design for more info, or have a look at this super-quick video to see a very simple responsive design in action.

A Simple Demonstration of a Responsive Web Design from Monkey Do! on Vimeo.

Boston Globe Launches Responsive Design

This week the Boston Globe launched a new web site using what has become known as Responsive Design. Responsive Design was first proposed by Ethan Marcotte, one of the consultants on the Globe project, in the web magazine A List Apart. This design approach focuses on delivering the same content and basic design across multiple devices from desktops to tablets to mobile phones. Technically this is achieved by using fluid grids that adapt to the size of the screen, flexible images and media, and part of the CSS3 specification called Media Queries, which allow web designers and developers to specify certain layout rules based on certain conditions.

Responsive Design has been receiving a great deal of attention since it was first proposed by Ethan, so much so that he expanded his original essay this fall. Despite the increasing numbers of projects using these techniques, the applicability of such an approach to a large scale site has remained largely theoretical. That changed this week. The new site by the Boston Globe shows not only that Responsive Design can work for large sites, but that it can create a greatly improved user experience that is focused on the content and elegantly adapts to whatever device is being used to access that content. The Globe has posted a short video that shows the new site in action and provides some great context for their decision making process. The Filament Group and Upstatement, two partners for the project, have also posted an overview of their experiences with Responsive Design. For other examples using these methods, check out mediaqueri.es. The images below, taken from mediaqueri.es, provide snapshots of how the Boston Globe might look at different screen resolutions.