how the iphone will forever change the mobile space (over the air)

Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.

How the iPhone Will Forever Change the Mobile Spaceby Brian FlingOver the Air, London April 4, 2008


Who is Brian?


Who is Brian?• Mobile Designer since 2000.



• Worked for the first MVNO in North America.




• Has worked directly with all Tier 1 carriers in North America and most of Tier 2.





• Helped brands like Rolling Stone, Napster & ESPN with mobile web strategy & design.






• Runs mobiledesign.org, one of the largest communities of mobile designers.







• Co-author of the dotMobi Mobile Web Developers Guide.







• Co-author of the dotMobi Mobile Web Developers Guide.

• Co-creator of Leaflets for the iPhone.


The iPhone API Nitty Gritty:No

iPhone Apps vs Web Apps: Yes


Blame Garrett!


Who am I talking to?


Who am I talking to?• How many are new to mobile or the mobile web?


Who am I talking to?• How many are new to mobile or the mobile web?• How many are web designers or developers?


Who am I talking to?• How many are new to mobile or the mobile web?• How many are web designers or developers?• How many have created a mobile website or

mobile web application?



mobile web application?• How many have created a mobile application

(J2ME, BREW, Flash Lite, or other)?




(J2ME, BREW, Flash Lite, or other)?• How many own an iPhone?




(J2ME, BREW, Flash Lite, or other)?• How many own an iPhone?• How many own an iPod Touch?




(J2ME, BREW, Flash Lite, or other)?• How many own an iPhone?• How many own an iPod Touch?• How many own a Mac?


Mobile 1.0


Phrases & Jargon


Jargon Alert

MobilePortable personal communication devices able to connect voice calls or data requests wirelessly.Not to be confused with “cellular” or “cell.”


Jargon Alert

Mobile WebThe collective term for websites designed for viewing on a mobile device. Websites are published and accessed via the Internet just like a regular desktop website.


...just how big is the Mobile Web?

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

Population of the Earth

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

Population of the EarthSource: Wikipedia

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.


20 Million

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.


United Kingdom (50m)

20 Million

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.



United States of America (303m)

20 Million

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.




European Union (495m)

20 Million

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.




European Union (495m)

China (1.3 billion)

20 Million

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

Mobile Web of Today

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

Mobile Web of Today

Mobile Users (2.9b)

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

Mobile Web of Today

Mobile Users (2.9b)

Mobile Web Access (1.3b)

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

Mobile Web of TodaySources: GSM Association, T-Mobile, Credit Suisse, Pyramid Research

Mobile Users (2.9b)

Mobile Web Access (1.3b)

Desktop Web Access (1.1b)

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

Mobile Web of Tomorrow

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.


Mobile Web Subscribersby 2010

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.


Mobile Web Subscribersby 2010

Source: Informa Telecoms & Media 2006


Mobile will REVOLUTIONIZE the way we gather and interact

with information in the NEXT TWO YEARS.


Mobile has the potential to reach anybody through

ANY MEDIUM.

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

Events

TV

Billboard

Radio

Live

Website

Auditory

KinestheticVisu

al

Word of Mouth

Print Ad

Mobile Device

IVR

SMS

IVR

SMS

WAP

SMS

QR Code

SMS

QR Code

SMS

SMSMMS

SMS

WAP

SMS

SMS

Bluetooth

Notify

WAP

WAP

MMS

Email

Send to Friend

WAP Site

Notify

Buy

WAP SiteWAP Site

Send to Friend

Join

Buy

NotifyNotify

Send to Friend

Post WAP Site

MMS

Send to Friend

Notify

Send to Friend

Join

Discuss

Send to Friend

Notify

Download

DownloadNotify

Vote

Join

Vote

Notify

Buy

Send to Friend

Notify


Jargon Alert

LBSLocation-based ServicesThe ability for a mobile device to provide information that is relevant to it’s physical location via a Global Positioning System (GPS).

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

Triangulation


Prepare for a trulyCONTEXTUAL WEB.


Jargon Alert

ContextThe circumstances that form the setting for an event, statement, or idea, and in terms of which it can be fully understood and assessed.Considered together with the surroundings or circumstances.


