Designers of mobile Web sites: How to design mobile applications

Article Description: WebApp Best Practice user experience how to design a reasonable mobile application for a variety of screen sizes.

As a mobile web site designer, unless you are only targeting a specific device design, you should often encounter the problem: how to clearly understand the Web site to run the device screen size? The problem has plagued designers on mobile devices.

For example:

The iphone has a height of 480 pixels and a width of 320 pixels.

Many Nokia N series devices have a width of 240 pixels and a height of 320 pixels.

Many newer devices support views that are wide and highly upside-down.

The old Nokia (which is still popular) has a device screen size ranging from 176x208 to 352x416.

The resolution of the BlackBerry screen is also available in various sizes from 160x160 to 324x352.

This article is intended to illustrate how to design an application view reasonably for a wide range of mobile devices and screen sizes. First, the key problem in two small screen designs--the screen and the diversity of pixel sizes--is presented.

Dealing with diversity

Now you may ask yourself "does my design really need to meet all these different screen sizes?" "Or should I specifically design a version for each of these different devices?" "It all depends on the business requirements of your project, and some of the designs may just have to meet a screen size--or a device that's enough." But if your project requires that your design support most of the mainstream equipment, you must find an effective way to deal with multiple screen sizes.

Don't panic, things are not so terrible. When designing a mobile web, you can assume that pages can be scrolled up and down-like apps in desktop browsers. So you don't have to worry about the height of the screen, you can focus on the width of the processing device screen. Fortunately, DeviceAtlas Explorer has provided a large number of screen-width statistics for existing devices.

As the chart shows, most screen widths are concentrated in the types of 128,240 and 176 pixels--and the remaining set types: 120,130,160,208 and 220 pixels--and up to three type values. A small portion of the screen size is 96,101,320 or greater than 320 pixels wide. Devices with a screen width of less than 128 pixels make up only a small percentage of the total of 469 devices.

Also, less than 5% of the device width is greater than 320 pixels. But that figure may rise in the future, and it is now visible that small screen (128,176) devices are gradually being replaced by large-screen (240+) devices. The following chart gives the relevant analysis.

The resolution of the screen is really important, but there is one thing that must also be considered-the physical size of the screen.

' Pixel problem '

Over the years, designers have focused on designing views for large desktop devices. Although the physical dimensions of the display may vary, the screen size is mostly 1024x768 pixels, and the common pixel density is the pixels-per-inch ppi. Recently, however, the view that appears has begun to change:

The Asus Eee PC 900 Netbook has a resolution of 1024x600 pixels and a pixel density of about 133ppi.

The Apple iphone has a resolution of 320x480 pixels, with a pixel density of 160ppi.

Nokia's E60 screen has a resolution of 416x352, while pixel density is 240ppi.

In order to support a variety of devices, the different pixel density will bring new problems, the size of the pixel will also affect the overall design effect.

The following illustration shows the 100x100 pixel image on a device with a pixel density of 72,144 and 240ppi. As the picture gets smaller, the shape of the image and some details are distorted.

Fortunately, the pursuit of high pixel density seems to have passed, and currently more than the PPI equipment is not seen more. This means that you don't really need to support all the pixel densities listed in the above figure. However, when designing, you need to remember that you cannot take for granted that all devices have equal pixels. The following points need to be done:

Determine the range of pixel densities you need to support.

Test your design on a real device to prevent certain extreme situations from being overlooked.

Use relative units to design and define layout elements, such as EMS or hundred percent. This will provide a more realistic layout element size and location information.

Because manufacturers want to improve operating system flexibility, the ' pixel problem ' will be more and more attention. In fact, Google's Android system has implemented a ">potentially interesting solution" solution to pixel problems. The Android operating system employs an abstract ' DP ' (independent pixel density) unit that is based on the 160 PPI screen size. This allows the designer to define fonts and other interface elements using relative size, which automatically adjusts the view based on the true size of the device.

[1] [2] Next page