Mobile Monday Austin: How the iPhone will forever change the Mobile Space

How the iPhone Will Forever Change the Mobile Spaceby Brian FlingMobile Monday Austin

.Web 1.0Proprietary

Walled Gardens

First to market

Brand-centered

Web 2.0Standards

Web Services

Web as a Platform

User-centered

Jargon Alert

Mobile 2.0The convergence of mobile services and web services. The promise of Mobile 2.0 is to add portability, ubiquitous connectivity and location-based services to enhance information and services found on the web.

10 Things I Learned at Mobile 2.0 2006

10 Things I Learned at Mobile 2.0 2006• #1 Mobile 2.0 = The web

10 Things I Learned at Mobile 2.0 2006• #1 Mobile 2.0 = The web• The mobile web browser is the next killer app

10 Things I Learned at Mobile 2.0 2006• #1 Mobile 2.0 = The web• The mobile web browser is the next killer app• Mobile Web Applications are the future

10 Things I Learned at Mobile 2.0 2006• #1 Mobile 2.0 = The web• The mobile web browser is the next killer app• Mobile Web Applications are the future• AJAX is the next frontier

10 Things I Learned at Mobile 2.0 2006• #1 Mobile 2.0 = The web• The mobile web browser is the next killer app• Mobile Web Applications are the future• AJAX is the next frontier• Rich Interactions kill battery life

10 Things I Learned at Mobile 2.0 2006• #1 Mobile 2.0 = The web• The mobile web browser is the next killer app• Mobile Web Applications are the future• AJAX is the next frontier• Rich Interactions kill battery life• The Mobile User Experience Sucks

10 Things I Learned at Mobile 2.0 2006• #1 Mobile 2.0 = The web• The mobile web browser is the next killer app• Mobile Web Applications are the future• AJAX is the next frontier• Rich Interactions kill battery life• The Mobile User Experience Sucks• Mobile Widgets are the next big thing

10 Things I Learned at Mobile 2.0 2006• #1 Mobile 2.0 = The web• The mobile web browser is the next killer app• Mobile Web Applications are the future• AJAX is the next frontier• Rich Interactions kill battery life• The Mobile User Experience Sucks• Mobile Widgets are the next big thing• The Carrier is the new “C” word

10 Things I Learned at Mobile 2.0 2006• #1 Mobile 2.0 = The web• The mobile web browser is the next killer app• Mobile Web Applications are the future• AJAX is the next frontier• Rich Interactions kill battery life• The Mobile User Experience Sucks• Mobile Widgets are the next big thing• The Carrier is the new “C” word• We are creators not consumers

.Mobile 1.0Proprietary

Walled Gardens

First to market

Brand-centered

Mobile 2.0Standards

Web Services

Web as a Platform

User-centered

We are at the precipice of the next generation of

THE WEB.

Two companies in particular are making that happen...

Will it happen? Or is it hype?

Change occurs because there is a gap between what is and what should be.

— Craig McCaw

the mythical“Future-Phone”

The iPhone

A Confession

The iPhone

From many perspectives the iPhone is not revolutionary.

Mobile Evolution

Basic Phones

Feature Phones

Smart Phones

iPhone

1990 2000 2010

Mobile Evolution

Basic Phones

Feature Phones

Smart Phones

iPhone

1990 2000 2010

Mobile Evolution

Basic Phones

Feature Phones

Smart Phones

iPhone

1990 2000 2010

Mobile Evolution

Basic Phones

Feature Phones

Smart Phones

iPhone

1990 2000 2010

Mobile Evolution

Basic Phones

Feature Phones

Smart Phones

iPhone

1990 2000 2010

But it is creating a revolution none-the-less.

Events

Billboard

Website

Auditory

KinestheticVisu

Word of Mouth

Print Ad

Mobile Device

QR Code

SMSMMS

Bluetooth

Notify

Send to Friend

WAP Site

Notify

WAP SiteWAP Site

Send to Friend

NotifyNotify

Send to Friend

Post WAP Site

Send to Friend

Notify

Send to Friend

Discuss

Send to Friend

Notify

Download

DownloadNotify

Notify

Send to Friend

Notify

The iPhone is the shape of things to come.

The iPhone is the first mobile DEVICE worthy of being

labeled “Mobile 2.0”

iPhone Strengths

iPhone Strengths1. Smart phone for the

masses

masses2. Flat-rate data plan

masses2. Flat-rate data plan3. Device sold and

supported outside the carrier

4. No subsidization

4. No subsidization5. Updatable software

6. Location awareness

6. Location awareness7. Resetting bandwidth

expectations

expectations8. Portable device

convergence

