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.
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Developing for the Mobile Web
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
2.
3.
4. Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
Agenda
01 App or Mobile Website?
02 Walkthrough of a simple site
03 Questions
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.
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?
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