Difference between revisions of "Mobile Devices"

From Code4Lib
Jump to: navigation, search
(Basic techniques)
(Basic techniques)
 
(5 intermediate revisions by one other user not shown)
Line 1: Line 1:
 +
stuff we talked about at [[Midwest]] 2010.
 +
 
==Basic techniques==
 
==Basic techniques==
 
* choose device-specific CSS based on screen width:
 
* choose device-specific CSS based on screen width:
<code>
+
  <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">
+
 
</code>
+
* 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
<code>
+
  <meta name="viewport" content="width=device-width">
<meta name="viewport" content="width=device-width">
+
</code>
+
  
 
==OPACs==
 
==OPACs==
Line 17: Line 18:
 
http://ezra.wittenberg.edu:2082
 
http://ezra.wittenberg.edu:2082
  
==Resources for learning about mobile design==
+
==other sites==
 +
* [http://m.infomotions.com/ Eric's mobile-friendly site] using webkit
 +
 
 +
==Resources==
 
* Stark, Jonathan. '''Building iPhone Apps with HTML, CSS, and JavaScript'''. O'Reilley (2009).
 
* Stark, Jonathan. '''Building iPhone Apps with HTML, CSS, and JavaScript'''. O'Reilley (2009).
 
** some good info on general mobile web design techniques
 
** some good info on general mobile web design techniques
 
* iPhone emulator online: http://testiphone.com/
 
* iPhone emulator online: http://testiphone.com/
 +
* [http://sourceforge.net/projects/mitmobileweb/ MIT Mobile Framework]
 +
* Webkit
 +
* 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:

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)