Touch Screen Mobile 3G website design

With the boom of smartphones iphone and Android, the touch screen mobile Website is derived from the touchscreen phone site based on safari and Chrome.

Touch screen mobile phone site in China is still in the initial stage, from the status of the industry, the experience is uneven, the author will be from the device, system, browser, network, four dimensions to discuss the touch screen mobile phone website design:

First, the equipment

• Resolution and screen size

• Interactive features of touch screen machines

• Performance

1. The resolution is the designer to make the website the first consideration question, Iphone/ipod touch currently has 2 kinds of 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 is: 480*320, 800*480, according to the above situation recommended 480*320 as standard design, (The client is recommended to design at a large resolution) and consider the adaptive in the case of horizontal screen.

2. Touch screen mobile phone is characterized by direct manipulation of the object by the finger, it is necessary for the site to set an ideal row height to meet the finger touch click.

A copy of the touch-screen dimension data from lukew.com:

The distance between the index finger clicks is approximately 7*7 mm,1mm.

The pitch of the thumb click is approximately 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 need to convert millimeters into pixels, different sizes of screen resolution conversion results are not the same, conversion method see (DPI and pixels, centimeters, inches between the relationship and conversion and the length of the CSS in the unit) I think: can be 5mm as the lowest standard design, the use of higher rate can be increased according to the test situation.

Mobile input xuan.3g.cn Experience 3G Portal Dazzle Edition

3. Mobile phone hardware and network environment compared with the PC there is still a large gap, so mobile site needs to highly optimize page performance:

Try to control the paging file size, avoid using too many images, standardize the HTML and CSS CSS compression tools

Minimize server requests, use CSS spirit some specific CSS can be written directly in the page file ....

The specific optimization of page performance is not a three-word two words can tell clearly, here only to make a point, welcome to add.

Second, the system

· UI style

Flash

1. iOS and Android OS differ greatly in design style and interaction, and if you consider a set of UI that applies to multiple platforms at the same time (the site can be used across platforms, reducing development and maintenance costs compared to apps), avoid excessive stylistic biases and conflicting interactions and misleading designs. Guidelines See:

iphone HMI Design Guide

Android HMI guide

2. iOS does not support flash,java,svg,android OS support flash10.1 or above, we recommend using GIF animations.

Third, the browser

• Function Bar

• Cache

· HTML & CSS

· Javascript

1. The iphone browser comes with a feature strip that compensates for functional flaws on the hardware.

Here's a special feature of iOS that adds a website to your desktop and generates an app icon:

Icon.png picture is square, size 57px*57px,iphone4 114*114.

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

3. HTML5 and CSS3 on the PC end appear to be on the first stage of the mobile terminal, here are a few practical CSS3

Gradients: Webkitgradient (linear, left top, left bottom, color-stop (0.3, RGB (255,255,255)), Color-stop (0.75, RGB (239,242,252)) );

Rounded corners:-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 drop-down 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);

});

Cell phone Recognition:

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 point of view, GPRS is the slowest and most expensive mobile internet, the network environment is undoubtedly the most intelligent page weight choice, the recommended page file size does not exceed 25K (gzip) specific test data do not repeat.

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

3.WIFI we can understand that the mobile terminal through the non-wired connection fixed broadband Internet access, tariffs and speed equivalent to the cost of accessing the website with a PC.

According to the above 3 kinds of network we can do some adaptation to provide users with the most suitable experience:

Touch Screen Mobile 3G website design