Web Builder 2.0 Workshop: iPhone Design and Development Workshop

452
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. iPhone and Mobile Development Summit Brian Fling, Principal & Director of Strategy Garrett Murray, Senior Developer

description

 

Transcript of Web Builder 2.0 Workshop: iPhone Design and Development Workshop

Page 1: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

iPhone and Mobile Development SummitBrian Fling, Principal & Director of Strategy

Garrett Murray, Senior Developer

Page 2: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

introduction

Page 3: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Who is Brian?

Page 4: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Who is Brian?* Co-founder & Principal of Blue Flavor.

Page 5: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Who is Brian?* Co-founder & Principal of Blue Flavor.

* Mobile Designer since 2000.

Page 6: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Who is Brian?* Co-founder & Principal of Blue Flavor.

* Mobile Designer since 2000.

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

Page 7: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Who is Brian?* Co-founder & Principal of Blue Flavor.

* Mobile Designer since 2000.

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

Page 8: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Who is Brian?* Co-founder & Principal of Blue Flavor.

* Mobile Designer since 2000.

* 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, the largest network of mobile designers.

Page 9: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Who is Brian?* Co-founder & Principal of Blue Flavor.

* Mobile Designer since 2000.

* 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, the largest network of mobile designers.

* Author of dotMobi Developers Guide.

Page 10: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Who is Brian?* Co-founder & Principal of Blue Flavor.

* Mobile Designer since 2000.

* 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, the largest network of mobile designers.

* Author of dotMobi Developers Guide.

* Co-creator of Leaflets for the iPhone.

Page 11: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Who is Garrett?

Page 12: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Who is Garrett?* Senior Developer at Blue Flavor.

Page 13: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Who is Garrett?* Senior Developer at Blue Flavor.

* Web Developer since 1998.

Page 14: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Who is Garrett?* Senior Developer at Blue Flavor.

* Web Developer since 1998.

* Has worked with hundreds of clients including Pfizer Inc., Business Week Magazine and the United Nations Development Programme.

Page 15: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Who is Garrett?* Senior Developer at Blue Flavor.

* Web Developer since 1998.

* Has worked with hundreds of clients including Pfizer Inc., Business Week Magazine and the United Nations Development Programme.

* Created the OS X application xPad and the open-source Ruby on Rails weblog application SimpleLog.

Page 16: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Who is Garrett?* Senior Developer at Blue Flavor.

* Web Developer since 1998.

* Has worked with hundreds of clients including Pfizer Inc., Business Week Magazine and the United Nations Development Programme.

* Created the OS X application xPad and the open-source Ruby on Rails weblog application SimpleLog.

* Host of Maniacal Rage Podcast & TV.

Page 17: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Who is Garrett?* Senior Developer at Blue Flavor.

* Web Developer since 1998.

* Has worked with hundreds of clients including Pfizer Inc., Business Week Magazine and the United Nations Development Programme.

* Created the OS X application xPad and the open-source Ruby on Rails weblog application SimpleLog.

* Host of Maniacal Rage Podcast & TV.

* Co-creator of Leaflets for the iPhone.

Page 18: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

a play in two acts

Page 19: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Page 20: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Act IToday’s Mobile Reality

Page 21: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Act IToday’s Mobile Reality

Act IIThe Future and You

Page 22: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Agenda09:00 Act I, Part One—The Mobile Ecosystem

Understanding the mobile technology and landscape.

10:45 BREAK

11:00 Act I, Part Two—Designing for ContextDesigning for how people use information outside the web browser.

12:30 LUNCH

1:30 Act I, Part Three—Mobile Web DevelopmentWhat you need to know to develop for mobile devices.

3:00 INTERMISSION

3:15 Act II, Part One—Mobile 2.0The future of mobile in the post-iPhone age.

4:30 BREAK

4:45 Act II, Part Two—iPhone Nitty-GrittyPractical examples for iPhone development and design.

Page 23: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Lecture Format

Page 24: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Follow Alonghttp://blueflavor.com/webbuilder2.0

Page 25: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Questions & Discussion

Page 26: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Breaks

Page 27: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Phrases & Jargon

Page 28: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Jargon Alert

MobilePortable personal communication devices able to

connect voice calls or data requests wirelessly.

Not to be confused with “cellular” or “cell.”

Page 29: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

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.

Page 30: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

...just how big is the Mobile Web?

Page 31: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Population of the Earth

Page 32: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Population of the EarthSource: Wikipedia

Page 33: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Population of the EarthSource: Wikipedia

Page 34: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Population of the EarthSource: Wikipedia

England

Page 35: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Population of the EarthSource: Wikipedia

England

United States of America

Page 36: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Population of the EarthSource: Wikipedia

England

United States of America

European Union

Page 37: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Population of the EarthSource: Wikipedia

England

United States of America

European Union

China

Page 38: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

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 of Today

Page 39: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

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 of Today

Page 40: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

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 of Today

Mobile Subscribers

Page 41: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

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 of Today

Mobile Subscribers

Mobile Web Access

Page 42: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

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 of TodaySources: GSM Association, T-Mobile, Credit Suisse, Pyramid Research

Mobile Subscribers

Mobile Web Access

Desktop Web Access

Page 43: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

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 of Tomorrow

Page 44: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

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 of Tomorrow

Mobile Web Subscribersby 2010

Page 45: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

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 of Tomorrow

Mobile Web Subscribersby 2010

Source: Informa Telecoms & Media 2006

Page 46: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Mobile will revolutionize the way we gather and

interact with information in the next three years.

Page 47: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Mobile has the potential to reach anybody through

any medium.

Page 48: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Page 49: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

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

Page 50: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Jargon Alert

LBSLocation-based Services

The ability for a mobile device to provide

information that is relevant to it’s physical location

via a Global Positioning System (GPS).

Page 51: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Prepare for a trulycontextual web.

Page 52: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

We are at the precipice of the next generation of

the web.

Page 53: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Page 54: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

The iPhone is the shape of things to come.

Page 55: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

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 Evolution

1980

Basic Phones

Feature Phones

Smart Phones

iPhone

1990 2000 2010

Page 56: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

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 Evolution

1980

Basic Phones

Feature Phones

Smart Phones

iPhone

1990 2000 2010

Page 57: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

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 Evolution

1980

Basic Phones

Feature Phones

Smart Phones

iPhone

1990 2000 2010

Page 58: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

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 Evolution

1980

Basic Phones

Feature Phones

Smart Phones

iPhone

1990 2000 2010

Page 59: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

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 Evolution

1980

Basic Phones

Feature Phones

Smart Phones

iPhone

1990 2000 2010

Page 60: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

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 Evolution

1980

Basic Phones

Feature Phones

Smart Phones

iPhone

1990 2000 2010

Page 61: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

But we can’t start at the end.

Page 62: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Act I

today’s mobile reality

Page 63: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Act I, Part 1

the mobile ecosystem

Page 64: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Understanding and patience of the Mobile Ecosystem is

one of the most crucial skills of the Mobile Web.

Page 65: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Mobile is not the Web

Page 66: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Some Obstacles of Mobile

Page 67: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Hundred of devices

Some Obstacles of Mobile

Page 68: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Hundred of devices

Dozens of mobile web browsers

Some Obstacles of Mobile

Page 69: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Hundred of devices

Dozens of mobile web browsers

Operator controlled

Some Obstacles of Mobile

Page 70: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Hundred of devices

Dozens of mobile web browsers

Operator controlled

Limited input or output

Some Obstacles of Mobile

Page 71: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Hundred of devices

Dozens of mobile web browsers

Operator controlled

Limited input or output

Limited guidelines or resources

Some Obstacles of Mobile

Page 72: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Hundred of devices

Dozens of mobile web browsers

Operator controlled

Limited input or output

Limited guidelines or resources

“No Standards”

Some Obstacles of Mobile

Page 73: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Hundred of devices

Dozens of mobile web browsers

Operator controlled

Limited input or output

Limited guidelines or resources

“No Standards”

People don’t “get it”

Some Obstacles of Mobile

Page 74: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Hundred of devices

Dozens of mobile web browsers

Operator controlled

Limited input or output

Limited guidelines or resources

“No Standards”

People don’t “get it”

The list goes on....

Some Obstacles of Mobile

Page 75: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

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

Page 76: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Operators

