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

Augmented Reality Workshop: Deadline extended to March 15 — 5 March 2010

Deadline extended to March 15! Here's the original announcement:

There is a lot of buzz these around augmented reality in general, and mobile specifically (just search for "augmented reality" on twitter - there is a new tweet every minute or so).

How can these new interaction paradigms be integrated into the platform of the Web and evolve to be as open and inclusive as the Web?

To understand this and related questions, Dan Applequist of Vodafone, Rittwik Jana of AT&T Labs Research, Christine Perey of PEREY Research & Consulting and myself are co-chairing the WWW2010 workshop "MobEA-2010: Augmented Reality and Virtual Interactivity".

The Call for papers includes a long list of topics - of particular interest to the mobile community could be:

  • Mobile AR development environments and toolkits
  • Extensions to current Web technologies (e.g. CSS) to support AR
  • Multiuser and Distributed gaming
  • Mobile Tracking & Sensing for AR
  • User studies and evaluation
  • Mobile Presence and cognition in AR
  • Mobile Widgets and Mashups for AR
  • How do Web browsers need to evolve to become AR platforms?
  • Role of voice and multimodal technologies/applications in AR
  • Media adaptation and content filtering
  • What device APIs accessible within the browser would be requisite in order to deliver an AR experience?
  • Cross platform AR services (e.g. 3 screen services (TV, PC, phone))

If you have worked on these or related topics, and in particular if you have demos:

Paper submission is open until March 15 February 21 - check out the Call for papers for details.

by Philipp Hoschka in News, Events Permalink

:: Next Page >>

Contacts: Dominique Hazael-Massieux