Designing for Context


Designing for Context• Address the inherent benefits of the media.


Designing for Context• Address the inherent benefits of the media.• Look at your content in multiple facets of

distribution.



distribution.• Create solutions based on goals.



distribution.• Create solutions based on goals.• Balance the constraints of the technology.



distribution.• Create solutions based on goals.• Balance the constraints of the technology.• Remember physical context.



distribution.• Create solutions based on goals.• Balance the constraints of the technology.• Remember physical context.• Adapt content for multiple contexts.


Adapt forMULTIPLE CONTEXTS


Jargon Alert

AdaptationThe process of dynamically optimizing content to the restrictions of the requesting device. The adaptation model relies on the mobile device’s user agent profile to tell the server to deliver markup or images based on the browser, screen size and device capabilities.


My Dad


“Find a need and fill it.”

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

Balancing Goals

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

Balancing Goals

Busin

ess G

oals

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

Balancing Goals

User Goals

Busin

ess G

oals

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

Balancing Goals

User Goals

Busin

ess G

oals

Technical Goals

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

Balancing Goals

User Goals

Busin

ess G

oals

Technical Goals

SweetSpot


The 3 C’s of the Mobile Web


The 3 C’s of the Mobile Web• Cost

If you don't develop your mobile website responsibly, the user could get stuck with a big bill in order to view your content.




• ContentIssues like navigation, image sizes, page weight and scripts all need to be considered when thinking about your website on mobile devices.




• ContentIssues like navigation, image sizes, page weight and scripts all need to be considered when thinking about your website on mobile devices.

• ContextWhat does your website add to the users mobility? How do you add value to the their physical context? What is the context in which they will use your site? On a bus or train?


Jargon Alert

One WebThe principle of making the same information and services to users regardless of the device used.This is a very misunderstood, misused and commonly debated concept.


MassMedia7th


Tomi Ahonen3G Strategy Consultant


Mass Media7 th


Mass Media

1. Printing Press

7 th


Mass Media

1. Printing Press2.Recordings

7 th


Mass Media

1. Printing Press2.Recordings3. Cinema

7 th


Mass Media

1. Printing Press2.Recordings3. Cinema4.Radio

7 th


Mass Media

1. Printing Press2.Recordings3. Cinema4.Radio5. Television

7 th


Mass Media

1. Printing Press2.Recordings3. Cinema4.Radio5. Television6.The Internet

7 th


Mass Media

1. Printing Press2.Recordings3. Cinema4.Radio5. Television6.The Internet7.Mobile

7 th


5 unique benefits


5 unique benefits1. First truly personal mass media

e.g. We don’t share our phones with our spouses.




2. First always-on mass mediaInformation is always available 24/7, even when idle.





3. First always-carried mass media7 out of 10 people sleep with their phone within reach.






4. Only mass media with a built in payment channelUniversal click to buy. Twice as many people have phones than credit cards.






4. Only mass media with a built in payment channelUniversal click to buy. Twice as many people have phones than credit cards.

5. Offers point of thoughtAbility to create or consume content whenever the mood strikes.


Mobile is the only mass media that can do EVERYTHING the

previous six can do.


We are at the precipice of the next generation of

THE WEB.


But the mobile ecosystem of today is far cry from the web

as we know it.


Operators

Networks

Handsets

Platforms

Operating Systems

Application Frameworks

Applications

Services

The mobile ecosystem has many layers. Each with their own complexities and obstacles.

Layers of Mobile


Operators

Networks

Handsets

Platforms

Operating Systems


Applications

Services

Layers of Mobile

Operators

A mobile network operator (MNO) also known as...

• a wireless service provider

• a wireless carrier

• a mobile phone operator

• a cellular company...is a telephone company that provides services for mobile phone subscribers.


Jargon Alert

Mobile Service ProviderA broad term to describe the mobile network provider that provides subscribers wireless access to voice and data services. Also known as a mobile network operator, or MNO in the telecommunications industry, though usually referred to as carriers in North America and operators elsewhere in the world.

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

