Mobile WebKit has quickly become the handheld browser of choice. And, while it does allow users to view the "real web," surfing the full-sized Internet on a half-sized device isn't always practical. In this session, we'll take a look at some of the techniques used to create mobile websites for a smaller screen size and slower network connection, including minification, offline caching and local storage.

1. AUGUST 14 2010
Developing for the Mobile Web
SocialDevCamp Chicago
We craft engaging interactive experiences on open & sustainable platforms
— Scott Robbin
— scott@weightshift.com

4. Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
Agenda
01 App or Mobile Website?
02 Walkthrough of a simple site
03 Questions

5. Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
Who?

6. Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
Who?
• Have an understanding of HTML, CSS and how websites
are delivered.

7. Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
Who?
• Have an understanding of HTML, CSS and how websites
are delivered.
• Have experience with JavaScript.

8. Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
Who?
• Have an understanding of HTML, CSS and how websites
are delivered.
• Have experience with JavaScript.
• Know how to use FTP and ability to edit .htaccess or
Apache config files.

9. HTML5

10. Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
01
App or Mobile
Website?

11. Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
01 Should I build an app or mobile website?

12. Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
01 Should I build an app or mobile website?
• Will my product require the use of a camera, microphone
or other device-specific hardware?

13. Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
01 Should I build an app or mobile website?
• Will my product require the use of a camera, microphone
or other device-specific hardware?
• Will it access the address book, media library or
common user data?

14. Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
01 Should I build an app or mobile website?
• Will my product require the use of a camera, microphone
or other device-specific hardware?
• Will it access the address book, media library or
common user data?
• Will I charge for my product using an app store as the
payment processor?

15. Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
01 Should I build an app or mobile website?
• Will my product require the use of a camera, microphone
or other device-specific hardware?
• Will it access the address book, media library or
common user data?
• Will I charge for my product using an app store as the
payment processor?
• Will I send push notifications or need background
processes?

16. Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
01 Mobile websites:

17. Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
01 Mobile websites:
• Can access geolocation info.

18. Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
01 Mobile websites:
• Can access geolocation info.
• Provide offline caching and storage.

19. Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
01 Mobile websites:
• Can access geolocation info.
• Provide offline caching and storage.
• Handle touch and gesture events.

20. Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
01 Mobile websites:
• Can access geolocation info.
• Provide offline caching and storage.
• Handle touch and gesture events.
• Are easily deployed (new versions and bug fixes).

21. Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
01 Mobile websites:
• Can access geolocation info.
• Provide offline caching and storage.
• Handle touch and gesture events.
• Are easily deployed (new versions and bug fixes).
• Are cross-platform (Android, iPhone, webOS, etc.).

22. Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
01 Other things to consider

23. Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
01 Other things to consider
• Are you building this site from scratch?

24. Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
01 Other things to consider
• Are you building this site from scratch?
• User-Agent sniffing

25. Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
01 Other things to consider
• Are you building this site from scratch?
• User-Agent sniffing
• Subdomain or .mobi

26. Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
02
Walkthrough of a
simple site

27. Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
02 Walkthrough of a simple site

28. Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
02 Walkthrough of a simple site
01 — Progressive Enhancement

29. Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
01 — Progressive Enhancement
Aaron Gustafson, A List Apart
http://www.alistapart.com/articles/understandingprogressiveenhancement/
02 Walkthrough of a simple site

30. Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
01 — Progressive Enhancement
02 Walkthrough of a simple site

31. Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
01 — Progressive Enhancement
02 Walkthrough of a simple site

32. Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
02 Walkthrough of a simple site
01 — Progressive Enhancement

33. Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
02 Walkthrough of a simple site
01 — Progressive Enhancement
02 — Responsive Web Design

34. Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
02 — Responsive Web Design
02 Walkthrough of a simple site

35. Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
02 — Responsive Web Design
02 Walkthrough of a simple site

36. Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
02 — Responsive Web Design
02 Walkthrough of a simple site

37. Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
02 — Responsive Web Design
02 Walkthrough of a simple site

38. Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
02 — Responsive Web Design
02 Walkthrough of a simple site

39. Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
02 — Responsive Web Design
02 Walkthrough of a simple site

40. Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
02 — Responsive Web Design
02 Walkthrough of a simple site

41. Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
02 — Responsive Web Design
Sam Stephenson, 37signals
http://37signals.com/svn/posts/2407-device-scale-user-interface-elements-in-ios-mobile-safari
02 Walkthrough of a simple site

42. Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
02 — Responsive Web Design
Ethan Marcotte, A List Apart
http://www.alistapart.com/articles/responsive-web-design/
02 Walkthrough of a simple site

43. Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
02 Walkthrough of a simple site
01 — Progressive Enhancement
02 — Responsive Web Design

44. Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
02 Walkthrough of a simple site
01 — Progressive Enhancement
02 — Responsive Web Design
03 — Make Small, Few Requests

45. Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
03 — Make Small, Few Requests
Steve Souders, Google
http://www.stevesouders.com/blog/2010/07/12/mobile-cache-file-sizes/
02 Walkthrough of a simple site

46. Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
03 — Make Small, Few Requests
Steve Souders, Google
http://www.stevesouders.com/blog/2010/07/12/mobile-cache-file-sizes/
02 Walkthrough of a simple site

47. Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
03 — Make Small, Few Requests
Intercept Click Events and Make AJAX Requests
(e.g. jQuery.history plugin)
02 Walkthrough of a simple site

48. Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
03 — Make Small, Few Requests
PHP minify
http://code.google.com/p/minify/
02 Walkthrough of a simple site

49. Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
03 — Make Small, Few Requests
SpriteMe.org
02 Walkthrough of a simple site

50. Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
03 — Make Small, Few Requests
Base64 Encoding
http://www.motobit.com/util/base64-decoder-encoder.asp
02 Walkthrough of a simple site

51. Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
03 — Make Small, Few Requests
02 Walkthrough of a simple site

52. Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
02 Walkthrough of a simple site
01 — Progressive Enhancement
02 — Responsive Web Design
03 — Make Small, Few Requests

53. Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
02 Walkthrough of a simple site
01 — Progressive Enhancement
02 — Responsive Web Design
03 — Make Small, Few Requests
04 — Offline Caching

54. Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
04 — Offline Caching
W3C: Offline Web Applications
http://www.w3.org/TR/offline-webapps/
02 Walkthrough of a simple site

55. Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
04 — Offline Caching
W3C: Offline Web Applications
http://www.w3.org/TR/offline-webapps/
02 Walkthrough of a simple site

56. Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
04 — Offline Caching
W3C: Offline Web Applications
http://www.w3.org/TR/offline-webapps/
02 Walkthrough of a simple site

57. Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
02 Walkthrough of a simple site
01 — Progressive Enhancement
02 — Responsive Web Design
03 — Make Small, Few Requests
04 — Offline Caching

58. Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
02 Walkthrough of a simple site
01 — Progressive Enhancement
02 — Responsive Web Design
03 — Make Small, Few Requests
04 — Offline Caching
05 — Local Storage

59. Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
05 — Local Storage
W3C: Offline Web Applications
http://www.w3.org/TR/offline-webapps/
02 Walkthrough of a simple site

60. Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
05 — Local Storage
Lawnchair, Brian Leroux
http://blog.westcoastlogic.com/lawnchair/
02 Walkthrough of a simple site

61. Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
05 — Local Storage
Lawnchair, Brian Leroux
http://blog.westcoastlogic.com/lawnchair/
02 Walkthrough of a simple site

62. Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
05 — Local Storage
jQuery Offline,Yehuda Katz
http://github.com/wycats/jquery-offline
02 Walkthrough of a simple site

63. Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
05 — Local Storage
02 Walkthrough of a simple site

64. Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
03
Questions

65. Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
Thank you.
SCOTT ROBBIN
Twitter: @srobbin
E-mail: scott@weightshift.com
Web: srobbin.com