The document discusses standards and the future of the mobile web. It covers the evolution from WAP to smartphones and the "World War III" of competing mobile platforms. The key issues are the many different devices and lack of standards. Solutions proposed include supporting any device using web standards and designing specifically for mobile. The W3C is working on mobile web standardization through the MobileOK initiative and validator. The future may include more HTML5, social, location-based and cloud-connected mobile apps.

1. MobileWeb
Standards issue & its future
Seungyun Lee
<syl@etri.re.kr>

2. Exclusive
WAC | Whole Sale Community, “Supper AppStore”
Android | Wave of commercial release
Microsoft | Windows Phone 7 Series
Samsung | Bada platform
Google | “Mobile First”

3. Issue on MobileWeb

4. In the past ...

5. 
WAP

6. It was Galapagos islands

7. New ERA with
Smarthphone

8. World War III: Mobile Platform Battle

9. WEB on the
Move

10. Mobile Web
Can we do everything on the mobile?

11. What’s the Problem ?

12. Too many
different devices!

13. It’s not a Standard !

14. Local Story
Big Barrier
for Smartphone
in Korea

15. Solutions

16. Support any mobile devices using
Web Standards
One Source Multi Use

17. from Web Standards

18. Design for mobile
Mobilizing

19. W3C, Mobile Web Standardization

20. Fundamental Philosophy

21. MobileOK Best Practice Standards
OK
DDC
 (UTF-8, EUC-KR)
 (50KB)
 (240 min)
 (JPEG, GIF, PNG)
 (256 color)
 CSS 2.1, CSS 3
 Javascript, AJAX, DOM
 (Active X )
 HTTP
 CSS
 : ,



  MOK

22. MobileOK Validator
http://v.mobileok.kr/
http://validator.w3.org/mobile/

23. MobileOK Certification Logo
OK
W3C Logo MobileWeb2.0 Logo
(International) (Korea)
<TBD>

24. MobileOK verified sites in Korea
Th
es
ea
bu re
t W no
eb t Ap
! p

25. SIN
CE
MobileWeb2.0 Forum
http://www.mobileok.kr, http://www.mw2.or.kr
200
7
모바일웹2.0포럼
사무국 운영위원회
BIZ전략위원회 표준기술위원회 모바일OK추진위원회
NEW
One 모바일
단말API 모바일OK
Widget 커머스뱅킹
접근AG 인증AG
AG AG
전략,정책개발 모바일OK표준개발 모바일OK시범사업

26. Future of MobileWeb

27. HTML5
Enriching
mobile apps

28. HTML5 support browsers

29. More
Socializing
on the move

30. Real world
Navigation
on the move

31. Smart
Advertisement
on the move
Not
NOW
New Driver
for future advertisement

32. More Bindings
to the Cloud
on the Web

33. Toward Platform
“WebOS” ?
on the mobile
WAC

34. Thank You
Seungyun Lee / Ph.D.
Leader of Service Convergence Standards Research Team, ETRI
Manager of W3C Korea Office
syl@etri.re.kr, syl@w3.org, bluse2@gmail.com
twitter.com/seungyun/

35. Design for One Web
Mobile Web 10 ways THEMATIC CONSISTENCY:
Best Practices to mobilize Ensure that content provided by
accessing a URI yields a thematically
coherent experience when accessed
from different devices.
Design for One Web
CAPABILITIES:
Rely on Web standards Exploit device capabilities to provide
Design
an enhanced user experience.
Stay away from known
DEFICIENCIES:
hazards
Be cautious of device
for One Web Take reasonable steps to work around
deficient implementations.
limitations
Content designed with
TESTING:
Carry out testing on actual devices
Flip Card
Optimize navigation as well as emulators.
diverse devices in mind
Check graphics colors reduces cost, increases
Keep it small flexibility, and reaches the
Use the network sparingly needs of more people.
Help guide user input
W3C MobileWeb
Think of users on the go
Authoring Guide
Rely on Web standards Stay away from known hazards
VALID MARKUP: Create documents that POP UPS:
validate to published formal grammars. Do not cause pop-ups or other
windows to appear and do not
CONTENT FORMAT SUPPORT: Send change the current window without
content in a format that is known to be informing the user.
supported by the device.
TABLES NESTED:
CONTENT FORMAT PREFERRED: Where Do not use nested tables.
possible, send content in a preferred format.
Rely on CHARACTER ENCODING SUPPORT: Ensure Stay away TABLES LAYOUT:
Do not use tables for layout.
that content is encoded using a character
Web standards encoding that is known to be supported
by the target device. from known hazards GRAPHICS FOR SPACING:
Do not use graphics for spacing.
CHARACTER ENCODING USE: Indicate
In the highly fragmented in the response the character encoding Thoughtful design can NO FRAMES:
being used. Do not use frames.
market of devices and help reduce usability
STYLE SHEETS USE: Use style sheets to IMAGE MAPS:
browsers, standards are control layout and presentation, unless problems due to small Do not use image maps unless
the device is known not to support them. you know the device supports them
the best guarantee for screens and keyboards, effectively.
STRUCTURE: Use features of the markup
interoperability. language to indicate logical document and other features
structure.
ERROR MESSAGES: Provide informative of mobile devices.
error messages and a means of navigating
away from an error message back to
useful information.