Top Network Operators

Rank Company Primary Markets Network Subscribers*

1 China Mobile China (including Hong Kong) GSM, GPRS, EDGE 337.9 mil

2 Vodafone Europe, Australia, New Zealand, Africa

GSM, GPRS, EDGE, UMTS, HSDPA

206 mil

3 Telefonica Europe, Latin America GSM, GPRS, EDGE, UMTS, HSDPA

154.8 mil

4 China Unicom China GSM, GPRS, CDMA 153.1 mil

5 America Movil Mexico, Latin America GSM, GPRS, EDGE, UMTS, CDMA

137.2 mil

6 T-Mobile Europe, USA GSM, GPRS, EDGE, UMTS, HSDPA

111.8 mil

7 MTS Russia GSM, GPRS, EDGE, UMTS

74.67 mil

8 Orange Europe, Netherlands, Africa GSM, GPRS, EDGE, UMTS, HSDPA

73.2 mil

9 Telenor Netherlands, Eastern Europe GSM, GPRS, EDGE, UMTS

68 mil

10 AT&T USA GSM, GPRS, EDGE, UMTS, HSDPA

63.7 mil

* Proportionate subscribers in millions as of June 2007. Sources: Companies Annual Reports


Jargon Alert

ARPUAverage Revenue Per UserA term used to describe the financial value of a program, application or service.


Operators

Networks

Handsets

Platforms

Operating Systems


Applications

Services

Layers of Mobile

Networks

Mobile networks communicate through electromagnetic radio waves with a cell site base station, the antennas of which are usually mounted on a tower, pole or building.They are often referred to by their generation and/or standard.


Jargon Alert

G as in 2G, 2.5G and 3G.

The generations of mobile networks.Officially there are only 1G, 2G & 3G, but several midpoints have been defined as 2.5G, 2.75G, etc.

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

GSM Mobile Networks

2G Second generation of mobile phone standards and technology Speeds

GSM Global System for Mobile communications 12.2 kbits/s

GPRS General Packet Radio Service max 60 kbits/s

EDGE Enhanced Data rates for GSM Evolution 59.2 kbits/s

HSCSD High-Speed Circuit-Switched Data 57.6 kbits/s

3G Third generation of mobile phone standards and technology Speeds

W-CDMA Wideband Code Division Multiple Access 14.4 Mbits/s

UMTS Universal Mobile Telecommunications System 3.6 Mbits/s

UMTS-TDD Time Division Duplexing 16 Mbits/s

TD-CDMA Time Divided Code Division Multiple Access 16 Mbits/s

HSPA High-Speed Packet Access 14.4 Mbits/s

HSDPA High-Speed Downlink Packet Access 14.4 Mbits/s

HSUPA High-Speed Uplink Packet Access 5.76 Mbit/s

http://en.wikipedia.org/wiki/Mobile_phone


http://en.wikipedia.org/wiki/Technology







Other Network Technologies• CDMA & EVDO• iDEN & WiDEN• WiMAX

Worldwide Interoperability for Microwave Access, is a telecommunications technology aimed at providing wireless data over long distances in a variety of ways, from point-to-point links to full mobile cellular type access. WiMAX allows a user, for example, to browse the Internet on a laptop computer without physically connecting the laptop to a router or switch port via an ethernet port.


Operators

Networks

Handsets

Platforms

Operating Systems


Applications

Services

Layers of Mobile

Handsets

A mobile handset or “mobile phone” is a long-range, portable electronic device used for mobile communication.

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

Many Flavors of Handsets

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

Comparing Mobile Devices

Feature PhonesPhone, Web, SMS

Smart PhonesApplications

Other


Operators

Networks

Handsets

Platforms

Operating Systems


Applications

Services

Layers of Mobile

PlatformsThe core mobile development platform in which all software is written.

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

Mobile Platforms

Licensed

Java ME

Java ME (previously known as Java 2 Platform, Micro Edition or J2ME) is a specification of a subset of the Java platform aimed at providing a certified collection of Java APIs for the development of software for small, resource-constrained devices such as cell phones, PDAs and set-top boxes.

