Best Practices for developing Mobile Web Applications 23 September - PowerPoint PPT Presentation

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)

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

Mobile Different constraints Different opportunities

Constraints smaller physical screens difficult to use keyboards no mouse lesser network connectivity reduced CPU & memory diversity & fragmentation different usage patterns

Advantages always available intuitive touch interfaces full of sensors easy access to audio & video different usage patterns

Mobile Web Adapt layout Adapt input Reduce network usage Reduce CPU & memory usage Adapt content

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

Adapting Layout Avoid zoom: ������������ viewport ����������� width=device-width �� Adapt style to screen size: ������������������������������������������ ���������������������������������������������� media='screen and (min-width:600px)' � Use liquid or elastic layout, preferably in single column

Input keyboard: Keypad: text entry difficult physcial keyboard: tiny keys touch keyboard: slow, takes up screen space no mouse; increasingly touch-based UI

Reducing text entry ������������ tel � ������������ email � ������������ date � � datalist ���������������������������� Soon (?): ������������������� speech �

No mouse large hit targets for touch-based devices sequential navigation in the page touchstart , touchmove , touchend events

Network limited bandwidth high latency network traffic costly or under quota on and off

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

Prepare for Offline Operations Data storage: ������� localStorage Better, but later: ���������������� indexedDB.open ��������� Offline caching: ������ manifest �����������������

CPU & memory slower CPUs CPU usage drains battery more limited memory

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

Diversity & Fragmentation Much more diversity than on computers Wide-ranging capabilities among browsers

Content Adaptation Responsive Web Design : CSS Media Queries Mobile first JavaScript Feature detection Server-side content adaptation

Mobile Web Applications vs “Native” Apps freedom to deploy and update cross-platform, cross-devices

Building Mobile Web Applications Slicker UI Sensors Hardware Better use of network

Slicker User Interfaces SVG CSS3 animations & transformations canvas The other side! Mouse over this circle

Sensors Geolocation: ���������� geolocation.getCurrentPosition(…) Accelerometer / gyroscope: ������������������ devicemotion �����

Hardware (soon) Battery: battery ������������������� batterylow ����� Camera / Mike: ���������� getUserMedia �����������������

Better connectivity Adapt to network type: ���� navigator.connection.type ���������������� Optimize polling: ���������������������� EventSource() � ��������������������������������������������� Bidirectional connection: ����������������� WebSocket � ������������������������������������������� ����������������������������������� Soon, P2P connection: ��������������������� PeerConnection ��������������������� ��������������������

UI + Sensor + Network

Web & Connected devices computers phones tablets TVs soon: cars, home automation, cameras, etc.

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)