SLIDE 1 Best Practices for developing Mobile Web Applications
23 September 2011 Open World Forum 2011, Paris, France Dominique Hazaël-Massieux <dom@w3.org> http://kwz.me/ps
This project is funded by the European Union through the Seventh Framework Programme (FP7/2010-2012) under grant agreement n°257800
- Mobile Web Applications (MobiWebApp)
SLIDE 2
W3C
Funded and directed by Web inventor Tim Berners-Lee International consortium of 320 organizations (w3.org/join) Staff of 60 in Europe, USA, Japan Home of HTML5, CSS, SVG, JavaScript APIs, etc. Dedicated efforts around mobile
SLIDE 3
Mobile
Different constraints Different opportunities
SLIDE 4
Constraints
smaller physical screens difficult to use keyboards no mouse lesser network connectivity reduced CPU & memory diversity & fragmentation different usage patterns
SLIDE 5
Advantages
always available intuitive touch interfaces full of sensors easy access to audio & video different usage patterns
SLIDE 6
Mobile Web
Adapt layout Adapt input Reduce network usage Reduce CPU & memory usage Adapt content
SLIDE 7
Layout
physical sizes: 3-4" Resolution: 120-800px wide Portrait orientation Older browsers: partial screen view Recent browsers: zoomed out Scroll bars and zooming best avoided
SLIDE 8 Adapting Layout
Avoid zoom:
viewportwidth=device-width
Adapt style to screen size:
- media='screen and (min-width:600px)'
Use liquid or elastic layout, preferably in single column
SLIDE 9 Input
keyboard:
Keypad: text entry difficult physcial keyboard: tiny keys touch keyboard: slow, takes up screen space
no mouse; increasingly touch-based UI
SLIDE 10 Reducing text entry
tel email date datalist
Soon (?):
speech
SLIDE 11
No mouse
large hit targets for touch-based devices sequential navigation in the page touchstart, touchmove, touchend events
SLIDE 12 Network
limited bandwidth high latency network traffic costly or under quota
SLIDE 13 Reduce Network Usage
Minify/gzip markup, stylesheets, scripts Use HTTP caching:
- Reduce size and number of external resources:
images (CSS sprites, EXIF data, optimization) scripts (JS libraries) aggregate stylesheets
Use for partial updates Optimize cookies
SLIDE 14 Prepare for Offline Operations
Data storage:
localStorage
Better, but later:
indexedDB.open
Offline caching:
manifest
SLIDE 15
CPU & memory
slower CPUs CPU usage drains battery more limited memory
SLIDE 16
Optimize CPU & memory usage
Resize images on the server Avoid long-running scripts Limit page reflow and repaints Limit size of pages, script objects Limit network usage
SLIDE 17
Diversity & Fragmentation
Much more diversity than on computers Wide-ranging capabilities among browsers
SLIDE 18 Content Adaptation
Responsive Web Design:
CSS Media Queries Mobile first JavaScript Feature detection
Server-side content adaptation
SLIDE 19
Mobile Web Applications
vs “Native” Apps freedom to deploy and update cross-platform, cross-devices
SLIDE 20
Building Mobile Web Applications
Slicker UI Sensors Hardware Better use of network
SLIDE 21
Slicker User Interfaces
SVG CSS3 animations & transformations canvas
The other side! Mouse over this circle
SLIDE 22 Sensors
Geolocation:
geolocation.getCurrentPosition(…)
Accelerometer / gyroscope:
devicemotion
SLIDE 23 Hardware (soon)
Battery:
batterybatterylow
Camera / Mike:
getUserMedia
SLIDE 24 Better connectivity
Adapt to network type:
navigator.connection.type
Optimize polling:
EventSource()
- Bidirectional connection:
WebSocket
PeerConnection
SLIDE 25
UI + Sensor + Network
SLIDE 26
Web & Connected devices
computers phones tablets TVs soon: cars, home automation, cameras, etc.
SLIDE 27 Learn more
Relever le défi du Web mobile, ed. Eyrolles Mobile Web Initiative Web site, with Best Practices W3C on-line training on Mobile Web Applications Standards for Web applications on mobile http://kwz.me/ps
This project is funded by the European Union through the Seventh Framework Programme (FP7/2010-2012) under grant agreement n°257800
- Mobile Web Applications (MobiWebApp)
