Few have the chance to create web-based mobile services from scratch. After years of investment in existing platforms (such as content management systems), how can you re-use your content, your servers, and your knowledge and evolve them to meet the mobile challenge?

2. James Pearce
Director, Developer Relations
@ jamespearce
jamesp@sencha.com

3. Building
Tomorrow’s Web
With Today’s Tools

4. 1941

5. An Experience Designed for the Medium

6. 1995

7. An Experience Designed for the Medium

8. 2007

9. An Experience Designed for the Medium

10. History has taught us
to embrace change

11. History has taught us
to question assumptions

12. History has taught us
to have high expectations

13. How The Web
is Changing Mobile
How Mobile
is Changing The Web

14. 2008
We must have an
iPhone App!

15. 2009
We must have an
Android App!

16. 2010
We must have an
iPad App!

17. 2011
We must have a...

19. omfg

22. JS
C# Palm J2ME
Microsoft
RIM RIM
Android
Apple
Apple Air Microsoft
Palm
Obj-C
Java
C++ Android Top U.S. Smartphone Platforms,
3 Month Average Ending December 2010
comScore MobiLens 2010

23. But what does this word even mean?
The Mobile Web
Cross-platform
Familiar skills & tools
Decentralized
Easily updated
Indexed
Well-understood technologies

24. A perfect storm

25. Documents Applications
Declarative HTML Programmatic DOM
Themes & templates JSON APIs
Thin client Thick client
URLs Arguments & signals
Request/Response Synchronization

27. A New Web Stack
WebFonts Video Audio Graphics
Device Access Server & Services
Camera CSS Styling & Layout HTTP
Location AJAX
JavaScript
Contacts Events
SMS Semantic HTML Sockets
Orientation SSL
File Systems Worker
x-App
Gyro DBs Parallel More...
Messaging
App Cache Processing

29. Web technologies
are a
viable alternative
to native development

30. built with
Apps vs Web technology

31. Documents Applications
Declarative HTML Programmatic DOM
Themes & templates JSON APIs
Thin client Thick client
URLs Arguments & signals
Request/Response Synchronization
Sedentary user Mobile user
This is what it means

32. Mobile is
an adjective not a noun

33. 480px) {
and (m ax-width:
@me dia screen
png);
#logo { mage: u rl(mobile.
ba ckground-i
}
}

34. Mobile devices are di erent
GPS device
Camera
Music player
Phone

35. atio n/msword
tent-Ty pe: applic
Con

36. The Mobile Web
is not a
320px Web

40. How did those assorted
tank tops work out for you?

41. Techniques

42. adap tation
n
ad·ap·ta·tio ˈtāSHəәn/ /ˌadəәp-/
dap
noun /ˌa
o f adapting
or process
1. The action ted
or being adap
r stage play
sio n drama, o itten work
2. A mo vie, televi f rom a wr
en adapted
that has be
or species
an organism nment
by which o its envir
o
3. A change t
etter suited
becomes b

43. Mobile adaptation
Presentational
Prioritizational
Permutational

44. Presentational adaptation
La yout

45. Prioritizational adaptation
A
tion and I
N aviga

46. Permutational adaptation
nality
Fu nctio

47. The topology of adaptation
Client Proxy Server

48. Presentational
Prioritizational
Permutational
Client Proxy Server

49. ‘Passive’ client adaptation
55 </a>
:// 555">5
=" tel
< a href

50. Proxy adaptation
There’s a bad sort
There’s a good sort

51. Server adaptation
Views
HTML, CSS...
Controllers
Models

52. Server adaptation
Desktop
Switcher
HTML, CSS...
Mobile
Controllers
Models

53. Device detection with plugins
WordPress Mobile Pack
http://wordpress.org/extend/plugins/wordpress-mobile-pack
WPTouch
http://wordpress.org/extend/plugins/wptouch
Drupal Mobile Plugin
http://drupal.org/project/mobileplugin

54. Brand consistency

55. Device detection with PHP
if (isset($_SERVER['HTTP_X_WAP_PROFILE']) { ...
if (in_array(substr($user_agent, 0, 4), $prefixes)) { ...
if (strpos($accept, 'wap') !== false) { ...
if (preg_match("/(" . $keywords . ")/i", $user_agent)) { ...
https://github.com/jamesgpearce/mobiledetect

56. Device detection with Rails
class ApplicationController < ActionController::Base
has_mobile_fu
end
*.mobile.erb
is_mobile_device?
in_mobile_view?
https://github.com/brendanlim/mobile-fu

57. Device detection with node.js
var Connect = require("connect"),
Monomi = require("monomi");
Connect.createServer(
Monomi.detectBrowserType(),
function(request, response, next) {
response.writeHead(200, {'Content-Type': 'text/plain'});
response.write('Hello World: ');
response.end('you are using a ' + request.monomi.browserType);
}
).listen(8080);
https://github.com/jamesgpearce/monomi

58. Detection & user choice
“Switch to our desktop site”

60. Thematic consistency
w3c-speak
http://mysite.com/posts/123
http://m.mysite.com/posts/123

61. Using di erent URLs
can preserve
the integrity of
‘One Web’

62. Device diversity
Can I Use?
http://caniuse.com
Modernizr
http://modernizr.com
DeviceAtlas
http://deviceatlas.com

63. dapt ation
a
ve c lient esign
Presentational Passi Web
D
sive
R espon t ation
adap
Proxy t ection
Devi ce de
Prioritizational
e
le sit
Mobi
Permutational
Client Proxy Server

64. dapt ation
a
ve c lient esign
Presentational Passi Web
D
sive
R espon t ation
adap
Proxy t ection
Devi ce de
Prioritizational
e
le sit
Mobi
Permutational
Client Proxy Server

65. A dedicated mobile app
Desktop
Switchers
Mobile
REST
JSO on
Controllers N
ce
Models

66. The stack of the present
req/res
User interface Rendering
Business logic
Storage

67. The stack of the future
User interface
sync
Security Business logic
Storage Storage
The return of
the thick client

69. Do we have time for some
code?

70. Progressive enhancement

71. assumption
HTML JS CSS
progressive
enhancement
app
doc
vs
assumption
HTML JS CSS
app
detection
+/- feature

72. Thick client, thin server
The shortfall in the cloud

73. http://mysite.com/myimage.png
http://i.tinysrc.mobi/http://mysite.com/myimage.png

74. dapt ation
a
ve c lient esign
Presentational Passi Web
D
sive
R espon t ation
adap
Proxy t ection
Devi ce de
Prioritizational
e
le sit
Mobi
p d su pport
Permutational
Mob ile ap Clou
Client Proxy Server

76. Mobile is
an adjective not a noun

77. The Mobile Web
is not a
320px Web

78. History has taught us
to embrace change

79. History has taught us
to question assumptions

80. History has taught us
to have high expectations

81. James Pearce
Director, Developer Relations
@ jamespearce
jamesp@sencha.com