BREWBREW is an application development platform created by Qualcomm for mobile phones. It is air-interface independent, i.e. it can support GSM/GPRS, UMTS, and CDMA

Windows Mobile Windows Mobile is a compact operating system combined with a suite of basic applications for mobile devices based on the Microsoft Win32 API

Proprietary

Palm C/C++ based

RIM’s BlackBerry Java-based

Danger’s Hiptop Java-based

Apple’s iPhone Objective-C

http://en.wikipedia.org/wiki/Java_platform

http://en.wikipedia.org/wiki/Java_platform

http://en.wikipedia.org/wiki/Java_%28programming_language%29

http://en.wikipedia.org/wiki/Java_%28programming_language%29

http://en.wikipedia.org/wiki/Application_Programming_Interface

http://en.wikipedia.org/wiki/Application_Programming_Interface

http://en.wikipedia.org/wiki/Software

http://en.wikipedia.org/wiki/Software

http://en.wikipedia.org/wiki/Cell_phone

http://en.wikipedia.org/wiki/Cell_phone

http://en.wikipedia.org/wiki/Portable_digital_assistant

http://en.wikipedia.org/wiki/Portable_digital_assistant

http://en.wikipedia.org/wiki/Set-top_box

http://en.wikipedia.org/wiki/Set-top_box

http://en.wikipedia.org/wiki/Qualcomm

http://en.wikipedia.org/wiki/Qualcomm

http://en.wikipedia.org/wiki/Telephone




http://en.wikipedia.org/wiki/GSM

http://en.wikipedia.org/wiki/GSM

http://en.wikipedia.org/wiki/GPRS

http://en.wikipedia.org/wiki/GPRS

http://en.wikipedia.org/wiki/UMTS

http://en.wikipedia.org/wiki/UMTS

http://en.wikipedia.org/wiki/CDMA

http://en.wikipedia.org/wiki/CDMA

http://en.wikipedia.org/wiki/Operating_system


http://en.wikipedia.org/wiki/Microsoft


http://en.wikipedia.org/wiki/Windows_API


http://en.wikipedia.org/wiki/Application_programming_interface



Operators

Networks

Handsets

Platforms

Operating Systems


Applications

Services

Layers of Mobile

Operating SystemsOperating systems are common in Smart Phones, but rare in Feature phones.

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

Mobile Operating Systems

SymbianSymbian OS is a proprietary operating system, designed for mobile devices, with associated libraries, user interface frameworks and reference implementations of common tools.

Windows Mobile 6 Windows Mobile is a compact operating system combined with a suite of basic applications for mobile devices based on the Microsoft Win32 API

Palm OS Used by Palm’s TREO line of mobile phones, though gradually being replaced by Windows Mobile.

Linux Increasingly used in mobile phones. Motorola announced the next RAZR will use Linux as its Operating System.

OS X Used by Apple’s iPhone.

http://en.wikipedia.org/wiki/Proprietary_software

http://en.wikipedia.org/wiki/Proprietary_software



http://en.wikipedia.org/wiki/Library_%28computer_science%29

http://en.wikipedia.org/wiki/Library_%28computer_science%29

http://en.wikipedia.org/wiki/User_interface

http://en.wikipedia.org/wiki/User_interface










Operators

Networks

Handsets

Platforms

Operating Systems


Applications

Services

Layers of Mobile


A software framework that is used to implement the standard structure of an application for a specific operating system.

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.


JavaApplications written in the Java ME framework can often be deployed across the majority of Java-based devices.

BREW Applications written in the BREW framework can often be deployed across the majority of BREW-based devices.

Flash Lite Applications written using the Flash Lite 2.0 and Action Script 2.0 frameworks can run using the Flash Lite Player.

Windows Mobile 6 Applications written using the Win32 API can be deployed across the majority of Windows Mobile-based devices.

Web Web Applications can be deployed across the majority of devices that support the WAP 2.0 specifications and run using a mobile web browser.


Operators

Networks

Handsets

Platforms

Operating Systems


Applications

Services

Layers of Mobile

Applications

