I’m getting several queries about how to create mobile friendly versions of websites. I’m looking for your ideas on the various options and best practices.
I’d prefer to handle this all in a single separate, mobile friendly version of the stylesheet attached to the theme (WordPress).
Ideally, it would be as simple as defining two stylesheets (one for mobile and one for all other screens)
<link rel="stylesheet" href="default.css" media="screen"/>
<link rel="stylesheet" href="handheld.css" media="handheld,
only screen and (max-device-width:480px)"/>
If so, are there some CSS templates for creating an iPhone friendly user interface to a site (one that looks like an iPhone App’s default look and feel)?
Unfortunately, the handheld stylesheet is ignored by a lot of devices, so it’s not much use. There is a movement now that recommends styling for mobiles first, but providing basic styles for all devices and then adding in nicer styles via media queries for devices that can handle them, such as desktop browsers, iPhone etc. (Well, good ones, which rules out all IE versions by 9).
I can’t imagine the pain that would be trying to wrangle wordpress markup and a wordpress theme into simple, clean, elegant mobile-first styles and then larger-screen styles…
From someone that spends nearly 100% of his online time from a mobile I will say again I hate mobile sites. It’s so frusturating battling with the mobile redirects. Thousands of times I’m just tryjg to find a product or info on google >> I click the link >> it redirects to the mobile site >> guess what now my info is gone and I’m looking at a stupid mobile site with two words on it. Just because I’m on a mobile that doesn’t mean I’m only playing around and can’t read and write.