Layout for iPod/iPhone, Android and other smartphone screen sizes.



Okay, this approach is probably wrong. Better to have all the changes be via a CSS card called instead of *css when a mobile browser is detected. Starting again with*cssmobile


When we think it's good enough:

  1. auto-detect and redirect mobile users to, say, (, etc.)
    (document or at least point to how to do that for people installing Wagn)
  2. have m. addresses use *cssmobile
  3. migrate *cssmobile

What to accomplish in *cssmobile:

  1. fixed #menu
    ( not working - not a WebKit issue since it does work in Safari. see keep top bar always on-screen)
  2. #menu - put span#logging on a second line (can that be done without making it a div?)
  3. √960px width
    (Test on iPhone 4, maybe okay as is - tried 960pt but didn't look right. What about mobile devices wider than 960px?)
  4. √primary/secondary full-width
  5. (ideally you wouldn't even download it, but that's not possible w CSS-only, right?) √drop logo
  6. √footer and tabs and "page" icon always visible
  7. bump up card menu (in header) and watch link (in footer) font size (why are they smaller than left-side text anyway?)
  8. detect orientation and adjust width?
  9. ??


An older approach, leaving as is for now:



I Remember discussing this in email at some point. I think Ethan was pointing to a stylesheet connected feature. Maybe a "link=" attribute that can be used for "conditional" styles based on the type of interaction. I think this is designed also for accessibility options as well.

  --Gerry Gleason.....Fri Jan 28 02:24:15 -0800 2011

Different CSS for vertical and horizontal?

  --John Abbe.....Sun Feb 13 18:30:46 -0800 2011

A small part of this solution is probably inserting something like this in Classic Layout:

  <link href="/mobile_css.css" media="print" text="text/css" rel="stylesheet">

  --John Abbe.....Wed Feb 23 13:26:44 -0800 2011

+relevant user stories