Developing for Mobile

http://www.flickr.com/photos/aye_shamus/2883012011

Also has
Blackberry

Not a
phone

Phones go wild

Portable?
Handheld?
A smart-phone?
Any old phone?

1. Physical properties

http://www.flickr.com/photos/archer10/4312413546

2. Network usage

http://www.flickr.com/photos/karenhorton/4446961232

3. Device Power

http://www.flickr.com/photos/tonyjcase/4139662222

Gmail

http://www.flickr.com/photos/katphotos/2896232518/

3.5 versions of Gmail:

Desktop - richly interactive
Desktop - "simple" HTML
(requires opt in)

Mobile
& old mobile
(still served to Palm Pre, etc)

http://www.flickr.com/photos/publicenergy/1846375599

Mobile devices being delivered different markup

CSS used for different viewports

JavaScript adding functionality if wide enough*
* yes, iPads, tablets, etc...


Browser smelling bad?


Bingo people.

Read more: http://mark-kirby.co.uk/the-mobile-context/

Tip: Safari, "show debug menu", change user agent

#og_quick>.og_o {
width:61px;
height:21px;
background:transparent url('data:image/
png;base64,iVBORw0KGgoAAAANSUhEUgAAAD0AAAAXCAMAAACPi7eLAAABgFBMVEX19fXl5eb9/f35+fnc3Nzt7e3x8fH////
iPEX7rg53n/Dh4ODq6uoiV+3+/v70t67vVVTb5PgWS/Hwl46ju+3+xDBFeO/
xw73R0tLV2uX30XHi6vvUEi3zc2v0pZo2aey1xuzNzc2WuPzoJzVHgfvt8fzZ2dnG1fb22IwpYvfgHDMya/f//v1ek/n/+vn+//9BcucUQ
+TV1db5/fr55LLdqqe4wtxolfDaamvUwbnIzNTn3Nv+z1Hx8/rqkgvos0jDz+qJp+fTzMdxktn0hHn88vCVsu84cvlbh+fkwn/+/
PSCnde6Tk2ktNvt5+f+/v+4zPn25uPR3vz08PAkpTrc4Oju6+r5+v3OjYv14N1Nfun79ebc08uLsPv668SdzKfy
+vMNNNLP8NA9at6d4KhEy1nbt3z33dzg1NLZen2FqvbTVVbMJTXr4cztrjP989Qyw1T+4JYChQ/
u6eDv089y2IX7zML71syUrOS6ITOzxLbm4trsy8XMgn3O094bfihI3fKDAAAC
+klEQVR4XpXUVZfsNgwAYJnDw8zMDMvMzHyZucz01+tktu2c+9C9qydP5C/WkZwBca/Az1788AJb/wBHHxxntUZD83uwdYd
+8uzl6WPeG9exRiMdOYv4a2bQQ/7fW72X3/6KyJj2bLyjusGYobfNLsd3lP6ZLuQbXcoIxhjS4SK/
q3Zb4391K2sOu2z0mzB2IUTzJ1cytOY8qT/6pty/cZaew2w2+66ER3rtR5frCgso5CsZ/bYUC2NRbyZ9Lp+SOCKW2I6W+
+VA4JFcxh4+zFdqWonYurnmc7nc7u8JHNdSGeNA/
BvN1SRCLJRTZsj2bFkuP6rqRxLLlxAKmkMdvpZ6LRHSEcp9eAOlSirDxtoSUh5QTnii+va8H3igc/
Ikqi4Y2kYR8UVvm9p63+Wm6CqpXC5LbU6P64SyvN8TVqj6gc6qywgLq6/OF/O1MLPmTDkTqdGqe8q3GjrrIvCY3j3jti
+lxcOYOzdlWKJ1VY2HA+qUzLRu1PnpvDlkFq5shh2dyE3NGAbjACTvDTpdK/j9DXPzzJ0bIEuIo/
gv07PqFpIzsHXauxEhh6npIoz0QOdAsIB6yetdsid2cMG0zgr1VSd1Ilqv45fhsvqJgqh/
Nf8qbKQ3JxrBCGXE1q6c8gYs57aQpY53nUuOifZ0pbivxAcnWLh3M5QvzEcZrgc
+ZXQAtFgJhg0iTqWG91Xld4JfH4Gw4OdOJ5iOzRU87ac7FM4nq5NJ99sZyrdhSw1EA1FKOcaFkukNRkjv9K/Tx3JPPF5VBicgBOZ/
7jzvmO2JHf8wgwiZ
+eP95KWOOG7h77YWFl79JpceTVv3X3dSZwRoF53IPbu7l4iDkBwMWizqSIYBWPSAMQaAnQzjnBN8XPHLNNU6S4zACVxgSQyDExjdUOByGw
BxPvAWlmkxigNsP8rXujoncG6u6HCbwDKE1HdHXd4oe/JNc4+Ogy/
TYr3TXpy7iGkrFJF76xbZe26mrifSCIF1by0w6E5bGWBxfy0wcdr6+b/e3+pQg1dTkx5RAAAAAElFTkSuQmCC') no-repeat 1px 3px;
color:rgba(100%,100%,100%,0.01);
letter-spacing:10px;
overflow:hidden;
margin:3px 3px 0;
padding:5px 1px 1px;
}

