As a result of the change of work, the mobile site of the front-end development has been alienated for several months, in this good few months there is a lot of new things appear, some of their own things have been obsolete, so chose this book "HTML5 Touch Interface Design and development" To systematically learn and tidy up the knowledge system of mobile site front-end development. The book was chosen because the book was newer, and the first edition of the April 2014 issued. The second is due to the author Stephen Woods, which is the senior front-end of the Flickr team, the JavaScript technology platform of Yahoo homepage is from this person's hand. The following time will be uploaded on this book to learn some of the knowledge points summarized and combed the experience.
the difference between mobile and PCPC front-end is most concerned about whether the page can be compatible with various browsers → A very large part of the work is to understand the differences between various browsers, to solve the browser compatibility issues. the problem with moving the front end is not the difference between the various browsers, but the different device differences.
- The size of the device is different:
The size of the mobile device is much smaller than the PC, and there is no mouse and is not accustomed to using the keyboard. Mobile devices include: mobile phones and tablets (small: 7-inch screens, such as Nexus 7, Galaxy Note, ipad Mini, large: ipad and 10-inch Android tablet). Browsers on mobile devices are full-screen browsing, and the only way to resize the browser is by rotating the mobile device between the horizontal and vertical screens. As a result, mobile-device-developed web pages have the need to optimize for different device sizes, which is a responsive web design (the concept of an incorrect, responsive web design is described here, and the previous blog has a specific introduction to responsive web design).
- The computing power of the device is different:
hardware performance is the biggest Achilles heel for mobile devices and PC devices, except that recently announced mobile devices have a separate CPU that is much better performing than earlier mobile devices.
- The user's usage habits are different:
the use of PC devices is single, but mobile devices do take advantage of users ' time fragments, queues, rides, meetings, and even toilets. Because it is a fragment of time, the speed and performance requirements of mobile web browsing are much higher than that of PC Web pages. Imagine that you are in the toilet, do not open a mobile Web page need about 10S of time, I expect the user even anext will be affected.
- The interface operates in different ways:
pc through the mouse click and keyboard input to complete the page browsing. However, mobile devices are finished by touching the interface.
Introduction to Mobile devicesLet 's look at the classification of mobile devices in different dimensions:
- Classification according to one: operating system
The main operating systems for mobile devices are: iOS, BlackBerry os, Android, Windows 8, Android is already the most popular mobile device operating system now.
- Classification according to two: Equipment size
depending on the size of the device, there are two main types of mobile devices: mobile phones and tablets.
- Categories by three: browser
WebKit is now the highest and most popular mobile browser core. All iOS, Android, and BlackBerry default browsers are using the WebKit kernel.
HTML5HTML5 is not a detailed code name and programming style anymore, but a function collectively known and a normative standard. Common to all mobile browsers, features that exist to support advanced browsers are collectively known as HTML5. Since the WHATWG (Web Hypertext Technology Working Group) does not give the standard of official regulation, because HTML5 is a dynamic standard, there are some differences in the support of each browser, so developers should learn to pay attention to these differences in the process of development. HTML5 Dynamic Standard specification in: www.whatwg.org, complete the official specification of the website: w3.org.
Requirements for agility in mobile pages The touch of the interface gives the feeling is natural, smooth, assuming a mobile page open very slow, operation is very card, which gives the user feel will be very uncomfortable. So what kind of mobile Web page can give users a very cool, very comfortable feeling? Originally I also thought from page performance, server response speed and other aspects to improve the speed of the page open, but the actual operation of these will not be satisfactory. One of the ideas presented in this book has made me bright, and the performance review criteria for our mobile Web pages are not individual response times for the reference dimension. And the author of the book thinks: the page just let people "feel" faster, rather than really fast to be able to. So "feel" fast, is to respond to user actions in a timely manner, let the user know that his operation we have reacted, and can quickly give a response to the result is OK. On mobile smart devices The basic operation of the user is to swipe and touch, for these two operations to give users a timely response to your page is successful. It can be imagined that a user's sliding in the process of the operation of a sudden stop, may be able to endure, assuming the second and third recurring, I think this user may never again visit you this page or even the entire site, due to a timely correspondence caused by the loss is not estimated.
