mobile web

HTML5 Definition Complete, W3C Moves to Interoperability Testing and Performance

December 19, 2012 All, ANDROID, Community, CSS, CSS 3, HTML, HTML5, IE, IE10, Internet Explorer 10, iOS, iPhone, JavaScript, JQuery Mobile, KnowledgeBase, Mobile Frameworks, mobile web, Mobile-Development, MSDN, StyleSheets, Web No comments

The World Wide Web Consortium (W3C) has published —  the complete definition of the HTML5 and Canvas 2D specifications on 17 December 2012.

Quoting from the announcement here

  • Though not yet W3C standards, these specifications are now feature complete, meaning businesses and developers have a stable target for implementation and planning.

  • HTML5 is the cornerstone of the Open Web Platform, a full programming environment for cross-platform applications with access to device capabilities; video and animations; graphics; style, typography, and other tools for digital publishing; extensive network capabilities; and more.

W3C also announced today the first draft of HTML 5.1 and Canvas 2D, Level 2, an early view of the next round of standardization.

To reduce browser fragmentation and extend implementations to the full range of tools that consume and produce HTML, W3C now embarks on the stage of W3C standardization devoted to interoperability and testing (called "Candidate Recommendation"). Expecting the broad HTML5 Interoperability in 2014.

During this stage, the W3C HTML Working Group will conduct a variety of activities to ensure that the specifications may be implemented compatibly across browsers, authoring tools, email clients, servers, content management systems, and other Web tools.

  • The group will analyze current HTML5 implementations, establish priorities for test development, and work with the community to develop those tests.

  • The HTML Working Group has planned for this implementation phase to last into mid-2014, after which W3C expects to publish the final HTML5 Recommendation, available Royalty-Free to implementers under the W3C Patent Policy.

Sencha(Leading cross platform mobile framework product developer) – has published a blog on HTML5 readiness here

Quoting from Sencha’s report

Feature Standardization Status:

A long list of major HTML5 technologies has now reached advanced stages of standardization.

Here is a list of just some of the big technologies in advanced standardization status with the date of the most recent standard:

Candidate Recommendation:

  • CSS Multi-column (2011)
  • CSS Flexbox (2012)
  • CSS Values & Units 3 (2012)
  • CSS Backgrounds and Borders 3 (2012)
  • CSS Images & Replaced Content 3 (2012)
  • CSS Style Attributes (2010)
  • Web Storage (2011)
  • Web Sockets (2012)
  • Web Workers (2012)
  • Web Messaging (2012)
  • Touch Events

Proposed Recommendation

  • Geolocation (2012)

Full Recommendation

  • CSS Media Queries (2012)
  • CSS Selectors 3 (2011)
  • CSS Namespaces (2011)
  • CSS Color 3 (2011)
  • Media Fragments (2012)
  • SVG 1.1 (2nd Ed) (2011)

HTML5 Feature Implementation Progress in Browsers

The very good news is that HTML5 and CSS3 implementations across all major browsers on desktop and mobile have become increasingly convergent. The chart below shows the progress of HTML5 feature implementation across major desktop and mobile browsers in the last three years using the scoring methodology.

Adoption on Desktop Browsers

HTML5 Support on Dektop Browser

Adoption on Mobile Browsers

HTML5 Support on Mobile Browser

HTML5 features have been rapidly adopted by all major browsers – with Internet Explorer’s progress on both mobile and desktop being particularly impressive. The feature implementation ramp from IE8 in 2010 to IE9 in 2011 to IE10 this year has been very steep.

Information Sources:

Great News! for all Mobile and Web Developers

Windows Phone 8 – Internet Explorer 10 support for Mobile Websites–UserAgent(UA) details for IE10-WP8

October 18, 2012 .NET, All, IE, IE10, Internet Explorer 10, KnowledgeBase, Microsoft, mobile web, Mobile-Development, Recommends, Tips & Tricks, Windows, Windows Phone, Windows Phone 8, Windows Phone Development, Windows Phone SDK No comments

Earlier Microsoft has announced that upcoming Windows Phone 8 will have Mobile version of Internet Explorer 10. IE10 have lots of improvements in terms of HTML5, JavaScript/ECMAScript support etc.

