mobile website screen size

Question

i want to design the mobile version of my website do you know if there's a 'best practice' resolution (width, height)?

Answer 1

It really depends on your target mobile device, feature or smart phones, tablets etc, each has a different view port. Unless doing it for a certain device only, our best practice is to stretch it to full width and specify all sizes in em or %. Still, this works with most "new" ones (feature phones, tablets, ...), if you want to make it usable on older devices, you would probably end up with a completely different version.

Answer 2

Designing for a specific size is probably a bad idea, there a many different screen sizes used and on many smartphones you can view the websites in landscape or portrait mode.

Don't float any sidebars, images on one side, the screens are usually not wide enough to allow for that. Keep the elements of your homepage one below the other.

Answer 3

My suggestion is that don't design or hardcode for any particular size. Different flavors of smartphones are coming in different sizes - iPhone, HTC eVO, Dell Streak, Nokia N900, Droid X all come in different sizes.

I suggest you go though this article. Though a bit dated, it still manages to cover the essence of designing mobile website catering to multiple screen sizes - Mobiforge - effective-design-multiple-screen-sizes

Answer 4

There's 2 approaches really.

Approach 1 is to make a flexible layout. Approach 2 is to make templates for different screen sizes. It depends on the handsets your targeting. Taking approach 2 I would hit up a small (176 x 220), medium (320 x 240), large (320+ x 240+) angle. Its a fairly safe assumption that the large template is going to run on a more sophisticated phone, so that template can have a few more bells and whistles.

If you have the luxury of an existing website then get some analytics on there to report your most popular handsets (and screen sizes) before developing. Google analytics for example can do this. Armed with that info you'll know the screen sizes you need to hit up. If its a new site then drop me an email with your country and help you out with a list of the top screen sizes for your country. (richard at handsetdetection dot com).