sxsw mobile
TRANSCRIPT
Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Everything you
always wanted
to know about the
mobile web __ But were afraid to ask*
*
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Follow Alonghttp://www.blueflavor.com/sxsw2007/
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Who am I?
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Who am I?* Co-founder & Principal of Blue Flavor.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Who am I?* Co-founder & Principal of Blue Flavor.
* Mobile Designer since 2000.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Who am I?* Co-founder & Principal of Blue Flavor.
* Mobile Designer since 2000.
* Have worked directly with all Tier 1 carriers in North America and most of Tier 2.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Who am I?* Co-founder & Principal of Blue Flavor.
* Mobile Designer since 2000.
* Have 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.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Who am I?* Co-founder & Principal of Blue Flavor.
* Mobile Designer since 2000.
* Have 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.
* Run mobiledesign.org, the largest network of mobile designers.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Who am I?* Co-founder & Principal of Blue Flavor.
* Mobile Designer since 2000.
* Have 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.
* Run mobiledesign.org, the largest network of mobile designers.
* Author of dotMobi Developers Guide.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Part 1
Why the Mobile Web?
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.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Just how big is the
Mobile Web?
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 Size of Texas
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 Size of Texas
20,000,000
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 Population of the Earth
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 Population of the Earth
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 Population of the Earth
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 Population of the Earth
Population of The United States
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 Population of the Earth
Population of The United States
Population of China
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
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
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
Global Mobile Web Access
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
Global Internet Users
Mobile Subscribers
Global Mobile Web Access
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
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
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
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.
How many users are there?
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.
How many users are there?
Mobile Web Users
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.
How many users are there?
Mobile Web Users
Global Internet Users
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.
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.
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.
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
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 © 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).
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Prepare for a trulycontextual web.
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.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Part 2
Creating a
Mobile Web Strategy
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
“Find a need and fill it.”
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
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
The 3C’s of the Mobile Web
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
The 3C’s 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.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
The 3C’s 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.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
The 3C’s 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?
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Lose anything that doesn’t support the goals.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Part 3
Mobile Information
Architecture
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
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Keep it Simple
* 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
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
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Remember:Goals, Cost, Content &
Context
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.”
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
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.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Part 4
Mobile Web Design
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
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
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
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
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
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
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
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
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
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
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Comparing Mobile Devices
* Many devices are similar, but vary based on how they are provisioned.
* 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
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
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 Horizontally
Header
Footer
Content
Navigation
Navigation
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 designers.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Part 5
Understanding
Mobile Web Standards
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.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
XHTML-MP
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
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.
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.
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.
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.
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.
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 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>
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
If you know XHTML.You know XHML-MP.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Wireless CSS
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.
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.
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.
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 style
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.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
W3C Initiatives
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.
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.
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.
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.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Part 6
Getting started with
XHTML-MP
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.
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”>
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” />
* 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<hr noshade=”true”/></p>
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>
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>
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>
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>
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.
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:+12065450210”>+1 206 545-0210</a>
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.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Part 7
Mobile Publishing
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
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 © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Supporting Devices & Browsers
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.
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.
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.
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.
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.
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.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Focus on Five.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Publishing Methods
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
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.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
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.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
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.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
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.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
The Device Detection Dilemma
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
The Device Detection Dilemma
* Simple Device DetectionPublish only one mobile specific site, designed for the lowest supported
browser, routing all mobile browsers to it.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
The Device Detection Dilemma
* 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.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
The Device Detection Dilemma
* 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.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
The Device Detection Dilemma
* 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.
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.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Testing
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.
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.
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.
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.
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.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Resources
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
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.
Mobile Design
http://www.mobiledesign.org
Copyright © 2007 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]
tel. +1 206 545-0210mob. +1 206 351-6060
http://www.blueflavor.com/sxsw2007/