One of the first questions that comes up while designing a mobile website is “How in the world do I transform what I see on a big desktop screen to a tiny mobile screen?” To achieve this, you need some awesome design skills and artistic sense, but more importantly, you need to get your facts straight and know all the various screen resolutions of the latest mobile devices. Knowing the screen sizes while designing will help you tremendously. So, let us break it down for you.

iPhone

The screen resolution for the iPhone is 320px by 480px (2x for the retina display: 640px by 960px), but there are a few things to keep in mind:

• Status bar
• URL bar
• Bottom bar

These are standard UI elements that will appear on the screen and take away some real estate, only the URL bar can be hidden using a couple lines of code. Reference the following graphics for the elements’ sizes:

Horizontal view

Portrait view

Taking in considerations of these UI elements, the default viewable area comes down to 320px by 356px with URL bar visible and 320px by 416px with URL bar hidden (2x for retina display). To hide or show the URL bar depends on your personal preference, we recommend hiding it.

Android and Blackberry

Now these two guys are a bit tricky. Unlike the iPhone, Android and Blackberry devices come in many different sizes. For Android, we reviewed a handful of devices and figured out a default viewable area that’s safe to use as a general reference: 320px by 451px (1.5x for Super AMOLED display). For Blackberry, we reference the latest device (The Torch) and its default viewable area is 360px by 406px.

As you have learned in this post, you have to consider a wide range of screen sizes when you are designing a mobile website. How do you make it look good across the board? Drop us a line, our product could be the right solution for you. Visit our main website at www.bluetrainmobile.com

Extra tip: how we create a perfect full screen background image

We use a 960px by 960px template to create a perfect full screen background image. In this template we set up guidelines for iPhone, Android, and Blackberry’s default viewable areas.

Scale and edit an image to fit this template and you have yourself a perfect full screen background image. We also use some magic in the codes to position the background image top & center, and scale it according the device’s screen size, but that’s a BlueTrain secret!

About the Author

Mike Mai operates the train of creative thoughts at Bluetrain Mobile. He loves web, mobile and social media. Language skills include Mandarin, Cantonese, and HTML5.
@mikemai2awesome