Networks

Handsets

Platforms

Operating Systems

Application Frameworks

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.

Page 77: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

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.

Page 78: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

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

Page 79: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Jargon Alert

MVNOMobile Virtual Network Operator

A branded wireless provider that does not own or

operate a wireless network.

Page 80: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Jargon Alert

ARPUAverage Revenue Per User

A term used to describe the financial value of a

program, application or service.

Page 81: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Operators

Networks

Handsets

Platforms

Operating Systems

Application Frameworks

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.

Page 82: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

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.

Page 83: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

006

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Network Generations

3G 2.5G 2G1G

Page 84: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

006

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Network Generations

3G 2.5G 2G1G

• Over time cellular networks have evolved

Page 85: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

006

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Network Generations

3G 2.5G 2G1G

• Over time cellular networks have evolved

• Unfortunately unlike other technology, Mobile moves slowly, but why?

Page 86: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

006

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Network Generations

3G 2.5G 2G1G

• Over time cellular networks have evolved

• Unfortunately unlike other technology, Mobile moves slowly, but why?

• Physical Infrastructure

Page 87: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

006

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Network Generations

3G 2.5G 2G1G

• Over time cellular networks have evolved

• Unfortunately unlike other technology, Mobile moves slowly, but why?

• Physical Infrastructure

• Subsidization & Consumer Adoption

Page 88: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

006

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

1st Generation

3G 2.5G 2G1G

• Portable!Fits in a Briefcase

• Voice calls only

• Costs more per call than a pay phone

Page 89: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

006

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

2nd Generation

3G 2.5G 2G1G

• GSM, CDMA, TDMA, iDEN

• Less power needed,much smaller

• Better voice quality

• Added SMS

• Still just a phone

Page 90: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

006

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

The 2G/3G Transition

3G 2.5G 2G1G

• GPRS, HSCSD, WiDEN

• Data-capable devices

• Addition of Mobile Web

• Camera phones & MMS

• Mass adoption as airtime rates lower

Page 91: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

006

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

3rd Generation

3G 2.5G 2G1G

• W-CDMA, HSDPA, EVDO

• In the early stages today

• “Broadband” Speeds

• Add-on features like LBS and media players

• Slow uptake

Page 92: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Jargon Alert

LBSLocation-based Services

The ability for a mobile device to provide

information that is relevant to it’s physical location

via a Global Positioning System (GPS).

Page 93: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

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

Page 94: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Other Network Technologies

* CDMA & EVDO

* iDEN & WiDEN

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

Page 95: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Operators

Networks

Handsets

Platforms

Operating Systems

Application Frameworks

Applications

Services

Layers of Mobile

Handsets

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

Page 96: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Many Flavors of Handsets

Page 97: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Comparing Mobile Devices

Feature PhonesPhone, Web, SMS

Smart PhonesApplications

iPhone

Page 98: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Operators

Networks

Handsets

Platforms

Operating Systems

Application Frameworks

Applications

Services

Layers of Mobile

Platforms

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

Page 99: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

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

Page 100: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Operators

Networks

Handsets

Platforms

Operating Systems

Application Frameworks

Applications

Services

Layers of Mobile

Operating Systems

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

Page 101: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

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

Page 102: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Operators

Networks

Handsets

Platforms

Operating Systems

Application Frameworks

Applications

Services

Layers of Mobile

Application Frameworks

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

Page 103: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Application Frameworks

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.

Page 104: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Operators

Networks

Handsets

Platforms

Operating Systems

Application Frameworks

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.

Page 105: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Operators

Networks

Handsets

Platforms

Operating Systems

Application Frameworks

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.

Page 106: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

A word on standards

Page 107: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

in short:Never dismiss the

complexities of mobile. They exist for a reason.

Page 108: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Questions?

Page 109: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

BreakReturn by 11:00 AM

Page 110: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Act I, Part 2

designing for context

Page 111: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Agenda09:00 Act I, Part One—The Mobile Ecosystem

Understanding the mobile technology and landscape.

10:45 BREAK

11:00 Act I, Part Two—Designing for ContextDesigning for how people use information outside the web browser.

12:30 LUNCH

1:30 Act I, Part Three—Mobile Web DevelopmentWhat you need to know to develop for mobile devices.

3:00 INTERMISSION

3:15 Act II, Part One—Mobile 2.0The future of mobile in the post-iPhone age.

4:30 BREAK

4:45 Act II, Part Two—iPhone Nitty-GrittyPractical examples for iPhone development and design.

Page 112: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Thinking in Context

Page 113: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

What to make Mobile?

Page 114: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

First ask, “Why should this be

Mobile?”

Page 115: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Next ask,“What need do I serve by

being Mobile?”

Page 116: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

“Find a need and fill it.”

Page 117: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Balancing Goals

User Goals

Busin

ess G

oals

Technical Goals

SweetSpot

Page 118: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Start with a goal and reverse engineer it.

Page 119: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

The 3Cs of the Mobile Web

Page 120: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

The 3Cs of the Mobile Web

* CostIf you don't develop your mobile website responsibly, the user could get

stuck with a big bill in order to view your content.

Page 121: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

The 3Cs of the Mobile Web

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

Page 122: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

The 3Cs of the Mobile Web

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

* 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?

Page 123: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Lose anything that doesn’t support the goals.

Page 124: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Mobile Information Architecture

Page 125: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

A Bad Mobile IA

Home About Us

Company Overview

Home Suite

License Management

Services

Support Request

News

Sales Offices

Executives

Standard Suite

Product Services

Intranet Login

Events

Contact Form

Press Releases

Pro Suite

Installation Support Services

Office Hours

Org Chart

Whitepapers

Consulting Services

Contact

Products

Services

Support

News &

Events

Blog

Contact

Press Releases

Page 126: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Information Architecture

* Your IA will be the foundation of your product. Think long-term, not what it is, but what will it become. The more

complex the IA, the actions and effort is required from the user.

* Keep it simple. Remember your goals. Find the tasks that maps to goals.

* Good trigger labels are crucial in mobile. They should be short, descriptive and meet user expectations.

Never be clever.

Page 127: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

5 Tips for Mobile IA

* Limit categories to 5

* Limit links to 10

* No more than 5 levels deep

* At least one content item per category

* Prioritize links by activity or popularity

Page 128: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

A Good Mobile IA

Home

About Us

Contact Us

News & Events

Products & Services

Support

Locations

Blog

Page 129: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Remember:Goals, Cost, Content &

Context

Page 130: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Jargon Alert

ClickstreamUsed to refer to the series of clicks, or path, the user

takes to reach a destination in an informational

space. Often used to describe user behavior gathered

from server logs, but also can be used in early

planning, as in “creating the optimal clickstream.”

Page 131: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

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 Clickstreams

Home

Latest Blog Posts

Navigation

Latest News

Footer

Products &

Services

Product & Services

Overviews

Support

Footer

Navigation

News & Events

News Items

Events

Footer

Navigation

Contact

Locations

Contact Form

Phone Numbers

Primary Address

Footer

Navigation

Main Phone

Main AddressBlog

Recent Posts

Footer

Navigation

About Us

Company Overview

Executive Overview

Footer

Navigation

Content Area

Link to Page

Page

Legend

Page 132: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Case Study

Page 133: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Revised Rolling Stone IA

Page 134: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Revised Rolling Stone IA

Page 135: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Rolling Stone Clickstream

Page 136: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Mobile Web Design

Page 137: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Flavors of Mobile Design

More Compatible Richer Experience

Page 138: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Effort versus Reward

DeviceUI App

UI

GatewayDesign

ContentDesign

Time to complete task Goal

Effort

Reward

Page 139: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Multiple Screens Sizes

Page 140: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Multiple Screens Sizes

128 pixels

160 p

ixels

Page 141: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Multiple Screens Sizes

176 pixels

220 p

ixels

128 pixels

160 p

ixels

Page 142: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Multiple Screens Sizes

320 pixels

240 p

ixels

176 pixels

220 p

ixels

128 pixels

160 p

ixels

Page 143: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Multiple Screens Sizes

240 pixels

320 p

ixels

320 pixels

240 p

ixels

176 pixels

220 p

ixels

128 pixels

160 p

ixels

Page 144: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Multiple Screens Sizes

320 pixels

320 p

ixels

240 pixels

