Embed Size (px)
DESCRIPTION
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.
Citation preview
AUGUST 14 2010
Developing for the Mobile WebSocialDevCamp Chicago
We craft engaging interactive experiences on open & sustainable platforms
— Scott Robbin— [email protected]
Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
AgendaApp or Mobile Website?
Walkthrough of a simple site
Questions
01
02
03
Who?
Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
Who?• Have an understanding of HTML, CSS and how websites
are delivered.
Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
Who?• Have an understanding of HTML, CSS and how websites
are delivered.
• Have experience with JavaScript.
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.
Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
HTML5
App or Mobile Website?
01
Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
Should I build an app or mobile website?01
Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
Should I build an app or mobile website?01
• Will my product require the use of a camera, microphone or other device-specific hardware?
Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
Should I build an app or mobile website?01
• 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?
Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
Should I build an app or mobile website?01
• 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?
Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
Should I build an app or mobile website?01
• 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?
Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
Mobile websites:01
Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
Mobile websites:01
• Can access geolocation info.
Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
Mobile websites:01
• Can access geolocation info.
• Provide offline caching and storage.
Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
Mobile websites:01
• Can access geolocation info.
• Provide offline caching and storage.
• Handle touch and gesture events.
Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
Mobile websites:01
• Can access geolocation info.
• Provide offline caching and storage.
• Handle touch and gesture events.
• Are easily deployed (new versions and bug fixes).
Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
Mobile websites:01
• 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.).
Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
Other things to consider01
Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
Other things to consider01
• Are you building this site from scratch?
Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
Other things to consider01
• Are you building this site from scratch?
• User-Agent sniffing
Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
Other things to consider01
• Are you building this site from scratch?
• User-Agent sniffing
• Subdomain or .mobi
Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
Walkthrough of a simple site
02
Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
Walkthrough of a simple site02
Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
Walkthrough of a simple site02
Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
Walkthrough of a simple site02
01 — Progressive Enhancement
Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
Walkthrough of a simple site02
Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
Walkthrough of a simple site02
01 — Progressive Enhancement
Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
Aaron Gustafson, A List Aparthttp://www.alistapart.com/articles/understandingprogressiveenhancement/
Walkthrough of a simple site02
01 — Progressive Enhancement
Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
Walkthrough of a simple site02
01 — Progressive Enhancement
Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
Walkthrough of a simple site02
01 — Progressive Enhancement
Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
Walkthrough of a simple site02
01 — Progressive Enhancement
02 — Responsive Web Design
Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
Walkthrough of a simple site02
02 — Responsive Web Design
Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
Walkthrough of a simple site02
02 — Responsive Web Design
Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
Walkthrough of a simple site02
02 — Responsive Web Design
Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
Walkthrough of a simple site02
02 — Responsive Web Design
Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
Walkthrough of a simple site02
02 — Responsive Web Design
Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
Walkthrough of a simple site02
02 — Responsive Web Design
Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
Walkthrough of a simple site02
02 — Responsive Web Design
Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
Walkthrough of a simple site02
02 — Responsive Web Design
Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
Sam Stephenson, 37signalshttp://37signals.com/svn/posts/2407-device-scale-user-interface-elements-in-ios-mobile-safari
Walkthrough of a simple site02
02 — Responsive Web Design
Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
Ethan Marcotte, A List Aparthttp://www.alistapart.com/articles/responsive-web-design/
Walkthrough of a simple site02
01 — Progressive Enhancement
02 — Responsive Web Design
Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
Walkthrough of a simple site02
01 — Progressive Enhancement
02 — Responsive Web Design
03 — Make Small, Few Requests
Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
Walkthrough of a simple site02
03 — Make Small, Few Requests
Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
Steve Souders, Googlehttp://www.stevesouders.com/blog/2010/07/12/mobile-cache-file-sizes/
Walkthrough of a simple site02
03 — Make Small, Few Requests
Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
Steve Souders, Googlehttp://www.stevesouders.com/blog/2010/07/12/mobile-cache-file-sizes/
Walkthrough of a simple site02
03 — Make Small, Few Requests
Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
Intercept Click Events and Make AJAX Requests(e.g. jQuery.history plugin)
Walkthrough of a simple site02
03 — Make Small, Few Requests
Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
PHP minifyhttp://code.google.com/p/minify/
Walkthrough of a simple site02
03 — Make Small, Few Requests
Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
SpriteMe.org
Walkthrough of a simple site02
03 — Make Small, Few Requests
Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
Base64 Encodinghttp://www.motobit.com/util/base64-decoder-encoder.asp
Walkthrough of a simple site02
03 — Make Small, Few Requests
Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
Walkthrough of a simple site02
01 — Progressive Enhancement
02 — Responsive Web Design
03 — Make Small, Few Requests
Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
Walkthrough of a simple site02
01 — Progressive Enhancement
02 — Responsive Web Design
03 — Make Small, Few Requests
04 — Offline Caching
Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
Walkthrough of a simple site02
04 — Offline Caching
Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
W3C: Offline Web Applicationshttp://www.w3.org/TR/offline-webapps/
Walkthrough of a simple site02
04 — Offline Caching
Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
W3C: Offline Web Applicationshttp://www.w3.org/TR/offline-webapps/
Walkthrough of a simple site02
04 — Offline Caching
Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
W3C: Offline Web Applicationshttp://www.w3.org/TR/offline-webapps/
Walkthrough of a simple site02
01 — Progressive Enhancement
02 — Responsive Web Design
03 — Make Small, Few Requests
04 — Offline Caching
Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
Walkthrough of a simple site02
01 — Progressive Enhancement
02 — Responsive Web Design
03 — Make Small, Few Requests
04 — Offline Caching
05 — Local Storage
Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
Walkthrough of a simple site02
05 — Local Storage
Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
W3C: Offline Web Applicationshttp://www.w3.org/TR/offline-webapps/
Walkthrough of a simple site02
05 — Local Storage
Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
Lawnchair, Brian Lerouxhttp://blog.westcoastlogic.com/lawnchair/
Walkthrough of a simple site02
05 — Local Storage
Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
Lawnchair, Brian Lerouxhttp://blog.westcoastlogic.com/lawnchair/
Walkthrough of a simple site02
05 — Local Storage
Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
jQuery Offline, Yehuda Katzhttp://github.com/wycats/jquery-offline
Walkthrough of a simple site02
05 — Local Storage
Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
Questions
03
Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
Thank you.
SCOTT ROBBINTwitter: @srobbinE-mail: [email protected]: srobbin.com
Developing for the Mobile Web SOCIALDEVCAMP CHICAGO