If you want your existing mobile websites to compatible to IE10 and you are using any User Agent(UA) detection logic to provide UA specific User Experience to the Website, here is the  WP8 – IE10 User Agent details for your from the Official Windows Phone Blog:

User Agent Details for WP8 – IE10:

Mozilla/5.0 (compatible; MSIE 10.0; Windows Phone 8.0; Trident/6.0; ARM; Touch; IEMobile/10.0; <Manufacturer>; <Device> [;<Operator>])

Note: items enclosed in <> are optional entries specific to device, manufacturer and operator

Testing Compatibility in Desktop version of Internet Explorer 10

You can ensure your websites are compatible to different Windows Phone 8 resolutions in IE10 Mobile using the IE Developer Tools.

Follow the steps :

Step1: Set UA string

 F12 Developer Tools  -> Tools –> Change User Agent String –> select “IE for Windows Phone 8




<code>  &lt;p&gt;&lt;strong&gt;&lt;u&gt;Step 2: Set Resolution&lt;/u&gt;&lt;/strong&gt; &lt;/p&gt;  &lt;p&gt;Since you set the UA to ‘IE10 for Windows Phone 8’, now it is the time to try out the different resolutions to see how your site looks in different resolutions of Windows Phone 8. For that you need to choose &lt;em&gt;&lt;font color="#c0504d"&gt;“F12 Developer Tools” –&amp;gt; Tools –&amp;gt; ‘Resize’ –&amp;gt; Choose the different resolutions&lt;/font&gt;&lt;/em&gt; for (portrait and landscape orientations your have different settings) and you could even specify the custom resolution.&lt;/p&gt;  &lt;p&gt;&lt;a href=""&gt;&lt;img title="image" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="image" src="" width="563" height="484" /&gt;&lt;/a&gt;&lt;/p&gt;  &lt;p&gt;As per the official announcement and demos earlier, Windows Phone 8 will support 3 different resolutions: &lt;/p&gt;  &lt;p&gt;800 x 480&lt;/p&gt;  &lt;p&gt;1280 x 720&lt;/p&gt;  &lt;p&gt;1280 x 768(WXGA)&lt;/p&gt;  &lt;p&gt;Set your resolution accordingly.&lt;/p&gt;  &lt;p&gt;&lt;a href=""&gt;&lt;img title="image" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="image" src="" width="578" height="484" /&gt;&lt;/a&gt;&lt;/p&gt;  &lt;p&gt;&amp;#160;&lt;/p&gt;  &lt;p&gt;For the example I am setting the custom &lt;font color="#c0504d"&gt;720p(1280 x 720)&lt;/font&gt; resolution&lt;/p&gt;  &lt;p&gt;&lt;strong&gt;&lt;u&gt;Step 3: Refresh your website&lt;/u&gt;&lt;/strong&gt; &lt;/p&gt;  &lt;p&gt;Now that you have done the necessary prerequisites to start, refresh your browser window. &lt;/p&gt;  &lt;p&gt;In the below example my blog is a Responsive Web enabled site, you could see the content has aligned for a mobile view.&amp;#160; &lt;/p&gt;  &lt;p&gt;Continue &lt;em&gt;&lt;u&gt;Step 2:&lt;/u&gt;&lt;/em&gt; for trying more resolutions. &lt;img class="wlEmoticon wlEmoticon-smile" style="border-top-style: none; border-left-style: none; border-bottom-style: none; border-right-style: none" alt="Smile" src="" /&gt;&lt;/p&gt;  &lt;p&gt;&amp;#160;&lt;/p&gt;  &lt;p&gt;&lt;a href=""&gt;&lt;img title="image" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="image" src="" width="559" height="772" /&gt;&lt;/a&gt;&lt;/p&gt;  &lt;p&gt;Hope that helps. For more information and reference &lt;a href="/wp-content/uploads/2012/10/getting-websites-ready-for-internet-explorer-10-on-windows-phone-8.aspx" target="_blank"&gt;Getting websites ready for Internet Explorer 10 on Windows Phone 8 by Charles Morris&lt;/a&gt; (Windows Phone Blog)

jQuery Mobile 1.1.0 Final Released!

