MobileWeb Standards issue & its future

Seungyun Lee<syl@etri.re.kr>

WAC | Whole Sale Community, “Supper AppStore”Android | Wave of commercial releaseMicrosoft | Windows Phone 7 Series

Samsung | Bada platformGoogle | “Mobile First”

Exclusive

Issue on MobileWeb

In the past ...

WAP

It was Galapagos islands

New ERA with Smarthphone

World War III: Mobile Platform Battle

WEB on the Move

Mobile WebCan we do everything on the mobile?

What’s the Problem ?

Too many different devices!

It’s not a Standard !

Big Barrierfor Smartphonein Korea

Local Story

Solutions

Support any mobile devices using Web Standards

One Source Multi Use

from Web Standards

Design for mobileMobilizing

W3C, Mobile Web Standardization

Fundamental Philosophy

비 표준 기능 사용하지 않기 (Active X 등) 올바른 HTTP 프로토콜 사용 올바른 CSS 사용 올바른 이미지 처리 : 화이트 이미지, 이미지 맵 사용하지 않기 프레임 사용하지 않기 테이블 중첩 사용하지 않기 팝업 사용하지 않기

표준화된 단말정보 규격 사용 MOK 준수 페이지 표기 방법

웹 페이지 저작

단말정보 이용 웹페이지 이용

올바른 문자 엔코딩 방법 (UTF-8, EUC-KR) 페이지 크기 (50KB) 픽셀 크기 (240 min) 이미지 포맷 (JPEG, GIF, PNG) 컬러 (256 color) CSS 2.1, CSS 3 지원 Javascript, AJAX, DOM 지원

DDC 규약

모바일OK 모범사례 표준의 예

MobileOK Best Practice Standards

MobileOK Validator

http://validator.w3.org/mobile/

http://v.mobileok.kr/

MobileOK Certification Logo

W3C Logo(International)

MobileWeb2.0 Logo(Korea)

모바일웹 표준 확산을 위한 모바일OK 인증마크

<TBD>

MobileOK verified sites in KoreaThese are not App

but Web!

MobileWeb2.0 Forumhttp://www.mobileok.kr, http://www.mw2.or.kr

SINCE2007

운영위원회사무국

모바일웹2.0포럼

BIZ전략위원회

모바일OK����������� ������������������  표준개발 모바일OK����������� ������������������  시범사업전략,����������� ������������������  정책����������� ������������������  개발

단말API접근����������� ������������������  AG

OneWidgetAG

모바일OK인증����������� ������������������  AG

모바일커머스&뱅킹����������� ������������������  AG

표준기술위원회

NEW모바일OK����������� ������������������  추진위원회

Future of MobileWeb

HTML5Enriching

mobile apps

HTML5 support browsers

MoreSocializing

on the move

Real world Navigation

on the move

SmartAdvertisement

on the move

Not NOW

New Driverfor future advertisement

More Bindingsto the Cloud

on the Web

Toward Platform“WebOS” ?

on the mobile

WAC

Seungyun Lee / Ph.D.Leader of Service Convergence Standards Research Team, ETRIManager of W3C Korea Officesyl@etri.re.kr, syl@w3.org, bluse2@gmail.comtwitter.com/seungyun/

Thank You

Mobile Web Best Practices

Design for One Web

Rely on Web standards

Stay away from known hazards

Be cautious of devicelimitations

Optimize navigation

Check graphics & colors

Keep it small

Use the network sparingly

Help & guide user input

Think of users on the go

10 ways to mobilize

Content designed withdiverse devices in mindreduces cost, increases

fl exibility, and reaches theneeds of more people.

Designfor One Web

Design for One Web

THEMATIC CONSISTENCY:Ensure that content provided by accessing a URI yields a thematically coherent experience when accessed from different devices.

CAPABILITIES:Exploit device capabilities to providean enhanced user experience.

DEFICIENCIES:Take reasonable steps to work around defi cient implementations.

TESTING:Carry out testing on actual devicesas well as emulators.

In the highly fragmentedmarket of devices and

browsers, standards arethe best guarantee for

interoperability.

Rely onWeb standards

Rely on Web standards

VALID MARKUP: Create documents that validate to published formal grammars.

CONTENT FORMAT SUPPORT: Send content in a format that is known to be supported by the device.

CONTENT FORMAT PREFERRED: Where possible, send content in a preferred format.

CHARACTER ENCODING SUPPORT: Ensure that content is encoded using a character encoding that is known to be supported by the target device.

CHARACTER ENCODING USE: Indicate in the response the character encoding being used.

