Everything you always wanted to know about the mobile web

8/15/2019 Everything you always wanted to know about the mobile web

1/134

Everything youalways wanted

to know about the

mobile web __ But were afraid to ask* *


2/134

Follow Alonghttp://www.blueflavor.com/sxsw2007/


3/134

Who am I?


4/134

Who am I?

* Co-founder & Principal of Blue Flavor.


5/134


6/134

Who am I?


* Mobile Designer since 2000.

* Have worked directly with all Tier 1 carriers in NorthAmerica and most of Tier 2.


7/134

Who am I?




* Helped brands like Rolling Stone, Napster & ESPN withmobile web strategy & design.


8/134


9/134

Who am I?




* Helped brands like Rolling Stone, Napster & ESPN withmobile web strategy & design.

* Run mobiledesign.org, the largest network of mobiledesigners.

* Author of dotMobi Developers Guide.


10/134

Part 1

Why the Mobile Web?


11/134

Jargon Alert

Mobile WebThe collective term for websites designed for

viewing on a mobile device. Websites are published

and accessed via the Internet just like a regular

desktop website.


12/134

Just how big is theMobile Web?


13/134The Size of Texas


14/134The Size of Texas

20,000,000


15/134The Population of the Earth



Population of The United States



Population of The United States

Population of China


20/134Mobile Web of Today



Mobile Subscribers



Mobile Subscribers

Global Mobile Web Access



Global Internet Users

Mobile Subscribers

Global Mobile Web Access


24/134Mobile Web of Tomorrow



Mobile Web Subscribersby 2010


27/134How many users are there?



Mobile Web Users



Mobile Web Users

Global Internet Users


30/134


31/134

Mobile has the potential to

reach anybody throughany medium.


32/134


33/134


34/134

Jargon Alert

LBSLocation-based Services

The ability for a mobile device to provide

information that is relevant to its physical location

via a Global Positioning System (GPS).


35/134

Prepare for a trulycontextual web.


36/134

We are at the precipice

of the next generation ofthe web.


37/134

Part 2

Creating aMobile Web Strategy


38/134

Find a need and fill it.


39/134

Balancing Goals

User Goals

Busin

ess

Goals

Technica

lGoals

SweetSpot


40/134

The 3Cs of the Mobile Web


41/134


* CostIf you don't develop your mobile website responsibly, the user could getstuck with a big bill in order to view your content.


42/134



* ContentIssues like navigation, image sizes, page weight and scripts all need to be

considered when thinking about your website on mobile devices.


43/134



* ContentIssues like navigation, image sizes, page weight and scripts all need to be

considered when thinking about your website on mobile devices.

* ContextWhat does your website add to the users mobility? How do you add value to

the their physical context? What is the context in which they will use yoursite? On a bus or train?


44/134

Lose anything thatdoesnt support the goals.


45/134

Part 3

Mobile InformationArchitecture


46/134

A Bad Mobile IA

Home About Us

CompanyOverview

Home Suite

LicenseManagement

Services

SupportRequest

News

Sales Offices

Executives

StandardSuite

ProductServices

IntranetLogin

Events

ContactForm

PressReleases

Pro Suite

InstallationSupportServices

Office Hours

Org Chart

Whitepapers

ConsultingServices

Contact

Products

Services

Support

News &

Events

Blog

Contact

PressReleases


47/134

Keep it Simple

* Limit categories to 5

* Limit links to 10

* No more than 5levels deep

* At least one contentitem per category

* Prioritize links byactivity or popularity


48/134

A Good Mobile IA

Home

About Us

Contact Us

News &

Events

Products &Services

Support

Locations

Blog


49/134

Remember:

Goals, Cost, Content &Context


50/134

Jargon Alert

ClickstreamUsed to refer to the series of clicks, or path, the user

takes to reach a destination in an informational

space. Often used to describe user behavior gathered

from server logs, but also can be used in earlyplanning, as in creating the optimal clickstream.


51/134


52/134

Jargon Alert

Mobile Service ProviderA broad term to describe the mobile network provider

that provides subscribers wireless access to voice and

data services.

Also known as a mobile network operator, or MNO in the telecommunications industry, thoughusually referred to as carriers in North America and operators elsewhere in the world.


53/134

Part 4

Mobile Web Design


54/134

Flavors of Mobile Design

More Compatible Richer Experience


55/134

Flavors of Mobile Design

More Compatible Richer Experience


56/134

Effort versus Reward

DeviceUI App

UI

GatewayDesign

ContentDesign

Time to complete task Goal

Effort

Reward


57/134

Multiple Screens Sizes


58/134


128 pixels

160

pixels


59/134


176 pixels

220

pixels

128 pixels

160

pixels


60/134


320 pixels

240

pixels

176 pixels

220

pixels

128 pixels

160

pixels


61/134


240 pixels

320

pixels

320 pixels

240

pixels

176 pixels

220

pixels

128 pixels

160

pixels


62/134


320 pixels

320

pixels

240 pixels

320

pixels

320 pixels

240

pixels

176 pixels

220

pixels

128 pixels

160

pixels


63/134