320 p

ixels

320 pixels

240 p

ixels

176 pixels

220 p

ixels

128 pixels

160 p

ixels

Page 145: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Multiple Screens Sizes

320 pixels

320 p

ixels

240 pixels

320 p

ixels

320 pixels

240 p

ixels

176 pixels

220 p

ixels

128 pixels

160 p

ixels

Recommended Max Size

200 x 250 pixels

Page 146: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Directional Orientation

PrimaryDirectionalOrientation

Select Previous Link or Scroll Up

Select Next Link or Scroll Down

Forward or Page Down

Back or Page Up

1

2

3 4

1

2

3

4

Page 147: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Design Vertically

Header

Footer

Content

Navigation

Navigation

Page 148: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Flavor Matrix

Design Type Design Tool Delivery Complexity MSPs

J2ME

BREW

WML

XHTML-MP

Flash Lite

XHTML

Rich Photoshop Any Very Many

Rich Photoshop Carrier Very Few

Text HTML Web Simple All

Web CSS Web Simple All

Rich Flash TBD Semi Few

Rich CSS Web Simple All

Page 149: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Case Study

Page 150: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Mobile Design Tips

Page 151: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Mobile Design Tips

* Be creativeDevices have reached a point where you can be as creative as you want to be.

Page 152: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Mobile Design Tips

* Be creativeDevices have reached a point where you can be as creative as you want to be.

* Remember the goalsPut systems in place to regularly check against the goals.

Page 153: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Mobile Design Tips

* Be creativeDevices have reached a point where you can be as creative as you want to be.

* Remember the goalsPut systems in place to regularly check against the goals.

* PrototypeCreate quick examples of the design and interaction.

Page 154: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Mobile Design Tips

* Be creativeDevices have reached a point where you can be as creative as you want to be.

* Remember the goalsPut systems in place to regularly check against the goals.

* PrototypeCreate quick examples of the design and interaction.

* Test early and oftenGet opinions of others. Talking to one person is better than none.

Page 155: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Mobile Design Tips

* Be creativeDevices have reached a point where you can be as creative as you want to be.

* Remember the goalsPut systems in place to regularly check against the goals.

* PrototypeCreate quick examples of the design and interaction.

* Test early and oftenGet opinions of others. Talking to one person is better than none.

* Keep it simpleRemember if it doesn’t solve a problem or fill a need, lose it.

Page 156: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

The canvas might not be as robust, but there is still a

need for design.

Page 157: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Questions?

Page 158: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

LunchReturn by 1:30 PM

Page 159: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Act I, Part 3

mobile web development

Page 160: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Agenda09:00 Act I, Part One—The Mobile Ecosystem

Understanding the mobile technology and landscape.

10:45 BREAK

11:00 Act I, Part Two—Designing for ContextDesigning for how people use information outside the web browser.

12:30 LUNCH

1:30 Act I, Part Three—Mobile Web DevelopmentWhat you need to know to develop for mobile devices.

3:00 INTERMISSION

3:15 Act II, Part One—Mobile 2.0The future of mobile in the post-iPhone age.

4:30 BREAK

4:45 Act II, Part Two—iPhone Nitty-GrittyPractical examples for iPhone development and design.

Page 161: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Jargon Alert

WAPWireless Application Protocol

An open international standard for applications

that use wireless communication, for example

Internet access from a mobile phone.

Page 162: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Part A

Understanding Mobile Web Standards

Page 163: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Jargon Alert

XHTML-MPExtensible HyperText Markup Language:

Mobile Profile

A subset of XHTML Basic and HTML. Used as a

primary markup language for the WAP 2.0 protocol.

Page 164: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

XHTML-MP

Page 165: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

XHTML-MP* XHTML Basic and XHTML-MP are virtually indistinguishable

Page 166: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

XHTML-MP* XHTML Basic and XHTML-MP are virtually indistinguishable

* XHTML-MP is the predominant language for the mobile web.

Page 167: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

XHTML-MP* XHTML Basic and XHTML-MP are virtually indistinguishable

* XHTML-MP is the predominant language for the mobile web.

* It’s possible to use standard tools to create mobile web pages.

Page 168: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

XHTML-MP* XHTML Basic and XHTML-MP are virtually indistinguishable

* XHTML-MP is the predominant language for the mobile web.

* It’s possible to use standard tools to create mobile web pages.

* Since XHTML-MP is similar to XHTML, the transition to the mobile web need not be complicated to developers.

Page 169: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

XHTML-MP* XHTML Basic and XHTML-MP are virtually indistinguishable

* XHTML-MP is the predominant language for the mobile web.

* It’s possible to use standard tools to create mobile web pages.

* Since XHTML-MP is similar to XHTML, the transition to the mobile web need not be complicated to developers.

* XHTML-MP is the default industry-supported language for mobile web development.

Page 170: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

XHTML-MP* XHTML Basic and XHTML-MP are virtually indistinguishable

* XHTML-MP is the predominant language for the mobile web.

* It’s possible to use standard tools to create mobile web pages.

* Since XHTML-MP is similar to XHTML, the transition to the mobile web need not be complicated to developers.

* XHTML-MP is the default industry-supported language for mobile web development.

* Unless a mobile service provider requires providing WML to support older devices, XHTML-MP is the only needed language in mobile web design.

Page 171: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

<? xml version=”1.0” encoding=”UTF-8” ?>

<!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.0//EN”

“http://www.wapforum.org/DTD/xhtml-mobile10.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<title>Hello World!</title>

<meta http-equiv=”content-type” content=”application/vnd.

wap.xhtml+xml” />

</head>

<body>

<div id=”intro”>

<h1>Hello World!</h1>

</div>

<div id=”content”>

<p>This is a simple XHTML-MP Page</p>

</div>

</body>

</html>

Example XHTML-MP

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Hello World!</title> <meta http-equiv="content-type" content="application/vnd.wap.xhtml+xml"/> </head> <body> <div id="intro"> <h1>Hello World!</h1> </div> <div id="content"> <p>This is a simple XHTML-MP Page</p> </div> </body> </html>

Page 172: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

If you know XHTML.you know xhtml-mp.

Page 173: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Wireless CSS

Page 174: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Wireless CSS

* Wireless CSS supports most CSS attributes, but not all of them.

Page 175: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Wireless CSS

* Wireless CSS supports most CSS attributes, but not all of them.

* More advanced styling techniques won’t likely work across multiple mobile browsers.

Page 176: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Wireless CSS

* Wireless CSS supports most CSS attributes, but not all of them.

* More advanced styling techniques won’t likely work across multiple mobile browsers.

* The best advice is to keep your CSS as simple as possible.

Page 177: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Wireless CSS

* Wireless CSS supports most CSS attributes, but not all of them.

* More advanced styling techniques won’t likely work across multiple mobile browsers.

* The best advice is to keep your CSS as simple as possible.

* Try to use document styles versus stylesheets.

Page 178: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Example Wireless CSS

body {

border-top: 10px solid #439213;

font: 10px Arial, Helvetica, sans-serif;

vertical-align: top;

padding: 0 8px;

margin: 0px;

}

p {

margin: 10px 0;

}

a {

color: #439213;

}

img {

vertical-align: middle;

}

