Your SlideShare is downloading. ×
Mobile Web  Standards and its Future
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Mobile Web Standards and its Future


Published on

Talking about current issues for mobile web and anticipate the future of mobile web.

Talking about current issues for mobile web and anticipate the future of mobile web.

Published in: Technology

  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. MobileWeb Standards issue & its future Seungyun Lee <>
  • 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
  • 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, 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,,
  • 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 @ 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