5 best Practices for large mobile web design

This article is from Socialbeta content contributor wisp, the original translation from mobile Web design:best practices, more mobile product design information, please check the Socialbeta Mobile Internet column.

The rise of mobile devices is bringing a new revolution to the Internet, although the principles of mobile web design will not change much, but there are obvious differences.

At least one point is very different, the current mobile device network speed can not be compared to broadband, the other mobile Web presentation is also diverse, there are touch screen, there is a netbook, these small screen looks like a giant!

Some people may think that mobility is not necessary at all, but almost everyone has to admit it is an unavoidable trend.

If you are studying mobile web design (or moving a Web site to a mobile device), this article may help you understand the current trends in mobile design.

Rendering Mode

One of the first elements to consider when designing a mobile-friendly web site is the presentation or user experience.

Diversity of presentation methods

Ideally, your current site will be suitable for all types of mobile devices. Maybe your site can be used for mobile devices with built-in browsers such as the iphone, but it may not be so good on other mobile devices, but it's hard to be successful across device mobile designs.

If you think it's hard to develop a Web site in Ie/firefox/chrome/safari, you might want to try developing it specifically for Iphone/blackberrys/palm pres/androids/motorola/ Nokia's website, but you will soon find that these hardware devices are really too many.

In Desktop network design, you have only one language: HTML, but on the mobile network, it may be WML, the platform may be Apple iOS, or Android.

Although WML has been limiting our design creativity, the way we have it has become more flexible now!

NO1: Web design with support for mobile devices

In mobile web design, a simple approach is to adjust the existing desktop page code and design to apply to mobile devices, as well as from the sketch, step-by-step design. For example, by CSS3, you can adjust the layout of a Web page based on the user's mobile device.

But if you think about it, the problem is that not all mobile devices support CSS3, so you have to resort to server device detection or JavaScript (such as resizing the DOM to change the layout of the page). But the problem comes again, some devices do not support these technologies! (Translator: Tangled!) ）

Depending on the window to determine the layout size, perhaps just a few lines CSS3

NO2: Move mobile users to mobile web sites

Another way in which mobile design is presented is the layout optimized for handheld devices, and you can do this with Web services such as mobify.

This rendering format is better than the first approach (with web design that supports mobile devices) because the experience design is designed specifically for mobile users, regardless of desktop users.

In this case, your traffic depends on the user's browser proxy. For example, if a mobile device user visits your site (yousitename.com), then they will be more likely to turn to mobile.yoursitename.com or m.yoursitesname.com than automatically.

Independent mobile web sites will get the flow of users who prefer faster speeds.

NO3: User-led essentials:

Whichever way you use it, the following two points are important:

visitors know that your mobile version of the site can be accessed by visitors can choose to log on the mobile version of the site or the general version of the site (translator: is the PC version of the site)

While it may sound like a good idea to force a user to turn or change the layout, the results are often frustrating, so it's best to give users a choice.

The simple trick is to have links to these two versions of the site. For example, Six revisions, you will find a link to a mobile version of the site in the site's location (m.sixrevisions.com), so that both mobile users and computer users have a choice.

Structure and code

Another thing to consider is the structure code (markup and styles):

