Difference between revisions of "Mobile Devices"
From Code4Lib
(→Resources for learning about mobile design) |
(→Basic techniques) |
||
| (One intermediate revision by one other user not shown) | |||
| Line 3: | Line 3: | ||
==Basic techniques== | ==Basic techniques== | ||
* choose device-specific CSS based on screen width: | * 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 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"> |
| − | <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 | * set the "viewport" on the device so the page scales to an appropriate size | ||
| − | + | <meta name="viewport" content="width=device-width"> | |
| − | <meta name="viewport" content="width=device-width" | + | |
| − | + | ||
==OPACs== | ==OPACs== | ||
| Line 28: | Line 27: | ||
* [http://sourceforge.net/projects/mitmobileweb/ MIT Mobile Framework] | * [http://sourceforge.net/projects/mitmobileweb/ MIT Mobile Framework] | ||
* Webkit | * Webkit | ||
| − | * Drupal "Sections": different themes based on URL (e.g. "m.drupalsite.com" gets a different theme | + | * Drupal "Sections": different themes based on URL (e.g. "m.drupalsite.com" gets a different theme) |
Latest revision as of 20:01, 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">
- 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:
- 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)
