Mobile and responsive design

How many folks in this room have a smartphone?

Some quick facts:

  • Most of our students now have a smartphone/device (1400+ smarthphones or ipods registered by students last semester)
  • Mobile devices are projected to become peoples' primary internet access device. This is already happening in the developing world and in the the lower socioeconomic rungs
  • Mobile access to the college website is growing exponentially - ~5% of visits last year this time, >10% of visits today

Three things we're doing about this:

  1. m.amherst.edu
  2. a mobile app, in time for homecoming, mostly targeting alumni but with features all users will like (directory for example)
  3. website redesign using responsive design principles.

Quick show of hands, who knows what responsive design is?

Example:
http://foodsense.is/

Things to take note of:

  • Navigation changes based on the device
  • Images are automagically scaled
  • Sometimes, functionality and even sections of content are removed as you scale down.


Why is this approach becoming a best practice?

  • most cost effective/efficient way to make content available to the most devices/users

Another example:

What else and what comes next?

  • working on use of analytics to inform college's approach to content development and design
  • We'll use what we learn to inform what 1, 2 and 3 look like next year. All bets are probably off - will we have all three of these? Will they look the same? Will we have one mobile app, or 5? I'll place my bet that at least one of these will see dramatic change.
  • Stop using tables. Just. Stop. Using. Tables! (unless you have tabular data you want to display).
  • When you think images, think big - you want to provide the largest image for display, not the smallest. The cms will take care of scaling that down appropriately for devices with smaller screens.
  • mobile first is a strategy increasingly being adopted by content producers. We think we need to get the college there. We're not ready yet, but we're talking about it.

A quick teaser if time permits:

https://wsgdev3.amherst.edu/dru6-themedev/campuslife