Tips: Creating Web Sites for Mobile Phones

I've recently learned a few technical tips you should use when creating web sites for mobile devices (like the iPhone, Android, etc) and though I'd share them all in one place.

9658-bbcskyfirecopy.jpg#1: Size matters

This should be obvious, I guess, but you're dealing with a smaller screen.  Unfortunately, you really have no idea what the screen size is, so you have to low-ball it.  Various sources on the Internet agree that you shouldn't have images, tables, divs, etc. any wider than 240 pixelsMaybe 320, but you're pushing it, mister.  Of course, that could change as time goes on, but at the time of this writing, 240px seems to be the most widely accepted width that fits on the most screens.

Also, don't forget to place this at the top of your page:

<meta name='viewport' 
   content='initial-scale=1.0, user-scalable=no' />

This will cause the device to be zoomed-in on your content, and not let the user zoom out any more.  Just try it out and you'll see what I mean.

#2: Keep it fluid

Keeping with the idea that you can't design for every screen size, keep your layouts fluid.  As in, use percentage widths for everything, instead of pixel widths.  The only things which should have pixel widths are images.  Tables, select lists, textareas, etc, should all be given CSS widths with percentages.  Ex:  width: 80%;

#3: To App or Not To App

If you want your site to "look like an app," use as many bubbly or shiny graphics as you can.  Use icons or tabs if at all possible.  And if you do use icons, make sure they have rounded corners, like these:

Having rounded, shiny, or "cute" graphics gives your site the feel of a "real" app with the ease of simple HTML programming.  Make them links, and possibly use CSS or JavaScript to give them a border when clicked.  Little enhancements like that go a long way to creating an app-like atmosphere.

#4: Test it out!

Make sure to actually test your mobile site on a real device if you can.  If you can't, Opera Mini has a handy mobile demo you can use on your PC.  Check it out here:

http://www.opera.com/mobile/demo/

There are other emulators out there too, but they usually require you to download something to your computer in order to use it.  That, or the require somewhat complicated steps to install them.  For example, the Android SDK has an emulator you can use to test out a mobile site, but unless you are a developer, you may have a hard time setting it up.

 

I'm sure I'm leaving out all sorts of other tips, so I appologize that this isn't an exhaustive list, but it should be enough to get you started.  Good luck with your project!