Inline the crap out of it.

CSS, JavaScript, images
all belong in the html file.
http://www.flickr.com/photos/mllopart/4764295496

?


1. Store data & assets locally

2. Defer work


Web Storage, Web SQL Database, IndexedDb

<html manifest="https://mail.google.com/mail/mu/manifest">

CACHE MANIFEST
# AppName: superpudu
# User: youremail@gmail.com
# Version: 505718b088be23a8
NETWORK:
/
* Manifest version control
//www.google.com

NETWORK:
http://www.google.com/csi
Single page app - implictly cached
https://www.google.com/csi
http://ssl.gstatic.com/m/og/s
https://ssl.gstatic.com/m/og/s
http://remysharp.com/simple-offline-application/

This next bit is a bit of a mind fuck.

http://www.flickr.com/photos/home_of_chaos/4887724408

A module name?

Commented out JavaScript?

function loadModule(id) {
var codeElement = document.getElementById(id),
code = codeElement.innerHTML;
eval(stripOutCommentBlock(code));
}

function stripOutCommentBlock(str) {
return str.replace(//*/, '').replace(/*//, '');
}

"200k of JavaScript held within a block
comment adds 240ms during page load,
whereas 200k of JavaScript that is parsed
during page load added 2600 ms."

http://googlecode.blogspot.com/2009/09/gmail-for-mobile-html5-series-reducing.html

http://www.flickr.com/photos/home_of_chaos/4887724408

1. Inline as much as you can

2. Defer work as much as possible

3. Be prepared to get creative

JavaScript Libraries?

http://www.flickr.com/photos/seeminglee/4556156477

This is all the source code
you need to start your
project with:

For more information, see vapourjs.org

Titbits
(or tidbits if we're in the states)

http://www.flickr.com/photos/baerchen57/5425094251

http://cubiq.org/iscroll-4

http://jquerymobile.com/gbs

debugging

http://www.flickr.com/photos/kittenwants/1252109309

http://jsconsole.com

Remote mobile console - works on the real devices!

readability.com
"We hope you enjoy this update to Readability. It’s
100% web technology and 100% approval-free and
we’re really proud of it. This release highlights the
kind of ﬁrepower behind Readability. The team put
this together in two weeks. It’s a testament to
building applications based upon web standards—
effective, cross-device web applications can be
built in a fraction of the time of a native app, and
be provided without restriction."

http://blog.readability.com/meet-the-new-readability-mobile/

If you find you're writing lots of
plugins for PhoneGap, etc, to support
the device: then you're better off
with using the native language.

Just because you can,
doesn't mean you should.

http://www.flickr.com/photos/nebulaskin/126973678

Otherwise: rock on.
@rem

leftlogic.com/tour
HTML5, jQuery for Designers
& Node workshops

Developing for Mobile

Recommended

More Related Content

What's hot (20)

Viewers also liked (6)

Similar to Developing for Mobile (20)

More from Remy Sharp (19)

Recently uploaded (20)

Developing for Mobile