Difference between revisions of "Mobile Devices"

From Code4Lib
Jump to: navigation, search
(other sites)
Line 20: Line 20:
  
 
==other sites==
 
==other sites==
* Eric's mobile-friendly site using webkit: [[http://m.infomotions.com/]]
+
* [http://m.infomotions.com/ Eric's mobile-friendly site] using webkit
  
 
==Resources for learning about mobile design==
 
==Resources for learning about mobile design==

Revision as of 19:25, 11 June 2010

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:

http://hesburgh.boopsie.com

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

http://ezra.wittenberg.edu:2082

other sites

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/