Mobile Web Design overview, cases and tips

This article by Socialbeta content contributor Wisp translated from Mobile Web Design:overview, examples and Tips, due to professional limitations, there are some mistakes in translation, please correct the general reader, thank you.

Mobile interface design is becoming more and more popular, almost every mainstream website or network service provider or Web app will have mobile apps. Therefore, it is urgent for practitioners to learn the relevant knowledge of mobile web design. This article will not only introduce the trend of mobile web design, but also provide some excellent design cases, which let readers get some inspiration. What is mobile web design?

Before you start designing mobile pages, you should be familiar with the mobile web. You'll be glad to see that there's no need to learn some new technologies, but you need to change your design style because of the small screen and the wide range of operating systems.

According to Cameron Chapman, the most popular operating system at the moment is:

Windows mobilethe iPhone platformpalm osmobile linuxsymbian osthe BlackBerry platformandroid

The most popular browsers on mobile networks are:

Safari for the iphoneandroid browseropera Mobilewebos browser (on Palm devices) BlackBerry browserinternet Explorer Mobile (on Windows Mobile devices)





Mobile web Design history

The following pictures simply show the development of mobile web design language, perhaps you do not understand some of the words, the following we give a special explanation:

Standard Generalized Markup language-is an international standard for information management, published in sgml,1986 year, which is mainly used in the printing and publishing industry. The standard defines format, index, and link information for platform-and application-independent text documents, providing users with a syntax-like mechanism to define the structure of documents and labels that indicate the structure of the document. Where the meaning of markup refers to the markup inserted into the document. There are two kinds of tags: one called Procedardmarkup, which describes the style of the document display, and the other is called descriptive markup, which describes the purpose of the text in the document. The basic idea of SGML is to separate the content of the document from the style.

Handheld Device Markup LANGUAGE-HDML (Handheld Device Markup language), usually compared to WML (wireless Markup Language). is a language that allows mobile phones or PDAs to surf the web. Unwired Planet (Wireless planet) company designed the language and positioned it as a free open source language. Any programmer with html,cgi and SQL programming experience can write code using the HDML language. A major difference between HDML and WML is that WML is xml-based, and HDML is not. In addition, HDML does not support scripting, and WML has its own JavaScript scripting language, called WMLScript.

Wireless Markup language-wml (Wireless Markup Language-Wireless Markup Language). It is a markup language inherited from HTML, but WML is based on XML, so it is more restrictive than HTML. WML is used to create pages that can be displayed in a WAP browser. Pages written in WML are called DECKS. DECKS is constructed as a set of CARDS. This description language is the same as the HTML language we often hear, and belongs to the large family of XML languages. The syntax of WML is the same as XML, and WML is a subset of XML. HTML language, we can read on our PC with IE or Netscape, and the WML language is designed to be used for display on some wireless terminal screens, such as mobile phones, for people to read, and also to provide users with a human-computer interface. Accept information such as queries entered by the user, and then return the final information he wants to the user.

Compact html– tightens HTML, compresses (forms) HTML. The mobile phone-oriented page description language is a subset of the HTML 4.0 feature compression. The mode–compatible of NTT DoCoMo in Japan uses this language.

XHTML Mobile PROFILE–2001, based on XHTML, is considered the most outstanding language for mobile phones.

Advantages and disadvantages of

mobile web design

Everything is good and bad, mobile web design is no exception:

Advantages：

The advantage is mobility. It's a long time to surf the Internet in your home. But anyone can use the mobile phone to surf the internet, its status can be in the bus, train or in a department store, users can always look around the relevant information,: So your mobile Web page must be guaranteed in the "Go" state.

Disadvantage：

It is mainly embodied in 2 aspects: small screen, long loading time. Based on these 2 points, you need to think about how to design an attractive Web page in a small space, while also providing the information the audience needs.

Why can't you ignore mobile web design?

With the increasing number of mobile phones, mobile web design is becoming more and more important. Riproad's survey shows:

2.34+ billion Americans have mobile phones (85% of the U.S. population) between November 2009 and January 2010, 18% of 42.7 million Americans were active smartphone users

In addition, according to Pewinternet's survey, "83% of adults have mobile phones or smartphones, and 35% of them use their mobile phones to surf the internet." In addition, Ericsson also found: "During December 2009, the world's mobile phone data transmission volume for the first time exceeded the volume of voice, although this is largely due to the use of social media and video, but this phenomenon will be widespread." ”

Mobile web Design where do I start?

First to decide whether to do a mobile version of a website or a complete design of a new website, although both can do, but the current popular is still to a mainstream website to do a mobile version, as a branch of the site.

Then determine the layout of the content and what content. In addition, because through the mobile phone browsing Web pages, users usually do not have a long wait time, so to ensure that the load time is short, so the simple design to play a better effect.

Screen size

Be sure to remember that you are no longer designing on your desktop, your page is to be displayed on a smaller phone screen, and the iphone user can flip the screen horizontally, so you can use percentages and EMS to make your site applicable to different sizes of your phone screens, and you can also use meta Properties to limit the magnification and screen size of the interface.

Website test

The test for mobile Web pages is to test the appearance, navigation, and loading of websites on smartphones and smartphones, and sometimes even in different mobile browsers. Test on as many mobile devices as possible to ensure that more users have a good experience.

Mobile Web Design Example

Mobile awesomeness is a Web design work resource library that showcases mobile web design for different industries. This is the website address: http://www.mobileawesomeness.com/

01. Facebook

Official Link

02. Nclud

Official Link

03. Mail Chimp

Official Link

04. Mixx

Official Link

05. Mashable

Official Link

06. Smashing Magazine

Official Link

07. Deviant Art

Official Link

08. Cnet

Official Link

09. Walmart

Official Link

10. Viget Labs

Official Link

11. Coosh

Official Link

12. Intel

Official Link

13. United Airlines

Official Link

14. H&m

Official Link

15. Tabo Bell

Official Link

16. McDonald

Official Link

17. Ars Technica

Official Link

18. Iweathr

Official Link

19. Amazon

Official Link

20. EBay

Official Link

conclusion! Conclusion!

Most designs are simple and concise, directly into the main points, but also have pictures and logos, you can think of mobile web design as a simple version of the traditional website, so you do not need to abandon the previous network design knowledge, is to reduce the size of the site and load time, do these, your design will certainly get customers love.
Further references!

More information:

mobileawesomeness | Mobile Website Showcase38 Mobile (IPhone) sitesdesigning for the mobile webmobile Web design:tips & Techniques10 Tips to Create a more Usable Web

This article link: http://www.instantshift.com/2010/04/09/mobile-web-design-overview-examples-and-tips/
Original link: http://www.socialbeta.cn/articles/mobile-web-design-overview-examples-and-tips.html/
Translator: Wisp