How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards

•

25 likes•2,282 views

David Kaneda

Presentation given at Web 2.0 Expo, NY.

Technology

How to Develop a Rich,
Native-quality User
Experience for Mobile Using
Web Standards
DAVID KANEDA, SENCHA

@davidkaneda
@senchainc
@jqtouch
@webkitbits
@9bits

How to Develop a Rich,
Native-quality User
Experience for Mobile Using
Web Standards

US Mobile Smartphone Traffic

39%

iOS
Android
RIM
47% WebOS
Winmo
Other

7%
3%
2%2%

http://metrics.admob.com
January 2010

new elements
section, article, header, footer, aside

yawn.

new features
web storage
web workers
form validation
microdata

new input types

TYPE=EMAIL TYPE=URL TYPE=NUMBER

<video> & <audio>
<video> can be styled like other elements

<video> & <audio>
<video> can be styled like other elements
JavaScript control over playback

<video> & <audio>
<video> can be styled like other elements
JavaScript control over playback
Quick tip: Autoplay can work, even if Apple says otherwise.

cache manifest
Make apps o ine-accessible

cache manifest
Make apps o ine-accessible
Cache, Network, Fallback

cache manifest
Make apps o ine-accessible
Cache, Network, Fallback
Once you go cache, you never go back

That’s so <meta>
<meta name="viewport" content="width=device-width, initial-
scale=1.0, maximum-scale=1.0, user-scalable=0"/>

<link rel="apple-touch-icon-precomposed" media="screen and
(resolution: 326dpi)" href="/link/to/iOS-114px.png" />

CSS3 Basics
border-radius box-shadow
border-image :before & :after
opacity masks
gradient @font-face
text-shadow reﬂect

Transforms
translate
rotate
scale
skew
scale

Transitions & Animations
More than just pretty e ects
Usually hardware-accelerated

WebKit-speciﬁc CSS
-webkit-tap-highlight-color: rgba(0,0,0,0);

WebKit-speciﬁc CSS
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-user-select: none;

WebKit-speciﬁc CSS
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-user-select: none;
-webkit-touch-callout: none;

350ms to Kill
It’s longer than it sounds
Avoid with custom touch events
Lazy method: bind to touchend

a ﬁxed game
No position: ﬁxed; in CSS
overﬂow: auto/scroll; requires two ﬁngers
Hack by manipulating touch objects

Thanks!
I’ll be here all week.

@davidkaneda
http://9-b.it/web20ny

What's hot

High Performance JavaScript (CapitolJS 2011)Nicholas Zakas

Browser Wars Episode 1: The Phantom MenaceNicholas Zakas

High Performance JavaScript (Amazon DevCon 2011)Nicholas Zakas

Keypoints html5dynamis

Enough with the JavaScript already!Nicholas Zakas

Real World Web Standardsgleddy

What is HTML 5?Susan Winters

Learning from the Best jQuery PluginsMarc Grabanski

Java Web Application Security with Java EE, Spring Security and Apache Shiro ...Matt Raible

High Performance SnippetsSteve Souders

High Performance JavaScript - jQuery Conference SF Bay Area 2010Nicholas Zakas

jQuery Chicago 2014 - Next-generation JavaScript TestingVlad Filippov

jQuery 1.9 and 2.0 - Present and FutureRichard Worth

The Future Of Web FrameworksMatt Raible

jQuery Conference Boston 2011 CouchAppsBradley Holt

Cache is KingSteve Souders

Mobile Web Speed BumpsNicholas Zakas

JavaScript front end performance optimizationsChris Love

Play Framework vs Grails Smackdown - JavaOne 2013Matt Raible

JavaScript Libraries: The Big PictureSimon Willison

What's hot (20)

High Performance JavaScript (CapitolJS 2011)

Browser Wars Episode 1: The Phantom Menace

High Performance JavaScript (Amazon DevCon 2011)

Keypoints html5

Enough with the JavaScript already!

Real World Web Standards

What is HTML 5?

Learning from the Best jQuery Plugins

Java Web Application Security with Java EE, Spring Security and Apache Shiro ...

High Performance Snippets

High Performance JavaScript - jQuery Conference SF Bay Area 2010

jQuery Chicago 2014 - Next-generation JavaScript Testing

jQuery 1.9 and 2.0 - Present and Future

The Future Of Web Frameworks

jQuery Conference Boston 2011 CouchApps

Cache is King

Mobile Web Speed Bumps

JavaScript front end performance optimizations

Play Framework vs Grails Smackdown - JavaOne 2013

JavaScript Libraries: The Big Picture

Viewers also liked

Sencha Touch beta — Amazing Mobile Web Apps with HTML5, CSS3 & JavaScriptDavid Kaneda

Sencha Touch WorkshopDavid Kaneda

