Because of the change of job changes, the development of mobile Web site has been alienated for several months, in this good several months there are many 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 website front-end development. The book was chosen because it was a new, first edition of the April 2014. The second is because of the author Stephen Woods, the senior front-end of the Flickr team, the JavaScript technology platform of the Yahoo home page 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 worried about whether the page compatible with various browsers → A 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 responsive web design, where the concept of responsive web design is not described, and the previous blog has a detailed 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, but recently released 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 time fragment, 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 webpage need about 10S time, I estimate the user even anext will be affected.
- The interface operates in different ways:
the PC uses mouse click and keyboard input to complete the Web browsing. But mobile devices do this through a touch interface.
Introduction to Mobile devicesLet 's look at the classification of mobile devices in different dimensions:
- Classification basis one: operating system
the main operating systems for mobile devices are: iOS, BlackBerry os, Android, Windows 8, where Android is already the most popular mobile device operating system.
- 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.
- Category by three: browser
WebKit is now the highest and most popular mobile browser kernel. All iOS, Android, and BlackBerry default browsers use the WebKit kernel.
HTML5HTML5 has not been a specific code name and programming style, but a function is 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 Touch of the interface gives the feeling is natural, smooth, if a mobile page open very slow, operation is very card, this to the user feel will be very uncomfortable. Then what kind of mobile Web page can give the user very cool, very comfortable feeling? Originally I 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 reference dimensions. And the author of the book thinks: the page as long as people "feel" faster, rather than really fast can. 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 main 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 if a user's sliding in the course of the operation suddenly stopped, one may be able to endure, if the second and third repetition appears, I think this user may never again access to your page or even the entire site, because a timely and consequential damage is not estimated.
