Different than Desktop
The biggest consideration is that mobile devices are underpowered by comparison to their desktop counterparts. To obtain desktop-like performance.
zepto.js is looking promising for WebKit specific mobile browsers.
Images are a big source of slowdown on iOS in particular. It is best to avoid using large images, especially as background images. More than one large image will typically cause smooth scroll and rendering issues.
Every situation is different, so there are no set rules with regard to images.
- Keep images small
- Tile the smaller images, if possible
- Avoid images in excessive pixel dimensions (I believe iOS mentions 1024 pixels)
- Avoid complex SVG graphics
iOS has a feature in mobile Safari (and
UIWebView) that allows items to be hardware accelerated. This allows for an element to have smooth movement on the device, which is almost necessary for smooth animations. This is an easy thing to activate (see hack), with a simple CSS property
translateZ(0);. Setting this property will not actually do anything visually to the element, the entire item will be rendered to the graphics processor of the iOS device.
Because it is rendering elements to an image on the graphics processor, the same image rules apply, unless a visual flash of the HTML element being rendered to an image is an acceptable visual glitch.
Hardware acceleration, on iOS specifically, has great enhancements for animations and transitions via CSS.
To determine if your elements are hardware accelerated, you can use the following line in the OS X Terminal.
CA_COLOR_OPAQUE=1 /Developer/Platforms/iPhoneSimulator.platform/Developer/Applications/iPhone\ Simulator.app/Contents/MacOS/iPhone\ Simulator
Canvas and Gradients
When dealing with the new HTML canvas element, be aware that anything that is created using a
<canvas>, is converted to an image. Gradients are the same way. Making a
<canvas> or a gradient too big will run into the same image issues that are mentioned above. Use each sparingly.
Avoid anything that will takeover the whole screen as it will render insufficiently, even with hardware acceleration on. This is especially apparent when darkening the page for use with a modal content. Mobile devices will typically render blocks of content and “chunk” on screen until the whole screen is filled. It is best to avoid anything that needs to be animated onto the screen in this way.
If this casualty of the rendering engine is an acceptable experience for you, then safely ignore this warning.
Use the touch events instead of the click events.
Desktop web development utilizes
mouse move events to name a few. These events have corresponding touch events on mobile touchscreen devices
These touch events can also be called from HTML.
var evt = (document.createTouch != null ? "ontouchend" : "click");
element.addEventListener(evt, method, false);
Next will be transitions in CSS for iOS.
If you enjoyed this, use this shorter link to share: http://the.ichibod.com/s/mhtml