STYLE SHEETS USE: Use style sheets to control layout and presentation, unless the device is known not to support them.

STRUCTURE: Use features of the markup language to indicate logical document structure.

ERROR MESSAGES: Provide informative error messages and a means of navigating away from an error message back to useful information.

Stay awayfrom known hazards

Thoughtful design canhelp reduce usability

problems due to smallscreens and keyboards,

and other featuresof mobile devices.

Stay away from known hazards

POP UPS:Do not cause pop-ups or other windows to appear and do notchange the current window without informing the user.

TABLES NESTED:Do not use nested tables.

TABLES LAYOUT:Do not use tables for layout.

GRAPHICS FOR SPACING:Do not use graphics for spacing.

NO FRAMES:Do not use frames.

IMAGE MAPS:Do not use image maps unlessyou know the device supports them effectively.

Be cautious ofdevice limitationsWhen choosing to use aparticular Web technology,

consider that mobiledevices vary greatly in

capability.

Be cautiousof device limitations

COOKIES:Do not rely on cookies beingavailable.

OBJECTS OR SCRIPT:Do not rely on embedded objectsor script.

TABLES SUPPORT:Do not use tables unless the deviceis known to support them.

TABLES ALTERNATIVES:Where possible, use an alternative to tabular presentation.

STYLE SHEETS SUPPORT:Organize documents so that if necessary they may be read without style sheets.

FONTS:Do not rely on support of fontrelated styling.

USE OF COLORS:Ensure that information conveyed with color is also available without color.

Simple navigation andtyping become critical

when using a small screenand keyboard, and limited

bandwidth.

Optimizenavigation

Optimize navigation

NAVBAR:Provide only minimal navigationat the top of the page.

NAVIGATION:Provide consistent navigation mechanisms.

LINK TARGET ID:Clearly identify the target of each link.

LINK TARGET FORMAT:Note the target fi le’s format unlessyou know the device supports it.

ACCESS KEYS:Assign access keys to links in navigational menus and frequently accessed functionality.

URIS:Keep the URIs of site entry points short.

BALANCE:Take into account the trade-off between having too many links on a page and asking the user to follow too many links to reach what they are looking for.

W

3C M

obile

Web

Aut

hori

ng G

uide

Flip Card

Mobile Web Best Practices

Design for One Web

Rely on Web standards

Stay away from known hazards

Be cautious of devicelimitations

Optimize navigation

Check graphics & colors

Keep it small

Use the network sparingly

Help & guide user input

Think of users on the go

10 ways to mobilize

Content designed withdiverse devices in mindreduces cost, increases

fl exibility, and reaches theneeds of more people.

Designfor One Web

Design for One Web

THEMATIC CONSISTENCY:Ensure that content provided by accessing a URI yields a thematically coherent experience when accessed from different devices.

CAPABILITIES:Exploit device capabilities to providean enhanced user experience.

DEFICIENCIES:Take reasonable steps to work around defi cient implementations.

TESTING:Carry out testing on actual devicesas well as emulators.

In the highly fragmentedmarket of devices and

browsers, standards arethe best guarantee for

interoperability.

Rely onWeb standards

Rely on Web standards

VALID MARKUP: Create documents that validate to published formal grammars.

CONTENT FORMAT SUPPORT: Send content in a format that is known to be supported by the device.

CONTENT FORMAT PREFERRED: Where possible, send content in a preferred format.

CHARACTER ENCODING SUPPORT: Ensure that content is encoded using a character encoding that is known to be supported by the target device.

CHARACTER ENCODING USE: Indicate in the response the character encoding being used.

STYLE SHEETS USE: Use style sheets to control layout and presentation, unless the device is known not to support them.

STRUCTURE: Use features of the markup language to indicate logical document structure.

ERROR MESSAGES: Provide informative error messages and a means of navigating away from an error message back to useful information.

Stay awayfrom known hazards

Thoughtful design canhelp reduce usability

problems due to smallscreens and keyboards,

and other featuresof mobile devices.

Stay away from known hazards

POP UPS:Do not cause pop-ups or other windows to appear and do notchange the current window without informing the user.

TABLES NESTED:Do not use nested tables.

TABLES LAYOUT:Do not use tables for layout.

GRAPHICS FOR SPACING:Do not use graphics for spacing.

NO FRAMES:Do not use frames.

IMAGE MAPS:Do not use image maps unlessyou know the device supports them effectively.

Be cautious ofdevice limitationsWhen choosing to use aparticular Web technology,

consider that mobiledevices vary greatly in

capability.

