MWI Team Blog

Dispatches from members of the W3C Mobile Web Initiative Team

Categories: Current state (32) | Developing Countries (15) | Events (20) | Looking forward (13) | News (42) | Technical (33) |

Boost Mobile User Experience with Best Practices Standard — 14 December 2010

Mobile Web Application Best Practices cards

The Mobile Web Application Best Practices got published today as a final W3C Recommendation. This new set of guidelines — new in the sense that W3C already published a first Mobile Web Best Practices standard that focused on mobile Web pages — focuses on the development and deployment of mobile Web applications that boost the overall mobile user experience, taking advantage of existing advanced device capabilities, whenever possible.

The Mobile Web Application Best Practices cards summarize the guidelines in a handy and visual format. The cards organize the best practices in different categories:

  • Set users free: let users know and control what happens to earn their trust.
  • Design for flexibility: to address more devices and users at reduced cost.
  • Remember Web principles: they do apply to the development of robust mobile Web applications.
  • Spare the network: use appropriate Web protocol features to reduce network bottlenecks and latency.
  • Exploit mobile-specific features: some Web technologies are particularly relevant to mobile devices. Learn to use them.
  • Optimize response time: every detail matters in mobile Web applications and some technical points may significantly boost the overall user experience

The cards are available in English, French, Korean, Spanish and Swedish (so far!).

by Francois Daoust in News Permalink

A new skin for the W3C mobileOK Checker — 6 May 2010

More visual design of the W3C mobileOK Checker

Version 1.4.1 of the W3C mobileOK Checker was released today. If you used the service recently, you probably already noticed the new design of the reports. The new version features a more visual mobileOK scoring scale, completed with visual icons that alert the user about the severity and categories of the failure messages reported.

Speaking of which, the categories are now consistent with the Mobile Web Best Practices flipcards and thus changed a bit compared to previous versions. Similar logos are used as well. The goal is to make it easy for users to find their way in the Mobile Web Best Practices!

Vertical layout on small screens

Internally, I borrowed concepts from Object Oriented CSS (OOCSS). Combined with the use of CSS Media Queries, this made it relatively easy to design a report whose layout adapts itself depending on the size of the screen. Here, the goal is is to preserve a vertical layout when the report is displayed on a mobile device. You may see the effect in action if your browser supports CSS Media Queries (or the handheld media type). Simply squeeze the window to a small width to emulate a mobile screen size: the layout should change and there shoudl be no horizontal scrollbar. Try it for yourself!

Note that the reports returned by the W3C mobileOK Checker are not that mobile-friendly though. Reports that are bigger than 100Kb in size are common, they may be really long, and the use of expandable sections all over the place puts a non negligible burden on the CPU to render the page and run the scripts to interact with the user.

As for the contents of the report itself, on top of various clarifications of failure messages — your feedback is always welcome to report obscure and/or erroneous messages! —, code extracts returned by the W3C mobileOK Checker are now always linked to the line where they appear in the source code to speed up linking the failure message with the source itself.

Moreover, the W3C mobileOK Checker tries to propose fixes for failures such as The height or width specified is less than the corresponding dimension of the image, which are frequently reported, but kind of annoying to fix because they mean that one then needs to look at the actual dimensions of each image to fix the incrimated <img> tag. The Checker now does that for you and returns the correct width and height attributes that you should use to make the failure disappear and make mobile devices happy!

Example of a failure message with a code extract linked to a line position in the source code and a proposed fix for the img tag

Hope you'll enjoy this new version!

by Francois Daoust in News, Technical Permalink

W3C Workshop on Privacy Challenges for advanced Web APIs — 28 April 2010

Several W3C Working Groups are hard at work to make new advanced capabilities available through browsers: geolocation, addressbook interactions, access to CPU/battery/network information, etc.

But with all these great new powers come great responsibilities, and one of the attached risk of exposing more of the users data to Web applications is to expose more data then the user wants or is aware of, and of getting these data re-used to her annoyance or harm.

This is a complex and multi-faceted problem to solve: to ensure we hear about as many of the possible solutions as possible, W3C is organizing a workshop on Privacy for Advanced Web APIs in London on July 12 and 13.

Participation is free and open to all, but requires submitting a 1 to 5 pages position paper; if you think you have a useful perspective to bring to that discussion, please read the call for participation and make sure to submit a position paper before June 1st!

by Dominique Hazael-Massieux in Events Permalink

:: Next Page >>

Contacts: Dominique Hazael-Massieux