Do you know WML or XHTML mobile profiles? (Encyclopedia: 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. XHTML Mobile PROFILE–2001, based on XHTML, the language of the mobile phone, is considered the best language at the moment. Do you design apps for iphone or Android? Have you considered the cost and speed of your mobile device browser at design time? What are HTML5 and CSS3? (Encyclopedia: HTML5 offers new elements and attributes, such as <nav> (site navigation block) and <footer>. This tag will facilitate indexing of search engines and better help with small-screen devices and visually impaired people, and provide new features such as <audio> and <video> tags for other browsing elements. Some outdated HTML4 tags will be canceled. These include tags that are purely display effects, such as <font> and <center&gt, which have been replaced by CSS. CSS3 is an upgraded version of CSS technology, and CSS3 language development is moving towards modularity. The previous specification as a module is too large and complex, so break it down into smaller modules and more new modules are added. CSS is a technique called style sheet (stylesheet). Some people call it cascading style sheets (cascadingstylesheet). CSS3 offers a number of new ways to improve your design work, and has made a number of important changes. ）

These problems are not comprehensive enough, and some problems are in the research and development stage.

The code that the new device supports may be different from the old mobile device.

Select

The most important thing to design a friendly website for mobile users is to choose the right language. Prior to the advent of smartphones, the old mobile phone only supported WML (the most basic language), and then the consortium launched a more user-friendly XHTML (XHTML Mobile Profiles file).

Fortunately, the update speed generated by mobile devices is a more complete and robust web experience, and if you don't know mobile profiles or WML, you can use normal HTML or XHTML.

Still, the point to be stressed is that WML is still to be considered, and your users may be using a regular phone (not a smartphone). Of course now we have to deal with more web zombies (Web hijacking).

Similarly your decision must be based on site data and a large number of web analytics.

speed and cost (for users)

Whichever language you use, the first factor to consider next is speed and user costs.

Mobile Internet operations limit traffic, which makes bandwidth a limited and valuable resource, and roaming fees are very expensive!

Given the flow, cost, and speed, it is important to ensure that the markup (programming language) is as concise, small and standard as possible.

Keep in mind that mobile network operators charge a lot of roaming fees!

As new technology updates and adoption is fast, the future is certainly HTML5 and CSS3, so consider upgrading your code appropriately.

Firmware upgrades such as Apple are available, so many older devices can support the new standard. But a similar situation may occur: IE6 users are refusing to upgrade to IE8, so do research, test, test, and test before making a decision!

layout Elements

Moving a Web page layout can be cumbersome:

mobile devices have different shapes and sizes; mobile device quality and resolution are not the same; mobile devices may support zooming in and out, but they may not support it; the screen is small, so scrolling is more difficult.

The ultimate goal of mobile page design layout is to enable users to find what they are looking for as quickly as possible, and to reduce the user burden of the process.

Layout plays an essential role in the success of your mobile site.

Because of less space, single column designs (one-bar design) is a must!

Simple

One of the ideas for effective mobile web layouts is simplicity. The more complex the content, the more difficult it is to read, the more places need to scroll!

Small space makes the design of multiple columns does not apply, content layout can not exceed the screen, unless it is passive amplification.

Therefore, the single column design appears more practical.

Avoid scrolling

Mobile devices such as the iphone and ipad can adjust the page based on the device center, which also reduces scrolling requirements, but not all mobile devices have this capability.

Content pages that need scrolling on the phone don't have a good experience.

Scrolling is also not a good idea, especially on the ipad, the scroll bar only appears when the user tries to scroll, so in most cases, the mobile web design should avoid scrolling.

A good mobile web design has a clear layout and simple navigation options.

Size of navigation and buttons

Another key ingredient is the navigation and buttons! This is also an important issue for touch mobile devices.

I'm not sure how big your hands are, I think you must have met the little buttons, even worse. He has not enlarged the function.

So what is a good experience to have? A properly sized link and button!!!

Reducing the number of clicks is also a good idea, in mobile web Design This is also an important point!!

Content Design

Content is the core of the site, but also to take into account the flow of cost issues, how to reduce the large picture, text and multimedia is also a learning, 50KB and 2MB have quite a big difference!

Mobile devices emphasize "less" and less content means more readability!

Text content

A website, the most is the text content!

But while content is still a Web site on a handheld device, such factors as scrolling, small files, fast reading, and bandwidth throttling all mean that we have to adjust the text to ensure its availability!

If your design is simply adjusting to the layout of your existing site (the first approach NO1: Using a Web page designed to support mobile devices), you need to cut down on unnecessary text, graphics, or multimedia (even if you provide downloads, which can increase readability). And the advantage of independent mobile web design is that it can eliminate superfluous content.

Image

Small screen determines the CSS format of the picture or large capacity of the infographics will have problems. Although some handheld devices have a large screen, the problem is not obvious. Devices such as the iphone zoom in and out of the function is still limited, so some visual beautification features must be removed!

Large image to occupy broadband, so to reduce its size!

50KB and 500KB of pictures in size and solution also have a clear difference! Bandwidth loss is also different!

Video and Audio

Video audio is almost a must-have, with broadband restrictions, especially devices such as the iphone and ipod. In the same way, moderation and judicious use is the key!

If you provide video audio, it is best to have a download consultation!

Here are a few suggestions:

format: Cautious use of some devices such as flash and other incompatible formats; Depending on the size of the audio file: Optimize your files do not automatically download video audio: Be sure to consult the user in advance. Do not play automatically: this is annoying. Other factors to consider

The most important factor to consider may be scripting, plugins, etc.

Know what to do and what to keep, so you can improve the user experience, and colleagues make sure that your mobile site can be applied to all mobile devices!

Mobile device interaction vs personal Computer interaction

The interaction between the two is so different that the screen is different, and there is no mouse keyboard in the mobile device, but the action and reflection are specified by the finger action.

Proprietary technology and Plugin

For example, Apple has blocked Flash's application on its mobile device, which is really a problem! and have to rely on Apple's proprietary technology!

Apple's opposition to Flash may herald that mobile device makers want to keep their priority on third parties. Although many developers also use the Apple platform, but the best solution to the problem is to moderate their own mobile phone site demotion!

Network services with good network connectivity

Because of the current mobile device network environment, network connectivity is still a problem for many web apps! There are even some mobile phone no signal "dead zone", which affect the user interaction, the user is doing something, but the network suddenly interrupted, experience natural very bad! So in the design of the app you need to consider both offline and online. (This is recommended for reading this offline HTML5 iPhone app tutorial).

Mobile Site Test

All you have to do is go to a mobile phone store and you will find that there are many different screens and so on.

There are many web site test simulators.

Standardization seems unlikely to happen, considering that several big companies are just trying to keep their competitive edge.

So the scope of the site test to be as wide as possible!

Mobile device Simulator test

There is no doubt that you need to test your site on as many platforms as possible, and we provide some simulators:

Android emulatorblackberry emulatordot mobi emulatorfirefox Mobile emulatoriphone/ipad/ipod Touch emulatorKlondike WML emulatorlg emulatormicrosoft Devices emulatormotorola emulatormozilla Fennec emulatornetfront Emulatornokia Emulatoropenwave Emulator (archive) Opera Mini emulatoropera Mobile emulatorpalm emulatorpalm pre/iphone Emulatorsamsung Java Emulatorsamsung Platform emulatorwindows Mobile Emulator summary: 3s:simple,small,speedy

Although this article provides some summary recommendations, there are still basic principles.

Speed (speedy) is still the primary solution, and we can use monitors to limit solutions and colors. Many ISPs still restrict broadband and sometimes break the net, which seems to be no stranger to the older generation of developers!

So before infrastructure improvements such as networking, Simple,small,speedy is the 3 main principles we have to follow!

Related content:

Mobile Web Design:is It worth it? A Quick Look in Mobile Web designshow to make A HTML5 iPhone App

Original: http://sixrevisions.com/web-development/mobile-web-design-best-practices/
This article link: http://www.socialbeta.cn/articles/mobile-web-design-best-practices.html/
Translator: Wisp
Welcome reprint, more social media related, please subscribe to Socialbeta