What's the best way to create a simple mobile version of a website?

Question

I'm building a small site for a company, and would like to build a version optimised for smartphones with full internet browsers (iPhone/Android etc).

I'm leaning towards media queries, because this is supported by webkit which most of these seem to use.

Is this the best? If so, what media query would be the best?

I'm leaning towards:

@media (max-device-width: 480px)

Answer 1

If your site can adjust everything you need via CSS you should be good.

Keep in mind the things that differ in the mobile web:

• Overall width/height is much smaller
• Font-sizes are typically made bigger for readability
• Flash isn't supported across many devices (cough iphone)
• Strip anything that isn't needed don't waste bandwidth on things mobile users don't care about
• add mobile-friendly attributes to phone #'s for easy dialing

That said, once you get into it you may find that you really want/need to provide a different "View" for the mobile users... e.g. redirecting them from example.com to m.example.com and altering the content on the page dramatically. If you are using an MVC-like framework you should be able to make a set of simplified views for your pages that are optimized for mobile devices.

Example sites (Desktop vs. Mobile vs. Touch-optimized)

• Digg: Full | Mobile
• Yahoo: Full | Mobile
• Facebook: Full | Mobile | Touch

Answer 2

For the iPhone and Android, I wouldn’t bother as they both have fully functioning web broswers. (Unless the site is Flash, iPhone only.)

You should be able to target any device you want with a custom CSS file, for stuff like a Blackberry etc.

Answer 3

On the specific media query, possibly see http://stackoverflow.com/questions/809532/.

Answer 4

For touch phones, create a jQTouch version. For keyboard phones just make a stylesheet optimized for small screens.