320 pixels

320

pixels

240 pixels

320

pixels

320 pixels

240

pixels

176 pixels

220

pixels

128 pixels

160

pixels

Recommended Max Size

200 x 250 pixels


64/134

Comparing Mobile Devices

* Many devices aresimilar, but vary basedon how they are

provisioned.

* Look only at massmarket phones.

* Do not design for smart

phones or PDAs. PDAs

Smart Phones

Feature PhonesPhone, WAP, SMS

Applications

Keyboard, Stylus


65/134

Directional Orientation

PrimaryDirectional

Orientation

Select Previous Link or Scroll Up

Select Next Link or Scroll Down

Forward or Page Down

Back or Page Up

1

2

3 4

1

2

3

4


66/134

Design Horizontally

Header

Footer

Content

Navigation

Navigation


67/134

The canvas might not be as

robust, but there is still aneed for designers.


68/134

Part 5

UnderstandingMobile Web Standards


69/134

Jargon Alert

XHTML-MPExtensible HyperText Markup Language:

Mobile Profile

A subset of XHTML Basic and HTML. Used as a

primary markup language for the WAP 2.0 protocol.


70/134

XHTML-MP


71/134

XHTML-MP

* XHTML Basic and XHTML-MP are virtually indistinguishable


72/134

XHTML-MP


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


73/134

XHTML-MP



* Its possible to use standard tools to create mobile web pages.


74/134

XHTML-MP




* Since XHTML-MP is similar to XHTML, the transition to the

mobile web need not be complicated to developers.


75/134

XHTML-MP






* XHTML-MP is the default industry-supported language formobile web development.


76/134

XHTML-MP






* XHTML-MP is the default industry-supported language formobile web development.

* Unless a mobile service provider requires providing WML tosupport older devices, XHTML-MP is the only needed

language in mobile web design.


77/134

Example XHTML-MP

Hello World!

Hello World!

This is a simple XHTML-MP Page
http://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.wapforum.org/DTD/xhtml-mobile10.dtdhttp://www.wapforum.org/DTD/xhtml-mobile10.dtd


78/134

If you know XHTML.

Youknow XHML-MP.


79/134

Wireless CSS


80/134

Wireless CSS

* Wireless CSS supports most CSS attributes,but not all of them.


81/134

Wireless CSS


* More advanced styling techniques wont likelywork across multiple mobile browsers.


82/134

Wireless CSS



* The best advice is to keep your CSS as simpleas possible.

l


83/134

Wireless CSS



* The best advice is to keep your CSS as simpleas possible.

* Try to use document styles versus style


84/134

Keep your code and styles

simple and you will do fineon most mobile browsers.

i i i


85/134

W3C Initiatives

C iti ti


86/134

W3C Initiatives

* Mobile Web Best PracticesGoal: To advocate a variety of coding principles and publishing bestpractices to developers, publishers and mobile service providers.

W C I iti ti


87/134

W3C Initiatives


* mobileOKGoal: To create machine-readable labels and a mobileOK trustmark toindicate that the mobile web site adheres to the Best Practices

recommendations.

W C I iti ti


88/134

W3C Initiatives


* mobileOKGoal: To create machine-readable labels and a mobileOK trustmark toindicate that the mobile web site adheres to the Best Practices

recommendations.

* Device DescriptionGoal: To create a method of profiling and identifying device capabilities toease adaptation.


89/134

Jargon Alert

One WebThe principle of making the same information andservices to users regardless of the device used.

This is a very misunderstood, misused and

commonly debated concept.


90/134

Part 6

Getting started withXHTML-MP


91/134

With a few exceptions

you already know how tocode for mobile today.

C t E di & D t


92/134

Correct Encoding & Doctype

* Character EncodingEnsuring the use of the correct character encoding and doctype makessure that the page renders as expected.

* XHTML-MP DoctypeThe document type (doctype) tells the browser how the page needs torender, including the rules and how strictly to follow these rules.

U W ll f d C d
http://www.wapforum.org/DTD/xhtml-mobile10.dtdhttp://www.wapforum.org/DTD/xhtml-mobile10.dtdhttp://www.wapforum.org/DTD/xhtml-mobile10.dtdhttp://www.wapforum.org/DTD/xhtml-mobile10.dtd


93/134

Use Well-formed Code* All elements should be closed, e.g.
.

* All non-empty elements should be closed.

Example Text

Example Text

* All elements must be closed in the reverse order.Example Text

* The alt attribute should be used for all images.

* Text should appear within a block level element and not directly in the body.

Example Text

* Inline elements should always nest with block level elements.Example Text

* All attributes should appear within quotes.

* All elements and attributes should use lowercase.

Example Text

A id T bl f L t


94/134

Avoid Tables for Layout

* Layout tables become a big problem whenviewed in multiple mobile browsers.

Pl N i ti i th C t t B d


95/134

Place Navigation in the Content Body

* Given the vertical orientation of the mobilepage, we show only navigation thats relevantto the page.

News

Our Products

Our Customers

About Us

Contact Us

U k i th P i N i ti


96/134

Use accesskeys in the Primary Navigation