Mobile applications often are designed to serve a particular function or purpose.Example applications may include Games, Web Browser, Camera or Media Player.


Operators

Networks

Handsets

Platforms

Operating Systems


Applications

Services

Layers of Mobile

ServicesNetwork-based services are often available at the Application, Framework, or OS level to enhance the relevance of information.Example services may include The Internet, Messaging or Location.


Mobile 2.0


We are at the precipice of the next generation of

THE WEB.


Two companies in particular are making that happen...


but lets not forget...


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.

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.Web 1.0Proprietary

Walled Gardens

First to market

Brand-centered

Web 2.0Standards

Web Services

Web as a Platform

User-centered


10 Things I Learned at Mobile 2.0



• #1 Mobile 2.0 = The web



• #1 Mobile 2.0 = The web• The mobile web browser is the next killer app



• #1 Mobile 2.0 = The web• The mobile web browser is the next killer app• Mobile Web Applications are the future



• #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



• #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



• #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



• #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



• #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



• #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

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.Mobile 1.0Proprietary

Walled Gardens

First to market

Brand-centered

Mobile 2.0Standards

Web Services

Web as a Platform

User-centered


the mythical“Future-Phone”


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

— Craig McCaw

“

”

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

The iPhone


A Confession

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

The iPhone


From many perspectives the iPhone is not revolutionary.

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

Mobile Evolution

1980

Basic Phones

Feature Phones

Smart Phones

iPhone

1990 2000 2010


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


The iPhone is the shape of things to come.


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






(4 updates in 9 months)







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

“

”

http://www.chetansharma.com/blog/2008/01/15/macworld-update/









Apple estimates 10 million iPhones sold by the end of

2008.


70%complete

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

1326 Mobile Web Apps!


Over 500 new mobile web apps in the 60 days alone!


The iPhone is shifting perceptions of what mobile

technology can do.


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

WEBKIT.

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

Nokia N95

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

Android

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

Look Familiar?

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

iPod Touch

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

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

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

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

sold in less than six years.


Web App oriPhone App?

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

iPhone Software Roadmap

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.


iPhone Software Development KitGet the tools you need to build your own iPhone applications.

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.



Downloaded 100,000 times in 4 days

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.



iPhone Enterprise Beta ProgramTest pre-release iPhone software with enterprise features in your workplace.

Downloaded 100,000 times in 4 days

http://www.apple.com/iphone/enterprise/apply

http://www.apple.com/iphone/enterprise/apply

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

iPhone Dev Center

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

Types of iPhone Applications

Productivity Utility Immersive


But are mobile applications a good idea?


Web App iPhone App


Web App iPhone AppUses Web Standards


Web App iPhone AppUses Web StandardsEasy to deploy and update


Web App iPhone AppUses Web StandardsEasy to deploy and updateSupport all Mobile 2.0 devices


Web App iPhone AppUses Web StandardsEasy to deploy and updateSupport all Mobile 2.0 devicesCan have a Web App in two weeks or less.


Web App iPhone AppUses Web StandardsEasy to deploy and updateSupport all Mobile 2.0 devicesCan have a Web App in two weeks or less.Web Apps can be added to the Desktop


Web App iPhone AppUses Web StandardsEasy to deploy and updateSupport all Mobile 2.0 devicesCan have a Web App in two weeks or less.Web Apps can be added to the DesktopMust have an Internet connection



Takes advantage of iPhone features:



Takes advantage of iPhone features:e.g. Camera, Photos, Address Book, Accelerometer, etc




Loads Wicked Fast




Loads Wicked FastNeed to know Objective-C




Loads Wicked FastNeed to know Objective-CWorks only with iPhone and iPod Touch




Loads Wicked FastNeed to know Objective-CWorks only with iPhone and iPod TouchMust deploy over Apple’s iPhone store (or deck)


Jargon Alert

DeckRefers to the web presence maintained by a carrier. When you access the web from a mobile device, the first page you see is often referred to as the carrier deck. But is commonly used to refer to all mobile web sites.Origins: Hypercard development


Top-Deck = Increased ViewsLower Deck = Oblivion


Jargon Alert

