Upload
brian-fling
View
111
Download
2
Tags:
Embed Size (px)
DESCRIPTION
Citation preview
Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Next Generation of the Mobile WebRefresh 06 Orlando
Brian Fling Co-founder & Director of Strategy, Blue Flavor
Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
How big is the Mobile Web?
Copyright © 2006 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 or desktop website.
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.
Some Perspective
= 15,000,000 people
15,000,000 people live in Florida
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.
Some Perspective
Population of The United States
Population of China
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.
Some Perspective
Global Internet Users
Global Mobile Subscribers
Global Mobile Web Access
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.
Some Perspective
by 2010
Copyright © 2006 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.
Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Mobile has the potential to reach anybody through any
medium.
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.
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
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
Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
What is the next generation?
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.
Outlook
cost of data
network speeds
3G
new services
adoption
2005 2006 2007 2008 2009
Copyright © 2006 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.
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.
Outlook
cost of data
network speeds
new services
adoption
LBS3G2005 2006 2007 2008 2009
Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Jargon Alert
LBSLocation-based ServicesThe ability for a mobile device to provide information that is relevant to it’s physical location via a Global Positioning System (GPS).
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.
Outlook
cost of data
network speeds
new services
adoption
Mobile 2.0LBS3G2005 2006 2007 2008 2009
Copyright © 2006 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.
Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Web 1.0 Web 2.0
Mobile 1.0 Mobile 2.0
StandardsWeb ServicesWeb as a PlatformUser-centered
StandardsWeb ServicesWeb as a PlatformUser-centered
Proprietary Walled GardensFirst to market
Brand-centered
Proprietary Walled GardensFirst to market
Brand-centered
Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Jargon Alert
Walled GardenA user experience designed to keep the user content while restricting access to content outside the approved boundaries.
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.
Outlook
cost of data
network speeds
new services
adoption
4GLBS Mobile 2.03G2005 2006 2007 2008 2009
Copyright © 2006 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.
Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Getting started with Mobile 2.0
Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Jargon Alert
XHTML-MPExtensible HyperText Markup Language: Mobile ProfileA subset of XHTML Basic and HTML. Used as a primary markup language for the WAP 2.0 protocol.
Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
XHTML-MP = HTML
Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
A brief word on Mobile Web Browsers
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.
Networks, Platforms & Devices
Subscribers 55.8m 53.0m 50.9m 22.7m
Network GSM CDMA CDMA GSM
Platform J2ME BREW® J2ME J2ME
Walled Garden Open Semi-Walled Walled Semi-Walled
WAP 2.0 Yes Yes Yes Yes
Devices 66 62 84 44
Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Mobile Devices• Many devices are
similar, the differences are in how they are provisioned to a carrier.
• Look only at mass market phones
• Do not design for smart phones or PDA’s PDAs
Smart Phones
Feature PhonesPhone, WAP, SMS
Applications
Keyboard, Stylus
Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Focus on 5
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
Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
If you have well formed, basic XHTML, then your
content should be fine on most modern browsers.
Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
One Web vs. The Mobile Web
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 Options
SSR Reformat Stylesheets Mobile Specific
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
Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
• 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?
The 3 C’s of the Mobile Web• Cost
If you don't develop your mobile website responsibly, the user could get stuck with a big bill in order to view your content.
• ContentIssues like navigation, image sizes, page weight and scripts all need to be considered when thinking about your website on mobile devices.
• 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?
Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Mobile Stylesheets
Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Usually all you need is one line of code.<link href="mobile.css" rel="stylesheet" type="text/css" media="handheld" />
or for mobile specific<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/
xhtml-mobile10.dtd">
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
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
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 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>
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 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>
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 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>
Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
You can have a mobile ready site in about an hour.
Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
• Keep the information architecture simple and focused.
• Use a simple site drill-down architecture.
• Display only 5 categories per page.
• No more than 10 links per page.
• Always provide at least one content item with each category page.
• Try to prioritize by activity of popularity.
• The end of each page should have someplace for the user to go.
• Keep total file sizes, including images and styles, as small as possible.
• Use only well formed, valid web standard code.
• Code order matters, think semantically.
• Use ordered lists instead of unordered lists for navigation.
• Always use accesskeys.
Mobile Web Tips• Keep the information architecture simple and focused.
• Use a simple site drill-down architecture.
• Display only 5 categories per page.
• No more than 10 links per page.
• Always provide at least one content item with each category page.
• Try to prioritize by activity of popularity.
• The end of each page should have someplace for the user to go.
• Keep total file sizes, including images and styles, as small as possible.
• Use only well formed, valid web standard code.
• Code order matters, think semantically.
• Use ordered lists instead of unordered lists for navigation.
• Always use accesskeys.
Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Resources to get you started
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
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
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/
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/
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 Design
http://www.mobiledesign.org
Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Thank You
Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Brian FlingCo-founder & Director of Strategy, Blue [email protected]
mob. +1 206 351-6060
http://www.blueflavor.com/presentations/nextgenmobileweb.pdf