Development For The New Mobile Web

Development for the
New Mobile Web
New
As performed by Fred LeBlanc

Wednesday, March 10, 2010

Development for the
New Mobile Web
New
- or -

Attacking Smartphones with HTML-Judo Chops,
CSS-Roundhouse Kicks, JavaScript Death Grips & a
Boatload of Know-How

As performed by Fred LeBlanc


Great, And You Are…?
‣ In a word: Fred
‣ Graduated from NEIA in ’
With highest honors, baby!

‣ I’ve been doing this stuﬀ for years
‣ I’ve worked as both a developer and a
project manager on (mobile) web projects
‣ Currently a Senior Developer @ Hill Holliday


Neat, What Else?

‣ I oversaw development of Motorola’s
Solutions Catalog — both desktop- and
mobile-versions
‣ I’ve consulted on several other (not yet
released) mobile web projects
‣ I build random web stuﬀ all the time…


For Example

‣ iPhone and Android people in the audience:
visit AmINearFred.com
‣ I’m going to show you how to make this…
It’s easier than you’d think!


Before the fun stuff,
we have to go over a
couple of things.


Audience Questions!

‣ How many people have mobile phones?
‣ How many have mobile Internet access?
‣ How many have...
‣ An iPhone? ‣ A BlackBerry?
‣ An Android Phone? ‣ A Nokia?
‣ A Palm Pre or Pixi?

‣ What kind of things do you use your mobile
Internet access for?

Stop Me If You’ve
Heard This One…
“It’s just a smaller,
stripped down version of “We’ll just throw a
our website.” mobile stylesheet on it.
That’s good enough.”

“I thought the new
phones could view the “Why bother? We don’t
web just like on a want people looking at
desktop computer.” our site on their phones
anyway.”


You don’t use your
phone the same way
that you use your
desktop/laptop.


You don’t use your
phone the same way
that you use your
desktop/laptop.
(Not yet, anyways.)


Let’s Say You’re a Store...
How often do you perform each of the following shopping-related activities
on your smartphone while shopping and away from your computer?

Look up shipping on item I might buy online %
Look up store hours/address I want to visit %
Review a product description %
Look up product reviews %
Check status of online order %
Look for retailer/product coupons %
Check if in-store pickup is available %
Check if price is a good deal %
Purchase product after seeing it in-store %
Purchase product after not available in-store %
Purchase product without seeing it %
Check status of recently-submitted rebate %

, Smartphone owners asked

source: compete.com, from Q of

A Tale of Two Cities & Their Mobile Presence

‣ I needed a chair mat,


ﬁgure 1: chair mat



‣ I needed a chair mat, and I knew that Staples
was the closest oﬃce-supply store near me
‣ I was already in my car, our for a drive
‣ So I pulled out my iPhone and headed to
Staples.com



?

staples.com


staples.com


oﬃcemax.com


oﬃcedepot.com

Progressive
enhancement
is awesome.


“Progressive enhancement is a strategy for web
design that emphasizes accessibility, semantic
markup, and external stylesheet and scripting
technologies. Progressive enhancement uses
web technologies in a layered fashion that
allows everyone to access the basic content
and functionality of a web page, using any
browser or Internet connection, while also
providing those with better bandwidth or
more advanced browser software an enhanced
version of the page.”
— Wikipedia


PPK, iPhones & Putting
Things in Orifices…
‣ “The iPhone obsession,” posted February
‣ We don’t all have iPhones
‣ In fact, most of us don’t
‣ Aside from the swearing, he makes some
great points
‣ But there’s a lot of swearing in there


2009 Smartphone Sales
Worldwide, numbers in millions.

Apple
Everyone Else
25
35

HTC
8

RIM Nokia
35 68

source: communities-dominate.blogs.com

Smartphone OS Stats
Again, Worldwide

Other iPhone
10% 15%
WinMo
6% Android
4%

BlackBerry
20%
Symbian
45%

source: communities-dominate.blogs.com

Just Like the Desktop Web…

‣ Remember IE ?
‣ CSS & progressive enhancement
‣ We build for everyone, but we give those on
new browsers the best experience
‣ Mobile is the same way…


…Only It’s Harder…
Desktop Browsers
Actively in use today.
‣ Internet Explorer , ,
‣ Firefox , , . , .
‣ Safari ,
‣ Chrome ,
‣ Opera . ,


Desktop Browsers Mobile Browsers
Actively in use today. Actively in use on mobile devices today.
‣ Internet Explorer , , ‣ jB ‣ NetSailor
‣ Firefox , , . , . ‣ Polaris ‣ uZard Web
‣ Safari , ‣ Kindle ‣ Vision Mobile
‣ Chrome , ‣ Android ‣ Browser for S
‣ Opera . , ‣ webOS
‣ BlackBerry
‣ Blazer
‣ Firefox for Mobile
‣ IE Mobile
‣ Iris
‣ Myriad
‣ NetFront
‣ Nokia Series
‣ Obigo
‣ Opera Mobile
‣ PSP Web Browser
‣ Safari
‣ Skyﬁre Mobile


