##1. How to Choose Touch Gestures?##
Do not use swipe gestures to represent selection. In native applications, this often signifies deletion.
Do not change the default OS gestures. For example, long-press for context menus, pinch-to-zoom out, double-tap to zoom in... unless you can reimplement the same basic functionality.
##2. How to Make the Interface "Look" Faster?##
Provide timely feedback to users. For example, progress bars, transition animations, etc. Additionally, image fade-in effects can make things feel faster (even though they actually make things slower).
##3. Media Queries##
IE8 and below do not support media queries. This doesn't affect much on mobile, as mobile environments are at least IE10.
General breakpoints: Below 480px ~ mobile browsers; Above 800px ~ desktop browsers; 480px to 800px ~ tablet browsers.
##4. Use Appropriate Selectors##
Avoid using descendant selectors. Use classes instead, because browsers parse CSS selectors from right to left, and descendant selectors carry significant overhead.
##5. Use em or px?##
Both are fine. em was popular for a while (around 2005) because browsers gained the ability to change font sizes, and using em as a unit could adapt to font changes. Later, IE7's default zoom method changed to scaling all elements on the page, and em was forgotten. Today, px remains the most straightforward unit. Using either em or px is fine, or rather, neither is too bad.
##6. What is the Viewport For?##
The viewport is used to define the size of the viewing area. The viewport is the container the browser provides for the page (excluding title bars, toolbars, tab bars, status bars, etc.). The following viewport properties are widely supported:
- width
- Sets the viewport width, default is 980, allowed range is 200-10000
- height
- Sets the viewport height, the default is calculated based on width and the device aspect ratio, allowed range is 223-10000
- initial-scale
- Sets the initial scale of the viewport. The default is calculated to fit the entire page within the visible area, and the range is determined by the minimum-scale and maximum-scale properties
- maximum-scale
- Sets the maximum scale of the viewport, default is 5.0, allowed range is 0-10.0
- user-scaleable (*Note the spelling of the last word*)
- Determines whether the user can zoom the view, and can also prevent scrolling when text input starts
You can use the viewport property like this:
<meta name="viewport" content="width=device-width">
Automatically adapts to device width, commonly used in percentage-based layouts, such as when a top header needs 100% width.
##7. Why is the Page Loading Slowly?##
-
Too many HTTP connections (or large cookies)
-
Total byte count is too large
-
Rendering block while waiting (external CSS files and JS scripts executed during loading)
-
Latency (3G networks have about 500ms of latency)
-
Poor caching capability
##8. Why Do Animations Feel Laggy?##
Try to avoid using setTimeout for animations. Use transitions instead, because CSS animations are executed in a separate thread (non-JS thread).
##9. Why Does Fixed Layout Fail to Work?##
Fixed layouts on mobile must include viewport meta information like width=device-width and user-scaleable=no, for example:
<head>
<meta name="viewport" content="width=device-width, user-scaleable=no">
</head>
Prevents users from zooming the page and affecting the layout.
##10. What Page Performance Testing Tools Are Available?##
- YSlow, a tool from Yahoo! that scores pages, grades various indicators, and provides optimization suggestions.
- PageSpeed, which supports mobile optimization in addition to the features above.
Both tools mentioned above have Firefox and Chrome extensions.
###References###
- Building Touch Interfaces with HTML5
No comments yet. Be the first to share your thoughts.