Not signed in (Sign In)

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

  1.  

    There's been some talk about cleaning up the site's CSS, so may be this is a good time to think about a handheld version?

    I created a feature request on meta.SE about it, but it's something we can do on our own. Are there are other volunteers to try it (my wifi is currently broken, so no iPod goodness for me for a while)?

  2.  

    MO actually mostly works fine on my iPhone. a special mobile interface would probably work even better, admittedly.

  3.  

    btw, the cleaned-up CSS is now live. Let me know if you notice any anomalies. I did change a couple of things, but they should be pretty difficult to detect (the most obvious: there used to be 7 pixels of white padding above the top bar which holds your name and the logout, faq, and meta links).

    • CommentAuthorrwbarton
    • CommentTimeJan 2nd 2010
     
    I noticed, on the Recent Activity page, the divs which say things like "1\n10" or "acc\n15" are no longer on a gray or green background respectively.
  4.  

    @rwbarton: good catch. That should be fixed now. But I did leave the times (eg "12h" or "1d") darker than they used to be. I think they were a little too hard to see before.

  5.  

    @Ilya: Unfortunately, it is my impression that web browsers on handheld devices universally ignore the “handheld” CSS markup. This is why some websites create specially crafted HTML code for such devices. It's a shame, really.

  6.  

    The CSS I have in mind is something like

    @media only screen and (max-width: 480px) {
      #sidebar, .views , #hlinks a + a {
        display: none;
      }
    
      #hlinks a img {
        zoom: 300%;
      }
    
      .question-summary {
        width: 480px !important;
      }
    
      .summary, .narrow .summary {
        width: 350px !important;
      }
    
      body {
        overflow-x: hidden;
      }
    
      #topbar {
        float: left !important;
      }
    
      #hlogo {
        zoom: 75% !important;
      }
    
      #hmenus .nav ul li + li {
        display: none !important; 
      }
    }
    

    This strips most of the elements, leaving the 480px wide list of questions on the main page. Similarly, one could do the questions and answers.

    @hanche, true, iPhone doesn't consider itself to be a handheld indeed, but this works for iPhone since the check is for width. The check should work on modern browsers; one can also test this CSS by narrowing a browser window until it's 480px wide.

    Anyway, maybe we should indeed wait for whatever the SE team solution is.

  7.  

    @Ilya: The media selector you use does not appear to be valid CSS 2, not even CSS 2.1. But if handheld devices can be expected to understand it, I suppose it's okay. Is it CSS 3? The collection of CSS pages on W3C seems overwhelming.

  8.  

    @hanche, here is the official CSS3 Media Query specification.

    What's important, of course, is not just the standard exists but also that the browser supports it. Apple really did break the ground here by making Mobile Safari on iPhone quite capable, and, yes, this is the official method of recognizing iPhone suggested by Apple.

    I don't keep track of developments with other mobile phones, I think Apple has really raised the bar here, so I'd expect all new small devices that pretend to have a good mobile browser to support this.

  9.  

    @Ilya: Thanks; that is useful information.