Ext GWT 3.0 Theming and AppearancesSencha

Building Sencha ThemesSencha

jQTouch at jQuery Conference 2010David Kaneda

Introduction to LESSManish Shekhawat

jQTouch and TitaniumMarc Grabanski

Introduction to open_gl_in_androidtamillarasan

Opengl basicspushpa latha

OpenGL ES PresentationEric Cheng

OpenGL Introduction.Girish Ghate

OpenGLES - Graphics Programming in Android Arvind Devaraj

OpenGL ES 2.x Programming IntroductionChamp Yen

OpenGL NVIDIA Command-List: Approaching Zero Driver OverheadTristan Lorach

HTML5 로 iPhone App 만들기JungHyuk Kwon

jQTouch – Mobile Web Apps with HTML, CSS and JavaScriptPhilipp Bosch

Apache web serverzrstoppe

jQuery in 15 minutesSimon Willison

jQuery PPTDominic Arrojado

Modern JavaScript Applications: Design PatternsVolodymyr Voytyshyn

Viewers also liked (20)

Sencha Touch beta — Amazing Mobile Web Apps with HTML5, CSS3 & JavaScript

Sencha Touch Workshop

Ext GWT 3.0 Theming and Appearances

Building Sencha Themes

jQTouch at jQuery Conference 2010

Introduction to LESS

jQTouch and Titanium

Introduction to open_gl_in_android

Opengl basics

OpenGL ES Presentation

OpenGL Introduction.

OpenGLES - Graphics Programming in Android

OpenGL ES 2.x Programming Introduction

OpenGL NVIDIA Command-List: Approaching Zero Driver Overhead

HTML5 로 iPhone App 만들기

jQTouch – Mobile Web Apps with HTML, CSS and JavaScript

Apache web server

jQuery in 15 minutes

jQuery PPT

Modern JavaScript Applications: Design Patterns

Similar to How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards

Fragmentation in mobile design: fact or fictionBelen Barros Pena

iEnterprise - Mit HTML-5 zum Unternehmens-Dashboard für TabletsIndiginox

iEnterprise - Mit HTML5 zum Unternehmens-Dashboard für TabletsStefan Kolb

Keynote Igoodfriday

Mobile App DevelopmentChris Morrell

HiUED 前端/web 發展和體驗Bobby Chen

Nokia Developer Offering Series 40Mohamad Iqbal

Philly ete-2011davyjones

Jason.O Keefe.Genuitec.Presentation.FinalAjax Experience 2009

Mobile Widgets DevelopmentMaximiliano Firtman

Inside Mobile Widgets Publish360|Conferences

Fake it 'til you make itJonathan Snook

Js foo - Sept 8 uploadDebnath Sinha

Sencha Touch for RubyistsJames Pearce

S60 Web Runtime - Web2.0 Expo Europe 2008petrosoininen

Mobile Web High PerformanceAmjad Rafique

Dmeeker Finalarajivmordani

Stocktwits & Responsive Web Design, social network meets flexible frameworkJohn Strott

The Enterprise Dilemma: Native vs. WebMotorola Mobility - MOTODEV

Designing for The Modern WebSara Cannon

Similar to How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards (20)

Fragmentation in mobile design: fact or fiction

iEnterprise - Mit HTML-5 zum Unternehmens-Dashboard für Tablets

iEnterprise - Mit HTML5 zum Unternehmens-Dashboard für Tablets

Keynote I

Mobile App Development

HiUED 前端/web 發展和體驗

Nokia Developer Offering Series 40

Philly ete-2011

Jason.O Keefe.Genuitec.Presentation.Final

Mobile Widgets Development

Inside Mobile Widgets Publish

Fake it 'til you make it

Js foo - Sept 8 upload

Sencha Touch for Rubyists

S60 Web Runtime - Web2.0 Expo Europe 2008

Mobile Web High Performance

Dmeeker Finala

Stocktwits & Responsive Web Design, social network meets flexible framework

The Enterprise Dilemma: Native vs. Web

Designing for The Modern Web

Recently uploaded

Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...panagenda

The State of Passkeys with FIDO Alliance.pptxLoriGlavin3

Assure Ecommerce and Retail Operations Uptime with ThousandEyesThousandEyes

Testing tools and AI - ideas what to try with some tool examplesKari Kakkonen

UiPath Community: Communication Mining from Zero to HeroUiPathCommunity

Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxLoriGlavin3

The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...Wes McKinney

