Open main menu

Mobile Devices

Revision as of 20:01, 11 June 2010 by 66.205.170.54 (Talk) (→‎Basic techniques)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Revision as of 20:01, 11 June 2010 by 66.205.170.54 (Talk) (→‎Basic techniques)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

stuff we talked about at Midwest 2010.

Do you want to try some new features? By joining the beta, you will get access to experimental features, at the risk of encountering bugs and issues.

Okay No thanks

Contents

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

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)
Last edited 15 years ago by an anonymous user