Design for mobile devices: Design for future web pages

Article Description: Design for future Web pages (design for a consistent experience with mobile devices).

Original designing for the future web:http://www.smashingmagazine.com/2011/03/29/designing-for-the-future-web/

Introduction

An article that is always good! Here only to mention some backbone out, strongly recommend the original, especially technical aspects of a lot of tips have in-depth explanation.

This article respected is "because modern people more and more life net dependency state, ipad,3g and so on, all kinds of situations are always in the online state." So how to get any user to use any tool that goes into the web in any situation (where mobile devices, cellphone, or tablets) enter any network (such as a weak signal on a train), and a consistent user experience, V.s. "[Long to read the quick death of a word ...

"Consistency" on the mouth every day, "" and also to "so together" [good old terrier words =_=

Why?

First look at any situation + any network Tools

1. (Scenario One: Open two windows at the same time) the user is looking at Dr. House, but right now Hugh Laurie is not in the lens, so the user decided to take a look at his mail, a friend of his sent him a connection, he opened the link in the sidebar, but open this connection, does not affect him is not " Watch "This House doctor's screen. The user is watching house on their new Internet TV. Hugh Laurie ' s not on screens, so the user decides to check their email. A friend has sent a link to your website, which the user opens into a sidebar and views simultaneously with the program.
2. (Scenario two: Although there is a good display area, but the speed is relatively poor) users in the home from work on the remote train, using the ipad 3g on the Internet. The user is in a train back to work, probably delayed somewhere, accessing your website via 3G on an iPad
3. (Scenario three: The display area is very small) the user is trying to use the Mini Opera browser on his Sony Ericsson phone to look at your customer site. The user is on a client ' s website. They need to access your website to read a article, but They-have only a company-supplied Sony Ericsson with Opera Mini i Nstalled.

How?

So, how to design a user in these three scenarios, are fluent 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 will be; The website should is available to as wide a audience as possible;
2. The content of the Web site must be the same whenever you look at whatever you look at it; 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 display of content must conform to the product. The content should be displayed in a manner which appropriate to its environment.

followed by the step by steps detailed explanation (highly recommended to see the original, detailed explanation of various technic,tips, popular science knowledge and how to do, completely incompetent so no responsibility hard to turn):

I. Design for mobile devices:

1. Using HTML5, all kinds of mobile device browsers support HTML5;

2. Screen should be suitable for large to 40-inch 1920x11080 pixel screen also suitable for small to 320x240 pixel screen, you can use CSS @media ;

3. If using cross-platform development, forget Silverlight and Flash bar, because they are not suitable for cross-platform.

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

5. Test, test, and test!!! On different mobile devices, in any development period, anytime, anywhere test!

6. Do not pay attention to the UI design is the ugly duckling? No. A good design is not only "beautiful", but the information architecture, layout and navigation, and the reasonable level of structure.

Two. Contents of mobile device Web page:

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 firm and reasonable. It's easy for users to land on your site and know what it's for, 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, unwanted pictures, unsupported file formats (Ex,flash).

Three. The service will be introduced to your services, so that users of your service to create stickiness.

Pay more attention to the following, it is easy to let your site be "found" and "easy to spread."

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 outside the way, how to make their own title more consistent with the "search" format).

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

Four. So what's the direction of app?

• The app you develop is easy to buy, install, uninstall;
• Do one thing, you do the most fine. Lock in your brand and service and let users associate with a particular service and immediately think about using your app (like "I'm searching, I want Google app");
• Apps do not do islands of information, when users use the app and suddenly have other tasks to open a link, throw allows users to open in your app;
• If you're developing apps, it's best to hang on to the pages below the big brands to improve your app's exposure and credibility;
• Mobile phone users are more inclined to browser app.

Resources

HTML5 Development Environment:

• CS5 HTML5 Support Pack (part of the CS5 11.0.3 Updater), plus tutorial
• Aptana 3 Beta

Simulator:

• Android
• Opera Mini
• Apple IPhone (via IOS SDK)
• Windows Mobile (look for the latest Windows Phone Developer Tools)
• BlackBerry
• Nokia Mobile Browser

———————————————————————————————————————————–
Want to communicate face-to-face with more UE practitioners? Please add our QQ Group 140479673 (Annotated verification information "apply to join Userfree Majestic") to participate in the discussion.