April 15, 2012 All, HTML, HTML5, JavaScript, jQuery, JQuery Mobile, Mobile Frameworks, mobile web, Mobile-Development No comments

Jquery team has released final version of Jquery Mobile 1.1.0. 

jQuery Mobile is a touch-optimized web framework (additionally known as a JavaScript library or a mobile framework) currently being developed by the jQuery project team. The development focuses on creating a framework compatible with a wide variety of smartphones and tablet computers, made necessary by the growing but heterogeneous tablet and smartphone market. The JQuery Mobile framework is compatible with other mobile app frameworks and platforms such as PhoneGap, Worklight and more.


Jquery Mobile 1.1.0 improvements  are true fixed toolbars, completely re-vamped animated page transitions and AJAX loader, refined form element design and feature set, and improved documentation

Read through the release announcement  for more details on this updated release.

Mobile Application Development

April 7, 2012 All, ANDROID, CSS 3, HTML, HTML5, iOS, iPhone, JavaScript, JQuery Mobile, Mobile Frameworks, Mobile SDK, mobile web, Mobile-Development, Windows Mobile, Windows Phone, Windows Phone 7 1 comment , , , , , , , , , , , , , ,

Mobile Applications are rapidly developing segment in the global mobile sector. Developing mobile applications targeting different mobile platforms such as Windows Phone, iOS, Android, Blackberry and Bada(Samsung’s Proprietary OS) is the trend setter now.

Quoting from Wikipedia

Mobile application development is the process by which application software is developed for small low-power handheld devices such as personal digital assistants, enterprise digital assistants or mobile phones or smart phones. These applications are either pre-installed on phones during manufacture, downloaded by customers from various mobile software distribution platforms, or web applications delivered over HTTP which use server-side or client-side processing (e.g. JavaScript) to provide an "application-like" experience within a Web browser.


Why is it so different from other application development?


Why do we need to give special care when doing mobile development?

Mobile devices have certain limitations in terms of hardware, they have limited screen display, limited space for applications to operate and network capabilities. These limitations will vary in different models as the Mobile ecosystem is very large and there is innumerous amount of devices in the world. So we need to give special care in developing the mobile applications ensuring the compatibility across all the platforms.

Some of the things we need to consider when we do mobile development are:

  • Small screen size and mobile ecosystem – This makes it difficult or impossible to see text and graphics dependent on the standard size of a desktop computer screen.
  • Lack of windows/ multi-tasking – On a desktop computer, the ability to open more than one window at a time allows for multi-tasking and for easy revert to a previous page. Historically on mobile web, only one page can be displayed at a time, and pages can only be viewed in the sequence they were originally accessed. Latest mobile platform releases such as iOS, Android and Windows Phone are supporting multi tasking capability, which allows you to run more than one applications parallel, yet only one application can be displayed on the screen.
  • Navigation – Most mobile devices do not use a mouse like pointer, but rather simply an up and down function for scrolling or touch inputs, thereby limiting the flexibility in navigation.
  • Hardware and Resource limitation – all the upcoming mobile devices are having Dual Core or Quad core mobile processors with decent amount of memory. But still if you need you device to function well and be responsive, you should develop application in such a way it will be using low memory foot print.
  • Targeting Or Supporting wide variety Mobile Platforms/ Execution environments – this is the most complicated or important feature set we should be taking in to consideration when developing an application. Android, iOS, BlackBerry, HP webOS, Symbian OS, Bada from Samsung, and Windows Mobile support typical application binaries as found on personal computers with code which executes in the native machine format of the processor (the ARM architecture is a dominant design used on many current models).

Also read this article on 7 Limitations when designing for mobile: 

For Technical point of view we can differentiate mobile applications in to three categories

1. Native Applications

Native applications developed against native platform APIs and It would be having full(or limited for some platforms) access to the device capabilities. Each of the platforms for mobile applications also has an integrated development environment which provides tools to allow a developer to write, test and deploy applications into the target platform environment.

Examples are using Applications developed using Native/Platform Mobile SDK’s such as iOS SDK, Android SDK, Windows Phone SDK etc.  Windows Mobile, Android, HP webOS and iOS offer free SDKs and integrated development environments to developers. These applications will be able to utilize or interact with all device capabilities.


Five reasons for developing Native Applications:

  • Performance
  • Offline Mode
  • Findability / Discoverability ( through a central location such as Apple’s AppStore , Google’s Market, Windows Phone Market etc)
  • Device Attributes
  • Monetization

The disadvantage is obviously the development cost. No two mobile platforms can share the same mobile application, and there are too many Mobile operating systems (or platforms) existing in the market. If you develop a mobile application to market it widely, you need to develop that in  Symbian, Mac iPhone, Android, Blackberry and Windows mobile.

2. Mobile Web Applications  / Browser based Applications

Mobile Web applications are web sites that are scaled down/optimized to display on a mobile web browser. Mobile web applications are developed in such a way keeping in mind less payload delivery per each request. These applications are typically a scale down version of actual website which you can browse over any desktop browser such as Internet Explorer, Chrome, Firefox and Opera.

Every action mobile web application makes a round trip to server.

The advantages of having mobile web application is that:

  • Server Driven – we have full control on the website. and we can customize it any time, so that user will get the latest look and feel.
  • Targeting multiple platforms & connectivity – most of the mobiles and smartphones have a browser.  One-third of humankind currently has access to the Internet through a mobile device. That makes it easy to deliver our applications in any platform.
  • It enables services to take advantage of mobile device capabilities such as clicking on a phone number to call it or add it to the device address book. It can provide location-sensitive content. Location technologies can enable location-sensitive information be provided to a user. This can reduce the steps required for the user to reach useful content, and so makes it accessible with the least amount of effort.
  • For users, they don’t have to download an application or any maintenance updates, but instead “call up” a URL via their mobile browser which instantly delivers the most up-to-date application to their device.
  • Cross platform compatibility.
  • low development cost.

and the disadvantage is the bandwidth limitations and the limitations of Mobile websites, which does not access your Phone’s components like your Address book, Camera, etc.

The Mobile Web refers access to the world wide web, i.e. the use of browser-based Internet services, from a handheld mobile device, such as a smartphone, a feature phone or a tablet computer, connected to a mobile network or other wireless network.

Traditionally, access to the Web has been via fixed-line services on large-screen laptops and desktop computers. The shift to mobile Web access has been accelerating with the rise since 2007 of larger multitouch smartphones, and of multitouch tablet computers since 2010.

Both platforms provide better Internet access and browser- or application-based user Web experiences than previous generations of mobile devices have done.

Mobile Web access today still suffers from interoperability and usability problems. Interoperability issues stem from the platform fragmentation of mobile devices, mobile operating systems, and browsers. Usability problems are centered around the small physical size of the mobile phone form factors (limits on display resolution and user input/operating). 


3. Hybrid Mobile Applications

Hybrid Mobile Applications are Applications that use BOTH browser interfaces and native mobile components. With HTML5 and JavaScripts, now the browsers are becoming capable of accessing a phone’s built in features like contacts, camera etc.

There are mobile frameworks based on HTML5 and JavaScript’s that would be able to access the device features such as Accelerometer, Compass, Contacts, Camera and device file system etc. Some popular such mobile frameworks are PhoneGap, Appcelerator’s Titanium etc. These frameworks helps in developing applications that would able to target most of the mobile platforms such as “iOS”, “Android”, “Windows Phone”, “Symbian” and “Blackberry”.

Appcelerator Titanium is a platform for developing mobile, tablet and desktop applications using web technologies.

Key to successful Hybrid Apps:

  • Make the experience feel like a native application.
  • Take advantage of the enhanced features.
  • Don’t simply release a hybrid version of the mobile web site.
  • Optimize performance


Mobile world is growing and you can see lots of opportunities for innovation. If you are a fan of building mobile applications go ahead and develop something that is in your dreams and leave it over to the rest of the world to carry forward.


Resources for Developing mobile applications:

PhoneGap (was called by the name Apache Callback, but now Apache Cordova) is an open-source mobile development framework produced by Nitobi, purchased by Adobe Systems. It enables software programmers to build applications for mobile devices using JavaScript, HTML5 and CSS3, instead of lower-level languages such as Objective-C. The resulting applications are hybrid, meaning that they are neither truly native (all layout rendering is done via the webview instead of the platform’s native UI framework) nor purely web based (they are not just web apps but packed for appstore distribution, and have access to part of the device application programming interface). 


Appcelerator Titanium is a platform for developing mobile, tablet and desktop applications using web technologies. Appcelerator Titanium is developed by Appcelerator Inc.

Appcelerator Titanium Mobile is one of several phone web based application framework solutions allowing web developers to apply existing skills to create native applications for iPhone and Android. Yet, while using the familiar JavaScript syntax, developers will also have to learn the Titanium API, which is quite different from familiar web frameworks such as jQuery. 


Android Application Development:

Apple iOS Application Development:

Windows Phone Development:

Blackberry Application Development:

Bada Development:

Symbian Development:

HP WebOS Development:


jQuery Mobile: Touch-Optimized Web Framework for Smartphones & Tablets 

Sencha Touch: Sencha Touch was the first HTML5 mobile JavaScript framework for web applications that feel native on Android, BlackBerry, and iOS. 

and more…

and some interesting learning resources

Introducing KendoUI Mobile from Telerik (HTML5 Mobile Tools/Widgets for Development)

January 29, 2012 .NET, All, ANDROID, ASP.NET, iOS, iPhone, Microsoft, mobile web, Mobile-Development, VisualStudio, VS2010 No comments

KendoUI Mobile is a set of Reusable HTML5/Javascript widgets or tools for Mobile Web Application development. KendoUI is made available for Commercial(PAID) and Open use on Certain licensing conditions from Telerik.

KendoUI Logo  (Logo Courtesy:

KendoUI is a suite of new HTML5 Controls from Telerik. Telerik is a pioneer in .NET based reusable controls and other project management tools. Telerik provides readily available reusable components for different technologies such as Telerik .NET UI Controls for Silverlight, ASP.NET, ASP.NET MVC, ASP.NET AJAX, WinForms, WPF, Windows Phone etc . KendoUI is a new introduction by Telerik targetting HTML5 application development.

KendoUI Suite Consists of 3 packages

1. KendoUI Web – for building HTML5 based desktop web applications

2. KendoUI Mobile – for building HTML5 based mobile web applications

3. KendoUI DataWiz – for building HTML5 based data visualization applications.

Kendo UI combines everything needed for modern JavaScript development, including a powerful DataSource, universal Drag-and-Drop, Templates, Themes, and UI Widgets.

What is special about KendoUI Mobile?

There are different other HTML5 based mobile application frameworks in the market, such as jQueryMobile, PhoneGap, Titanium, Sencha Touch.

jQuery Mobile: is a jQuery based HTML5 mobile web application framework and it provides consistent look and feel in all the supported platforms.

PhoneGap: which helps us to build Hybrid mobile applications (Half Native, Half Hybrid) using HTML5 and Javascript.

Sencha Touch: based on ExtJS (a popular javascript library, similar to jQuery), helps us in building HTML5 based mobile web applications provides native friendly appearance in target devices.

Titanium: Similar to PhoneGap but the end outcome would be native applications. Development will be done using HTML5 and JavaScript. End result will be a native application, underlying framework will convert javascript and HTML5 based syntax in to Native programming language and builds the output.


KendoUI Mobile? new addition to the mobile Web bandwagon using HTML5. As per Telerik, KendoUI Mobile provides native friendly look and feel on iOS and Android platforms( Unfortunately Version 1.0 of KendoUI Mobile will only target iOS and Android based appearance).

Taken from Kendo UI Website

  • Native UI widgets for building HTML5-powered apps and sites for modern mobile devices.
  • Making your mobile user interface touch responsive and with native look and feel.
Native UI on Every Device

Kendo UI Mobile helps developers build apps and sites for mobile devices that always look native. On iOS, Kendo UI Mobile widgets look native to iOS. On Android, Kendo UI Mobile widgets look native to Android. Automatically. Kendo UI Mobile detects the device and applies the proper styling.

Ready for App Stores

Easily build native-looking apps with Kendo UI Mobile and then deploy them through popular mobile app stores using packaging tools like PhoneGap. Get all of the benefits of native apps without any of the pain of writing the same app multiple times.

iOS, Android, and Beyond

In the first version, Kendo UI Mobile will provide UI widgets that match the theming and functionality of native controls available for iOS, Android and BlackBerry development, including buttons, navigation, and lists. With Kendo UI’s flexible styling system, developers can further customize Kendo UI Mobile themes easily to match any environment.

Personally I haven’t try anything using KendoUI or done a comparison amongst other Mobile Web Development platforms out there. Thus I will not give my take on the comparison of features etc. My idea about this post would be making you familiar about new offering from telerik – the Kendo UI.

KendoUI Mobile is recently released as Version 1.0 Beta, which provides Early Adopters to take a look at the new offering from telerik.

KendoUI is going to be a new interesting pet for all Telerik product adopters and developers. Hope to see more offerings from Telerik soon. Hope future Versions of KendoUI Mobile will have more platform support such as Blackberry, Bada, Windows Phone, Symbian etc. It is a relatively new product, way to go before it reaches it’s real momentum. But a very good offering from telerik.


Know more about Kendo UI visit

and also have a look at the nice demo put up by Kendo UI. 


Ref & Courtesy: Telerik, KendoUI Website

Future of Windows Phone 7

April 23, 2011 All, Microsoft, mobile web, Mobile-Development, Windows Mobile, Windows Phone, Windows Phone 7 No comments

Windows Phone 7 been recognized as one of the major release by Microsoft, just like the way Windows 7 win the hearts of millions of Windows 7 users around the globe. Recent survey indicates that over 350 million licenses of Windows 7 has been sold across the world so far.

The MetroUI – Design Guidelines/language for Windows Phone 7 has made the phone look more interesting and snappier. Also Microsoft is planning to bring MetroUI guide lines as part of all future releases of “Windows” and “XBox” as well. Cool isn’t it.

Interesting face we all got to know in the past was about “Nokia” and “Microsoft” tie-up for WP7 as mobile platform for “Nokia” devices. Nokia already working on different variants of windows Phone 7.

Another interesting fact is recent surveys indicated that “Windows Phone 7” will be the “No.2” mobile platform by 2015.. So future is good for Microsoft and .NET developers like me who are targeting Windows Phone 7.

The Mango Upgrade

Upcoming upgrade of Windows Phone 7, called “Mango” platform is going to make lot other changes in Windows Phone 7. To provide more developer support and make developers life more easier Microsoft has made so many enhancements to Windows Phone 7 – Development Tools for Visual Studio .

With Mango release you will have local database(SQL Server 4 Compact Edition(CE) – a light weight edition of SQL Server for embedded devices and smart phones). So your application needs to have a local database hosted within your WP7 device ( the fact most of the applications nowadays utilizes the offline functionality, so that application can work fine with out the need of depending on the network signal. At certain period or frequent basis when the device is online the application will synchronizes with the server).. Good options right.. Android and iPhone applications are utilizing SQLite( a file system based database) and for WP7 soon we will have SQLCE 4.0

IE9.0 and HTML integration, Silverlight 5.0 and multi-tasking(an application can parallely run multiple tasks in device) capability are also expected to be part of Mango release.

Windows Phone Developer Tools for building Mango applications will be available for free next month, featuring improved emulator capabilities, including location simulation. Location simulation will help the developer to actually simulate the GPS location services in “Windows Phone 7 – Emulator

Profiler for Windows Phone 7 in Mango developer tools will help developers to profile the performance of the application and identify any memory leakage and slowness which execution of the application etc.

and with this release we can develop applications with “Silverlight” and “XNA” combination. Prior mango we were restricted to choose either “XNA” or “Silverlight” for development. With mango, both are clubbed together in WP7-Architecture base and we are allowed to develop applications with a combination of “Silverlight” as well as “XNA”. Great improvement.

I waiting to see Mango developer tools to get released to try out all the stuffs.

That’s all I thought of writing today. Read through it and leave any comments if you can. It would leave a good discussion thread started.

Reference links

Read more about Metro

More developer resources for Windows Phone 7 from Microsoft

  What’s New in the Windows Phone Developer Tools? | MIX11 | Channel 9

Smartphone market to grow 50% this year; WP7 to be No.2 OS by 2015