Be cautiousof device limitations

COOKIES:Do not rely on cookies beingavailable.

OBJECTS OR SCRIPT:Do not rely on embedded objectsor script.

TABLES SUPPORT:Do not use tables unless the deviceis known to support them.

TABLES ALTERNATIVES:Where possible, use an alternative to tabular presentation.

STYLE SHEETS SUPPORT:Organize documents so that if necessary they may be read without style sheets.

FONTS:Do not rely on support of fontrelated styling.

USE OF COLORS:Ensure that information conveyed with color is also available without color.

Simple navigation andtyping become critical

when using a small screenand keyboard, and limited

bandwidth.

Optimizenavigation

Optimize navigation

NAVBAR:Provide only minimal navigationat the top of the page.

NAVIGATION:Provide consistent navigation mechanisms.

LINK TARGET ID:Clearly identify the target of each link.

LINK TARGET FORMAT:Note the target fi le’s format unlessyou know the device supports it.

ACCESS KEYS:Assign access keys to links in navigational menus and frequently accessed functionality.

URIS:Keep the URIs of site entry points short.

BALANCE:Take into account the trade-off between having too many links on a page and asking the user to follow too many links to reach what they are looking for.

Images, colors, and stylebrighten content, but

require care: device mayhave low-contrast screen

or may not supportsome formats.

Checkgraphics & colors

Check graphics & colors

IMAGES RESIZING:Resize images at the server,if they have an intrinsic size.

LARGE GRAPHICS:Do not use images that cannot be rendered by the device. Avoid large or high resolution images except where critical information would otherwise be lost.

IMAGES SPECIFY SIZE:Specify the size of images in markup,if they have an intrinsic size.

NON TEXT ALTERNATIVES:Provide a text equivalent for everynon-text element.

COLOR CONTRAST:Ensure that foreground and background color combinations provide suffi cient contrast.

BACKGROUND IMAGE READABILITY: When using background images make sure that content remains readable on the device.

MEASURES:Do not use pixel measures and do not use absolute units in markup language attribute values and style sheet property values.

Smaller sites makeusers happier by costingless in time and money.

Keep it small

Keep it small

MINIMIZE:Use terse, effi cient markup.

PAGE SIZE LIMIT:Ensure that the overall size of pageis appropriate to the memory limitations of the device.

STYLE SHEETS SIZE:Keep style sheets small.

SCROLLING:Limit scrolling to one direction,unless secondary scrolling cannotbe avoided.

W

3C M

obile

Web

Aut

hori

ng G

uide

Flip Card

Web protocol features can help improve the user experience by reducingthe impact of network

bottlenecks and latencies.

Use thenetwork sparingly

Use the network sparingly

AUTO REFRESH:Do not create periodically auto-refreshing pages, unless you have informed the user and provideda means of stopping it.

REDIRECTION:Do not use markup to redirect pages automatically. Instead, confi gure the server to perform redirects by means of HTTP 3xx codes.

EXTERNAL RESOURCES:Keep the number of externally linked resources to a minimum.

CACHING:Provide caching information in HTTP responses

Keyboards and otherinput methods on mobile

devices can be tediousto use, so effective designs

minimize the needfor them.

Help & guideuser input

Help & guide user input

MINIMIZE KEYSTROKES:Keep the number of keystrokesto a minimum.

AVOID FREE TEXT:Avoid free text entry where possible.

PROVIDE DEFAULTS:Provide pre-selected default values where possible.

DEFAULT INPUT MODE:Specify a default text entry mode, language and/or input format, if the target device is known to support it.

TAB ORDER:Create a logical order through links, form controls and objects.

CONTROL LABELLING:Label all form controls appropriately and explicitly associate labels withform controls.

CONTROL POSITION:Position labels so they lay outproperly in relation to the form controls they refer to.

Web users on the gowant compact information when time is short and

distractions many.

Think of userson the go

Think of users on the go

PAGE TITLE:Provide a short but descriptivepage title.

CLARITY:Use clear and simple language.

CENTRAL MEANING:Ensure that material that is central to the meaning of the page precedes material that is not.

LIMITED:Limit content to what the userhas requested.

SUITABLE:Ensure that content is suitable foruse in a mobile context.

PAGE SIZE USABLE:Divide pages into usable but limited size portions.

ww

w.w

3.or

g/M

obile

SUPPORTED BYMOBIWEB 2.0 FP7E.U.PROJECT

@

W3C Mobile Web InitiativeSPONSOR

W

3C M

obile

Web

Aut

hori

ng G

uide

Flip Card