* The primary navigation should include anassigned accesskey that corresponds to anumbered keypad whenever possible.

News

Our Products

Our Customers

About Us

Contact Us

U O d d Li t f N i ti


97/134

Use Ordered Lists for Navigation

* Using ordered lists for navigation rather thanunordered lists will indicate to the use theassociated accesskey.

News

Our Products

Our Customers

About Us

Contact Us

U D t St l N t E t l St l


98/134

Use Document Styles, Not External Styles

* Linking to an external file requires mostmobile browsers to first load the XHTML-MPdocument, and then load the external

stylesheet.

* When using external stylesheets the user mayexperience a brief flash of unstyled text

before the stylesheet has a chance to load.

Instead, insert styles into the of a

document.


99/134

Forms can be Tricky


100/134

Forms can be Tricky

* Entering data into a mobile web site is often adifficult and time-consuming process.

* To avoid wasting the users time and causing

frustration, use few or no forms.

* However, when using forms, keep the neededinformation as little as possible.


101/134

Part 7

Mobile Publishing

Complex


102/134

Context vs. Content

Mobile Specific Site

Stylesheets

Reformat

SSR

Complex

Simple Slower Faster

Valu

e

Complex


103/134

Context vs. Content

Mobile Specific Site

Stylesheets

Reformat

SSR

Complex

Simple Slower Faster

Valu

e

Supporting Devices & Browsers


104/134




105/134


* Over 500 devices being sold each year.



106/134


* Over 500 devices being sold each year.* Over 50 mobile browsers to contend with.



107/134



* Crowding stems from mobile service providerprovisioning.



108/134




* Mobile service provider linked sites mustsupport all provisioned devices and browsers.



109/134





* Adopts standards has been around for much

longer in mobile.



110/134





* Adopts standards has been around for much

longer in mobile.

* Older or poorly designed devices dont requiresupport.


111/134

Focus on Five.

Publishing Methods


112/134

Publishing Methods

Publishing Methods


113/134

Publishing Methods

* Educate the user to manually enter a mobileURL such as a folder or sub-domain.e.g. domain.com/mobile or mobile.domain.com.

Publishing Methods


114/134

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


115/134

Publishing Methods




* Use the mobile specific .mobi top-level domain.Here the user enters domain.mobi.

Publishing Methods


116/134

Publishing Methods




* Use the mobile specific .mobi top-level domain.Here the user enters domain.mobi.

* A SMS query that returns a URL called WAPPush.

The Device Detection Dilemma


117/134




118/134


* Simple Device DetectionPublish only one mobile specific site, designed for the lowest supportedbrowser, routing all mobile browsers to it.



119/134



* Advanced Device DetectionProgrammatically render the best possible mobile specific site to the

requesting device.



120/134




requesting device.

* Mobile StylesheetsCode XHTML pages with the mobile context in mind and use the media

type attribute to render a mobile stylesheet to mobile devices.



121/134




requesting device.

* Mobile StylesheetsCode XHTML pages with the mobile context in mind and use the media

type attribute to render a mobile stylesheet to mobile devices.

* No device detectionRely on an alternate domain or subdirectory forcing the user to manually

enter or navigate to the mobile specific site.


122/134

Jargon Alert

AdaptationThe process of dynamically optimizing content to therestrictions of the requesting device.

The adaptation model relies on the mobile devices user

agent profile to tell the server to deliver markup or images

based on the browser, screen size and device capabilities.

Testing


123/134

Testing

Testing


124/134

Testing

* Desktop TestingTesting from a normal desktop browser is a great way to start.

Testing


125/134

Testing


* Browser ToolsBrowsers like Opera and Firefox have tools specific to mobile testing.

Testing


126/134

Testing



* EmulatorsAllows for desktop verification without loading on to a device.

Testing


127/134

Testing




* Device TestingTest as many as you can, but focus on five good mainstream devices.

Testing


128/134

Testing




* Device TestingTest as many as you can, but focus on five good mainstream devices.

* Usability TestingTest early and often with as many users as you can.


129/134

Resources

.mobi Developers Guide
http://dev.mobi/


130/134

http://dev.mobi

Mobile WebDevelopers GuidePart I: Creating Simple Mobile Sites

BRIAN FLINGwith Ronan Cremin, Jo Rabin and D. Keith Robinson

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


131/134

http://mr.dev.mobi

Mobile Design
http://mr.dev.mobi/http://mr.dev.mobi/http://www.mobiledesign.org/


132/134

http://www.mobiledesign.org
http://www.mobiledesign.org/http://www.mobiledesign.org/


133/134

Thank you.


134/134

Brian FlingCo-founder & Director of Strategy, Blue [email protected]

tel. +1 206 545-0210mob. +1 206 351-6060
http://www.blueflavor.com/presentations/sxsw2007.pdfhttp://www.blueflavor.com/presentations/sxsw2007.pdfhttp://www.blueflavor.com/presentations/sxsw2007.pdfmailto:[email protected]:[email protected]

Everything you always wanted to know about the mobile web

Documents

Transcript of Everything you always wanted to know about the mobile web