Save Yourself Five Hours of Frustration When Doing a Five Minute Mobile Makeover

technology.png“How to make your site mobile? Why, turn on mobile views in Blogger, of course.”

Well, duh.  But that doesn’t help at all if you’ve got static websites as well – like I do.  In particular, the Alliteration Ink website (and particularly the store page) while not actively unfriendly, don’t do so hot on an iPhone.  (For some more reasons why you want a mobile-friendly page, take a look at the tutorial I used…)

But I decided to start on my main professional page – https://stevensaus.com.

Luckily for me, the template I started with is nicely marked up in CSS, and I’ve learned enough from doing eBook conversions that CSS and markup aren’t just trial and error anymore.

However, I didn’t want to use relatively heavy code to make it happen.  I’m usually working on machines at least a generation or two back, and the side-effect of being cutting-edge is that you leave people in the cold.  So it had to be a lightweight solution that would render properly even with text browsers like elinks and lynx.

So the first thing I did was clean up the code from the original (you can see an archive at the Wayback Machine to compare.)  I got rid of the sidebar, and moved everything to a single-column format.  One of my biggest problems has always been equalizing the height of the sidebar and the main content on static pages, so that’s actually a relief to get rid of.  (Besides, who needs to have “upcoming appearances” on every page?  I don’t get out enough in real life to warrant it.)

Then I followed a lot of the directions on Perishable Press’ “The 5-Minute CSS Mobile Makeover“.  There’s just a few things that no longer work – particularly with iPhones, and they’re all part of the same problem.

The media type recognition among mobile phones – and bog help us, Internet Explorer – is non-standard at best.  (They even note that at the top of the article with Windows Mobile browsers.)  So here’s what you do:

First, skip the @media CSS tag inside the stylesheets (they recommend it under “Apply Styles to the iPhone”).  Have a stylesheet for “standard” – in my mind, 800px wide or better – and for “handheld”.

Second, follow all the recommendations about styling for your “handheld” stylesheet.  It’s possible to preview on the Opera Mini site (click once on the text, then it looks just about like it does in Safari on the iPhone), or you can look at this specific page I made that just links to the handheld CSS sheet – though the images look HUGE because the images are based off your screen width, not your current browser width.

And I followed Perishable Press’ recommendation of how to make it deliver the right stylesheet by media type… and it didn’t work.  At all.

Turns out that the iPhone doesn’t think it’s a lowly handheld browser.  So then you have to test for screen width.  And then Internet Explorer – way to go borking standards – doesn’t recognize the standards at all either.

So here’s the best solution that I have:

Use this in the <head> portion of your HTML:

<!– gets everything bigger than 800 pixels on a monitor –>
<link rel="stylesheet" href="default.css" type="text/css" media="only Screen and (min-device-width: 800px)" />
<!– It’s less than 800 pixels across? Must be handheld and in denial –>
<link rel="stylesheet" href="handheld.css" type="text/css" media="only Screen and (max-device-width: 799px)" />
<!– Holy crap! It’s following standards! It’s handheld! –>
<link rel="stylesheet" href="handheld.css" type="text/css" media="handheld" />
<!– And this is for IE. Dunno if Windows Mobile browsers fall here or handheld, though. Everything in the IF portion is only executed if it’s IE, so maybe some more code there. –>
<!–[if IE]>
<link rel="stylesheet" href="default.css" type="text/css" media="Screen" />
<![endif]–>

And it should deliver the right stylesheet to most devices.