Touch screen mobile phone website design

With the boom in smartphones and Android, a touchscreen mobile Web site based on safari and Chrome is Website.
Touch Screen mobile Web site in China is still the beginning stage, from the industry's current situation, its experience is uneven, the author will be from the equipment, systems, browsers, networks, four dimensions to explore the touch screen mobile phone website design:

I. Equipment

• Resolution and screen size
• Interactive features of touch screen machine
• Performance

1. Resolution is the designer to do the site when the first consideration of the problem, Iphone/ipod touch currently has 2 resolutions: 480*320, 960*640, The physical size of the screen is 3.5 inches, Android because it is open source system, many manufacturers, resulting in resolution, screen size is very large, but the current mainstream resolution: 480*320, 800*480, according to the above situation recommended to 480*320 as the standard design, (The client is recommended to be designed with a large resolution) while considering the horizontal screen in the case of adaptive.

2. Touch screen mobile phone is characterized by direct manipulation of the object, so the site needs to set an ideal row height to meet the touch of the finger click.
A touch-click Dimension Data from lukew.com:
The spacing of the index finger is about 7*7 mm,1mm.
Thumb-click spacing is about 8*8 mm,2mm spacing, the current recommended value is 9mm, minimum should not be less than 7mm.
The minimum distance between list options should be no less than 5mm.
In the design process, you need to convert millimeters to pixels, the different size of the screen resolution conversion results are not the same, see the conversion method (DPI and pixel, centimeter, inch relationship and conversion and the length of the CSS unit) I think: can be 5mm to the minimum standard design, high utilization rate can be increased according to the test.

Mobile input xuan.3g.cn Experience 3G Portal Bright version

3. The mobile phone's hardware and network environment compared to the PC still has a big gap, so the mobile site needs to be highly optimized page performance:
Try to control page file size, avoid using too many pictures, standardize HTML and CSS CSS compression tools
Minimize server requests, use CSS spirit some specific CSS can be written directly in the page file ....
On the page performance of the specific optimization is not three words two can tell clearly, here only to do a discussion, welcome to add.

Ii. system

· UI style
Flash

1. iOS and Android OS are significantly different in design style and interaction, and if you consider a set of UI for multiple platforms (Web sites can be used across platforms and reduce development and maintenance costs compared to apps), avoid excessive stylistic biases and conflicting and misleading design. Guidelines Details:
iphone HMI Design Guide
Android HMI guide

2. iOS does not support flash,java,svg,android OS support flash10.1 above version, it is recommended to use GIF animation.

Third, browser

• Function Bar
• Caching
· HTML & CSS
· JavaScript

1. The iphone browser comes with a feature bar that makes up for faulty hardware.
Here is a special feature of iOS, you can add a Web site to the desktop, and generate an app icon:
<link rel= "Apple-touch-icon" href= "Icon.png"/>
Icon.png picture is square, size 57px*57px,iphone4 114*114.

2. Here the cache is divided into component caching and page caching, the building cache refers to the site elements: Pictures, CSS, JavaScript, etc., page caching is the entire page as a separate entity to store, in the design and development of the page to note that components and pages do not exceed the browser's cache size:

3. On the PC side appears to be a distant HTML5 and CSS3 in the mobile terminal debut, the following introduction of a few practical CSS3
Gradients: Webkitgradient (linear, left top, left NRC, Color-stop (0.3, RGB (255,255,255)), Color-stop (0.75, RGB (239,242,252)) );
Fillet:-webkit-border-top-right-radius:4px;
Advanced selector:. List > P:last-child a{} background-image:
Avoid gravity induction When the text increases with the resolution:-webkit-text-size-adjust:none;
Mask input box default fillet and shadow:-webkit-border-radius:0;-webkit-appearance:none
Remove dropdown box default style:-webkit-border-radius:0; -webkit-appearance:none;
Safari official: HTML CSS

4. JavaScript

Hide Browser Address bar:
Window.addeventlistener (' Load ', function () {
settimeout (function () {
Window.scrollto (0, 1);
}, 100);
});

Mobile phone Identification:
var isandroid = Navigator.appVersion.toLowerCase (). IndexOf (' Android ') >= 0,
Isiphone = Navigator.appVersion.toLowerCase (). indexOf (' iphone ') >= 0;
if (isandroid)
{
Window.location.href = "xxx.html";
}

iphone Full Screen display:
<meta name= "apple-mobile-web-app-capable" content= "yes"/>

Iv. Network

· GPRS
3g
· WIFI

1. From the speed and tariff, GPRS is the slowest the most expensive mobile internet, the network environment under the page is no doubt the most intelligent choice, the proposal page file size not exceeding 25K (gzip after) the specific test data do not repeat.

2.3G card speed is close to even some more than WiFi speed, but there is also a fee problem.

3.WIFI we can understand that mobile terminals are connected to a fixed broadband via a wire-free network, which is equivalent to the cost of accessing a Web site with a PC.
Based on the above 3 kinds of network we can do some matching to provide users with the most appropriate experience:

Source: http://ued.3g.cn/?p=78