36. Be cautious Optimize navigation
of device limitations
NAVBAR:
COOKIES: Provide only minimal navigation
Do not rely on cookies being at the top of the page.
available.
NAVIGATION:
OBJECTS OR SCRIPT: Provide consistent navigation
Do not rely on embedded objects mechanisms.
or script.
Be cautious of Optimize
LINK TARGET ID:
TABLES SUPPORT: Clearly identify the target of each link.
Do not use tables unless the device
device limitations is known to support them.
navigation LINK TARGET FORMAT:
Note the target file’s format unless
TABLES ALTERNATIVES:
Where possible, use an alternative to
Simple navigation and
you know the device supports it.
Flip Card
When choosing to use a tabular presentation. ACCESS KEYS:
Assign access keys to links in
particular Web technology, STYLE SHEETS SUPPORT:
Organize documents so that if
typing become critical navigational menus and frequently
accessed functionality.
consider that mobile necessary they may be read without
style sheets.
when using a small screen URIS:
devices vary greatly in FONTS:
and keyboard, and limited Keep the URIs of site entry points short.
capability. Do not rely on support of font
related styling. bandwidth. BALANCE:
Take into account the trade-off between
having too many links on a page and asking
USE OF COLORS: the user to follow too many links to reach
Ensure that information conveyed with
W3C MobileWeb
what they are looking for.
color is also available without color.
Authoring Guide
Check graphics colors Keep it small
IMAGES RESIZING: MINIMIZE:
Resize images at the server, Use terse, efficient markup.
if they have an intrinsic size.
PAGE SIZE LIMIT:
LARGE GRAPHICS: Ensure that the overall size of page
Do not use images that cannot be is appropriate to the memory
rendered by the device. Avoid large or high limitations of the device.
resolution images except where critical
information would otherwise be lost.
Check Keep it small
STYLE SHEETS SIZE:
Keep style sheets small.
IMAGES SPECIFY SIZE:
graphics colors
Specify the size of images in markup, SCROLLING:
if they have an intrinsic size.
Smaller sites make Limit scrolling to one direction,
unless secondary scrolling cannot
NON TEXT ALTERNATIVES:
Images, colors, and style Provide a text equivalent for every users happier by costing be avoided.
non-text element.
brighten content, but less in time and money.
COLOR CONTRAST:
Ensure that foreground and background color
require care: device may combinations provide sufficient contrast.
have low-contrast screen BACKGROUND IMAGE READABILITY:
When using background images make sure
or may not support that content remains readable on the device.
some formats. MEASURES:
Do not use pixel measures and do not use
absolute units in markup language attribute
values and style sheet property values.

37. Use the network sparingly Help guide user input
AUTO REFRESH: MINIMIZE KEYSTROKES:
Do not create periodically auto- Keep the number of keystrokes
refreshing pages, unless you have to a minimum.
informed the user and provided
a means of stopping it. AVOID FREE TEXT:
Avoid free text entry where possible.
REDIRECTION:
Do not use markup to redirect pages PROVIDE DEFAULTS:
Use the Help guide
automatically. Instead, configure the Provide pre-selected default values
server to perform redirects by means where possible.
of HTTP 3xx codes.
network sparingly EXTERNAL RESOURCES: user input DEFAULT INPUT MODE:
Specify a default text entry mode,
Keep the number of externally linked
resources to a minimum.
language and/or input format, if the
target device is known to support it. Flip Card
Web protocol features CACHING:
Keyboards and other TAB ORDER:
can help improve the user Provide caching information in HTTP
responses
input methods on mobile Create a logical order through links,
form controls and objects.
experience by reducing devices can be tedious CONTROL LABELLING:
the impact of network to use, so effective designs Label all form controls appropriately
and explicitly associate labels with
bottlenecks and latencies. minimize the need form controls.
for them. CONTROL POSITION:
Position labels so they lay out
W3C MobileWeb
properly in relation to the form
controls they refer to.
Authoring Guide
Think of users on the go
www.w3.org/Mobile
@
PAGE TITLE:
Provide a short but descriptive SPONSOR
page title. W3C Mobile Web Initiative
CLARITY:
Use clear and simple language.
CENTRAL MEANING:
Think of users
Ensure that material that is central
to the meaning of the page precedes
material that is not.
on the go LIMITED:
Limit content to what the user
has requested.
Web users on the go SUITABLE:
want compact information Ensure that content is suitable for
use in a mobile context.
when time is short and PAGE SIZE USABLE:
distractions many. Divide pages into usable but limited
size portions.
SUPPORTED BY
MOBIWEB 2.0 FP7
E.U.
PROJECT