convergence 9. Web & mobile

standards

convergence 9. Web & mobile

standards10. Impact on developer

communities

iPhone sales reached 4M in the first 90 days, means around 2.5M in the last quarter, reaching almost 20% of the market share. Probably the Fastest ramp-up of any consumer electronics device known to mankind.

— Chetan Sharma

Apple estimates 10 million iPhones sold by the end of

70%complete

1147 Mobile Web Apps

Over 300 new mobile web apps in the last month alone.

The iPhone is shifting perceptions of what mobile

technology can do.

When we talk about iPhone, we’re really talking about

WEBKIT.

Nokia N95

Android

Look Familiar?

iPod Touch

The iPod touch is an “entirely new type of iPod,” one that Apple sees moving the iPod beyond its roots as a mere media player, becoming “the first mainstream Wi-Fi mobile platform.

—Peter Oppenheimer, Apple CFO

Over 22 million iPods sold in Q1 of 2008. Over 140 million iPods

sold in less than six years.

Mobile WebKit Features

Mobile WebKit Features• Supports all standard flavors of

XHTML• Supports CSS 1, 2 and a good deal of

CSS 3• Javascript (including Ajax)

CSS 3• Javascript (including Ajax)• This means complex layouts, styling

and interaction...

iPhone apps that grow on you.

Why Create Leaflets?

(Blog Post Why we made Leaflets)

We wanted to showcase

We wanted to showcase...the merger of Web 2.0 and Mobile 2.0

We wanted to showcase...the merger of Web 2.0 and Mobile 2.0...the use of web standards in mobile

We wanted to showcase...the merger of Web 2.0 and Mobile 2.0...the use of web standards in mobile...designing for the mobile context

We wanted to showcase...the merger of Web 2.0 and Mobile 2.0...the use of web standards in mobile...designing for the mobile context...mobile web best practices

We wanted to showcase...the merger of Web 2.0 and Mobile 2.0...the use of web standards in mobile...designing for the mobile context...mobile web best practices...designing for the iPhone

We wanted to showcase...the merger of Web 2.0 and Mobile 2.0...the use of web standards in mobile...designing for the mobile context...mobile web best practices...designing for the iPhone...rapid and iterative development

The Home Screen

Newsvine

New York Times

Home Icon XHTML

<div id="apps"> <ul> <li id="navSearch"><a href="search/">Search</a></li> <li id="navRSS"><a href="feeds/">Feeds</a></li> <li id="navNewsvine"><a href="newsvine">Newsvine</a></li> <li id="navLinks"><a href="applist/">App List</a></li> <li id="navEvents"><a href="upcoming/">Upcoming</a></li> <li id="navFlickr"><a href="flickr/">Flickr</a></li> <li id="navDelicious"><a href="delicious/">del.icio.us</a></li> <li id="navBaseball"><a href="scores/">Baseball</a></li> <li id="navNYT"><a href="nyt/">NY Times</a></li> <?php if ($_user): ?> <li id="navSettings"><a href="user/settings.php">Settings</a></li> <?php endif; ?> </ul> <div id="loading_status"><img id="loader" src="/media/images/loader.gif" border="0" alt="" /><span id="ltext">Loading icons...</span></div></div>

Home Icon CSS

#apps li { float: left; width: 56px; height: 56px; border: 1px hidden #666; -webkit-border-radius: 10px; text-align: center; background: #666 url(/media/images/button_glare.png) no-repeat; -webkit-box-shadow: 0px 1px 3px black; margin: 7px 10px 20px;}

#apps li a { text-decoration: none; color: #999; display: block; padding-top: 60px; font-weight: bold; font-size: 0.8em;}

li#navNewsvine { background: url(/media/images/button_glare.png) no-repeat, url(/media/images/home_newsvine_low.png) no-repeat; background-color: #005422;}

Newsvine Leaflet CSS

Controls CSS

Using CSS3

+ 3 Kilobytes

Using CSS3

+ 320 bytes

+ 3 Kilobytes

Using CSS3

+ 320 bytes

+ 3 Kilobytes

-webkit-border-radius: 10px;+

Using CSS3

+ 320 bytes

+ 3 Kilobytes

Using CSS3

+ 320 bytes

+ 3 Kilobytes

A Successful Experiment

A Successful Experiment• The entire application was built between WWDC

and the iPhone launch (3 weeks)

and the iPhone launch (3 weeks)• TechCrunch—“Must-Have iPhone App”

and the iPhone launch (3 weeks)• TechCrunch—“Must-Have iPhone App”• 105,000 hits the first week to website

