The technical details of mobile web design should be paid attention to

In recent years, the world has been engaged in the internet boom. Small enterprises to large companies, and then to the network of schools and universities, everyone is trying to improve their network influence, so that both for their own brand advertising, but also to make the brand's audience a wider range. On the other hand, with the gradual popularity of smartphones, mobile sites accounted for a growing share of the year. As a result, the layout of the mobile site became a big play in the design of the website. The important aspects and technical details that must be paid attention to in the design of mobile website are discussed below.

Webmaster Home (chinaz.com) April 13 compiled:"mobile Web page" is an important part of the design of the website, with access to the Internet mobile phone gradually popular, therefore, we hope to be able to keep in focus on their favorite sites. In this article, we will focus on important aspects and technical details that Web developers/designers must pay attention to when designing simple and professional mobile sites.

The mobile interface is usually small, so developers must adjust the predefined dimensions. The following is a very basic "mobile site" layout.

Layout

Let's take a look at the use of different elements in the layout:

· Sign

The logo is one of the cores of the layout. The logo should be as compelling as possible, but at the same time pay attention to its size and make sure it is not larger than 2KBs. Because it usually takes a long time to load a picture on a mobile network, you don't want to load your own web site with individual differences.

· Website navigation

Navigation is one of the most important things in design. In any case, you need the navigation bar to link to each location of the site, where it is usually located at the top of the site. As you can see, most mobile devices simply do not make it easy to use a QWERTY or virtual keyboard. Therefore, the creation of navigation for the site is a key link for mobile Web interface friendliness.

· Content

Content plays a central role in mobile web sites. People use mobile devices to access the site, the main purpose is to obtain content information. So make sure your mobile site content doesn't change, otherwise you may end up facing user churn.

People usually move when they use mobile devices, so they don't have much time to browse the content of the site. To do this, you should take steps to reduce the content and select the valuable part of the content, and at the same time, you will provide the full link to the user. If your personal blog is active, you can ignore the problem, because you will not be able to reduce the content of every blog post every day.

We all understand the importance of the picture in the content. However, mobile sites should not use too many pictures, because most mobile phones to load these pictures will take a long time, so as little as possible, if the context involved in the relevant picture, the picture is not less.

If you want to add a picture to a mobile site, it's best to use a small footprint. Jpeg. Gif. PNG and other picture formats. To prevent the user from scaling the picture, be sure to compress the picture. Now almost all devices can display pictures, but some users may turn off the display of pictures while browsing. Therefore, it is recommended that you replace the text with ALT to display picture information. Some readers or visitors will enlarge the picture, in order to avoid this situation, the size of the picture must be fixed.

· Footer:

The old saying is good: "See a man can not only look at its clothes, to see its shoes." Many web sites have a bad footer. I often visit blogs and marketing sites, see the footer slow down the messy hyperlinks, I and most people are very disgusted with this, plus, mobile site screen size is small, which may cause the loss of customers or readers. Therefore, it is necessary to make an attractive footer.

So if you want your app/website to be a big sweep of the mobile interface, you should focus on the layout and make 0 mistakes, because browsing with mobile devices will be a big trend for future development.

Code Design

Many developers have been hesitant to write mobile interface code, and the following tips will help you dispel these doubts:

· Valid code

Use the appropriate code to ensure that it is 100% effective because most mobile browsers do not have browser performance on the computer side.

· Flow layout:

It is often unrealistic to view the layout effects on all mobile browsers, because there are too many mobile devices to browse the Web, and it's a headache to track the effects one at a a while. The flow layout can be a good solution or avoid this problem, it can be adjusted according to the screen size automatically.

To achieve this layout effect, you should avoid setting the width with pixel values, or replacing them with percentages or EMS.

You can search for a mobile site's mobile layout, or you can download the sample via this link: Perfect multi-column CSS Liquid Layouts–iphone compatible

· A specific style sheet

You can use a variety of mobile devices at any time to find a better user experience. For example, use handheld devices to browse your site's users.

Click this link to learn more about media types: W3.org–media Types.

· Refusing to use fancy scripts

Your mobile site wants to be successful, not using JavaScript scripts, Flash animations, or any other fancy scripting language. Because most mobile devices cannot parse these scripting languages, eventually, either the device crashes or something is wrong.

If you have to use it, then you should give a friendly hint to the user that their mobile device is loading and enabling these scripts. If there is a mistake, it is not you, because you have already reminded them beforehand.

· Be careful to insert ads

This should arouse the attention of everyone, do not let your mobile Web pages are advertising, PC-side sites should also pay attention to this problem.

As the saying goes: "A rat excrement spoil a pot of soup." This is truth for many websites. Because many websites are advertising flying, they do not care about the user experience, a mercenary. Because the CPM of the mobile device (the cost per thousand people browsing the page) is very high.

So I suggest, don't let the website drown in the advertisement, especially do not insert those colorful advertisement.

· Automatically identify mobile browsers

To successfully shoot your signature, you should include a script for the "mobile browser detection and redirection" service (PHP, for example) on the server side. You may need the user Agent Reconnaissance service, and the server will determine whether it should access the mobile or the original page based on the information described by the current browser. You can use the user Agent detection to replace the previous mentioned "PHP mobile browser detection." Another example realization method, through the real-time JavaScript script language, requests to store the equipment related information Devicealtlas or the WURFL database, carries on the browser determination.

· Specialized client programs can be developed, if necessary

If you have a very high number of users, you can develop an application for a variety of mobile interfaces. Facebook, Gmail, Twitter, Yahoo and many big companies have their own client applications, which is why they are so successful. If you have your own client program, you don't have to worry about the fancy scripting language anymore, because you can improve the performance of your program in your own way. (You can't change your browser, but you can change your program completely)

Mobile Website Construction Station tool

With the help of these fancy mobile sites, you can start the creation of a mobile interface.

1. mobify

2. Mofuse

3. Wirenode

Users of WordPress as their own platform, the above plug-ins have free, there are paid. Some of these are listed in the following Web site:

4. mobilepress

5. Wp-tap

6. Wp-touch PRO

The content page of the mobile site design is roughly over, and I hope some of the considerations and technical details mentioned in this article will be helpful to your design. (jaysming)