Everything You Always Wanted To Know About The Mobile Web
This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA
Overview
Download & View Everything You Always Wanted To Know About The Mobile Web as PDF for free.
More details
- Words: 5,612
- Pages: 134
Everything you always wanted to know about the mobile web * _ _ But were afraid to ask * Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Follow Along http://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 Web The 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?
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
The Size of Texas
The Size of Texas
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
20,000,000
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
The Population of the Earth
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
The Population of the Earth
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
The Population of the Earth
The Population of the Earth Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Population of The United States
The Population of the Earth Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Population of The United States
Population of China
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Mobile Web of Today
Mobile Web of Today Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Mobile Subscribers
Global Mobile Web Access
Mobile Web of Today Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Mobile Subscribers
Global Mobile Web Access
Global Internet Users
Mobile Web of Today Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Mobile Subscribers
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Mobile Web of Tomorrow
Mobile Web of Tomorrow Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Mobile Web Subscribers by 2010
Mobile Web of Tomorrow Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Mobile Web Subscribers by 2010
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
How many users are there?
How many users are there? Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Mobile Web Users
How many users are there? Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Mobile Web Users
Global Internet Users
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.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Vote
Vote
Down load
Notify
WAP
Discuss
IVR
Buy
SMS SMS IVR
Send to Friend
Notify WAP
TV
Radio
Send to Friend
Notify
SMS SMS
Billboard
Live
Send to Friend
Buy
Au
MMS
al
di to
su Vi
ry
WAP
Join
WAP Site QR Code
Word of Mouth
SMS
Print Ad
Kinesthetic
Notify
Notify
SMS
Mobile Device
WAP Buy
Events Send to Friend
QR Code
Website MMS Join
Notify
SMS SMS Email
WAP Site
MMS
WAP Site SMS
Send to Friend
Send to Friend Notify
Notify
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Bluetooth
Jargon Alert
LBS Location-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 truly contextual 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.”
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
ess
sin
Bu
Go
als
Go
User Goals
Balancing Goals
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
al nic
als ch Te
Sweet Spot
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
*
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.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
The 3C’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.
Content Issues 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
* * *
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.
Content Issues like navigation, image sizes, page weight and scripts all need to be considered when thinking about your website on mobile devices.
Context What 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 Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Home
About Us
Company Overview
Executives
Org Chart
Press Releases
Home Suite
Standard Suite
Pro Suite
Whitepapers
Product Services
License Management Services
Installation Support Services
Consulting Services
Support Request
Intranet Login
Office Hours
Contact
News
Events
Press Releases
Products
Support
News & Events
Blog
Contact
Sales Offices
Contact Form
A Bad Mobile IA
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Services
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
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Products & Services
Contact Us
Support
News & Events
Blog
Locations
A Good Mobile IA
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Home About Us
Remember: Goals, Cost, Content & Context
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Jargon Alert
Clickstream Used 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.”
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Products & Services Support
About Us
Company Overview
Home
Product & Services Overviews
Navigation Executive Overview
Footer
Navigation Latest News
Footer
Latest Blog Posts Main Phone
Blog
Main Address
News & Events
Footer
Contact Events Locations
Legend
Phone Numbers
Page
Primary Address
Content Area Link to Page
Contact Form
Recent Posts
News Items Navigation Navigation
Footer
Footer
Navigation Footer
Designing Clickstreams
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Navigation
Jargon Alert
Mobile Service Provider A 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
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
More Compatible
Flavors of Mobile Design Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Richer Experience
More Compatible
Flavors of Mobile Design Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Richer Experience
Device UI App UI Gateway Design Content Design
Effort Time to complete task
Effort versus Reward Goal Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Reward
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Multiple Screens Sizes
Multiple Screens Sizes 160 pixels
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
128 pixels
176 pixels
Multiple Screens Sizes 220 pixels
160 pixels
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
128 pixels
176 pixels
320 pixels
Multiple Screens Sizes 240 pixels
220 pixels
160 pixels
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
128 pixels
176 pixels
240 pixels
320 pixels
Multiple Screens Sizes 320 pixels
240 pixels
220 pixels
160 pixels
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
128 pixels
176 pixels
240 pixels
320 pixels
320 pixels
Multiple Screens Sizes 320 pixels
320 pixels
240 pixels
220 pixels
160 pixels
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
128 pixels
176 pixels
240 pixels
320 pixels
Recommended Max Size 200 x 250 pixels
320 pixels
Multiple Screens Sizes 320 pixels
320 pixels
240 pixels
220 pixels
160 pixels
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
128 pixels
Comparing Mobile Devices
* * *
Many devices are similar, but vary based on how they are provisioned.
Feature Phones Phone, WAP, SMS
Look only at mass market phones. Do not design for smart phones or PDA’s.
Smart Phones Applications
PDAs Keyboard, Stylus
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
1 3
4
2
1
Select Previous Link or Scroll Up
2
Select Next Link or Scroll Down
3
Back or Page Up
4
Forward or Page Down
Directional Orientation
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Primary Directional Orientation
Content
Navigation
Footer
Design Horizontally Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Header
Navigation
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-MP Extensible 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.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Example XHTML-MP
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Hello World! <meta http-equiv=”content-type” content=”application/vnd. wap.xhtml+xml” />
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 Practices Goal: 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 Practices Goal: To advocate a variety of coding principles and publishing best practices to developers, publishers and mobile service providers.
mobileOK Goal: 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 Practices Goal: To advocate a variety of coding principles and publishing best practices to developers, publishers and mobile service providers.
mobileOK Goal: To create machine-readable labels and a mobileOK trustmark to indicate that the mobile web site adheres to the Best Practices recommendations.
Device Description Goal: 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 Web The 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 Encoding Ensuring the use of the correct character encoding and doctype makes sure that the page renders as expected.
*
XHTML-MP Doctype The document type (doctype) tells the browser how the page needs to render, including the rules and how strictly to follow these rules.
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.
.
*
All elements must be closed in the reverse order.
*
The alt attribute should be used for all images.
*
Text should appear within a block level element and not directly in the body.
*
Inline elements should always nest with block level elements.
*
All attributes should appear within quotes.
*
All elements and attributes should use lowercase.
All non-empty elements should be closed.
<em><strong>Example Text
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.
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.
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.
href=”news.html” accesskey=”1” rel="nofollow">News
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.
Follow Along http://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 Web The 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?
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
The Size of Texas
The Size of Texas
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
20,000,000
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
The Population of the Earth
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
The Population of the Earth
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
The Population of the Earth
The Population of the Earth Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Population of The United States
The Population of the Earth Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Population of The United States
Population of China
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Mobile Web of Today
Mobile Web of Today Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Mobile Subscribers
Global Mobile Web Access
Mobile Web of Today Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Mobile Subscribers
Global Mobile Web Access
Global Internet Users
Mobile Web of Today Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Mobile Subscribers
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Mobile Web of Tomorrow
Mobile Web of Tomorrow Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Mobile Web Subscribers by 2010
Mobile Web of Tomorrow Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Mobile Web Subscribers by 2010
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
How many users are there?
How many users are there? Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Mobile Web Users
How many users are there? Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Mobile Web Users
Global Internet Users
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.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Vote
Vote
Down load
Notify
WAP
Discuss
IVR
Buy
SMS SMS IVR
Send to Friend
Notify WAP
TV
Radio
Send to Friend
Notify
SMS SMS
Billboard
Live
Send to Friend
Buy
Au
MMS
al
di to
su Vi
ry
WAP
Join
WAP Site QR Code
Word of Mouth
SMS
Print Ad
Kinesthetic
Notify
Notify
SMS
Mobile Device
WAP Buy
Events Send to Friend
QR Code
Website MMS Join
Notify
SMS SMS Email
WAP Site
MMS
WAP Site SMS
Send to Friend
Send to Friend Notify
Notify
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Bluetooth
Jargon Alert
LBS Location-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 truly contextual 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.”
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
ess
sin
Bu
Go
als
Go
User Goals
Balancing Goals
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
al nic
als ch Te
Sweet Spot
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
*
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.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
The 3C’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.
Content Issues 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
* * *
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.
Content Issues like navigation, image sizes, page weight and scripts all need to be considered when thinking about your website on mobile devices.
Context What 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 Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Home
About Us
Company Overview
Executives
Org Chart
Press Releases
Home Suite
Standard Suite
Pro Suite
Whitepapers
Product Services
License Management Services
Installation Support Services
Consulting Services
Support Request
Intranet Login
Office Hours
Contact
News
Events
Press Releases
Products
Support
News & Events
Blog
Contact
Sales Offices
Contact Form
A Bad Mobile IA
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Services
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
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Products & Services
Contact Us
Support
News & Events
Blog
Locations
A Good Mobile IA
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Home About Us
Remember: Goals, Cost, Content & Context
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Jargon Alert
Clickstream Used 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.”
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Products & Services Support
About Us
Company Overview
Home
Product & Services Overviews
Navigation Executive Overview
Footer
Navigation Latest News
Footer
Latest Blog Posts Main Phone
Blog
Main Address
News & Events
Footer
Contact Events Locations
Legend
Phone Numbers
Page
Primary Address
Content Area Link to Page
Contact Form
Recent Posts
News Items Navigation Navigation
Footer
Footer
Navigation Footer
Designing Clickstreams
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Navigation
Jargon Alert
Mobile Service Provider A 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
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
More Compatible
Flavors of Mobile Design Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Richer Experience
More Compatible
Flavors of Mobile Design Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Richer Experience
Device UI App UI Gateway Design Content Design
Effort Time to complete task
Effort versus Reward Goal Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Reward
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Multiple Screens Sizes
Multiple Screens Sizes 160 pixels
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
128 pixels
176 pixels
Multiple Screens Sizes 220 pixels
160 pixels
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
128 pixels
176 pixels
320 pixels
Multiple Screens Sizes 240 pixels
220 pixels
160 pixels
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
128 pixels
176 pixels
240 pixels
320 pixels
Multiple Screens Sizes 320 pixels
240 pixels
220 pixels
160 pixels
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
128 pixels
176 pixels
240 pixels
320 pixels
320 pixels
Multiple Screens Sizes 320 pixels
320 pixels
240 pixels
220 pixels
160 pixels
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
128 pixels
176 pixels
240 pixels
320 pixels
Recommended Max Size 200 x 250 pixels
320 pixels
Multiple Screens Sizes 320 pixels
320 pixels
240 pixels
220 pixels
160 pixels
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
128 pixels
Comparing Mobile Devices
* * *
Many devices are similar, but vary based on how they are provisioned.
Feature Phones Phone, WAP, SMS
Look only at mass market phones. Do not design for smart phones or PDA’s.
Smart Phones Applications
PDAs Keyboard, Stylus
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
1 3
4
2
1
Select Previous Link or Scroll Up
2
Select Next Link or Scroll Down
3
Back or Page Up
4
Forward or Page Down
Directional Orientation
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Primary Directional Orientation
Content
Navigation
Footer
Design Horizontally Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Header
Navigation
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-MP Extensible 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.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Example XHTML-MP
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Hello World!
This is a simple XHTML-MP Page
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 Practices Goal: 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 Practices Goal: To advocate a variety of coding principles and publishing best practices to developers, publishers and mobile service providers.
mobileOK Goal: 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 Practices Goal: To advocate a variety of coding principles and publishing best practices to developers, publishers and mobile service providers.
mobileOK Goal: To create machine-readable labels and a mobileOK trustmark to indicate that the mobile web site adheres to the Best Practices recommendations.
Device Description Goal: 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 Web The 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 Encoding Ensuring the use of the correct character encoding and doctype makes sure that the page renders as expected.
*
XHTML-MP Doctype The document type (doctype) tells the browser how the page needs to render, including the rules and how strictly to follow these rules.
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.
.
*
All elements must be closed in the reverse order.
*
The alt attribute should be used for all images.
*
Text should appear within a block level element and not directly in the body.
*
Inline elements should always nest with block level elements.
*
All attributes should appear within quotes.
*
All elements and attributes should use lowercase.
All non-empty elements should be closed.
Example Text
Example Text
<em><strong>Example Text
Example Text
<em>Example Text
Example Text
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.
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.
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.
href=”news.html” accesskey=”1” rel="nofollow">News
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.
href=”news.html” accesskey=”1”>News href=”products.html” accesskey=”2”>Our Products href=”customers.html” accesskey=”3”>Our Customers href=”about.html” accesskey=”4”>About Us href=”contact.html” accesskey=”5”>Contact Us
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 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. +1 206 545-0210
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
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Slower
Stylesheets
SSR
Simple Faster
Context vs. Content Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
e
Reformat Va lu
Complex
Mobile Specific Site
Slower
Stylesheets
SSR
Simple Faster
Context vs. Content Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
e
Reformat Va lu
Complex
Mobile Specific Site
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 Detection Publish 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 Detection
*
Advanced Device Detection
Publish only one mobile specific site, designed for the lowest supported browser, routing all mobile browsers to it.
Programmatically 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 Detection
*
Advanced Device Detection
*
Mobile Stylesheets
Publish only one mobile specific site, designed for the lowest supported browser, routing all mobile browsers to it.
Programmatically render the best possible mobile specific site to the requesting device.
Code 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 Detection
*
Advanced Device Detection
*
Mobile Stylesheets
*
No device detection
Publish only one mobile specific site, designed for the lowest supported browser, routing all mobile browsers to it.
Programmatically render the best possible mobile specific site to the requesting device.
Code XHTML pages with the mobile context in mind and use the media type attribute to render a mobile stylesheet to mobile devices.
Rely 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
Adaptation The 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 Testing Testing 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 Testing Testing from a normal desktop browser is a great way to start.
Browser Tools Browsers 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 Testing Testing from a normal desktop browser is a great way to start.
Browser Tools Browsers like Opera and Firefox have tools specific to mobile testing.
Emulators Allows 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 Testing Testing from a normal desktop browser is a great way to start.
Browser Tools Browsers like Opera and Firefox have tools specific to mobile testing.
Emulators Allows for desktop verification without loading on to a device.
Device Testing Test 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 Testing Testing from a normal desktop browser is a great way to start.
Browser Tools Browsers like Opera and Firefox have tools specific to mobile testing.
Emulators Allows for desktop verification without loading on to a device.
Device Testing Test as many as you can, but focus on five good mainstream devices.
Usability Testing Test 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
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
.mobi Developers Guide Mobile Web
Part I: Creating Simple Mobile Sites
BRIAN FLING
with Ronan Cremin, Jo Rabin and D. Keith Robinson
http://dev.mobi
Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Developers Guide
http://mr.dev.mobi Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
.mobi Mobile Ready Report
http://www.mobiledesign.org Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Mobile Design
Thank you.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Brian Fling Co-founder & Director of Strategy, Blue Flavor [email protected] tel. +1 206 545-0210 mob. +1 206 351-6060 http://www.blueflavor.com/sxsw2007/
Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Related Documents
Everything You Always Wanted To Know About The Mobile Web
August 2019 24
Almost Everything You Ever Wanted To Know About Security
October 2019 12
Everything You Need To Know About Benchmarking
December 2019 32
Db Or No Db - Everything You Ever Wanted To Know
October 2019 13More Documents from ""
The Pursuit Of Luck - Tom Peters
August 2019 14
Dotmobi Mobile Web Developers Guide
August 2019 15
Everything You Always Wanted To Know About The Mobile Web
August 2019 24
Actividad1 Word
December 2019 15
Sistemas Operativos
November 2019 29