Desktop Browsers Mobile Browsers
Actively in use today. Actively in use on mobile devices today.
‣ Internet Explorer , , ‣ jB ‣ NetSailor ‣ BOLT
‣ Firefox , , . , . ‣ Polaris ‣ uZard Web ‣ Deepﬁsh
‣ Safari , ‣ Kindle ‣ Vision Mobile ‣ IbisBrowser
‣ Chrome , ‣ Android ‣ Browser for S ‣ JOCA
‣ Opera . , ‣ webOS ‣ Links
‣ BlackBerry ‣ Minimo
‣ Blazer ‣ Opera Mini
‣ Firefox for Mobile ‣ Pixo
‣ IE Mobile ‣ Skweezer
‣ Iris ‣ Steel
‣ Myriad ‣ Teashark
‣ NetFront ‣ ThunderHawk
‣ Nokia Series ‣ UCWEB
‣ Obigo ‣ WinWAP
‣ Opera Mobile
‣ PSP Web Browser
‣ Safari
‣ Skyﬁre Mobile


…And More Expensive

‣ For desktop browsers, I can get all of them on
one machine relatively cheaply
‣ You can get one or two mobile browsers per
mobile phone
‣ Contracts expensive, emulators unreliable
‣ Check out PerfectoMobile.com
‣ Do we focus on rendering engines?


Webkit, YAAAAY :)

‣ Used by Safari & Chrome on the desktop
‣ CSS , great JS rendering (on mobile too)
‣ In Mobile:
‣ Safari (iPhone) ‣ Myriad (next version)
‣ Android ‣ Nokia Series
‣ webOS (Palm) ‣ Web Browser for S
‣ Iris (BlackBerry)

‣ But...

There’s No “Webkit on Mobile”

‣ PPK compared diﬀerent WebKit versions
(sans swearing this time)

‣ All were diﬀerent from one another!


ﬁgure 2: Fred, angry about this


“There is No Mobile Webkit”

‣ PPK compared diﬀerent WebKit versions
(sans swearing this time)

‣ All were diﬀerent from one another!

‣ http://quirksmode.org/webkit.html


So What Can We Do?

‣ We do our best
‣ Use progressive enhancement
‣ Convince family & friends to each get
diﬀerent mobile devices?
‣ Remember that your mobile site is a diﬀerent
experience than your desktop site
‣ Keep informed, read blogs, try things out;
things are constantly evolving

Designers Need to Know Too

‣ “A ﬁnger is not a mouse pointer.”
— The Palm User Interface Guidelines

‣ Provide plenty of room around links for
“tapping”
‣ Reorganize the content so that what a mobile
user might be looking for is ﬁrst
‣ Always provide a link to your full site from
your mobile site


So...
we cool?


The Other Side of the Fence

‣ Android & iPhone are growing in the US
‣ Developing an iPhone app & an Android app
independently are time-consuming and
expensive
‣ Both use WebKit (the diﬀerences are there,
but not impossible to work with)
‣ Both can do geolocation
‣ Let’s make an app!

Exploring AmINearFred.com

‣ Two parts: your side and my side
‣ My side finds my location and sets it to a file
‣ Your side finds your location and compares it
to my last known whereabouts
‣ Some quick math, and we display the
distance, a visual representation of that
distance & something quirky for the user


The Screens


The Plan & Concept

1. Check to make sure user can be located
2. Watch their location until their GPS is
accurate enough for our liking
3. Once accurate enough, determine the
distance between us
4. Render the display


Will everyone
please put on their
geek hats?


Step 1: Can I Find You?
<script type="text/javascript">
if (navigator.geolocation) {
// let's get our location on!

} else {
// no idea what you're talkin' about

}
</script>


Step 1: Can I Find You?

} else {
alert("Uh, sorry. No dice.");
}
</script>


Step 2: Watch’em
var watch;

watch = navigator.geolocation.watchPosition(checkIt);
} else {
alert("Uh, sorry. No dice.");
}
</script>


Step 2: Watch’em
var shortCircuit = false;

// called by the geolocation function
function checkIt(position) {
if (position.coords.accuracy < 500) {
navigator.geolocation.clearWatch(watch);

if (shortCircuit === false) {
$.ajax(); // make ajax call
}

shortCircuit = true;
}
}
</script>


position = {
coords: {
latitude: 42.3667,
longitude: -71.0596,
accuracy: 400,
altitude: null,
altitudeAccuracy: null,
heading: null,
speed: null
}
};

listing 1: what gets passed in as “position”


$.ajax({
url: 'coords.txt',
dataType: 'text',
success: function(data) {
var from, to, distance;
from = [position.coord.latitude, position.coords.longitude];
to = data.split(',');
to = [parseFloat(to[0]), parseFloat(to[1])];
dist = parseInt(distance(from, to), 10); // step 3!
showStuff(dist); // step 4!
},
error: function(data) {
alert(":(");
}
});

listing 2: some jQuery/ajax magic


Step 3: From Here to There
Number.prototype.toRad = function() {
return this * Math.PI / 180;
}

function kmToMiles(km) {
return km * 0.621371192;
}
</script>


function distance(from, to) {
var lat1 = from[0], lat2 = to[0];
var lon1 = from[1], lon2 = to[1];
var R = 6371; // km
var dLat = (lat2 - lat1).toRad();
var dLon = (lon2 - lon1).toRad();
var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
Math.cos(lat1.toRad()) * Math.cos(lat2.toRad()) *
Math.sin(dLon/2) * Math.sin(dLon/2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));

return R * c; // in km :)
}
</script>


It's OK.
Deep breaths.


Google “Haversine JavaScript”


// trust me, it calculates the distance between points
function distance(from, to) {
var lat1 = from[0], lat2 = to[0];
var lon1 = from[1], lon2 = to[1];
var R = 6371; // km
var dLat = (lat2 - lat1).toRad();
var dLon = (lon2 - lon1).toRad();
var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
Math.cos(lat1.toRad()) * Math.cos(lat2.toRad()) *
Math.sin(dLon/2) * Math.sin(dLon/2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));

return R * c; // in km :)
}
</script>


$.ajax({
url: 'coords.txt',
dataType: 'text',
success: function(data) {
var from, to, distance;
from = [position.coord.latitude, position.coords.longitude];
to = data.split(',');
to = [parseFloat(to[0]), parseFloat(to[1])];
dist = parseInt(distance(from, to), 10); // step 3!
showStuff(dist); // step 4!
},
error: function(data) {
alert(":(");
}
});

listing 2 again: remember this? what a fantastic slide!


Step 4: Show’em!
function showStuff(km) {
var dist = kmToMiles(km);
var use = 0;
var segments = [
{result: "Not at all.", upper: 1000000, lower: 1000},
{result: "I don't think so.", upper: 1000, lower: 500},
{result: "Not really, no.", upper: 500, lower: 150},
{result: "Meh, sorta.", upper: 150, lower: 75},
{result: "Kinda.", upper: 75, lower: 25},
{result: "Actually, yes!", upper: 25, lower: 2},
{result: "Yes yes, y'all.", upper: 2, lower: 0}
];

// ...


Step 4: Show’em!
// ...

for (var i=0; i < segments.length; i++) {
var thisSeg = segments[i];

if (thisSeg.upper > dist && this.Seg.lower <= dist) {
use = i;
break;
}
}

// you're now ready to display things! you know:
// - distance (in miles)
// - segment to use (with wordy description)
// - value of 'i' you ended up with
}
</script>

Stuff AmINearFred.com Does
// you're now ready to display things! you know:
// - distance (in miles)
// - segment to use (with wordy description)
// - value of 'i' you ended up with

‣ Rounds the distance to the nearest mile
‣ Shows a diﬀerence reference graphic
depending on what segment was picked
(they’re labeled .jpg, .jpg, .jpg, etc.)
‣ If distance is less than one mile, I tell you that
you’re “right next to me”
‣ Uses JavaScript animations :)

Those Screens Again


Web App Mode
<meta name="viewport"
content="width=device-width;
initial-scale=1.0;
maximum-scale=1.0;
user-scalable=0;" />

<meta name="apple-mobile-web-app-capable"
content="yes" />

<meta name="apple-mobile-web-app-status-bar-style"
content="black" />


Finally, Add Your Icon
<link rel="apple-touch-icon"
href="/apple-touch-icon.png" />


See? That wasn’t so
bad, now was it?


Was it?


Going Even Further

‣ JQTouch — http://jqtouch.com
iPhone like interface with HTML & JavaScript
‣ webOS — http://palm.com
Apps are built in HTML & JavaScript
‣ PhoneGap — http://phonegap.com
Build native apps with HTML & JavaScript
for Android, iPhone & BlackBerry
‣ JavaScript Geolocation Code — http://
code.google.com/p/geo-location-javascript/

What We Learned Today

‣ Mobile development is hard & expensive, but
worth taking the time to do right
‣ Use progressive enhancement, because we
don’t all have iPhones
‣ Developing a web-based app is cheaper &
easier than making independent apps for
each phone
‣ You’re all right next to Fred


Time for questions
& applause.


Thank you! :)
Connect with me:
@fredleblanc on Twitter
http://fredhq.com on the web
fred@fredhq.com via email


Development For The New Mobile Web

Recommended

Recommended

More Related Content

More from Harvard Web Working Group

More from Harvard Web Working Group (20)

Recently uploaded

Recently uploaded (20)

Development For The New Mobile Web