Development For The New Mobile Web

Development for the New Mobile WebNew

As performed by Fred LeBlanc

Wednesday, March 10, 2010

Development for the New Mobile Web

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

Boatload of Know-How

New- or -

As performed by Fred LeBlanc

Great, And You Are…?

‣ In a word: Fred

‣ Graduated from NEIA in ’04 With highest honors, baby!

‣ I’ve been doing this stuff 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 stuff 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...

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

‣ An iPhone?‣ An Android Phone?‣ A Palm Pre or Pixi?

‣ A BlackBerry?‣ A Nokia?

Stop Me If You’ve Heard This One…

“It’s just a smaller, stripped down version of

our website.”“We’ll just throw a

mobile stylesheet on it.That’s good enough.”

“I thought the new phones could view the

web just like on a desktop computer.”

“Why bother? We don’t want people looking at

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...

Look up shipping on item I might buy onlineLook up store hours/address I want to visit

Review a product descriptionLook up product reviews

Check status of online orderLook for retailer/product coupons

Check if in-store pickup is availableCheck if price is a good deal

Purchase product after seeing it in-storePurchase product after not available in-store

Purchase product without seeing itCheck status of recently-submitted rebate $#%

$%%$%%

!#%!"%

#&%#!%#!%#'%

'$%"%%"%%

1,959 Smartphone owners asked

source: compete.com, from Q3 of 2009

How often do you perform each of the following shopping-related activities on your smartphone while shopping and away from your computer?

Let’s Say You’re a Store...

Look up shipping on item I might buy onlineLook up store hours/address I want to visit

Review a product descriptionLook up product reviews

Check status of online orderLook for retailer/product coupons

Check if in-store pickup is availableCheck if price is a good deal

Purchase product after seeing it in-storePurchase product after not available in-store

Purchase product without seeing itCheck status of recently-submitted rebate $#%

$%%$%%

!#%!"%

#&%#!%#!%#'%

'$%"%%"%%

1,959 Smartphone owners asked

source: compete.com, from Q3 of 2009

How often do you perform each of the following shopping-related activities on your smartphone while shopping and away from your computer?

Look up store hours/address I want to visit

Look up product reviews

Look for retailer/product coupons

A Tale of Two Cities

‣ I needed a chair mat,

& Their Mobile Presence

figure 1: chair mat

A Tale of Two Cities & Their Mobile Presence

‣ I needed a chair mat, and I knew that Staples was the closest office-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

officemax.com

officedepot.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

‣ “The iPhone obsession,” posted February 8

‣ 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

PPK, iPhones & Putting Things in Orifices…

2009 Smartphone SalesWorldwide, numbers in millions.

source: communities-dominate.blogs.com

Everyone Else35

Nokia68

Apple25

Smartphone OS Stats

source: communities-dominate.blogs.com

Other10%

Android4%

WinMo6%

BlackBerry20%

Symbian45%

iPhone15%

Again, Worldwide

Just Like the Desktop Web…

‣ Remember IE6?

‣ CSS3 & 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 6, 7, 8‣ Firefox 2, 3, 3.5, 3.6‣ Safari 3, 4‣ Chrome 3, 4‣ Opera 9.5, 10

Actively in use today.Mobile Browsers

Actively in use on mobile devices today.

‣ jB5‣ Polaris‣ Kindle‣ Android‣ webOS‣ BlackBerry‣ Blazer‣ Firefox for Mobile‣ IE Mobile‣ Iris‣ Myriad‣ NetFront‣ Nokia Series 40‣ Obigo‣ Opera Mobile‣ PSP Web Browser‣ Safari‣ Skyfire Mobile

‣ NetSailor‣ uZard Web‣ Vision Mobile‣ Browser for S60

Actively in use today.Mobile Browsers

Actively in use on mobile devices today.

‣ jB5‣ Polaris‣ Kindle‣ Android‣ webOS‣ BlackBerry‣ Blazer‣ Firefox for Mobile‣ IE Mobile‣ Iris‣ Myriad‣ NetFront‣ Nokia Series 40‣ Obigo‣ Opera Mobile‣ PSP Web Browser‣ Safari‣ Skyfire Mobile

‣ NetSailor‣ uZard Web‣ Vision Mobile‣ Browser for S60

‣ BOLT‣ Deepfish‣ IbisBrowser‣ JOCA‣ Links2‣ Minimo‣ Opera Mini‣ Pixo‣ Skweezer‣ Steel‣ Teashark‣ ThunderHawk‣ UCWEB‣ WinWAP

…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

‣ CSS3, great JS rendering (on mobile too)

‣ In Mobile:‣ Safari (iPhone)‣ Android‣ webOS (Palm)‣ Iris (BlackBerry)

‣ Myriad (next version)‣ Nokia Series 40‣ Web Browser for S60

‣ But...

There’s No “Webkit on Mobile”

‣ PPK compared 10 different WebKit versions (sans swearing this time)

‣ All were different from one another!

figure 2: Fred, angry about this

“There is No Mobile Webkit”

‣ PPK compared 10 different WebKit versions (sans swearing this time)

‣ All were different 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

different mobile devices?

‣ Remember that your mobile site is a different experience than your desktop site

‣ Keep informed, read blogs, try things out; things are constantly evolving

Designers Need to Know Too

‣ “A finger 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 first

‣ 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 differences are there, but not impossible to work with)

‣ Both can do geolocation

‣ Let’s make an app!Wednesday, March 10, 2010

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?<script type="text/javascript">

if (navigator.geolocation) {// let's get our location on!

} else {// no idea what you're talkin' aboutalert("Uh, sorry. No dice.");

}</script>

Step 2: Watch’em<script type="text/javascript">

var watch;

if (navigator.geolocation) {// let's get our location on!watch = navigator.geolocation.watchPosition(checkIt);

} else {// no idea what you're talkin' aboutalert("Uh, sorry. No dice.");

}</script>

var shortCircuit = false;

// called by the geolocation functionfunction checkIt(position) {

if (position.coords.accuracy < 500) {navigator.geolocation.clearWatch(watch);

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

shortCircuit = true;}

}</script>

listing 1: what gets passed in as “position”

position = {coords: {

latitude: 42.3667,longitude: -71.0596,accuracy: 400,altitude: null,altitudeAccuracy: null,heading: null,speed: null

var shortCircuit = false;

// called by the geolocation functionfunction checkIt(position) {

if (position.coords.accuracy < 500) {navigator.geolocation.clearWatch(watch);

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

shortCircuit = true;}

}</script>

listing 2: some jQuery/ajax magic

$.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(":(");}

Step 3: From Here to There<script type="text/javascript">

Number.prototype.toRad = function() {return this * Math.PI / 180;

function kmToMiles(km) {return km * 0.621371192;

}</script>

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; // kmvar 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>

function distance(from, to) {var lat1 = from[0], lat2 = to[0];var lon1 = from[1], lon2 = to[1];var R = 6371; // kmvar 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));

</script>

It's OK.Deep breaths.

Google “Haversine JavaScript”

// trust me, it calculates the distance between pointsfunction distance(from, to) {

var lat1 = from[0], lat2 = to[0];var lon1 = from[1], lon2 = to[1];var R = 6371; // kmvar 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));

</script>

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

alert(":(");}

Step 4: Show’em!<script type="text/javascript">

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

‣ Rounds the distance to the nearest mile

‣ Shows a difference reference graphic depending on what segment was picked (they’re labeled 0.jpg, 1.jpg, 2.jpg, etc.)

‣ If distance is less than one mile, I tell you that you’re “right next to me”

‣ Uses JavaScript animations :)

// 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

Those Screens Again

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

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.comiPhone like interface with HTML & JavaScript

‣ webOS — http://palm.comApps are built in HTML & JavaScript

‣ PhoneGap — http://phonegap.comBuild 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! :)

@fredleblanc on Twitterhttp://fredhq.com on the web

fred@fredhq.com via email

Connect with me:

Development For The New Mobile Web

Design

Creative mobile app development new york

Mobile app development: new technologies & trends 2016

Cross-Platform Mobile Development - DiVA portal664680/FULLTEXT01.pdf · Cross-Platform Mobile Development: ... development serves the best for cross-platform development. ... mobile

New product development (solar base mobile)

Integrate new mobile technologies with IBM Tivoli … · Integrate new mobile technologies with IBM Tivoli Netcool Performance Manager for Wireless Development Toolkit. ... Counter

Windows Phone App Development,ios Mobile Apps Development,Android Mobile Apps Development,Blackberry Mobile Apps Development,Windows Mobile Apps Development

Mobile Devices and the New Media: Trends, Standards, and ... Files/NIITW… · Mobile Devices and the New Media: Trends, Standards, and Development TECHNICAL SPECIFICATION GUIDE |

Mobile App Development by Mobile Development Experts

The new approach on government mobile apps development

New to Mobile Learning Course Development: Getting Started Garin Hess

Mobile Development Documentation · Mobile | Introduction to Mobile VR Development | 5 Introduction to Mobile VR Development Welcome to mobile application development for Gear VR!

Tutorial: iPhone Application Development using …infocenter.sybase.com/.../sup_tutorials_iphonecodegen.pdfTutorial: Mobile Business Ob-ject Development Create new MBOs Replication-based

Development of New Mobile Local Switch(NMLS) · Development of New Mobile Local Switch (NMLS) A new mobile local switch was developed in response to the rapid increase in the number

Dynamic Channels: a New Development Methodology for Mobile

Mobile for Development: a diverse stakeholder mix · 2016-02-03 · 5 New Street Square, New Fetter Lane, London, EC4A 3BF, UK Mobile for Development: a diverse stakeholder mix Mobile

Diebold’s New InnovationsDiebold’s New Innovations: Mobile Services George Eubank, Sr. Business Development Manager, Mobile Agenda •Background •Video of Millennial ATM Concept

Mobile development with Apache OFBiz · Mobile development For the purposes of this talk “mobile development” means “mobile web development” The languages and APIs for native

Mobile Apps Development Company New York -

New mobile app development company in dubai

New mobile apps development in dubai