Developing Mobile Apps for Multiple Screen Sizes and Resolutions

As phones become more advanced, they grow more diverse as well. Some of today’s phones can be considered fully operational personal computers. Many people have begun developing fully fledged apps for these devices including multimedia and interactivity. A common type of applications on today’s phones are mobile web applications.

The earliest phones equipped with web browsers were very simplistic. They used a markup language known as WML (Wireless Markup Language). It is basically a simplified version of HTML with various hints about displaying elements on a very small screen.

Today’s mobile web applications use full on XHTML and other advanced web technologies such as Javascript and Ajax. An age old problem in the web development world is supporting screen sizes. Traditionally we stuck with a standard 800×600 screen and a constant aspect ratio. Today’s phones’ resolutions span many aspect ratios and resolutions, so how do we develop for these mobile platforms and keep visual sanity?

Well there is no for sure method, but there are some basic rules of thumb. Some common screen resolutions on today’s phones are:

  • 128 x 160 pixels
  • 176 x 220 pixels
  • 240 x 320 pixels
  • 320 x 480 pixels

They all follow a similar aspect ratio so we are basically going to develop applications that look tall and skinny. A good idea is to left align elements, or center them, so they will display on many different resolutions.

Try to keep the most important elements on the top of the page, and scale down as you move downwards, just like any good XHTML web development methods.

So now we know, we must be very careful when developing mobile applications, that we support many screen resolutions and aspect ratios, in order to maximize usability.

EmailTwitterFacebookMySpaceLinkedInDeliciousGoogle BookmarksYahoo BookmarksStumbleUponAIMShare