

Ask HN: How Can I Improve the Mobile View of My Website? - MichaelCrawford
http://www.warplife.com/

======
MichaelCrawford
I visit my own site mostly with Firefox on Mac OS X. While I do look at it on
iOS and Android from time to time, not a whole lot, as I can't actually _work_
on my site from a mobile device.

The mobile view of my site, admittedly, sucks.

The main thing I do is hide the extensive vertical navigation bar on the right
side of the desktop view, I hide the logo, then place a very compact
navigation bar at the top.

I realized just yesterday that there are some styles in my desktop view that
are not reflected in the mobile stylesheet, like "picture frames" around
images. I can easily fix that.

What I'd like to know, is how to make my site not suck, for those with mobile
gadgetry.

I use just one HTML document for each page of both the mobile and desktop view
of my site, with a separate stylesheet for screens that are less than 481
pixels. Internet Explorer doesn't understand how that's done, so I have:

    
    
       <link media="only screen and (max-device-width: 480px)"
        href="/css/mobile-manual.css"
        type="text/css" rel="stylesheet" />
    
        <link media="screen and (min-device-width: 481px)"
         href="/quixotic.css"
         type="text/css" rel="stylesheet" />
    
        <!--[if IE]>
        <link media="screen" href="http://www.warplife.com/quixotic.css"
         type="text/css" rel="stylesheet" />
        <![endif]-->