(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...AliaaTarek5

Time Series Foundation Models - current state and future directionsNathaniel Shimoni

Data governance with Unity Catalog PresentationKnoldus Inc.

Generative AI for Technical Writer or Information DevelopersRaghuram Pandurangan

The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxLoriGlavin3

Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Mark Goldstein

Sample pptx for embedding into website for demoHarshalMandlekar2

TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc

From Family Reminiscence to Scholarly Archive .Alan Dix

Decarbonising Buildings: Making a net-zero built environment a realityIES VE

A Deep Dive on Passkeys: FIDO Paris Seminar.pptxLoriGlavin3

Generative Artificial Intelligence: How generative AI works.pdfIngrid Airi González

DevEX - reference for building teams, processes, and platformsSergiu Bodiu

Recently uploaded (20)

Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...

The State of Passkeys with FIDO Alliance.pptx

Assure Ecommerce and Retail Operations Uptime with ThousandEyes

Testing tools and AI - ideas what to try with some tool examples

UiPath Community: Communication Mining from Zero to Hero

Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx

The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...

(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...

Time Series Foundation Models - current state and future directions

Data governance with Unity Catalog Presentation

Generative AI for Technical Writer or Information Developers

The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx

Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24

Sample pptx for embedding into website for demo

TrustArc Webinar - How to Build Consumer Trust Through Data Privacy

From Family Reminiscence to Scholarly Archive .

Decarbonising Buildings: Making a net-zero built environment a reality

A Deep Dive on Passkeys: FIDO Paris Seminar.pptx

Generative Artificial Intelligence: How generative AI works.pdf

DevEX - reference for building teams, processes, and platforms

How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards

1. How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards DAVID KANEDA, SENCHA

2. @davidkaneda @senchainc @jqtouch @webkitbits @9bits

3. How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards

5. WAP’s dead, baby. WAP’s dead.

6. US Mobile Smartphone Traffic 39% iOS Android RIM 47% WebOS Winmo Other 7% 3% 2%2% http://metrics.admob.com January 2010

8. Did someone say devices?

10.

11. 230,000

12. 230,000 iOS activations a day.

13.

14.

15.

16. 60,000 Android shipments a day.

17. COMING SOON… SAMSUNG GALAXY TAB

18. BLACKBERRY TORCH

19. WEBOS 2.0

20. Let’s talk tech.

21.

22.

23.

24. HTML5

25. new elements

26. new elements section, article, header, footer, aside yawn.

27. new features

28. new features web storage web workers form validation microdata

29. new input types

30. new input types TYPE=EMAIL TYPE=URL TYPE=NUMBER

31. <video> & <audio>

32. <video> & <audio> <video> can be styled like other elements

33. <video> & <audio> <video> can be styled like other elements JavaScript control over playback

34. <video> & <audio> <video> can be styled like other elements JavaScript control over playback Quick tip: Autoplay can work, even if Apple says otherwise.

35.

36.

37. cache manifest

38. cache manifest Make apps o ine-accessible

39. cache manifest Make apps o ine-accessible Cache, Network, Fallback

40. cache manifest Make apps o ine-accessible Cache, Network, Fallback Once you go cache, you never go back

41. geolocation

42. geolocation

43. That’s so <meta>

44. That’s so <meta> <meta name="viewport" content="width=device-width, initial- scale=1.0, maximum-scale=1.0, user-scalable=0"/> <link rel="apple-touch-icon-precomposed" media="screen and (resolution: 326dpi)" href="/link/to/iOS-114px.png" />

45. CSS3

46. CSS3 Basics

47. CSS3 Basics border-radius box-shadow border-image :before & :after opacity masks gradient @font-face text-shadow reﬂect

48.

49.

50.

51.

52.

53.

54.

55. Transforms

56. Transforms translate rotate scale skew scale

57. Transitions & Animations

58. Transitions & Animations More than just pretty e ects Usually hardware-accelerated

59. Transitions & Animations More than just pretty e ects Usually hardware-accelerated

60. WebKit-speciﬁc CSS

61. WebKit-speciﬁc CSS

62. WebKit-speciﬁc CSS -webkit-tap-highlight-color: rgba(0,0,0,0);

63. WebKit-speciﬁc CSS -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-user-select: none;

64. WebKit-speciﬁc CSS -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-user-select: none; -webkit-touch-callout: none;

65. Trouble Spots

66. 350ms to Kill

67. 350ms to Kill It’s longer than it sounds Avoid with custom touch events Lazy method: bind to touchend

68. a ﬁxed game

69. a fixed game No position: fixed; in CSS overflow: auto/scroll; requires two fingers Hack by manipulating touch objects

70. Need a hand?

71. jQTouch JQTOUCH.COM

72. Sencha Touch SENCHA.COM

73. “Real artists ship.” Steve Jobs

74. WEB APPS

75.

76.

77.

78.

79. NATIVE SHELL

80.

81. Thanks! I’ll be here all week. @davidkaneda http://9-b.it/web20ny

How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards

Similar to How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards (20)

Recently uploaded

Recently uploaded (20)

How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards