MOBILE CLOUD CHAMPION

Chris LoveChief Mobility OfficerTellago Inc.ProfessionalAspNet.com@ChrisLove

TELLAGO

MOESION Tellago Studios Team Development Mobile First

Moesion.com

BOOKS

Coming Soon…

REFERENCES Mobile Web Books

Programming the Mobile Web http://amzn.to/bZMOch Mobile Web Development http://amzn.to/9cvDoE Mobile Design and Development http://amzn.to/hh8cPd Beginning iPhone & iPad Web Apps http://amzn.to/tHAAOL

I Y MOBILE WEB

I Can Be A Little Dogmatic

I Practice What I Preach

I Focus on User First

I Acknowledge Native is the Current

Darling

My Content Crosses Boundaries

What Do Users Want?

WHAT DO USERS HAVE

Mobile Devices Are Prevalent Around the

World

SmartPhones/Devices Becoming

Common

Mobile Data Plans (3/4G)

HTML 5 Is Here, Embrace It ;)

RECENT PHONE DISTRIBUTIONS

http://bit.ly/vqrBeI

MILLIONS!!!!

RECENT PHONE DISTRIBUTIONS

DATA PLAN CONSUMPTION

http://mashable.com/2010/11/08/u-s-mobile-data-traffic-exabyte/

NATIVE V MOBILE WEB

Slightly More Access via Browser than App 36.4% v 34.4% http://bit.ly/h2XZ9F

Facebook & Twitter’s Top Mobile Clients are

their Mobile Web Sites http://bit.ly/myOSYc http://bit.ly/9FD6D9

USER EXPECTATIONS

“As handsets change, so do mobile consumption and usage patterns. Voice is becoming less relevant, and carriers and their marketing and content partners have transitioned to a focus on data.”

FinChannel.com

http://www.finchannel.com/index.php?option=com_content&task=view&id=70574&Itemid=99999999

“Among U.S. mobile phone users, in May 2010 65.2 percent sent a text message to another phone, 31.9 percent used their phone’s browser, 30 percent used/downloaded applications, 22.5 percent played mobile games and 20.8 percent accessed a social networking site or blog.”

MobileMarketer.com

http://www.mobilemarketer.com/cms/news/research/7342.html

“The key thing for marketers is the combination of larger screens and the touch Web really shouldn’t be underestimated,” Mr. Elkin said. “There are much higher interaction rates for the Web and apps among smartphone owners, and on a bigger canvas we expect those deltas to go even higher.”

MobileMarketer.com

http://www.mobilemarketer.com/cms/news/research/7342.html

DON’T FORGET TABLETS

UNDERSTAND THE LANDSCAPE

Several Browsers Opera, Safari, IE, FireFox, many others you

never heard of Proxy Browsers

Opera Mini

OPERA“Opera Mobile has been installed on 125

million smartphones since 2004” Programming the Mobile Web

WINDOWS PHONE 7 IE 9 Like Desktop

Supports Basic HTML5, CSS3, Canvas, Media Tag Stuff

GPU Speed Does Not Support Touch Does Not Support Input Types

http://bit.ly/ij3RAj http://bit.ly/kYOZ5W

GRADING BROWSERS

http://haz.iohttp://html5test.com

Assume Modern Smart Phones

Most Are Webkit & Support Most HTML5 Features

Confidently Assume No Feature Phones

What Choices Do We Have?

YOU KNOW .NET OR A WEB DEVELOPER

Feeling Out of Place? iOS Native Applications Require Objective-C & a Mac

Android Uses Java WP Does Silverlight

WHY CARE? Reach Large

Consumer Market Consumer

Engagement Online Commerce

Personal Devices in the Enterprise Line of Business

OPTIONS True Native

Development MonoTouch &

MonoDroid Hybrid Applications HTML5 Web

Applications

GOOD ARCHITECTURE

Phones, Tablets & Desktop

Service/BLL/DAL

How To Design

Modern UX?

MOBILE FIRST“designing for mobile first not only prepares you for the explosive growth and new opportunities on the mobile internet, it forces you to focus and enables you to innovate in ways you previously couldn’t.”

Luke Wroblewski

MOBILE FIRST

7342156

DETERMINE CONTENT Define Use Cases

Order Cases by Most Frequent for Mobile

Make Cases Successful within 3 clicks

Always Offer Link to Desktop Site

Determine if User Location Matters

DETERMINE CONTENT

http://bit.ly/aD1dr3

CONTEXT Where Is The User Why are They on Your Site What are they looking for What can you offer for

mobile user to solve problem

Where will the user be accessing the site

Let’s Talk a Little Code

Now

META TAGS <meta name="description" content=""> <meta name="author" content=""> <meta name="HandheldFriendly" content="True"> <meta name="MobileOptimized" content="320"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="apple-touch-icon" href="@Url.Content("~/apple-touch-icon.png")"/> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="@Url.Content("~/img/h/apple-touch-icon.png")"> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="@Url.Content("~/img/m/apple-touch-icon.png")"> <link rel="apple-touch-icon-precomposed" href="@Url.Content("~/img/l/apple-touch-icon-precomposed.png")"> <link rel="shortcut icon" href="@Url.Content("~/img/l/apple-touch-icon.png")"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <link rel="apple-touch-startup-image" href="@Url.Content("~img/l/splash.png”)">

HTML5 BOILERPLATE

http://html5boilerplate.comhttp://html5boilerplate.com/mobile/

TOUCH ICONS Allows You to Set the

Home Screen Icon Comparable to

favicon Apple Convention Supported on Most

Android Platforms

ADD TO HOME SCREEN

Prompts the User to Add The App To the iOS Home Screen

http://bit.ly/fi1wqp

APPLE-MOBILE-WEB-APP-CAPABLE

Allows You To Hide Mobile Safari Chrome

Gives You Native App-Like Experience iOS Only At This Point Does use a Different JS Engine Than

Safari

http://bit.ly/ilKFKT

APPLE-MOBILE-WEB-APP-STATUS-BAR-STYLE Allows You to Hide

Status Bar @ The Top of The Screen or Set The Color.

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

http://bit.ly/9Mgv0y

UNDERSTAND THE VIEWPORT Viewable Area on

Device May actually be very

wide iPhone is actually

980pixels wide Internet Explorer Assumes

1024 pixels wide

http://bit.ly/e18svU

SET THE VIEWPORT•MetaTag• Width• Height• Initial-scale• User-scalable• Minimum-scale• Maximum-scale

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>

http://tinyurl.com/wp7viewport

LEVERAGE HTML5 Semantics CSS3 is AWESOMIER New Form Input Types Help New Form Input Attributes

Really Help Offline Storage Media Hardware Access

INPUT TYPES HTML5 Adds Many New Input Types and

Attributes Telephone, Number, URL, E-Mail, etc autocapitalize, autocomplete,

placeholder, required…

INPUT TYPES

UNDERSTAND CSS3 Animations Gradients Transforms Shadows Rounded Corners Media Queries So Much More!!

TRANSITIONS 2D Transformations Shadows. Rounded Corners Etc 3D Keyframe Animations! CSS3 Animations w/jQuery Fallbacks

http://bit.ly/oBDnko

ANIMATIONS Add Motion, Life & Personality Make It Clear Where to Focus Purposeful Provide Confidence Reinforce the Way The System Works

SINGLE PAGE SITES Use AJAX to Transition Between Content Use HashTags to Track State jQuery BBQ plugin

http://bit.ly/abippr History.js

http://bit.ly/d6razs Allows Transition Effects jQuery Mobile, jqTouch & Sencha

Leverage

TOUCH EVENTS

touchStart

touchEnd

touchMove

touchEnter

touchLeave

touchCance

l

http://tinyurl.com/webtch

TOUCH CONSIDERATIONS Fingers Are Fat 20px Spacing Primary Items Min 40px W &H Provide Quick Feedback of Touched

Item Include Auto-Clear Feature for Text

Inputs

TOUCH FIRST LAYOUTRecommended size

7x7mm

Optimized for accuracy9x9mm

Optimized for small size5x5mm

Each target has 2mm padding

touch target

padding

HOW TARGET SIZE RELATES TO ERROR RATES

WINDOWS 8 TOUCH

RETHINK LAYOUT

TOUCH

Enterprise Mobility

ENTERPRISE MOBILITY IS HOT

AND OBVIOUS

ENTERPRISE MOBILITY ???

How Do I Manage

Devices?

And Data?

And Provision Apps?

What About Identity &

Security?

THESE GUYS

TRADITIONAL SOLUTION

Mobile Enterprise Server

Apps

MDM

Identity

Data

Provisioning

LOB App

LOB App

LOB App

Corporate Network

Tracking

CONSUMERIZATION OF IT

GOOD LUCK WITH APPLE’S APPROVAL PROCESS

LET THE CLOUD DRIVE US

CLOUD BASED ENTERPRISE MOBILITY PLATFORM

Mobile Enterprise Service

Apps

MDM

Identity

Data

Monitoring

LOB AppLOB AppLOB App

Corporate Network

Provisioning

ADVANTAGES Simple

Global

Multi-Tenant

Elastic

Easy To Manage

HTML5 Friendly

Scalable

3rd Party Tools

Cloud Services

INFRASTRUCTURE AS A SERVICE