SXSW2007 Mobile

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/
Who am I?
Who am I?
* Co-founder & Principal of Blue Flavor.
Who am I?
* Mobile Designer since 2000.
Who am I?
* Have worked directly with all Tier 1 carriers in North

America and most of Tier 2.
Who am I?

* Helped brands like Rolling Stone, Napster & ESPN with

mobile web strategy & design.
Who am I?


* Run mobiledesign.org, the largest network of mobile

designers.
Who am I?


* Run mobiledesign.org, the largest network of mobile

designers.
* Author of dotMobi Developers Guide.
Part 1
Why the Mobile Web?
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.
Just how big is the
Mobile Web?
The Size of Texas
20,000,000
The Size of Texas
The Population of the Earth
Population of The United States
Population of The United States
Population of China
Mobile Web of Today
Mobile Web of Today
Mobile Subscribers
Mobile Web of Today
Global Mobile Web Access
Mobile Subscribers
Mobile Web of Today
Global Internet Users
Global Mobile Web Access
Mobile Subscribers
Mobile Web of Tomorrow
by 2010
Mobile Web Subscribers
by 2010
Mobile Web Subscribers
How many users are there?
Mobile Web Users
Mobile Web Users
Global Internet Users
Mobile will revolutionize
the way we gather and
interact with information in
the next three years.
Mobile has the potential to
reach anybody through
any medium.
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
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).
Prepare for a truly
contextual web.
We are at the precipice
of the next generation of
the web.
Part 2
Creating a
Mobile Web Strategy
“Find a need and fill it.”
Bu
sin
ess
Go
Spot als
Sweet
Te
User Goals nic
ch
al
Balancing Goals
Go
als
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.
* Cost
* Content
Issues like navigation, image sizes, page weight and scripts all need to be
considered when thinking about your website on mobile devices.
* Cost
* 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?
Lose anything that
doesn’t support the goals.
Part 3
Mobile Information
Architecture
Home About Us
Company Press
Executives Org Chart
Overview Releases
Products
Standard
Home Suite Pro Suite Whitepapers
Suite
Services
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
Home
Blog
Events
News &
Services
About Us
Contact Us
Products &
Support
Locations
A Good Mobile IA
Remember:
Goals, Cost, Content &
Context
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.”
Products &
Services
Support
About Us
Product &
Services
Overviews
Company
Home
Overview
Navigation
Navigation Footer
Executive
Overview
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.
Part 4
Mobile Web Design
More Compatible
Flavors of Mobile Design

Richer Experience
More Compatible
Flavors of Mobile Design

Richer Experience
Effort
Reward
UI
Device
Time to complete task

UI
App
Design
Gateway
Effort versus Reward

Design
Content
Goal
Multiple Screens Sizes
128 pixels
160 pixels
128 pixels
176 pixels
160 pixels
220 pixels
128 pixels
176 pixels
320 pixels
160 pixels
220 pixels
240 pixels
128 pixels
176 pixels
320 pixels
240 pixels
160 pixels
220 pixels
240 pixels
320 pixels
128 pixels
176 pixels
320 pixels
320 pixels
240 pixels
160 pixels
220 pixels
240 pixels
320 pixels
320 pixels
128 pixels
176 pixels
320 pixels
320 pixels
240 pixels
160 pixels
220 pixels
240 pixels
320 pixels
320 pixels
200 x 250 pixels

Recommended Max Size
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
Primary
Directional
Orientation
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
The canvas might not be as
robust, but there is still a
need for designers.
Part 5
Understanding
Mobile Web Standards
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.
XHTML-MP
XHTML-MP
* XHTML Basic and XHTML-MP are virtually indistinguishable
XHTML-MP
* XHTML-MP is the predominant language for the mobile web.
XHTML-MP
* It’s possible to use standard tools to create mobile web pages.
XHTML-MP
* Since XHTML-MP is similar to XHTML, the transition to the

mobile web need not be complicated to developers.
XHTML-MP

* XHTML-MP is the default industry-supported language for

mobile web development.
XHTML-MP

* 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.
<? 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>
Example XHTML-MP
If you know XHTML.
You know XHML-MP.
Wireless CSS
Wireless CSS
* Wireless CSS supports most CSS attributes,
but not all of them.
Wireless CSS
* More advanced styling techniques won’t likely

work across multiple mobile browsers.
Wireless CSS

* The best advice is to keep your CSS as simple

as possible.
Wireless CSS

* The best advice is to keep your CSS as simple

as possible.
* Try to use document styles versus style
Keep your code and styles
simple and you will do fine
on most mobile browsers.
W3C Initiatives
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.
W3C Initiatives
* mobileOK
Goal: To create machine-readable labels and a mobileOK trustmark to
indicate that the mobile web site adheres to the Best Practices
recommendations.
W3C Initiatives
* 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.
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.
Part 6
Getting started with

