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

20,000,000

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.

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

Population of The United States

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

The Population of the Earth

Population of The United States

Population of China

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.

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

Mobile Web Subscribers by 2010

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

Mobile Web of Tomorrow

Mobile Web Subscribers by 2010

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.

How many users are there?

Mobile Web Users

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

How many users are there?

Mobile Web Users

Global Internet Users

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

How many users are there?

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

Vote

Notify

Discuss

WAP SMS

IVR

Buy SMS

IVR Notify WAP Bluetooth Send to Friend Send to Friend

Radio

TV
SMS Notify

SMS Send to Friend

Live

Billboard
WAP

Buy

MMS Join

WAP Site QR Code

SMS Notify

Word of Mouth

Print Ad

Kinesthetic
SMS

Notify

WAP Buy

Mobile Device Website
MMS

Events
QR Code Send to Friend

Join SMS SMS WAP Site Email MMS WAP Site SMS

Notify

Send to Friend

Send to Friend Notify

Notify

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

ry

su Vi

di to

al

Au

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

als
Sweet Spot

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

Go als

Balancing Goals
User Goals

ch Te al nic

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

Products

Home Suite

Standard Suite

Pro Suite

Whitepapers

Services
License Management Services Installation Support Services

Product Services

Consulting Services

Support

Support Request

Intranet Login

Office Hours

Contact

News & Events
News Events Press Releases

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.

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

About Us

News & Events

Blog

Products & Services

Contact Us Locations

Support

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

A Good Mobile IA

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

Home

Company Overview

Navigation Navigation Executive Overview Navigation Latest News Footer Footer

Latest Blog Posts Main Phone Main Address Footer

Blog News & Events Contact
Events Locations Recent Posts

Legend Page
Content Area Link to Page

Phone Numbers Primary Address Contact Form Navigation Footer

News Items Navigation Navigation Footer Footer

Designing Clickstreams

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

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

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

Flavors of Mobile Design
Richer Experience

More Compatible

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

Flavors of Mobile Design
Richer Experience

Reward

Effort

Device UI

Time to complete task

App UI Gateway Design

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

Effort versus Reward
Content Design
Goal

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

Multiple Screens Sizes

128 pixels

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

Multiple Screens Sizes
160 pixels

128 pixels

176 pixels

160 pixels
220 pixels

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

Multiple Screens Sizes

128 pixels

176 pixels

320 pixels

160 pixels
220 pixels
240 pixels

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

Multiple Screens Sizes

128 pixels

176 pixels

320 pixels

240 pixels

160 pixels
220 pixels
240 pixels 320 pixels

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

Multiple Screens Sizes

128 pixels

176 pixels

320 pixels

320 pixels
240 pixels

160 pixels
220 pixels
240 pixels 320 pixels

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

Multiple Screens Sizes
320 pixels

128 pixels

176 pixels

320 pixels

320 pixels
240 pixels

160 pixels
220 pixels
240 pixels 320 pixels

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

Multiple Screens Sizes
Recommended Max Size 200 x 250 pixels
320 pixels

Comparing Mobile Devices

* * *

Many devices are similar, but vary based on how they are provisioned. Look only at mass market phones. Do not design for smart phones or PDA’s.
PDAs
Keyboard, Stylus

Feature Phones
Phone, WAP, SMS

Smart Phones
Applications

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

Primary Directional Orientation

1 3 4

1 2 3 4

Select Previous Link or Scroll Up Select Next Link or Scroll Down Back or Page Up Forward or Page Down

2

Directional Orientation

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

Header

Navigation

Content

Navigation

Footer

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

Design Horizontally

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.

<? xml version=”1.0” encoding=”UTF-8” ?> <!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.0//EN” “http://www.wapforum.org/DTD/xhtml-mobile10.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <title>Hello World!</title> <meta http-equiv=”content-type” content=”application/vnd. wap.xhtml+xml” /> </head> <body> <div id=”intro”> <h1>Hello World!</h1> </div> <div id=”content”> <p>This is a simple XHTML-MP Page</p> </div> </body> </html>

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 <li><a <li><a <li><a <li><a href=”news.html” accesskey=”1”>News</a></li> href=”products.html” accesskey=”2”>Our Products</a></li> href=”customers.html” accesskey=”3”>Our Customers</a></li> href=”about.html” accesskey=”4”>About Us</a></li> 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 <li><a <li><a <li><a <li><a </ol> href=”news.html” accesskey=”1”>News</a></li> href=”products.html” accesskey=”2”>Our Products</a></li> href=”customers.html” accesskey=”3”>Our Customers</a></li> href=”about.html” accesskey=”4”>About Us</a></li> 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 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.

Complex

Simple Slower

Mobile Specific Site

SSR

Stylesheets
Reformat
Va lu e

Faster

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

Context vs. Content

Complex

Simple Slower

Mobile Specific Site

SSR

Stylesheets
Reformat
Va lu e

Faster

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

Context vs. Content

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

Mobile Web

Part I: Creating Simple Mobile Sites

BRIAN FLING

with Ronan Cremin, Jo Rabin and D. Keith Robinson

http://dev.mobi

.mobi Mobile Ready Report

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

http://mr.dev.mobi

Mobile Design

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

http://www.mobiledesign.org

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.

Sign up to vote on this title
UsefulNot useful