Wednesday, April 14, 2010

CIL2010: Developing and Designing for Mobile

Jeff Wisniewski, Web Services Librarian, University of Pittsburgh

50% of all new internet connections are coming from phones, and in 2014 mobile web usage will surpass desktop web usage (source: Morgan Stanley research)

We're talking about the mobile web, NOT mobile apps. The difference is a single platform, all online, with a lower barrier to entry, and continuous updates. An app is installed, requires multiple platforms, and a programmer to develop it.

Mobile web doesn't require a programmer, because it's HTML and CSS. Can continuously evolve. Context is really important - usually an immediate need for information. So they don't care so much about lending policies. They're generally doing it in a distracted environment.

Mobile usability is an oxymoron (Jakob Nielsen). Minimize the need to input. Nobody really does heavy-duty typing on a mobile device. Think speed and latency - even the fastest connections are relatively slow compared to a laptop.

Remember "Don't Make Me Think!" - now it's "don't make me type"

What sort of content might be useful? Ask your users!

  • directions
  • hours
  • ask a librarian, text a librarian
  • contact info
  • catalog search and actions (like text it to yourself)
  • article search and actions
Many, many sources already have mobile-optimized sites, including PubMed and Ebsco. Many vendors have an "accessible" version of the catalog that will be more mobile-friendly. Often you have to turn it on, though.

Design considerations:
  • single column
  • single line
  • flatten hierarchy
  • short titles
CSS Media type=handlheld? Lies!
most new mobile browsers ignore the handheld style statement, so you get the "full web" on their device.

There's a media query that works more reliably
click to call and/or text

CSS display: none
property to turn off headers, sidebars, etc. to strip out extraneous content
(and you don't have to maintain a separate page)

HTML accesskey
and number them appropriately
- then those links become actionable automatically

-webkit-border-radius:8px; to round corners

you can auto-resize images, but do you really NEED the image??

optimizing for mobile:
  • Not the size of the page, but more imporatntly the number of calls to the server. Combine dependent files to render page faster
  • Minify your javascript and css cssdrive- csscompressor or
  • register with Google small business center for LBS awareness
  • validate your code
Most major CMSs have templates to render content for mobile

Usability testing is tough with a tiny screen, you may have to test on paper prototypes

Google analytics does mobile tracking
"Clicky" mobile hardware tracking
Standard analytics can filter by user agents.

  • mobile OK checker
  • Google webmaster: developing mobile sites
  • Mobile speed test
  • iPhone interface mockup tool
  • mobile site generator
see good examples at NCSU, Oregon State

HTML5 is gonna help a LOT - developers can accss some functions even if their data connection is dropped.

presentation and links here later

No comments: