Mobile Website Development
Mobile Internet Standards
Facilitated by:
Michael Wakahe
July 2011
Table of Contents
 Introduction to Mobile Web Standards
 Structure
 Presentation
 Client Side Scripting
 MIME Types
 Standardization Bodies
Copyright © Tawi Commercial Services Ltd. 2015. All Rights
Reserved.
Introduction to Mobile
Web Standards
Copyright © Tawi Commercial Services Ltd. 2015. All Rights
Reserved.
Mobile Web Standards
 Fundamentally, there is one Web.
 Its content is standardized markup, styles, scripts,
and multimedia viewable using web browsers.
Copyright © Tawi Commercial Services Ltd. 2015. All Rights
Reserved.
Mobile Web Standards
 A standards-based approach to Mobile Web
development ensures compliance and usability
across mobile browsers & platforms.
 Knowing all the rules & knowing when to ignore the
rules is necessary for success on the Mobile Web.
Copyright © Tawi Commercial Services Ltd. 2015. All Rights
Reserved.
Mobile Web Standards
 Various standards involved in:
 Structure
 Presentation
 Client Side Scripting
Copyright © Tawi Commercial Services Ltd. 2015. All Rights
Reserved.
Structure
Copyright © Tawi Commercial Services Ltd. 2015. All Rights
Reserved.
Mobile Web Standards
 XML-formatted markup defines the document
structure
 Handsets may support WML, XHTML, HTML4, HTML5
in varying degrees
 These XML standards have various versions &
derivations
Copyright © Tawi Commercial Services Ltd. 2015. All Rights
Reserved.
Mobile Web Standards
 Previously WML was dominant, now best
results with XHTML MP
 Specifically XHTML MP 1.0
 Most modern phones support WAP 2.0, which
uses XHTML MP as the primary markup
language while WAP 1.0 used WML.
Copyright © Tawi Commercial Services Ltd. 2015. All Rights
Reserved.
Mobile Web Standards
 XHTML-MP (Extensible Hypertext Markup
Language - Mobile Profile) is a specialization
XHTML designed to incorporate features
useful to mobile devices.
 XHTML-MP 1.0 was defined by the OMA and is
an extension of the original W3C-inspired
XHTML Basic 1.0.
Copyright © Tawi Commercial Services Ltd. 2015. All Rights
Reserved.
Mobile Web Standards
 Over time, OMA has developed XHTML-MP
and now has a proposed 1.2 version of its
specification.
 XHTML-MP comes with a mobile-friendly
means of using CSS to separate presentation
from the markup, just like on the desktop.
Copyright © Tawi Commercial Services Ltd. 2015. All Rights
Reserved.
Mobile Web Standards
 XHTML-MP 1.0 sets the base tags for mobile
markup.
 XHTML-MP 1.1 adds the <script> tag and
support for mobile JavaScript.
 XHTML-MP 1.2 adds more form tags and text
input modes.
 Currently many mobile browsers do not
support XHTML-MP 1.2.
Copyright © Tawi Commercial Services Ltd. 2015. All Rights
Reserved.
Mobile Web Standards
 Mobile Web sites targeting only smartphones
can use the full feature set of HTML 4 & in the
near future, HTML 5.
 Using desktop markup also invites
transcoders - network appliances designed to
optimize the Desktop Web for mobile devices
by reformatting markup
Copyright © Tawi Commercial Services Ltd. 2015. All Rights
Reserved.
Mobile Web Standards
 HTML 5 is the next major release of the foundational
language of the Web.
 It is currently a draft recommendation undergoing
active revision at the W3C
(http://www.w3.org/TR/html5/)
 HTML 5 will be the next standard for markup and
APIs supported in Web browsers.
Copyright © Tawi Commercial Services Ltd. 2015. All Rights
Reserved.
Presentation
Copyright © Tawi Commercial Services Ltd. 2015. All Rights
Reserved.
Mobile Web Standards
 Cascading Style Sheets (CSS) control the
presentation.
 Most XHTML-MP mobile browsers support Wireless
CSS, CSS Mobile Profile, and/or CSS 2.
 CSS 3 is new, coming along with HTML5
Copyright © Tawi Commercial Services Ltd. 2015. All Rights
Reserved.
Mobile Web Standards
 The OMA-managed Wireless CSS standard is a
subset of CSS and is also part of the WAP 2.0
specification.
 Note that Wireless CSS is not backwards
compatible with WML.
Copyright © Tawi Commercial Services Ltd. 2015. All Rights
Reserved.
Mobile Web Standards
 Wireless CSS and CSS Mobile Profile are tightly
related, but independent mobile subsets of
CSS2 used to style XHTML-MP documents.
 Wireless CSS is a CSS2 subset standardized by
the Open Mobile Alliance.
Copyright © Tawi Commercial Services Ltd. 2015. All Rights
Reserved.
Mobile Web Standards
 CSS Mobile Profile is a CSS2 subset—with
some features borrowed from CSS3—that is
standardized by the W3C.
 The W3C’s goal is to align CSS Mobile Profile
with Wireless CSS as much as possible.
Copyright © Tawi Commercial Services Ltd. 2015. All Rights
Reserved.
Mobile Web Standards
 Overall, Wireless CSS is a more restricted subset and
an older standard targeted at Web browsers on
resource-limited mobile devices.
 CSS Mobile Profile adds in much more of the CSS2
standard to enable richer web documents but risks
full support on mass market mobile browsers.
Copyright © Tawi Commercial Services Ltd. 2015. All Rights
Reserved.
Mobile Web Standards
 You can add Wireless CSS to your document the same way as
you would for a normal HTML document.
 Link to an external global stylesheet using the following line:
 <link href="external.css" rel="stylesheet" type="text/css" />
 Insert styles at the document head the following example
shows:
 <style>
 p {
 font-size: small;
 }
 </style>
Copyright © Tawi Commercial Services Ltd. 2015. All Rights
Reserved.
Mobile Web Standards
 Wireless CSS supports a lot CSS attributes, but
not all of them.
 More advanced styling techniques won’t likely
work across multiple mobile browsers.
 The best advice is to keep your CSS as simple
as possible.
Copyright © Tawi Commercial Services Ltd. 2015. All Rights
Reserved.
Client Side Scripting
Copyright © Tawi Commercial Services Ltd. 2015. All Rights
Reserved.
Mobile Web Standards
 Client-side scripting mainly through Javascript
 ECMAScript-MP or mobile JavaScript targets mobile
phones
 WMLScript is a scripting language which
complements WML.
Copyright © Tawi Commercial Services Ltd. 2015. All Rights
Reserved.
Mobile Web Standards
 Client-side scripting in mobile browsers used to be
the exclusive domain of smartphones, but this is
rapidly changing.
 Many mass-market mobile devices beginning to
support mobile JavaScript.
Copyright © Tawi Commercial Services Ltd. 2015. All Rights
Reserved.
Mobile Web Standards
 As with any client-side mobile technology, testing
JavaScript on actual mobile devices is critical for
effective development
 Testing on emulators and in Firefox might not
uncover syntax problems and performance issues
that can occur on the target mobile device.
Copyright © Tawi Commercial Services Ltd. 2015. All Rights
Reserved.
Mobile Web Standards
 Mobile and desktop JavaScript have virtually
identical syntax.
 The mobile version is stringent about ending
lines with semicolons.
Copyright © Tawi Commercial Services Ltd. 2015. All Rights
Reserved.
Mobile Web Standards
 Mobile JavaScript reduces the supported
character sets and excludes computationally
intensive language elements.
 It differs from its desktop counterpart in the
extent of its DOM and event support in the
mobile browser.
Copyright © Tawi Commercial Services Ltd. 2015. All Rights
Reserved.
Mobile Web Standards
 DOM and event support can vary from one
browser vendor and version to another.
 On-device testing is critical for success with
mobile JavaScript.
Copyright © Tawi Commercial Services Ltd. 2015. All Rights
Reserved.
Mobile Web Standards
 You can use device awareness and content
adaptation techniques that enable conditional
inclusion of scripting to target only mobile
browsers with support for JavaScript.
Copyright © Tawi Commercial Services Ltd. 2015. All Rights
Reserved.
MIME Types
Copyright © Tawi Commercial Services Ltd. 2015. All Rights
Reserved.
Mobile Web Standards
 Mobile MIME types (or content types) identify
the format of Mobile Web content.
 Formats are differentiated by web servers and
browser clients in an HTTP transaction using
MIME types
Copyright © Tawi Commercial Services Ltd. 2015. All Rights
Reserved.
Mobile Web Standards
 Text documents containing mobile markup
 Binary files include viewable or playable
content like ringtones, wallpaper and videos,
and binary executable mobile applications
Copyright © Tawi Commercial Services Ltd. 2015. All Rights
Reserved.
Standardization Bodies
Copyright © Tawi Commercial Services Ltd. 2015. All Rights
Reserved.
Mobile Web Standards
 Mobile Industry Groups and Standards Bodies
adherence to Mobile Web industry standards and
best practices is important for flexible and cross-
platform development.
 Several Internet and mobile industry bodies govern
Mobile Web standards and recommended best
practices
Copyright © Tawi Commercial Services Ltd. 2015. All Rights
Reserved.
Mobile Web Standards
 W3C: This body standardizes mobile markup
languages and publishes best practices documents
for Mobile Web development and testing.
Copyright © Tawi Commercial Services Ltd. 2015. All Rights
Reserved.
Mobile Web Standards
 Open Mobile Alliance (formerly WAP Forum): This
body standardizes mobile markup and style
languages and other mobile technologies designed
to be interoperable across devices, geographies, and
mobile networks.
Copyright © Tawi Commercial Services Ltd. 2015. All Rights
Reserved.
Mobile Web Standards
 dotMobi (http://mtld.mobi): This body controls the
.mobi top-level domain, the content of which must
be device-adaptive and compatible with mobile
devices.
 This body also publishes best practices for Mobile
Web development and nurtures mobile developers,
marketers, and operators with online communities.
Copyright © Tawi Commercial Services Ltd. 2015. All Rights
Reserved.
Mobile Web Standards
 Mobile Marketing Association: This body
centralizes technology recommendations and
best practices for marketing and advertising
on mobile devices.
Copyright © Tawi Commercial Services Ltd. 2015. All Rights
Reserved.
Mobile Web Standards
 Open Mobile Terminal Platform (OMTP)
(www.omtp.org): This operator-sponsored
mobile industry group standardizing mobile
device access from Web applications.
Copyright © Tawi Commercial Services Ltd. 2015. All Rights
Reserved.
The End
Michael Wakahe
michael@tawi.mobi
+254 (0) 20 239 3052
www.tawi.mobi
Copyright © Tawi Commercial Services Ltd. 2015. All Rights
Reserved.

Mobile Internet Standards

  • 1.
    Mobile Website Development MobileInternet Standards Facilitated by: Michael Wakahe July 2011
  • 2.
    Table of Contents Introduction to Mobile Web Standards  Structure  Presentation  Client Side Scripting  MIME Types  Standardization Bodies Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
  • 3.
    Introduction to Mobile WebStandards Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
  • 4.
    Mobile Web Standards Fundamentally, there is one Web.  Its content is standardized markup, styles, scripts, and multimedia viewable using web browsers. Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
  • 5.
    Mobile Web Standards A standards-based approach to Mobile Web development ensures compliance and usability across mobile browsers & platforms.  Knowing all the rules & knowing when to ignore the rules is necessary for success on the Mobile Web. Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
  • 6.
    Mobile Web Standards Various standards involved in:  Structure  Presentation  Client Side Scripting Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
  • 7.
    Structure Copyright © TawiCommercial Services Ltd. 2015. All Rights Reserved.
  • 8.
    Mobile Web Standards XML-formatted markup defines the document structure  Handsets may support WML, XHTML, HTML4, HTML5 in varying degrees  These XML standards have various versions & derivations Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
  • 9.
    Mobile Web Standards Previously WML was dominant, now best results with XHTML MP  Specifically XHTML MP 1.0  Most modern phones support WAP 2.0, which uses XHTML MP as the primary markup language while WAP 1.0 used WML. Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
  • 10.
    Mobile Web Standards XHTML-MP (Extensible Hypertext Markup Language - Mobile Profile) is a specialization XHTML designed to incorporate features useful to mobile devices.  XHTML-MP 1.0 was defined by the OMA and is an extension of the original W3C-inspired XHTML Basic 1.0. Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
  • 11.
    Mobile Web Standards Over time, OMA has developed XHTML-MP and now has a proposed 1.2 version of its specification.  XHTML-MP comes with a mobile-friendly means of using CSS to separate presentation from the markup, just like on the desktop. Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
  • 12.
    Mobile Web Standards XHTML-MP 1.0 sets the base tags for mobile markup.  XHTML-MP 1.1 adds the <script> tag and support for mobile JavaScript.  XHTML-MP 1.2 adds more form tags and text input modes.  Currently many mobile browsers do not support XHTML-MP 1.2. Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
  • 13.
    Mobile Web Standards Mobile Web sites targeting only smartphones can use the full feature set of HTML 4 & in the near future, HTML 5.  Using desktop markup also invites transcoders - network appliances designed to optimize the Desktop Web for mobile devices by reformatting markup Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
  • 14.
    Mobile Web Standards HTML 5 is the next major release of the foundational language of the Web.  It is currently a draft recommendation undergoing active revision at the W3C (http://www.w3.org/TR/html5/)  HTML 5 will be the next standard for markup and APIs supported in Web browsers. Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
  • 15.
    Presentation Copyright © TawiCommercial Services Ltd. 2015. All Rights Reserved.
  • 16.
    Mobile Web Standards Cascading Style Sheets (CSS) control the presentation.  Most XHTML-MP mobile browsers support Wireless CSS, CSS Mobile Profile, and/or CSS 2.  CSS 3 is new, coming along with HTML5 Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
  • 17.
    Mobile Web Standards The OMA-managed Wireless CSS standard is a subset of CSS and is also part of the WAP 2.0 specification.  Note that Wireless CSS is not backwards compatible with WML. Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
  • 18.
    Mobile Web Standards Wireless CSS and CSS Mobile Profile are tightly related, but independent mobile subsets of CSS2 used to style XHTML-MP documents.  Wireless CSS is a CSS2 subset standardized by the Open Mobile Alliance. Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
  • 19.
    Mobile Web Standards CSS Mobile Profile is a CSS2 subset—with some features borrowed from CSS3—that is standardized by the W3C.  The W3C’s goal is to align CSS Mobile Profile with Wireless CSS as much as possible. Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
  • 20.
    Mobile Web Standards Overall, Wireless CSS is a more restricted subset and an older standard targeted at Web browsers on resource-limited mobile devices.  CSS Mobile Profile adds in much more of the CSS2 standard to enable richer web documents but risks full support on mass market mobile browsers. Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
  • 21.
    Mobile Web Standards You can add Wireless CSS to your document the same way as you would for a normal HTML document.  Link to an external global stylesheet using the following line:  <link href="external.css" rel="stylesheet" type="text/css" />  Insert styles at the document head the following example shows:  <style>  p {  font-size: small;  }  </style> Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
  • 22.
    Mobile Web Standards Wireless CSS supports a lot CSS attributes, but not all of them.  More advanced styling techniques won’t likely work across multiple mobile browsers.  The best advice is to keep your CSS as simple as possible. Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
  • 23.
    Client Side Scripting Copyright© Tawi Commercial Services Ltd. 2015. All Rights Reserved.
  • 24.
    Mobile Web Standards Client-side scripting mainly through Javascript  ECMAScript-MP or mobile JavaScript targets mobile phones  WMLScript is a scripting language which complements WML. Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
  • 25.
    Mobile Web Standards Client-side scripting in mobile browsers used to be the exclusive domain of smartphones, but this is rapidly changing.  Many mass-market mobile devices beginning to support mobile JavaScript. Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
  • 26.
    Mobile Web Standards As with any client-side mobile technology, testing JavaScript on actual mobile devices is critical for effective development  Testing on emulators and in Firefox might not uncover syntax problems and performance issues that can occur on the target mobile device. Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
  • 27.
    Mobile Web Standards Mobile and desktop JavaScript have virtually identical syntax.  The mobile version is stringent about ending lines with semicolons. Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
  • 28.
    Mobile Web Standards Mobile JavaScript reduces the supported character sets and excludes computationally intensive language elements.  It differs from its desktop counterpart in the extent of its DOM and event support in the mobile browser. Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
  • 29.
    Mobile Web Standards DOM and event support can vary from one browser vendor and version to another.  On-device testing is critical for success with mobile JavaScript. Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
  • 30.
    Mobile Web Standards You can use device awareness and content adaptation techniques that enable conditional inclusion of scripting to target only mobile browsers with support for JavaScript. Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
  • 31.
    MIME Types Copyright ©Tawi Commercial Services Ltd. 2015. All Rights Reserved.
  • 32.
    Mobile Web Standards Mobile MIME types (or content types) identify the format of Mobile Web content.  Formats are differentiated by web servers and browser clients in an HTTP transaction using MIME types Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
  • 33.
    Mobile Web Standards Text documents containing mobile markup  Binary files include viewable or playable content like ringtones, wallpaper and videos, and binary executable mobile applications Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
  • 34.
    Standardization Bodies Copyright ©Tawi Commercial Services Ltd. 2015. All Rights Reserved.
  • 35.
    Mobile Web Standards Mobile Industry Groups and Standards Bodies adherence to Mobile Web industry standards and best practices is important for flexible and cross- platform development.  Several Internet and mobile industry bodies govern Mobile Web standards and recommended best practices Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
  • 36.
    Mobile Web Standards W3C: This body standardizes mobile markup languages and publishes best practices documents for Mobile Web development and testing. Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
  • 37.
    Mobile Web Standards Open Mobile Alliance (formerly WAP Forum): This body standardizes mobile markup and style languages and other mobile technologies designed to be interoperable across devices, geographies, and mobile networks. Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
  • 38.
    Mobile Web Standards dotMobi (http://mtld.mobi): This body controls the .mobi top-level domain, the content of which must be device-adaptive and compatible with mobile devices.  This body also publishes best practices for Mobile Web development and nurtures mobile developers, marketers, and operators with online communities. Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
  • 39.
    Mobile Web Standards Mobile Marketing Association: This body centralizes technology recommendations and best practices for marketing and advertising on mobile devices. Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
  • 40.
    Mobile Web Standards Open Mobile Terminal Platform (OMTP) (www.omtp.org): This operator-sponsored mobile industry group standardizing mobile device access from Web applications. Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
  • 41.
    The End Michael Wakahe michael@tawi.mobi +254(0) 20 239 3052 www.tawi.mobi Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.