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) |

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 Permalink

Comments, Pingbacks:

No Comments/Pingbacks for this post yet...

Contacts: Dominique Hazael-Massieux