body { border-top: 10px solid #439213; font: 10px Arial, Helvetica, sans-serif; padding: 0 8px; margin: 0px;}

p { margin: 10px 0;}

a { color: #439213;}

img { vertical-align: middle;}

Page 179: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Keep your code and styles simple and you will do fine on most mobile browsers.

Page 180: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

W3C Initiatives

Page 181: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

W3C Initiatives

* Mobile Web Best PracticesGoal: To advocate a variety of coding principles and publishing best

practices to developers, publishers and mobile service providers.

Page 182: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

W3C Initiatives

* Mobile Web Best PracticesGoal: To advocate a variety of coding principles and publishing best

practices to developers, publishers and mobile service providers.

* mobileOKGoal: To create machine-readable labels and a mobileOK trustmark to

indicate that the mobile web site adheres to the Best Practices

recommendations.

Page 183: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

W3C Initiatives

* Mobile Web Best PracticesGoal: To advocate a variety of coding principles and publishing best

practices to developers, publishers and mobile service providers.

* mobileOKGoal: To create machine-readable labels and a mobileOK trustmark to

indicate that the mobile web site adheres to the Best Practices

recommendations.

* Device DescriptionGoal: To create a method of profiling and identifying device capabilities to

ease adaptation.

Page 184: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

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.

Page 185: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

The Caveat

Page 186: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

The Dark Side of the Mobile Web

Page 187: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

WAP 2.0 content is supposed to be available in both WML

and XHTML-MP versions.

Page 188: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Jargon Alert

WMLWireless Markup Language

An XML language used to specify content and user

interface for WAP devices.

Often referred as WAP 1.0

Page 189: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

The Dark Side of Mobile

Page 190: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

The Dark Side of Mobile

* No Cascading Stylesheets

Page 191: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

The Dark Side of Mobile

* No Cascading Stylesheets

* Heavy use of tabled layouts

Page 192: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

The Dark Side of Mobile

* No Cascading Stylesheets

* Heavy use of tabled layouts

* Use of tables to control simple presentation

Page 193: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

The Dark Side of Mobile

* No Cascading Stylesheets

* Heavy use of tabled layouts

* Use of tables to control simple presentation

* Really, really bad code

Page 194: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

The Dark Side of Mobile

* No Cascading Stylesheets

* Heavy use of tabled layouts

* Use of tables to control simple presentation

* Really, really bad code

* A lot of problematic and hard to fix bugs

Page 195: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

The Dark Side of Mobile

* No Cascading Stylesheets

* Heavy use of tabled layouts

* Use of tables to control simple presentation

* Really, really bad code

* A lot of problematic and hard to fix bugs

* Insane test cycles

Page 196: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Part B

Getting started with XHTML-MP

Page 197: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

With a few exceptions you already know how to

code for mobile today.

Page 198: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Correct Encoding & Doctype

Page 199: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Correct Encoding & Doctype

* Character EncodingEnsuring the use of the correct character encoding and doctype makes

sure that the page renders as expected.

<?xml version=”1.0” encoding=”UTF-8” ?>

Page 200: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Correct Encoding & Doctype

* Character EncodingEnsuring the use of the correct character encoding and doctype makes

sure that the page renders as expected.

<?xml version=”1.0” encoding=”UTF-8” ?>

* XHTML-MP DoctypeThe document type (doctype) tells the browser how the page needs to

render, including the rules and how strictly to follow these rules.

<!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.0//EN” “http://www.wapforum.org/DTD/xhtml-mobile10.dtd”>

Page 201: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Use Well-formed Code

Page 202: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Use Well-formed Code* All elements should be closed, e.g. <br />.

Page 203: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Use Well-formed Code* All elements should be closed, e.g. <br />.

* All non-empty elements should be closed.<p>Example Text</p><p>Example Text</p>

Page 204: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Use Well-formed Code* All elements should be closed, e.g. <br />.

* All non-empty elements should be closed.<p>Example Text</p><p>Example Text</p>

* All elements must be closed in the reverse order.<em><strong>Example Text</strong></em>

Page 205: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Use Well-formed Code* All elements should be closed, e.g. <br />.

* All non-empty elements should be closed.<p>Example Text</p><p>Example Text</p>

* All elements must be closed in the reverse order.<em><strong>Example Text</strong></em>

* The alt attribute should be used for all images.<img src=”image.png” alt=”Image Description” />

Page 206: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Use Well-formed Code (con’t)

Page 207: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Use Well-formed Code (con’t)

* Text should appear within a block level element and not directly in the body.<body><p>Example Text</p></body>

Page 208: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Use Well-formed Code (con’t)

* Text should appear within a block level element and not directly in the body.<body><p>Example Text</p></body>

* Inline elements should always nest with block level elements.<h2><em>Example Text</em></h2>

Page 209: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Use Well-formed Code (con’t)

* Text should appear within a block level element and not directly in the body.<body><p>Example Text</p></body>

* Inline elements should always nest with block level elements.<h2><em>Example Text</em></h2>

* All attributes should appear within quotes.<hr noshade=”true”/>

Page 210: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Use Well-formed Code (con’t)

* Text should appear within a block level element and not directly in the body.<body><p>Example Text</p></body>

* Inline elements should always nest with block level elements.<h2><em>Example Text</em></h2>

* All attributes should appear within quotes.<hr noshade=”true”/>

* All elements and attributes should use lowercase.<p class=”sm”>Example Text <span>is nice</span></p>

Page 211: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Avoid Tables for Layout

* Layout tables become a big problem when viewed in multiple mobile browsers.<body>

<div id=”header”> <!-- Header placeholder --> </div>

<div id=”content”> <!-- Content placeholder -->

</div> <div id=”footer”> <!-- Footer placeholder -->

</div></body>

Page 212: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Place Navigation in the Content Body

* Given the vertical orientation of the mobile page, we show only navigation that’s relevant to the page.<div id=”content”>

<ol>

<li><a href=”news.html”>News</a><li>

<li><a href=”products.html”>Our Products</a></li>

<li><a href=”customers.html”>Our Customers</a></li>

<li><a href=”about.html”>About Us</a></li>

<li><a href=”contact.html”>Contact Us</a></li>

</ol>

</div>

Page 213: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Use accesskeys in the Primary Navigation

* The primary navigation should include an assigned accesskey that corresponds to a numbered keypad whenever possible.

<li><a href=”news.html” accesskey=”1”>News</a></li>

<li><a href=”products.html” accesskey=”2”>Our Products</a></li> <li><a href=”customers.html” accesskey=”3”>Our Customers</a></li>

<li><a href=”about.html” accesskey=”4”>About Us</a></li> <li><a href=”contact.html” accesskey=”5”>Contact Us</a></li>

Page 214: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Use Ordered Lists for Navigation

* Using ordered lists for navigation rather than unordered lists will indicate to the use the associated accesskey.<ol> <li><a href=”news.html” accesskey=”1”>News</a></li>

<li><a href=”products.html” accesskey=”2”>Our Products</a></li> <li><a href=”customers.html” accesskey=”3”>Our Customers</a></li>

<li><a href=”about.html” accesskey=”4”>About Us</a></li> <li><a href=”contact.html” accesskey=”5”>Contact Us</a></li> </ol>

Page 215: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Use Document Styles, Not External Styles

Page 216: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Use Document Styles, Not External Styles

* Linking to an external file requires most mobile browsers to first load the XHTML-MP document, and then load the external stylesheet.

Page 217: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Use Document Styles, Not External Styles

* Linking to an external file requires most mobile browsers to first load the XHTML-MP document, and then load the external stylesheet.

* When using external stylesheets the user may experience a brief “flash” of unstyled text before the stylesheet has a chance to load. Instead, insert styles into the <head> of a document.

Page 218: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Linking Phone Numbers

* One of the benefits of the mobile web is that its users primarily view it on a phone, allowing the user to quickly and easily make phone calls.

<a href=”tel:+012065450210”>+1 206 545-0210</a>

Page 219: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Forms can be Tricky

Page 220: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Forms can be Tricky

* Entering data into a mobile web site is often a difficult and time-consuming process.

Page 221: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Forms can be Tricky

* Entering data into a mobile web site is often a difficult and time-consuming process.

* To avoid wasting the user’s time and causing frustration, use few or no forms.

Page 222: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Forms can be Tricky

* Entering data into a mobile web site is often a difficult and time-consuming process.

* To avoid wasting the user’s time and causing frustration, use few or no forms.

* However, when using forms, keep the needed information as little as possible.

Page 223: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Part C

Mobile Publishing

Page 224: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Let’s back up for a minute.

Page 225: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

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 Options

Page 226: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

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 Options

SSR

Page 227: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

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 Options

SSR Reformat

Page 228: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

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 Options

SSR Reformat Stylesheets

Page 229: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

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 Options

SSR Reformat Stylesheets Mobile Specific

Page 230: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

006

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Context vs. Content

Mobile Specific Site

Stylesheets

Reformat

SSR

Complex

SimpleSlower Faster

Value

Page 231: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

006

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Context vs. Content

Mobile Specific Site

Stylesheets

Reformat

SSR

Complex

SimpleSlower Faster

Value

Page 232: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Mobile Stylesheets

Page 233: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

006

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Example Mobile Stylesheet

Page 234: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

006

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Example Mobile Stylesheet

Page 235: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

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 2.0 Code

Page 236: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

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 2.0 Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head> <title>Mobile 2.0</title> <meta http-equiv="Content-Language" content="en-us" /> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <link href="assets/styles/screen.css" rel="stylesheet" type="text/css" media="screen" /> <link href="assets/styles/mobile.css" rel="stylesheet" type="text/css" media="handheld" /></head> <body><div id="container"> <div id="header"> <h1>Mobile 2.0 Conference</h1> <div id="loc">San Francisco, November 6, 2006</div> <div id="spons">Presented by Mobile Monday London and San Francisco</div> <ol> <li><a href="#speakers" accesskey="1">Speakers</a></li> <li><a href="#schedule" accesskey="2">Schedule</a></li> <li><a href="#location" accesskey="3">Location</a></li> <li><a href="#register" accesskey="4">Register</a></li> </ol> </div> <div id="promo"><a href="#register" title="Register Now, Only $45"></a></div> <div id="content"> <div id="speakers"> <h2>Speakers</h2> <h3>Confirmed speakers and panel participants</h3> <p>The mobile2.0 conference brings together experts and thought leaders from all aspects of mobile application development and web technologies.</p> <div id="speakers2"> <ul>

Page 237: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

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 2.0 Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head> <title>Mobile 2.0</title> <meta http-equiv="Content-Language" content="en-us" /> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <link href="assets/styles/screen.css" rel="stylesheet" type="text/css" media="screen" /> <link href="assets/styles/mobile.css" rel="stylesheet" type="text/css" media="handheld" /></head> <body><div id="container"> <div id="header"> <h1>Mobile 2.0 Conference</h1> <div id="loc">San Francisco, November 6, 2006</div> <div id="spons">Presented by Mobile Monday London and San Francisco</div> <ol> <li><a href="#speakers" accesskey="1">Speakers</a></li> <li><a href="#schedule" accesskey="2">Schedule</a></li> <li><a href="#location" accesskey="3">Location</a></li> <li><a href="#register" accesskey="4">Register</a></li> </ol> </div> <div id="promo"><a href="#register" title="Register Now, Only $45"></a></div> <div id="content"> <div id="speakers"> <h2>Speakers</h2> <h3>Confirmed speakers and panel participants</h3> <p>The mobile2.0 conference brings together experts and thought leaders from all aspects of mobile application development and web technologies.</p> <div id="speakers2"> <ul>

Page 238: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

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 2.0 Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head> <title>Mobile 2.0</title> <meta http-equiv="Content-Language" content="en-us" /> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <link href="assets/styles/screen.css" rel="stylesheet" type="text/css" media="screen" /> <link href="assets/styles/mobile.css" rel="stylesheet" type="text/css" media="handheld" /></head> <body><div id="container"> <div id="header"> <h1>Mobile 2.0 Conference</h1> <div id="loc">San Francisco, November 6, 2006</div> <div id="spons">Presented by Mobile Monday London and San Francisco</div> <ol> <li><a href="#speakers" accesskey="1">Speakers</a></li> <li><a href="#schedule" accesskey="2">Schedule</a></li> <li><a href="#location" accesskey="3">Location</a></li> <li><a href="#register" accesskey="4">Register</a></li> </ol> </div> <div id="promo"><a href="#register" title="Register Now, Only $45"></a></div> <div id="content"> <div id="speakers"> <h2>Speakers</h2> <h3>Confirmed speakers and panel participants</h3> <p>The mobile2.0 conference brings together experts and thought leaders from all aspects of mobile application development and web technologies.</p> <div id="speakers2"> <ul>

Page 239: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

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 2.0 Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head> <title>Mobile 2.0</title> <meta http-equiv="Content-Language" content="en-us" /> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <link href="assets/styles/screen.css" rel="stylesheet" type="text/css" media="screen" /> <link href="assets/styles/mobile.css" rel="stylesheet" type="text/css" media="handheld" /></head> <body><div id="container"> <div id="header"> <h1>Mobile 2.0 Conference</h1> <div id="loc">San Francisco, November 6, 2006</div> <div id="spons">Presented by Mobile Monday London and San Francisco</div> <ol> <li><a href="#speakers" accesskey="1">Speakers</a></li> <li><a href="#schedule" accesskey="2">Schedule</a></li> <li><a href="#location" accesskey="3">Location</a></li> <li><a href="#register" accesskey="4">Register</a></li> </ol> </div> <div id="promo"><a href="#register" title="Register Now, Only $45"></a></div> <div id="content"> <div id="speakers"> <h2>Speakers</h2> <h3>Confirmed speakers and panel participants</h3> <p>The mobile2.0 conference brings together experts and thought leaders from all aspects of mobile application development and web technologies.</p> <div id="speakers2"> <ul>

Page 240: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

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 2.0 Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head> <title>Mobile 2.0</title> <meta http-equiv="Content-Language" content="en-us" /> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <link href="assets/styles/screen.css" rel="stylesheet" type="text/css" media="screen" /> <link href="assets/styles/mobile.css" rel="stylesheet" type="text/css" media="handheld" /></head> <body><div id="container"> <div id="header"> <h1>Mobile 2.0 Conference</h1> <div id="loc">San Francisco, November 6, 2006</div> <div id="spons">Presented by Mobile Monday London and San Francisco</div> <ol> <li><a href="#speakers" accesskey="1">Speakers</a></li> <li><a href="#schedule" accesskey="2">Schedule</a></li> <li><a href="#location" accesskey="3">Location</a></li> <li><a href="#register" accesskey="4">Register</a></li> </ol> </div> <div id="promo"><a href="#register" title="Register Now, Only $45"></a></div> <div id="content"> <div id="speakers"> <h2>Speakers</h2> <h3>Confirmed speakers and panel participants</h3> <p>The mobile2.0 conference brings together experts and thought leaders from all aspects of mobile application development and web technologies.</p> <div id="speakers2"> <ul>

Page 241: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

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 2.0 Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head> <title>Mobile 2.0</title> <meta http-equiv="Content-Language" content="en-us" /> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <link href="assets/styles/screen.css" rel="stylesheet" type="text/css" media="screen" /> <link href="assets/styles/mobile.css" rel="stylesheet" type="text/css" media="handheld" /></head> <body><div id="container"> <div id="header"> <h1>Mobile 2.0 Conference</h1> <div id="loc">San Francisco, November 6, 2006</div> <div id="spons">Presented by Mobile Monday London and San Francisco</div> <ol> <li><a href="#speakers" accesskey="1">Speakers</a></li> <li><a href="#schedule" accesskey="2">Schedule</a></li> <li><a href="#location" accesskey="3">Location</a></li> <li><a href="#register" accesskey="4">Register</a></li> </ol> </div> <div id="promo"><a href="#register" title="Register Now, Only $45"></a></div> <div id="content"> <div id="speakers"> <h2>Speakers</h2> <h3>Confirmed speakers and panel participants</h3> <p>The mobile2.0 conference brings together experts and thought leaders from all aspects of mobile application development and web technologies.</p> <div id="speakers2"> <ul>

Page 242: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

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 2.0 Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head> <title>Mobile 2.0</title> <meta http-equiv="Content-Language" content="en-us" /> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <link href="assets/styles/screen.css" rel="stylesheet" type="text/css" media="screen" /> <link href="assets/styles/mobile.css" rel="stylesheet" type="text/css" media="handheld" /></head> <body><div id="container"> <div id="header"> <h1>Mobile 2.0 Conference</h1> <div id="loc">San Francisco, November 6, 2006</div> <div id="spons">Presented by Mobile Monday London and San Francisco</div> <ol> <li><a href="#speakers" accesskey="1">Speakers</a></li> <li><a href="#schedule" accesskey="2">Schedule</a></li> <li><a href="#location" accesskey="3">Location</a></li> <li><a href="#register" accesskey="4">Register</a></li> </ol> </div> <div id="promo"><a href="#register" title="Register Now, Only $45"></a></div> <div id="content"> <div id="speakers"> <h2>Speakers</h2> <h3>Confirmed speakers and panel participants</h3> <p>The mobile2.0 conference brings together experts and thought leaders from all aspects of mobile application development and web technologies.</p> <div id="speakers2"> <ul>

Page 243: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

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 2.0 Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head> <title>Mobile 2.0</title> <meta http-equiv="Content-Language" content="en-us" /> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <link href="assets/styles/screen.css" rel="stylesheet" type="text/css" media="screen" /> <link href="assets/styles/mobile.css" rel="stylesheet" type="text/css" media="handheld" /></head> <body><div id="container"> <div id="header"> <h1>Mobile 2.0 Conference</h1> <div id="loc">San Francisco, November 6, 2006</div> <div id="spons">Presented by Mobile Monday London and San Francisco</div> <ol> <li><a href="#speakers" accesskey="1">Speakers</a></li> <li><a href="#schedule" accesskey="2">Schedule</a></li> <li><a href="#location" accesskey="3">Location</a></li> <li><a href="#register" accesskey="4">Register</a></li> </ol> </div> <div id="promo"><a href="#register" title="Register Now, Only $45"></a></div> <div id="content"> <div id="speakers"> <h2>Speakers</h2> <h3>Confirmed speakers and panel participants</h3> <p>The mobile2.0 conference brings together experts and thought leaders from all aspects of mobile application development and web technologies.</p> <div id="speakers2"> <ul>

Page 244: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

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 2.0 Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head> <title>Mobile 2.0</title> <meta http-equiv="Content-Language" content="en-us" /> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <link href="assets/styles/screen.css" rel="stylesheet" type="text/css" media="screen" /> <link href="assets/styles/mobile.css" rel="stylesheet" type="text/css" media="handheld" /></head> <body><div id="container"> <div id="header"> <h1>Mobile 2.0 Conference</h1> <div id="loc">San Francisco, November 6, 2006</div> <div id="spons">Presented by Mobile Monday London and San Francisco</div> <ol> <li><a href="#speakers" accesskey="1">Speakers</a></li> <li><a href="#schedule" accesskey="2">Schedule</a></li> <li><a href="#location" accesskey="3">Location</a></li> <li><a href="#register" accesskey="4">Register</a></li> </ol> </div> <div id="promo"><a href="#register" title="Register Now, Only $45"></a></div> <div id="content"> <div id="speakers"> <h2>Speakers</h2> <h3>Confirmed speakers and panel participants</h3> <p>The mobile2.0 conference brings together experts and thought leaders from all aspects of mobile application development and web technologies.</p> <div id="speakers2"> <ul>

Page 245: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Mobile Specific Sites

Page 246: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

COVERED!

Page 247: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

A word on content management

Page 248: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

The Device Detection Problem

Page 249: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

The Device Detection Problem

Page 250: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

The Device Detection Problem

* Simple Device DetectionPublish only one mobile specific site, designed for the lowest supported

browser, routing all mobile browsers to it.

Page 251: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

The Device Detection Problem

* Simple Device DetectionPublish only one mobile specific site, designed for the lowest supported

browser, routing all mobile browsers to it.

* Advanced Device DetectionProgrammatically render the best possible mobile specific site to the

requesting device.

Page 252: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

The Device Detection Problem

* Simple Device DetectionPublish only one mobile specific site, designed for the lowest supported

browser, routing all mobile browsers to it.

* Advanced Device DetectionProgrammatically render the best possible mobile specific site to the

requesting device.

* Mobile StylesheetsCode XHTML pages with the mobile context in mind and use the media

type attribute to render a mobile stylesheet to mobile devices.

Page 253: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

The Device Detection Problem

* Simple Device DetectionPublish only one mobile specific site, designed for the lowest supported

browser, routing all mobile browsers to it.

* Advanced Device DetectionProgrammatically render the best possible mobile specific site to the

requesting device.

* Mobile StylesheetsCode XHTML pages with the mobile context in mind and use the media

type attribute to render a mobile stylesheet to mobile devices.

* No device detectionRely on an alternate domain or subdirectory forcing the user to manually

enter or navigate to the mobile specific site.

Page 254: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

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.

Page 255: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Device Detection Solutions

Page 256: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Device Detection Solutions

* WURFL http://wurfl.sourceforge.net/

A XML configuration file which contains information about device

capabilities and features for a variety of mobile devices.

Page 257: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Device Detection Solutions

* WURFL http://wurfl.sourceforge.net/

A XML configuration file which contains information about device

capabilities and features for a variety of mobile devices.

* WALL http://wurfl.sourceforge.net/java/wall.php

An abstraction library that adapts content to the target device.

Page 258: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Device Detection Solutions

* WURFL http://wurfl.sourceforge.net/

A XML configuration file which contains information about device

capabilities and features for a variety of mobile devices.

* WALL http://wurfl.sourceforge.net/java/wall.php

An abstraction library that adapts content to the target device.

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

PHP script that detects and redirects mobile browsers.

Page 259: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Device Detection Solutions

* WURFL http://wurfl.sourceforge.net/

A XML configuration file which contains information about device

capabilities and features for a variety of mobile devices.

* WALL http://wurfl.sourceforge.net/java/wall.php

An abstraction library that adapts content to the target device.

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

PHP script that detects and redirects mobile browsers.

* “Reverse” Device DetectionUse Javascript to detect desktop browsers.

Page 260: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Device Detection Solutions

* WURFL http://wurfl.sourceforge.net/

A XML configuration file which contains information about device

capabilities and features for a variety of mobile devices.

* WALL http://wurfl.sourceforge.net/java/wall.php

An abstraction library that adapts content to the target device.

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

PHP script that detects and redirects mobile browsers.

* “Reverse” Device DetectionUse Javascript to detect desktop browsers.

* StylesheetsUse the stylesheet media type to detect mobile browsers.

Page 261: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Publishing Your Mobile Site

Page 262: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

DIY Publishing Methods

Page 263: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

DIY Publishing Methods

* Educate the user to manually enter a mobile URL such as a folder or sub-domain. e.g. domain.com/mobile or mobile.domain.com.

Page 264: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

DIY Publishing Methods

* Educate the user to manually enter a mobile URL such as a folder or sub-domain. e.g. domain.com/mobile or mobile.domain.com.

* Detect the mobile device automatically and redirect the user to a location. In this case, the user simply enters domain.com.

Page 265: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

DIY Publishing Methods

* Educate the user to manually enter a mobile URL such as a folder or sub-domain. e.g. domain.com/mobile or mobile.domain.com.

* Detect the mobile device automatically and redirect the user to a location. In this case, the user simply enters domain.com.

* Use the mobile specific .mobi top-level domain. Here the user enters domain.mobi.

Page 266: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

DIY Publishing Methods

* Educate the user to manually enter a mobile URL such as a folder or sub-domain. e.g. domain.com/mobile or mobile.domain.com.

* Detect the mobile device automatically and redirect the user to a location. In this case, the user simply enters domain.com.

* Use the mobile specific .mobi top-level domain. Here the user enters domain.mobi.

* A SMS query that returns a URL called WAP Push.

Page 267: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

DIY Publishing Methods

* Educate the user to manually enter a mobile URL such as a folder or sub-domain. e.g. domain.com/mobile or mobile.domain.com.

* Detect the mobile device automatically and redirect the user to a location. In this case, the user simply enters domain.com.

* Use the mobile specific .mobi top-level domain. Here the user enters domain.mobi.

* A SMS query that returns a URL called WAP Push.

Page 268: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Publishing through Operators

Page 269: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

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.

Page 270: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Top-Deck = Increased ViewsLower Deck = Oblivion

Page 271: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

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”

Page 272: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Mobile Service Providers often require you to support

all their devices.

Page 273: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

If you can convince the operator that you can boost

ARPU, you will find an important ally.

Page 274: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Jargon Alert

ARPUAverage Revenue Per User

A term used to describe the financial value of a

program, application or service.

Page 275: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Unless you have the experience and resources

very bad idea.

Page 276: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Supporting Devices

Page 277: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Supporting Devices & Browsers

Page 278: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Supporting Devices & Browsers

* Over 500 devices being sold each year.

Page 279: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Supporting Devices & Browsers

* Over 500 devices being sold each year.

* Over 50 mobile browsers to contend with.

Page 280: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Supporting Devices & Browsers

* Over 500 devices being sold each year.

* Over 50 mobile browsers to contend with.

* Crowding stems from mobile service provider provisioning.

Page 281: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Supporting Devices & Browsers

* Over 500 devices being sold each year.

* Over 50 mobile browsers to contend with.

* Crowding stems from mobile service provider provisioning.

* Mobile service provider linked sites must support all provisioned devices and browsers.

Page 282: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Supporting Devices & Browsers

* Over 500 devices being sold each year.

* Over 50 mobile browsers to contend with.

* Crowding stems from mobile service provider provisioning.

* Mobile service provider linked sites must support all provisioned devices and browsers.

* Adopts standards has been around for much longer in mobile.

Page 283: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Supporting Devices & Browsers

* Over 500 devices being sold each year.

* Over 50 mobile browsers to contend with.

* Crowding stems from mobile service provider provisioning.

* Mobile service provider linked sites must support all provisioned devices and browsers.

* Adopts standards has been around for much longer in mobile.

* Older or poorly designed devices don’t require support.

Page 284: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Testing

Page 285: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Testing

* Desktop TestingTesting from a normal desktop browser is a great way to start.

Page 286: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Testing

* Desktop TestingTesting from a normal desktop browser is a great way to start.

* Browser ToolsBrowsers like Opera and Firefox have tools specific to mobile testing.

Page 287: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Testing

* Desktop TestingTesting from a normal desktop browser is a great way to start.

* Browser ToolsBrowsers like Opera and Firefox have tools specific to mobile testing.

* EmulatorsAllows for desktop verification without loading on to a device.

Page 288: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Testing

* Desktop TestingTesting from a normal desktop browser is a great way to start.

* Browser ToolsBrowsers like Opera and Firefox have tools specific to mobile testing.

* EmulatorsAllows for desktop verification without loading on to a device.

* Device TestingTest as many as you can, but focus on five good mainstream devices.

Page 289: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Testing

* Desktop TestingTesting from a normal desktop browser is a great way to start.

* Browser ToolsBrowsers like Opera and Firefox have tools specific to mobile testing.

* EmulatorsAllows for desktop verification without loading on to a device.

* Device TestingTest as many as you can, but focus on five good mainstream devices.

* Usability TestingTest early and often with as many users as you can.

Page 290: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Focus on Five.

Page 291: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

006

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

DeviceAnywhere

Page 292: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

The Mobile-Specific Debate

Page 293: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Questions?

Page 294: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

BreakReturn by 3:15 PM

Page 295: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Act II

the future and you

Page 296: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Agenda09:00 Act I, Part One—The Mobile Ecosystem

Understanding the mobile technology and landscape.

10:45 BREAK

11:00 Act I, Part Two—Designing for ContextDesigning for how people use information outside the web browser.

12:30 LUNCH

1:30 Act I, Part Three—Mobile Web DevelopmentWhat you need to know to develop for mobile devices.

3:00 INTERMISSION

3:15 Act II, Part One—Mobile 2.0The future of mobile in the post-iPhone age.

4:30 BREAK

4:45 Act II, Part Two—iPhone Nitty-GrittyPractical examples for iPhone development and design.

Page 297: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Act II, Part 1

mobile 2.0

Page 298: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Recap on Context

Page 299: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Mobile has the potential to reach anybody through

any medium.

Page 300: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Page 301: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

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

Page 302: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Prepare for a trulycontextual web.

Page 303: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Mobile will revolutionize the way we gather and

interact with information in the next three years.

Page 304: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

We are at the precipice of the next generation of

the web.

Page 305: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

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.

Page 306: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

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 1.0

Proprietary

Walled Gardens

First to market

Brand-centered

Mobile 2.0

Standards

Web Services

Web as a Platform

User-centered

Page 307: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Two very big problems

Page 308: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

CSS & JavaScript

Page 309: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Page 310: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

The iPhone

Page 311: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

A Confession

Page 312: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Page 313: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Page 314: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Page 315: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Page 316: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Page 317: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Page 318: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

The iPhone

Page 319: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

The iPhone is the first mobile device worthy of

being labeled “Mobile 2.0”

Page 320: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

iPhone Uniqueness

Page 321: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

iPhone Uniqueness1. Smart phone for the masses

Page 322: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

iPhone Uniqueness1. Smart phone for the masses

2. Flat-rate data plan

Page 323: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

iPhone Uniqueness1. Smart phone for the masses

2. Flat-rate data plan

3. Device sold and supported outside the carrier

Page 324: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

iPhone Uniqueness1. Smart phone for the masses

2. Flat-rate data plan

3. Device sold and supported outside the carrier

4. No subsidization

Page 325: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

iPhone Uniqueness1. Smart phone for the masses

2. Flat-rate data plan

3. Device sold and supported outside the carrier

4. No subsidization

5. Updatable software

Page 326: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

iPhone Uniqueness1. Smart phone for the masses

2. Flat-rate data plan

3. Device sold and supported outside the carrier

4. No subsidization

5. Updatable software

6. Location awareness

Page 327: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

iPhone Uniqueness1. Smart phone for the masses

2. Flat-rate data plan

3. Device sold and supported outside the carrier

4. No subsidization

5. Updatable software

6. Location awareness

7. Bandwidth expectations

Page 328: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

iPhone Uniqueness1. Smart phone for the masses

2. Flat-rate data plan

3. Device sold and supported outside the carrier

4. No subsidization

5. Updatable software

6. Location awareness

7. Bandwidth expectations

8. Portable device convergence

Page 329: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

iPhone Uniqueness1. Smart phone for the masses

2. Flat-rate data plan

3. Device sold and supported outside the carrier

4. No subsidization

5. Updatable software

6. Location awareness

7. Bandwidth expectations

8. Portable device convergence

9. Web & mobile standards

Page 330: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

iPhone Uniqueness1. Smart phone for the masses

2. Flat-rate data plan

3. Device sold and supported outside the carrier

4. No subsidization

5. Updatable software

6. Location awareness

7. Bandwidth expectations

8. Portable device convergence

9. Web & mobile standards

10. Impact on web communities

Page 331: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Page 332: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

scale

Page 333: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

1.12 millionsold in q3 2007

Page 334: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

27%of smart phones in US

Page 335: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

3%of all phones in US

Page 336: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Only the Beginning

Page 337: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Apple estimates 10 million units sold by the end of

2008.

Page 338: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

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

WebKit.

Page 339: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

iPod Touch

Page 340: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Nokia N95

Page 341: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Google Android

Page 342: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Look Familiar?

Page 343: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

iPhone is Not Alone

Page 344: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

iPhone is Not Alone

* iPod Touch uses an identical version of Mobile Safari.

Page 345: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

iPhone is Not Alone

* iPod Touch uses an identical version of Mobile Safari.

* Nokia has been using a WebKit derivative in their S60 phones since 2006. Other models also include it (N95, et cetera).

Page 346: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

iPhone is Not Alone

* iPod Touch uses an identical version of Mobile Safari.

* Nokia has been using a WebKit derivative in their S60 phones since 2006. Other models also include it (N95, et cetera).

* Google’s Android SDK uses WebKit.

Page 347: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

iPhone is Not Alone

* iPod Touch uses an identical version of Mobile Safari.

* Nokia has been using a WebKit derivative in their S60 phones since 2006. Other models also include it (N95, et cetera).

* Google’s Android SDK uses WebKit.

* Mac OS X and Windows also have Safari.

Page 348: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Mobile WebKit Features

Page 349: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Mobile WebKit Features

* Supports all standard flavors of (X)HTML

Page 350: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Mobile WebKit Features

* Supports all standard flavors of (X)HTML

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

Page 351: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Mobile WebKit Features

* Supports all standard flavors of (X)HTML

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

* Javascript (including Ajax)

Page 352: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Mobile WebKit Features

* Supports all standard flavors of (X)HTML

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

* Javascript (including Ajax)

* This means complex layouts, styling and interaction...

Page 353: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

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

Page 354: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

but:There’s a Speed Reality!

Page 355: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

EDGE

EDGE

Max Speed Actual Average

Page 356: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

EDGE

EDGE

200 kbps

Max Speed Actual Average

Page 357: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

EDGE

EDGE

200 kbps

125 kbps

Max Speed Actual Average

Page 358: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

WiFi via Broadband

WiFi

Max Speed Actual Average

Page 359: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

WiFi via Broadband

WiFi

54 mbps

Max Speed Actual Average

Page 360: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

WiFi via Broadband

WiFi

54 mbps

4 mbps

Max Speed Actual Average

Page 361: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

EDGE vs. WiFi

Actual Average

WiFi

EDGE

Page 362: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

EDGE vs. WiFi

Actual Average

WiFi

EDGE

4.00 mbps

Page 363: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

EDGE vs. WiFi

Actual Average

WiFi

EDGE

4.00 mbps

0.13 mbps

Page 364: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

32x slower!

EDGE vs. WiFi

Actual Average

WiFi

EDGE

4.00 mbps

0.13 mbps

Page 365: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

So then, Downloads...

Page 366: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

So then, Downloads...

300 kb

Page 367: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

So then, Downloads...

300 kb

WiFi: ~1 second

Page 368: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

So then, Downloads...

300 kb

WiFi: ~1 secondEDGE: 16 seconds

Bad example, but you get the drift.

Page 369: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

While we have WiFi, we cannot rely on it.

Page 370: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Finding the happy medium.

Page 371: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Questions?

Page 372: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

BreakReturn by 4:45 PM

Page 373: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

But should you design for the iPhone?

Page 374: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Yes. If you design to standards, future Mobile 2.0 devices

will love you.

Page 375: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

No. Know your users and what

devices they are likely to have.

Page 376: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

in short:The iPhone is the first of many Mobile 2.0 Devices.

Page 377: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Act II, Part 2

iPhone Nitty-Gritty

Page 378: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Agenda09:00 Act I, Part One—The Mobile Ecosystem

Understanding the mobile technology and landscape.

10:45 BREAK

11:00 Act I, Part Two—Designing for ContextDesigning for how people use information outside the web browser.

12:30 LUNCH

1:30 Act I, Part Three—Mobile Web DevelopmentWhat you need to know to develop for mobile devices.

3:00 INTERMISSION

3:15 Act II, Part One—Mobile 2.0The future of mobile in the post-iPhone age.

4:30 BREAK

4:45 Act II, Part Two—iPhone Nitty-GrittyPractical examples for iPhone development and design.

Page 379: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

006

Blue

Fla

vor.

All t

rade

mar

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 apps that grow on you.

(Made by the folks at Blue Flavor)

Page 380: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Why Create Leaflets?

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

(Blog Post Why we made Leaflets)

Page 381: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Using CSS3

Page 382: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Using CSS3

Page 383: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Using CSS3

+ 3 Kilobytes

Page 384: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Using CSS3

+ 320 bytes

+ 3 Kilobytes

Page 385: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Using CSS3

+ 320 bytes

+ 3 Kilobytes

-webkit-border-radius: 10px;+

Page 386: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Using CSS3

+ 320 bytes

+ 3 Kilobytes

-webkit-border-radius: 10px;+

Page 387: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Using CSS3

+ 320 bytes

+ 3 Kilobytes

-webkit-border-radius: 10px;+

Page 388: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

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>

Page 389: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

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

Page 390: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Newsvine Leaflet CSS

Page 391: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Controls CSS

Page 392: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

A Quick Demo

Page 393: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

The Home Screen

Page 394: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Search

Page 395: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Feeds

Page 396: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Feeds

Page 397: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Newsvine

Page 398: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

App List

Page 399: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Upcoming

Page 400: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Flickr

Page 401: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

del.icio.us

Page 402: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Tour de France

Page 403: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

New York Times

Page 404: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Baseball

Page 405: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

A Successful Experiment

Page 406: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

A Successful Experiment

* The entire application was built between WWDC and the iPhone launch (3 weeks)

Page 407: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

A Successful Experiment

* The entire application was built between WWDC and the iPhone launch (3 weeks)

* TechCrunch—“Must-Have iPhone App”

Page 408: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

A Successful Experiment

* The entire application was built between WWDC and the iPhone launch (3 weeks)

* TechCrunch—“Must-Have iPhone App”

* 105,000 hits the first week to website

Page 409: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

A Successful Experiment

* The entire application was built between WWDC 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

Page 410: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

A Successful Experiment

* The entire application was built between WWDC 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

Page 411: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

A Successful Experiment

* The entire application was built between WWDC 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

Page 412: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Leaflets Takeaways

Page 413: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Leaflets Takeaways

* While we designed it for the iPhone, Leaflets could work on any “Mobile 2.0” device.

Page 414: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Leaflets Takeaways

* While we designed it for the iPhone, Leaflets could work on any “Mobile 2.0” device.

* Standards. Standards. Standards.

Page 415: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Leaflets Takeaways

* While we designed it for the iPhone, Leaflets could work on any “Mobile 2.0” device.

* Standards. Standards. Standards.

* Design for context.

Page 416: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Leaflets Takeaways

* While we designed it for the iPhone, Leaflets could work on any “Mobile 2.0” device.

* Standards. Standards. Standards.

* Design for context.

* Optimize for the bandwidth.

Page 417: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Leaflets Takeaways

* While we designed it for the iPhone, Leaflets could work on any “Mobile 2.0” device.

* Standards. Standards. Standards.

* Design for context.

* Optimize for the bandwidth.

* Test. And then test some more.

Page 418: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Leaflets Takeaways

* While we designed it for the iPhone, Leaflets could work on any “Mobile 2.0” device.

* Standards. Standards. Standards.

* Design for context.

* Optimize for the bandwidth.

* Test. And then test some more.

* Javascript is crucial to the user experience.

Page 419: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Leaflets Takeaways

* While we designed it for the iPhone, Leaflets could work on any “Mobile 2.0” device.

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

Page 420: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Technical Limits

Page 421: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Limitations Imposed

Page 422: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Limitations Imposed

* 10MB download limit

Page 423: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Limitations Imposed

* 10MB download limit

* JavaScript execution time limit of 5 seconds for each top-level item

Page 424: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Limitations Imposed

* 10MB download limit

* JavaScript execution time limit of 5 seconds for each top-level item

* No Flash

Page 425: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Limitations Imposed

* 10MB download limit

* JavaScript execution time limit of 5 seconds for each top-level item

* No Flash

* No Java

Page 426: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Limitations Imposed

* 10MB download limit

* JavaScript execution time limit of 5 seconds for each top-level item

* No Flash

* No Java

* No mouse-over, hover, tooltip mouse events

Page 427: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Limitations Imposed

* 10MB download limit

* JavaScript execution time limit of 5 seconds for each top-level item

* No Flash

* No Java

* No mouse-over, hover, tooltip mouse events

* No file downloads or uploads!

Page 428: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Design Shortcuts

Page 429: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Kits for iPhone Design

Page 430: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Kits for iPhone Design

* iUI by Joe Hewitt

Page 431: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Kits for iPhone Design

* iUI by Joe Hewitt

* Google Web Toolkit (GWT)

Page 432: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Kits for iPhone Design

* iUI by Joe Hewitt

* Google Web Toolkit (GWT)

* Yahoo! User Interface Library (YUI)

Page 433: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Kits for iPhone Design

* iUI by Joe Hewitt

* Google Web Toolkit (GWT)

* Yahoo! User Interface Library (YUI)

* Many icon and interface design kits released

Page 434: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

We Suggest Finding Your Own Design Path

Page 435: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Compression is Your Friend

Page 436: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Save Space

Page 437: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Save Space

* Use ob_start("ob_gzhandler") for PHP content

Page 438: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Save Space

* Use ob_start("ob_gzhandler") for PHP content

* Remove whitespace from HTML and CSS

Page 439: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

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

Page 440: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

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

Page 441: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

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

* Cache data on the server for fastest possible loading times

Page 442: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Resources

Page 443: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

006

Blue

Fla

vor.

All t

rade

mar

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

Page 444: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

006

Blue

Fla

vor.

All t

rade

mar

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/

Page 445: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

006

Blue

Fla

vor.

All t

rade

mar

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/

Page 446: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

006

Blue

Fla

vor.

All t

rade

mar

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/

Page 447: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

006

Blue

Fla

vor.

All t

rade

mar

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

Page 448: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

006

Blue

Fla

vor.

All t

rade

mar

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/

Page 449: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copy

right

© 2

006

Blue

Fla

vor.

All t

rade

mar

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/

Page 450: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Exercise:BYO Mobile Idea

Page 451: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

The End

Page 452: Web Builder 2.0 Workshop:  iPhone Design and Development Workshop

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Brian FlingPrincipal & Director of [email protected]

tel. +1 206 545-0210mob. +1 206 351-6060

Garrett MurraySenior [email protected]

tel. +1 206 545-0210mob. +1 347 694-4045