Deck PlacementThe term used to describe where a third-party vendor WAP site, or application will appear on the Carrier Deck. Default order on content on most Carrier Decks is determined by sales. New items often have temporary “Top-Deck Placement”

http://mobiledesign.org/articles/mobile_glossary.php#wap

http://mobiledesign.org/articles/mobile_glossary.php#wap

http://mobiledesign.org/articles/mobile_glossary.php#carrier_deck

http://mobiledesign.org/articles/mobile_glossary.php#carrier_deck


Building a great mobile user experience is hard.

Go easy on yourself bystarting simple.


Build Web Apps first.iPhone Apps second.


Build Web Apps first.iPhone Apps second.

(if at all)


WebKitWeb Apps


Mobile WebKit Features



• Supports all standard flavors of XHTML




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





• Javascript (including Ajax)





• Javascript (including Ajax)• This means complex layouts,

styling and interaction...


Plus WebKit can display full websites. As in, the real web.


But there’s a Speed Reality!

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

EDGE

EDGE

Max Speed Actual Average

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

EDGE

EDGE

200 kbps


Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

EDGE

EDGE

200 kbps

125 kbps


Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

Wi-Fi via Broadband

WiFi


Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

Wi-Fi via Broadband

WiFi

54 mbps


Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

Wi-Fi via Broadband

WiFi

54 mbps

4 mbps


Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

EDGE vs. Wi-Fi

Actual Average

WiFi

EDGE

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

EDGE vs. Wi-Fi

Actual Average

WiFi

EDGE

4.00 mbps

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

EDGE vs. Wi-Fi

Actual Average

WiFi

EDGE

4.00 mbps

0.13 mbps

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

32x slower!

EDGE vs. Wi-Fi

Actual Average

WiFi

EDGE

4.00 mbps

0.13 mbps

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

A 300kb file on EDGE vs. Wi-Fi


While we have Wi-Fi, we cannot rely on it.


Mobile websites have never been so easy to create and look good in the process.


iPhone apps that grow on you.

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

Why Create Leaflets?

(Blog Post Why we made Leaflets)

http://www.getleaflets.com/blog/why_we_made_leaflets.php


Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.


We wanted to showcase




Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.


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




Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.


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




Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.


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




Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.


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




Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.


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




Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.


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





Quick Demo

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

The Home Screen

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

Feeds

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

Newsvine

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

App List

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

Upcoming

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

Flickr

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

del.icio.us

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

Tour de France

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

New York Times


SimpleXHTML & CSS


SimpleXHTML & CSS

(and Web Standard too!)

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

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>

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

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;}

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

Controls CSS

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

Newsvine Leaflet CSS


CSS 3 Baby!

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

Using CSS3

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

Using CSS3

+ 3 Kilobytes

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

Using CSS3

+ 320 bytes

+ 3 Kilobytes

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

Using CSS3

+ 320 bytes

+ 3 Kilobytes

-webkit-border-radius: 10px;+


Conditional CSS


Using Media Queries


Using Media Queries• Calling an iPhone stylesheet:




• To specify a stylesheet for everything else:




• To specify a stylesheet for everything else:<link media="screen and (min-device-width: 481px)" href="other.css" type="text/css" rel="stylesheet">





• Do not use:





• Do not use:<link media="handheld" href="mobile.css" type="text/css" rel="stylesheet">


Simple Device Detection


Device Detection• Use a simple Javascript redirect WebKit

browsers:<script type="text/javascript" charset="utf-8">

if (navigator.userAgent.match(/AppleWebKit/i) && navigator.userAgent.match(/Mobile/i)) { window.location.replace('/path/to/site/'); }</script>

• Or you can use other methods of Device Detection:

