Mobile Devices

stuff we talked about at Midwest 2010.

Basic techniques

• choose device-specific CSS based on screen width:

 <LINK REL=StyleSheet HREF="desktop.css" TYPE="text/css" media="screen,projection,tv and (min-width: 501px)">
 <link rel="stylesheet" media="handheld, screen and (max-width: 500px)" href="smallscreen.css" type="text/css">

• or put the query in your css file;

 @media screen and (min-width: 400px) and (max-width: 700px) { ... }

• set the "viewport" on the device so the page scales to an appropriate size

 <meta name="viewport" content="width=device-width">

OPACs

• Notre Dame's mobile library interface from Boopsie ($$). Download free app:

http://hesburgh.boopsie.com

• Wittenberg's CSS-driven mobile-friendly web (test-port only right now):

http://ezra.wittenberg.edu:2082

other sites

• Eric's mobile-friendly site using webkit

Resources

• Stark, Jonathan. Building iPhone Apps with HTML, CSS, and JavaScript. O'Reilley (2009).
  • some good info on general mobile web design techniques
• iPhone emulator online: http://testiphone.com/
• MIT Mobile Framework
• Webkit
• Drupal "Sections": different themes based on URL (e.g. "m.drupalsite.com" gets a different theme)