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!

Now:

• directions
• hours
• ask a librarian, text a librarian
• contact info

Later

• 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 dean.edwards.name/packer
• 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.

resources

• mobile OK checker validator.w3.org/mobile
  
• Google webmaster: developing mobile sites
• Mobile speed test mobilespeedtest.com
  
• iPhone interface mockup tool iphonemockup.lkmc.ch
  
• mobile site generator www.hiddenpeanuts.com/msg
  

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 http://www.slideshare.net/jeffwisniewski