Developing for the Mobile Web

AUGUST 14 2010

Developing for the Mobile WebSocialDevCamp Chicago

We craft engaging interactive experiences on open & sustainable platforms

— Scott Robbin— scott@weightshift.com

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: scott@weightshift.comWeb: srobbin.com

Developing for the Mobile Web SOCIALDEVCAMP CHICAGO