Download pdf - 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— [email protected]

mailto:[email protected]


Developing for the Mobile Web SOCIALDEVCAMP CHICAGO

AgendaApp or Mobile Website?

Walkthrough of a simple site

Questions

01

02

03

Who?


Who?• Have an understanding of HTML, CSS and how websites

are delivered.



are delivered.

• Have experience with JavaScript.



are delivered.

• Have experience with JavaScript.

• Know how to use FTP and ability to edit .htaccess or Apache config files.


HTML5

App or Mobile Website?

01


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 charge for my product using an app store as the payment processor?

• Will I send push notifications or need background processes?


Mobile websites:01


Mobile websites:01

• Can access geolocation info.


Mobile websites:01


• Provide offline caching and storage.


Mobile websites:01



• Handle touch and gesture events.


Mobile websites:01




• Are easily deployed (new versions and bug fixes).


Mobile websites:01




• Are easily deployed (new versions and bug fixes).

• Are cross-platform (Android, iPhone, webOS, etc.).


Other things to consider01



• Are you building this site from scratch?




• User-Agent sniffing




• User-Agent sniffing

• Subdomain or .mobi


Walkthrough of a simple site

02


Walkthrough of a simple site02





01 — Progressive Enhancement







Aaron Gustafson, A List Aparthttp://www.alistapart.com/articles/understandingprogressiveenhancement/

http://www.alistapart.com/articles/understandingprogressiveenhancement/













02 — Responsive Web Design


























Sam Stephenson, 37signalshttp://37signals.com/svn/posts/2407-device-scale-user-interface-elements-in-ios-mobile-safari






Ethan Marcotte, A List Aparthttp://www.alistapart.com/articles/responsive-web-design/










03 — Make Small, Few Requests





Steve Souders, Googlehttp://www.stevesouders.com/blog/2010/07/12/mobile-cache-file-sizes/






Steve Souders, Googlehttp://www.stevesouders.com/blog/2010/07/12/mobile-cache-file-sizes/






Intercept Click Events and Make AJAX Requests(e.g. jQuery.history plugin)




PHP minifyhttp://code.google.com/p/minify/

http://code.google.com/p/minify/

http://code.google.com/p/minify/




SpriteMe.org




Base64 Encodinghttp://www.motobit.com/util/base64-decoder-encoder.asp















04 — Offline Caching





W3C: Offline Web Applicationshttp://www.w3.org/TR/offline-webapps/


























05 — Local Storage











Lawnchair, Brian Lerouxhttp://blog.westcoastlogic.com/lawnchair/






Lawnchair, Brian Lerouxhttp://blog.westcoastlogic.com/lawnchair/






jQuery Offline, Yehuda Katzhttp://github.com/wycats/jquery-offline






Questions

03


Thank you.

SCOTT ROBBINTwitter: @srobbinE-mail: [email protected]: srobbin.com




