Design and layout principles of mobile device web designers

Web page Production WEBJX article introduction: post-Mobile era web design principles.

In the post-mobile era, with the progress of browser technology, it is no longer necessary to set up special sites for mobile devices. As a Web designer, if you can follow some basic design and layout principles, your site will be more easily accessible to most mobile devices. This article is about the post-Mobile era of web design principles.

Do you remember WAP, how many people still use WAP now? In the post-mobile era, with the progress of browser technology, it is no longer necessary to set up special sites for mobile devices. As a Web designer, if you can follow some basic design and layout principles, your site will be more easily accessible to most mobile devices. This paper describes the principles of WEB design in the post-mobile era.

current status of mobile browsing technology

The most popular mobile phone systems today include Android,blackberry and the IPhone. While browsers in these mobile systems support HTML + CSS + JavaScript, they still have some limitations.

Flash

At this stage, the use of mobile phone to visit the Flash site, in addition to a black screen, nothing will be displayed, and the phone will not be prompted to say that the flash can not be loaded, therefore, the flash site should be browser detection technology, the client does not support Flash output alternative content. Although flash can output beautiful content on many platforms, running Flash on a mobile phone is like running Windows on a Mac, but there are some technologies in the industry to solve the problem, but don't expect too much.

Silverlight

Windows Mobile 7 will support Silverlight, which will be the only mobile browser that supports the technology. But since Microsoft has opened its doors to HTML 5, don't expect Microsoft to do much for Silverlight on the mobile platform, so the bottom line is not to rely too much on Silverlight in your mobile site.

Javascript

The mobile platform's support for JavaScript has been overwhelming over the past 5 years, and its experience is close to the desktop, but it doesn't support overly complex functionality, and here's a case study of the problem. As for older mobile phones, although JavaScript is also supported, most are closed by default. When you need to write JavaScript for your mobile device, you need to validate and check the code to avoid crashing the user's device, and remember to put the JavaScript script at the bottom of the page so that it doesn't crash before the page is loaded.

CSS 3

Mobile platform for CSS support for a long time, today, a large number of Webkit open source projects based on the mobile phone to support the CSS 3,CSS3 has a better visual experience, support degraded use, but also to speed up the page load, you use the CSS3, Just be aware that some of these properties can be degraded on old phones.

The battle between design sense and ease of use

Not all of the popular WEB technologies are your best choice, you need to test the various techniques used, and it turns out that there are problems with technology in mobile browsing, such as Lightbox, video, mouse hover, and that you need to steer clear of the various Web design elements in this section.

Why can't the video play?

As mentioned earlier, the support for Flash and Silverlight for different mobile platforms is very inconsistent. At present, sites like Vimeo and YouTube have a variety of problems with mobile devices, YouTube is slightly better than Vimeo, and inline video support now seems to be limited to Google's Android platform.

Mobile platform video is implemented through HTML5, however, so far, the licensing of HTML5 video is still unclear, but Google has been on the top of the issue, hoping that they will eventually make this problem to avoid the repetition of the DVD decoder license.

Text Scaling

Expect your text to use a relative position rather than an absolute position, or the Android browser will throw the text of your page somewhere outside the screen.

Display sharpness problems on a small screen

On the phone's small screen to look at the Web page, as you can see the computer screen across a room, the result is what is not clear, you need to add important elements of the page to deepen the contrast so that users will be able to see more clearly.

Lightbox Technology

Lightbox is the most popular JavaScript technology and the easiest place for mobile phone users to get mad, and in many cases the Lightbox on the phone screen shows only one corner, and most of the content is thrown somewhere outside the screen. In addition, at some point, Lightbox also lets the phone's Web page crash, causing nothing to be used. This doesn't mean you can't use Lightbox, such as a landing box or you can use it (the landing box can be a little bit more-translator), but in any case, it's best to provide a traditional way of logging in, so that Lightbox is not displayed outside the screen.

Browser probes

Many years ago, web development and designers need to use browser detection technology, for different browsers, or different versions of the browser output different content, as the Web standards in the popular, for different browsers output different content is not advisable. Browser sniffing can be easily implemented through JavaScript libraries such as JQuery, as well as libraries that can sniff out flash support, but the reality is that unless you have a lot of flash apps, it's rarely used, in fact, Many mobile browsers are now quietly skimming through unsupported content, rather than IE6 a bunch of bugs.

Hover Mouse

Many of the site's navigation using the mouse hover and Drop-down submenu, but the mobile browser does not hover a mouse, although some mobile phone support for this operation, but the desktop and the way there is a big difference. You should avoid placing important information in a state that requires the mouse to hover to display it.

Drop-down Menu Navigation

The drop down menu requires a mouse hover to open it, as I said before, this cannot be achieved on the phone, and the drop down menu is often larger than the size of the phone screen, and the instant user opens the Drop-down menu, which is likely to not be fully accessible. You should always keep submenus in the sidebar, whether for mobile or desktop sites.

Slow loading speed

Mobile browser loading is very slow, you need to compress your own data, and even use CDN to speed up the network. In the WordPress type of CMS can enable data compression, you can test your data in this site is compressed, if you use static design of the page, you can use minify design of the Web page code to purify.

Load Progress prompt

You should use the load progress icon, tell the user is now loading, for the mobile browser This Internet connection is not very stable situation is particularly important, in some Ajax applications, if not display load progress, users will think that your site has lost its response.

Memory User's data

Mobile phone users typing is very inconvenient, should use cookies to remember the user's data whenever possible.

Side bar on left or right?

Should be to the right, because the cell phone screen is very small, users read your Web page, if the left side bar, they want to see the real content, they have to scroll around, put on the right, users can directly scroll down to see the specific content, need to see the side bar and then scroll around.

Small screen

Early Web designers full grievances by mentioning their 800x600 screen, but now the desktop screens are big enough, and the screen of mobile devices is smaller than this. You can do, as far as possible not to the site Header or Logo to do too much.

mobile site for you?

Many companies spend a lot of money deploying dedicated mobile sites, in fact, this is not necessary, if you have an E-commerce site, and mobile users have access problems, this situation, it may be worthwhile to specifically deploy a mobile site.

single-column layout

If you want your site to better support mobile browsers, you might want to throw away the sidebar because the sidebar is meaningless to mobile users, and Facebook and Amazon A class of sites that use this approach to improve the user experience.

picture scaling

Many blog-based sites contain mobile editions for simpler navigation, and the problem is that these sites also scale pictures on their pages like text, which is hard to see, and more , you have no way to change the display size of the picture. Users should be allowed to click on a picture to display its full size version.

Simple navigation

Instead of letting mobile users display all of the content in a site as they would on the desktop, just show them the basics so that they don't roll around, YouTube is doing best in this area, the top of the page is clean, Simple buttons are easy to use.

ads

After you remove the sidebar, most of your ads are gone, and a good idea is to put the ads at the end of the page.

end of page full station link

Although you have a mobile version of the site, but users may want to see the full site content, most mobile site practice is at the end of the page put a full version of the site link.