Developing & Designing for Mobile

Developing & Designing for Mobile
Jeff Wisniewski
University of Pittsburgh
jeffw@pitt.edu
www.facebook.com/wisniewski

when we think about mobile, we have to think that the number of connections coming from the desktop web will be exceeded by the connections from mobile in the next couple of years (by 2013/14)
(Marvel has a comics generator - an aside)

this talk not about mobile apps, instead the mobile web

app v. mobile web
app
= available offline, as well as online
= higher barrier to entry
= fragmented landscape - platforms
= updates - cyclical
= coolness = high
mobile web
= online onlyl
= lower barrier to entry
= single platform
= continuous updates cycles - can evolve continuously
mobile users
= immediate need for information (so not interested in lending policies)
= context is king (user is already distracted)
= Nielsen says "mobile usability is pretty much an oxymoron"
= small screens, difficult input, speed/latency

"don't make me think!" applies even more in mobile
additionally "don't make me type"
Content for mobile site?
ask your users what they want?
content: built
now --
- directions
- hours
- ask a librarian / text
- contact info
later --
- catalog search & actions (search itself not enough, need to be able to take action/do something with what you find)

content
- be selection - info on need to know basis
- repurpose existing
-- podcasts
-- videos (format? not Flash for iPhone)
- alerts
-- RSS
content: bought
- EBSCO, PubMed, Westlaw, other mobile-optimized article sources
- web-scale discovery services (preindexed) can be mobile-friendly (as opposed to federated search)
- Catalog
-- build
-- buy
-- tweak
-- does your catalog's accessible version work for mobile maybe?

m.home
- create a new mobile optimized homepage (rather than retrofitting) - because info architecture is so different from old homepage to mobile v.
- single column
- single lines
- flattened hierarchy, fewer clicks (more selective in content served for mobile)
- short titles instead of longer, descriptive titles that are recommended for desktop sites
- simple std HTML & CSS mobile doctype declaration

m.markup
- css media type=handheld? lies! - doesn't work anymore
- mostif not all new mobile borwsers ignore the handheld statement (since marketed as "full web")
- media queries work more often - e.g., if screensize href="tel:2037688761"call me

href="sms:1234567890">text me

if page-based site you want to format for mobile only
use display none in css
use html accesskey

accesskey="1" href="http://..."

links will become automatically actionable in order of access keys - will work with selector
m.markup
-webkit-border-radius for rounded corners in mobile
auto resize image (do you even need the image)
combine dependent files
performance issues for website speed
- minify your javascript & css:
www.cssdrive.com/index.php/main/csscompressor/
http://dean.edwards.name/packer/
tell Google - register your mobile site there
make sure you're registered with google local (google small business center)
validate your code
CMS' like drupal, joomla, wp, can auto-create mobile-friendly v.'s
usability testing
- less architectural complexity and more functional complexity
-- test on paper prototypes
- platform proliferation - pick top 2 for testing
analytics
- Google Analytics added mobile tracking recently - so you can see which mobile browsers are coming to your site
- Clicky mobile hardware tracking (pro account or higher)
- filter by user agents (but lots of different ones - 15-20)

mobile OK Checker
- validator.w3.org/mobile
- Google webmaster: developing mobile sites
- mobile speed test (www.mobilespeedtest.com)
- iPhone Interfaceb mockup tool (iphonemockup.lkmc.ch)
- mobile site generator - www.hiddenpeanuts.com/msg/

Example good mobile sites:
-Virginia, NCSU, Oregon State, MIT
- MIT Open source is a web development platform (open source) to help you develop mobile site

In HTML5, can have offline access, so may not need to develop apps

where are links to CMS mobile templates (e.g., Drupal Joomla: mobile_tools in Drupal (http://drupal.org/project/mobile_tools), Joomla mobile extensions (http://extensions.joomla.org/extensions/core-enhancements/mobile), Wordpress (http://wordpress.org/extend/plugins/wordpress-mobile-pack/))
Comment from the audience that at one library with mobile, they're seeing download and reading of 100-page pdfs for their Blackberries/other mobile devices - people's willingness to read on mobile phones shouldn't be underestimated