XHTML-MP
With a few exceptions
you already know how to
code for mobile today.
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”>
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>
Avoid Tables for Layout
* Layout tables become a big problem when
viewed in multiple mobile browsers.
<body>
<div id=”header”>

</div>

</div>
<div id=”footer”>

</div>
</body>
Place Navigation in the Content Body
* Given the vertical orientation of the mobile

page, we show only navigation that’s relevant
to the page.
<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>
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>
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>
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.
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>
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.
Part 7
Mobile Publishing
Simple
Complex
Slower
SSR
Reformat
Stylesheets
Va
lu
e
Mobile Specific Site
Faster
Context vs. Content
Simple
Complex
Slower
SSR
Reformat
Stylesheets
Va
lu
e
Mobile Specific Site
Faster
Context vs. Content
Supporting Devices & Browsers
* Over 500 devices being sold each year.
* Over 50 mobile browsers to contend with.
* Crowding stems from mobile service provider

provisioning.

provisioning.
* Mobile service provider linked sites must

support all provisioned devices and browsers.

provisioning.

* Adopts standards has been around for much

longer in mobile.

provisioning.

* Adopts standards has been around for much

longer in mobile.
* Older or poorly designed devices don’t require

support.
Focus on Five.
Publishing Methods
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.
Publishing Methods
* Detect the mobile device automatically and

redirect the user to a location.
In this case, the user simply enters domain.com.
Publishing Methods

* Use the mobile specific .mobi top-level domain.

Here the user enters domain.mobi.
Publishing Methods

* Use the mobile specific .mobi top-level domain.

Here the user enters domain.mobi.
* A SMS query that returns a URL called WAP

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

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.

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.
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.
Testing
Testing
* Desktop Testing
Testing from a normal desktop browser is a great way to start.
Testing
* Desktop Testing
* Browser Tools
Browsers like Opera and Firefox have tools specific to mobile testing.
Testing
* Desktop Testing
* Browser Tools
* Emulators
Allows for desktop verification without loading on to a device.
Testing
* Desktop Testing
* Browser Tools
* Emulators
* Device Testing
Test as many as you can, but focus on five good mainstream devices.
Testing
* Desktop Testing
* Browser Tools
* Emulators
* 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.
Resources
.mobi Developers Guide
Mobile Web
Developers Guide
Part I: Creating Simple Mobile Sites
BRIAN FLING
with Ronan Cremin, Jo Rabin and D. Keith Robinson
http://dev.mobi
http://mr.dev.mobi
.mobi Mobile Ready Report
Mobile Design
http://www.mobiledesign.org
Thank you.
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/

SXSW2007 Mobile

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

SXSW2007 Mobile

Cargado por

Copyright:

Formatos disponibles

Everything you

* Mobile Designer since 2000.

* Mobile Designer since 2000.

* Have worked directly with all Tier 1 carriers in North

* Mobile Designer since 2000.

* Have worked directly with all Tier 1 carriers in North

* Helped brands like Rolling Stone, Napster & ESPN with

* Mobile Designer since 2000.

* Have worked directly with all Tier 1 carriers in North

* Helped brands like Rolling Stone, Napster & ESPN with

* Run mobiledesign.org, the largest network of mobile

* Mobile Designer since 2000.

* Have worked directly with all Tier 1 carriers in North

* Helped brands like Rolling Stone, Napster & ESPN with

* Run mobiledesign.org, the largest network of mobile

* Author of dotMobi Developers Guide.

Why the Mobile Web?

The Size of Texas

The Population of the Earth

The Population of the Earth

Mobile Web of Tomorrow

Mobile Web of Tomorrow

How many users are there?

Global Internet Users

How many users are there?

WAP Mobile Events

* At least one content

Mobile Service Provider

Mobile Web Design

Flavors of Mobile Design

Flavors of Mobile Design

Time to complete task

Effort versus Reward

Multiple Screens Sizes

Multiple Screens Sizes

* Look only at mass

* Do not design for smart

2 Select Next Link or Scroll Down

4 Forward or Page Down

* XHTML-MP is the predominant language for the mobile web.

* XHTML-MP is the predominant language for the mobile web.

* It’s possible to use standard tools to create mobile web pages.

* 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

* 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

* XHTML-MP is the default industry-supported language for

* 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

* XHTML-MP is the default industry-supported language for

* Unless a mobile service provider requires providing WML to

* More advanced styling techniques won’t likely

* More advanced styling techniques won’t likely

* The best advice is to keep your CSS as simple

* More advanced styling techniques won’t likely

* The best advice is to keep your CSS as simple

* Try to use document styles versus style

Getting started with

* All non-empty elements should be closed.

* All elements must be closed in the reverse order.

* The alt attribute should be used for all images.