and the iPhone launch (3 weeks)• TechCrunch—“Must-Have iPhone App”• 105,000 hits the first week to website• 12,000 unique app users the first week

and the iPhone launch (3 weeks)• TechCrunch—“Must-Have iPhone App”• 105,000 hits the first week to website• 12,000 unique app users the first week• 7,000 recurring app users per week

and the iPhone launch (3 weeks)• TechCrunch—“Must-Have iPhone App”• 105,000 hits the first week to website• 12,000 unique app users the first week• 7,000 recurring app users per week• Average 22 pages view per visit

and the iPhone launch (3 weeks)• TechCrunch—“Must-Have iPhone App”• 105,000 hits the first week to website• 12,000 unique app users the first week• 7,000 recurring app users per week• Average 22 pages view per visit• Virtually no drop off since first month!

Leaflets Takeaways

Leaflets Takeaways• While we designed it for the iPhone, Leaflets could

work on any “Mobile 2.0” device or browser.

work on any “Mobile 2.0” device or browser.• Standards. Standards. Standards.

work on any “Mobile 2.0” device or browser.• Standards. Standards. Standards.• Design for context.

work on any “Mobile 2.0” device or browser.• Standards. Standards. Standards.• Design for context.• Optimize for the bandwidth.

work on any “Mobile 2.0” device or browser.• Standards. Standards. Standards.• Design for context.• Optimize for the bandwidth.• Test. And then test some more.

work on any “Mobile 2.0” device or browser.• Standards. Standards. Standards.• Design for context.• Optimize for the bandwidth.• Test. And then test some more.• Javascript is crucial to the user experience.

work on any “Mobile 2.0” device or browser.• Standards. Standards. Standards.• Design for context.• Optimize for the bandwidth.• Test. And then test some more.• Javascript is crucial to the user experience.• CSS3 is ideal for mobile development.

Some Resources

iPhone for Web Developers

http://developer.apple.com/iphone/

Designing the Mobile User Experience

http://www.littlespringsdesign.com/

Global Authoring Practices

http://www.passani.it/gap/

XHTML Mobile Profile Tutorial

http://www.developershome.com/wap/xhtmlmp/

Mobile Web Design Book

http://mobilewebbook.com/

.mobi Mobile Ready Report

http://mr.dev.mobi

.mobi Developers Guide

http://dev.mobi

Mobile Web Developers GuidePart I: Creating Simple Mobile Sites

BRIAN FLINGwith Ronan Cremin, Jo Rabin and D. Keith Robinson

Over the Air—LondonApril 4-5

Web 2.0 Expo—San FranciscoApril 23-24

Web Design World—ChicagoMay 5-7

Web Design World—SeattleJuly 21-23

More to come...

2008Workshops

The End

Brian Flingbrian@flingmedia.com

tel. +1 206 201-1875mob. +1 206 351-6060

Mobile Monday Austin: How the iPhone will forever change the Mobile Space

Business

Mode d’emploi „Swiss Map Mobile iPhone / iPadswissmapmobile.s3.amazonaws.com/iPhone/2012/manual/... · 01.12.2015/KIK Mode d’emploi „Swiss Map Mobile iPhone / iPad“ page

Mobile Conference Connection User Guide Apple iPhone Mobile Device

iPhone, Android, Blackberry Mobile Application Development

iVMS-4500(iPhone) Mobile Client Software User … · iVMS-4500(iPhone) Mobile Client Software 1 iVMS-4500(iPhone) Mobile Client Software User Manual (V1.0) Thank you for purchasing

Concur Mobile App - iPhone Instructions

Mobile Device Management iPhone

Mobile App for iPhone and Android - ELEADCRM.COM App NEW.pdfMobile App for iPhone and Android. ... Mobile app is compatible with both iPhone and Android devices. iPhone users go to

iPhone/Mobile App for Digital Library

Clubzone Mobile iPhone App

Iphone Mobile Application Development

MicroStrategy Mobile for iPhone and iPad - ITtoolboxhosteddocs.ittoolbox.com/microstrategy-mobile-security-white-paper... · MicroStrategy Mobile for iPhone and iPad Secure Business

iPhone Forever from Sprint. Our best deal ever. · iPhone Forever from Sprint. Our best deal ever. #MoveForward | Includes iPhone 6s and a new iPhone every year. Forever. That’s

Apps for iphone mobile

Cisco Mobile iPhone 8x Admin Guide

Mobile Marketing, Aplicativos Iphone

Iphone apps, mobile apps, iphone application development, mobile application development

Mobile Design for iPhone and iPad

Payjack - iPhone Mobile Payment Configuration

Guida Sharpdesk Mobile per iphone

Iphone payware mobile by merchant services