Design for the future Web page

This article is respected "because the modern people more and more life net dependent State, ipad,3g and so on, all kinds of situations are always in online status." So how to let any user in any situation use any access to the network of tools (here refers to mobile devices, cellphone or tablets, etc.) into any network (such as the weak signal on the train v.s.), there is a consistent user experience.

Why?

First look at any scenario + any access tool

(Scenario One: Open two windows at the same time) the user is looking at Dr. House, but right now Hugh Laurie not in the camera, so the user decided to take a look at his mail, one of his friends sent him a connection, he opened the link in the sidebar, but open this connection, does not affect him is not " Watch "This Dr. Haus's screen. The user is watching house on their new Internet TV. Hugh Laurie ' s not in screen, so the user decides to check their email. A friend has sent a link to your website, which the user opens in a sidebar and views simultaneously with the program.

(Scenario two: Although there is a good display area, but the speed is poor) users on the remote train home from work, using the ipad 3g on the Internet. The user is on a train back from work, probably delayed somewhere, accessing your website via 3G on an iPad

(Scenario three: very small display area) The user is trying to see your client site using the Mini Opera browser on his Sony Ericsson phone. The user is on a client ' s website. They need to access your website to read the article, but they has only a company-supplied Sony Ericsson with Opera Mini i Nstalled. How?

How?

So, how to design a user in these three scenarios, is a smooth and consistent experience?

The first is the design key rules stored in the brain:

1. The width of the website must be how wide the user can be, and how wide the design should be; The website should is available to as wide a audience as possible;

2. The content of the website must be the same whenever you look at whatever it takes; the website should contain the same content wherever it is viewed, where feasible;

3. The structure of the website must be the same; the website ' s structure should be the same wherever it is viewed;

4. No matter what product the user uses, the content must be displayed in accordance with the product. The content should was displayed in a manner that's appropriate to its environment.

Next is the step by steps detailed (strongly recommended to see the original text, detailed various technic,tips, science knowledge and how to do, completely incompetent so no responsibility to hard turn | | | | | | ）：

I. Design for mobile devices:

1. Using HTML5, the browsers of various mobile devices support HTML5;

2. The screen is suitable for large to 40-inch 1920x11080 pixels of the screen is also suitable for small-to-high pixels of small screen, you can use CSS @media;

3. If you are using cross-platform development, forget about Silverlight and Flash, as they are not suitable for cross-platform.

4. Use JavaScript sparingly: Unfortunately we have to consider the design of the unknown screen size, so this time we need to pay more attention to "site content structure" and less focus on beautiful UI design.

5. Test, test, re-TEST!!! Test on different mobile devices, anytime, anywhere, at any development time!

6. Don't pay attention to UI design is ugly duckling? No. A good design is not only "beautiful", it is important information architecture, layout navigation, the rational hierarchy structure.

Two. Contents of mobile device webpage:

1. Understand what is the user's most important task, when used in a very small screen to enter the home page, the most optimal situation is to be able to display the first screen. In addition, icons, navigation, etc. need to be "easy to understand" display.

YouTube page hp

YouTube iphone HP

2. The information architecture and information hierarchy must be robust and reasonable. It's easy for a user to land on your website and know what it is, and it's easy to find what he wants.

John Lewis ' iphone navigation

3. Ensure that the content you present is useful to the user. Remove unnecessary copywriting, unnecessary images, unsupported file formats (Ex,flash).

Three. Bring your services to the back of your service, so users can be sticky about your service.

It's easy to keep your site "discoverable" and "easy to spread" by paying more attention to the following.

1. Make your article title format concise and easy to search by search engines and ranked front (this has not been studied, in addition to paid search engines, how to make their titles more in line with the "search" format).

2. (This is a tips) so that your information can be a good "outflow sharing" out, provide a variety of "share" button, let users do free promotion for you.

Four. What is the app going forward?

The app you develop is easy to be purchased, installed, uninstalled;

Do one thing, do the most fine. When you lock down your brand and service, let the user think of a special service, they immediately thought of using your app (such as "I want to search, I need Google's app");

App do not do Information Island, when users use the app and suddenly have other tasks need to open a link, throw allows users to open in your app;

If you're developing apps, it's best to hang up below the big brands to improve your app's exposure and credibility.

Mobile users are more inclined to browser apps.

Resources

Design for the future Web page