Server RedirectsWURFL (http://wurfl.sourceforge.net/)

PHP (http://www.andymoore.info/php-to-detect-mobile-phones/)

URLs (e.g. m.domain.co.uk, domain.co.uk/m, domain.mobi)

http://www.andymoore.info/php-to-detect-mobile-phones/

http://www.andymoore.info/php-to-detect-mobile-phones/


Technical Limitations


Limitations Imposed


Limitations Imposed• 10MB download limit


Limitations Imposed• 10MB download limit• JavaScript execution time limit of 5

seconds for each top-level item



seconds for each top-level item• No Flash



seconds for each top-level item• No Flash• No Java



seconds for each top-level item• No Flash• No Java• No mouse-over, hover, tooltip mouse

events



seconds for each top-level item• No Flash• No Java• No mouse-over, hover, tooltip mouse

events• No file downloads or uploads!


Design Shortcuts


Kits for iPhone Design



• iUI by Joe Hewitt



• iUI by Joe Hewitt• Google Web Toolkit (GWT)



• iUI by Joe Hewitt• Google Web Toolkit (GWT)• Yahoo! User Interface Library

(YUI)



• iUI by Joe Hewitt• Google Web Toolkit (GWT)• Yahoo! User Interface Library

(YUI)• Many icon and interface design

kits released


We Suggest Finding Your Own Design Path


Compression is Your Friend


Save Space


Save Space• Use ob_start("ob_gzhandler") for PHP content


Save Space• Use ob_start("ob_gzhandler") for PHP content• Remove whitespace from HTML and CSS


Save Space• Use ob_start("ob_gzhandler") for PHP content• Remove whitespace from HTML and CSS• Refactor JavaScript code to be more efficient and

then remove unnecessary brackets and semi-colons




• Compress images or use CSS where possible




• Compress images or use CSS where possible• Cache data on the server for fastest possible

loading times


Conclusions


A Successful Experiment


A Successful Experiment• Leaflets entire application was built between

WWDC and the iPhone launch (3 weeks)



WWDC and the iPhone launch (3 weeks)• TechCrunch called it a “Must-Have iPhone App”



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



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



WWDC and the iPhone launch (3 weeks)• TechCrunch called it a “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



WWDC and the iPhone launch (3 weeks)• TechCrunch called it a “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



WWDC and the iPhone launch (3 weeks)• TechCrunch called it a “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 in traffic 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.




• Standards. Standards. Standards.




• Standards. Standards. Standards.• Design for context.




• Standards. Standards. Standards.• Design for context.• Optimize for the bandwidth.




• Standards. Standards. Standards.• Design for context.• Optimize for the bandwidth.• Test. And then test some more.




• Standards. Standards. Standards.• Design for context.• Optimize for the bandwidth.• Test. And then test some more.• Javascript is crucial to the user experience.




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


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

WEBKIT.


Some Resources

Copy

right

© 2

008

Bria

n Fl

ing.

All

trad

emar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

iPhone for Web Developers

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



Copy

right

© 2

008

Bria

n Fl

ing.

All

trad

emar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Designing the Mobile User Experience

http://www.littlespringsdesign.com/

http://www.littlespringsdesign.com

http://www.littlespringsdesign.com

Copy

right

© 2

008

Bria

n Fl

ing.

All

trad

emar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Global Authoring Practices

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



Copy

right

© 2

008

Bria

n Fl

ing.

All

trad

emar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

XHTML Mobile Profile Tutorial

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



Copy

right

© 2

008

Bria

n Fl

ing.

All

trad

emar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Mobile Web Design Book

http://mobilewebbook.com/

http://mobilewebbook.com

http://mobilewebbook.com

Copy

right

© 2

008

Bria

n Fl

ing.

All

trad

emar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

.mobi Mobile Ready Report

http://mr.dev.mobi

http://mr.dev.mobi

http://mr.dev.mobi

Copy

right

© 2

008

Bria

n Fl

ing.

All

trad

emar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

.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

http://dev.mobi

http://dev.mobi


Web 2.0 Expo—San FranciscoApril 23-24

Web Design World—ChicagoMay 5-7

Monotype Event—LondonJune 10

Handsets World—BerlinJune 11

Mobile Web 2.0 Summit—LondonJune 12

More to come...

2008Workshops


The End

Brian [email protected]

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

mailto:[email protected]?subject=

mailto:[email protected]?subject=

how the iphone will forever change the mobile space (over the air)

Business

brian fling

respective owners

mobile designer

mobile space

north america