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">
- 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:
- Wittenberg's CSS-driven mobile-friendly web (test-port only right now):
Resources for learning about mobile design
- 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/