Small screen, Hello! --10 of the big Mobile end of the website case Appreciation

The mobile internet era has been quietly changing our way of life, as well as a large number of design forces pouring into the mobile-side design field. In the background of the web2.0 era, the designers have grown up, in the entry of such a new field, how many "acclimatized". Hope that through this article can bring some new exploration direction and try.

Research on network environment

According to the CNNIC 32nd Internet Development Survey, as of June 2013, the total size of Chinese mobile phone users reached 464 million. Among them, the handset browser user scale is 369 million, the year-on-year growth 21%, in the handset Netizen's penetration rate is 79.5%. The frequency of users using mobile browsers has steadily increased, with 75.6% of users using it every day, and 63.3% of them use it many times a day. At the same time, from the use of the long look, mobile internet began to squeeze computer Internet time, become a mainstream internet users in China. Mobile Browser as a mobile Internet entry status will be further stabilized and also become the Internet users access to the primary portal. Under such a situation, only building a Web site on the PC side has begun to fail to meet the needs of users. The need to build a mobile-end site is stark.

As shown in the picture, 3g4g network penetration and WiFi coverage is growing rapidly, while the relative ratio is also increasing. The good network environment will open up more space for the mobile end website design. This brings more possibilities for the visual presentation and fluency experience of the site, and because the low speed network still has a relatively large ratio, the performance optimization of the site is still a key point that every designer needs to focus on.

Platform Support

Browser as the base of the Web site, the figure data reflect the market share of intelligent mobile devices is very high, and the general Intelligent mobile device system with the browser and Third-party browsers are basically the use of WebKit core, the site has a high degree of compatibility, which brings more controllability for the design. (compared to IE6 users still up to 24% of the PC end of June 2013 Microsoft Data: IE6 The latest market share, mainland China, WebKit Kernel browser CCS3 and HTML5 's Web site support rate reached more than 93.5%. ）

Interaction Differences

Different terminals have different modes of interaction. The way PCs interact with mobile devices is vastly different, and good page interaction on PCs is not entirely appropriate for mobile-side pages. Mobile end has a richer way of interaction, such as using the mobile phone gyroscope's gravity sensor to achieve some interaction (such as the use of gravity sensors to achieve the parallax of the JS special effects, rotating screen to jump, "shake" to achieve page switching, etc.), such as long press Save Picture ... At the same time, mobile end interaction has slowly set up a sophisticated interactive system. Designers in this respect can learn more from the excellent interaction of mobile products applied to the mobile web site design, but also should be more latitude to communicate to understand the feasibility of its implementation on the Web page.

Responsive design

When it comes to mobile web sites, they have to respond to design. What is a response? In short, a Web site can be compatible with multiple terminals-not a specific version for each terminal. Faced with the complexity of the mobile device resolution, which sounds very good, we will go through a case to understand.

Case: NEWTON RUNNING
Click on the title or scan the two-dimensional code to browse (this site can be experienced on the PC and mobile end)

Through the case we can clearly understand that in a variety of mobile terminals today, the response to the strong compatibility of design has been greatly reflected. At the same time, based on strong compatibility, because the whole terminal share a website, then in the development, operation and maintenance will be more cost savings, and in the site construction will give design and refactoring heavier task, for product packaging in different terminals will have a more consistent and more complete brand image. And in the actual use of the process found that response design on different mobile terminals can achieve a higher degree of compatibility of the visual presentation at the same time there will be some lack of functionality (such as button click Area too small), and in the PC side of the browser will appear dislocation and other incompatibilities; we also found that under poor hardware performance terminals, The smoothness of the site is not high (dynamic display of special effects will appear in cotton), and the mobile terminal on the site's loading process is greatly affected by the speed. Therefore, the use of responsive design of the designers in the interactive design, visual design, performance optimization and refactoring will have higher requirements.

Although this goes a long way, but at home and abroad the efforts of many designers still emerge many excellent cases.

Case: Hobbit
Click on the title or scan the two-dimensional code to browse (this site can be experienced on both PC and mobile, PC side recommended Chrome browsing)

The station for the PC end and mobile end of the different meticulous optimization, excellent visual presentation and smooth interactive experience give it a strong sense of bringing into the atmosphere and vigorous epic, while clear user guidance, interesting in-depth exploration and clever interactive games to make it a rare masterpiece. Because the content of the load is very rich, so consumes the network resources is huge, loading time is slightly long.

Case: Maker Your money
Click on the link or scan the two-dimensional code to browse (this site can be experienced on the PC and mobile end)

The station has a gratifying vector illustration design style, clear user guidance, vivid and smooth dynamic display, make boring introduction also become easy to accept up, this is not also embodies the value of the design?

Case: Tencent Interactive Entertainment UP2014 Conference Invitation Letter
Click on the link or scan the two-dimensional code browsing (mobile browsing is better)

HTML5 animation design, SVG format file optimization, more simple and trendy visual display, a smoother user experience, so that a simple content of the page immediately up ~!

Case: Tencent mobile game Grand Prix
Click on the link or scan the two-dimensional code browsing (mobile browsing is better)

Smooth animation effect, simple fun games, clear User Guide. Easy to use, good-looking and fun three have ~!

Case: Chenhe Personal mobile website
Click on the link or scan the two-dimensional code browsing (mobile browsing is better)

To the micro-letter public number for the entrance of the light of the app design site, function button design reasonable, jump smooth, schedule, check-in and other interactive content using fluent.

Case: Qian Hai mansion Mobile Station
Click on the link or scan the two-dimensional code browsing (mobile browsing is better)

Enterprise-type web site, production rigorous, thematic creative, but the design of the navigation is not uniform slightly regret, jump not smooth also led to poor user experience.

Case: IKEA PS 2014 new release Mobile station
Click on the link or scan the two-dimensional code browsing (mobile browsing is better)

Affective scene design, for the user group pain point expression in place, but the product display is not clear enough, did not open online purchase function is very regrettable.

Case: Millet Mobile Mall
Click on the link or scan the two-dimensional code browsing (mobile browsing is better)

Born out of the platform station of PC, the layout is reasonable, the display is clear, experience is smooth, and also more insipid rule.

Case: Uniqlo Cowboy series page
Click on the link or scan the two-dimensional code to browse (this site can be experienced on the PC and mobile end)

The visual continuation of Uniqlo has always been simple, responsive design in a number of terminals to obtain a more complete visual effects. Insufficient is on the handset end, the button is too small, brings certain difficulty to the operation.

After reading the case back to the actual project we will find: designers in the implementation of the early stages of communication is very important, especially with the restructuring of the engineers in advance communication, the page's restore degree and user experience will be greatly helped; due to a high degree of compatibility of browsers, Try some novel animation effects to make your site look more vivid and trendy;

Jump Open the PC side of the page design of the fixed thinking, more use of mobile end-specific interaction, will bring a more cool user experience, such as the application of gravity induction. This article superficial analysis hopes to bring some thinking and the help to the designer, has the shortcoming to welcome the correction, also with the gentlemen encourage.