You are on page 1of 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.
The Size of Texas

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

The Size of Texas

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

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

The Population of the Earth

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

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

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Mobile Web of Today
Global Mobile Web Access
Mobile Subscribers

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Mobile Web of Today
Global Internet Users
Global Mobile Web Access
Mobile Subscribers

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

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
by 2010
Mobile Web Subscribers

Mobile Web of Tomorrow

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
by 2010
Mobile Web Subscribers

Mobile Web of Tomorrow

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
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

How many users are there?

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.

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

SMS

IVR
Notify Send to
Friend
WAP

Bluetooth
Radio TV
Send to
Friend Notify
SMS

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

Live Billboard
Send to Buy
Friend
WAP

ry

Vi
to
MMS

su
di

al
Au
Join WAP Site
QR Code
Word of Print Ad
Mouth
SMS

Notify
Kinesthetic Notify
SMS

WAP Mobile Events


Buy Device 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
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.
Bu
sin
ess
Go
Spot als
Sweet

Te
User Goals nic
ch
al
Balancing Goals
Go
als

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
* 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 Press
Executives Org Chart
Overview Releases

Products

Standard
Home Suite Pro Suite Whitepapers
Suite

Services

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
License Installation
Product Consulting
Management Support
Services Services
Services Services

Support

Support Intranet
Office Hours Contact
Request Login

News &
Events

Press
News Events
Releases

Blog

Contact

Contact
Sales Offices
Form

A Bad Mobile IA
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.
Home

Blog
Events
News &
Services
About Us

Contact Us
Products &
Support

Locations

A Good Mobile IA

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

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

Product &
Services
Overviews
Company
Home
Overview

Navigation
Navigation Footer
Executive
Overview

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

Latest Blog
Posts

Main Phone
Blog
Main Address
News & Events
Footer

Contact
Events
Recent Posts
Locations

Phone
Legend Numbers News Items
Primary Navigation
Page Address
Footer
Navigation
Contact Form
Content Area Footer
Navigation
Link to Page
Footer

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


Richer Experience

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

Flavors of Mobile Design


Richer Experience

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

UI
Device

Time to complete task


UI
App
Design
Gateway

Effort versus Reward


Design
Content

Goal

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

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

160 pixels

Multiple Screens Sizes

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

176 pixels

160 pixels

220 pixels
Multiple Screens Sizes

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

176 pixels

320 pixels

160 pixels

220 pixels

240 pixels
Multiple Screens Sizes

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

176 pixels

320 pixels
240 pixels

160 pixels

220 pixels

240 pixels

320 pixels
Multiple Screens Sizes

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

176 pixels

320 pixels
320 pixels
240 pixels

160 pixels

220 pixels

240 pixels

320 pixels

320 pixels
Multiple Screens Sizes

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

176 pixels

320 pixels
320 pixels
240 pixels

160 pixels

220 pixels

240 pixels

320 pixels

320 pixels
200 x 250 pixels

Multiple Screens Sizes


Recommended Max Size

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 Feature Phones
on how they are Phone, WAP, SMS

provisioned.

* 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.
Primary
Directional
Orientation

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
1 1 Select Previous Link or Scroll Up

2 Select Next Link or Scroll Down


3 4
3 Back or Page Up

4 Forward or Page Down


2

Directional Orientation
Footer
Header

Content
Navigation

Navigation

Design Horizontally

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

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
<meta http-equiv=”content-type” content=”application/vnd.
wap.xhtml+xml” />
</head>
<body>
<div id=”intro”>
<h1>Hello World!</h1>
</div>
<div id=”content”>
<p>This is a simple XHTML-MP Page</p>
</div>
</body>
</html>

Example XHTML-MP
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.
<?xml version=”1.0” encoding=”UTF-8” ?>

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

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

Slower
SSR
Reformat
Stylesheets

Va
lu
e
Mobile Specific Site

Faster

Context vs. Content

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

Slower
SSR
Reformat
Stylesheets

Va
lu
e
Mobile Specific Site

Faster

Context vs. Content

Copyright © 2006 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 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
Publish only one mobile specific site, designed for the lowest supported
browser, routing all mobile browsers to it.

* Advanced Device Detection


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
Publish only one mobile specific site, designed for the lowest supported
browser, routing all mobile browsers to it.

* Advanced Device Detection


Programmatically render the best possible mobile specific site to the
requesting device.

* Mobile Stylesheets
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
Publish only one mobile specific site, designed for the lowest supported
browser, routing all mobile browsers to it.

* Advanced Device Detection


Programmatically render the best possible mobile specific site to the
requesting device.

* Mobile Stylesheets
Code XHTML pages with the mobile context in mind and use the media
type attribute to render a mobile stylesheet to mobile devices.

* No device detection
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
Developers Guide
Part I: Creating Simple Mobile Sites

Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
BRIAN FLING
with Ronan Cremin, Jo Rabin and D. Keith Robinson

http://dev.mobi
http://mr.dev.mobi
.mobi Mobile Ready Report

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

http://www.mobiledesign.org

Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
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
brian@blueflavor.com
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.