W3C mobileOK Checker

Check out W3C's training courses for mobile!

Congratulations

Detailed report

1. Markup

   The quality of the markup sent to mobile browsers will impact the reliability and smoothness of the rendering of the page. Markup validity is the first step to delivering content that can be parsed and rendered reliably by browsers. The recommended markup format for mobile content is XHTML Basic 1.1. But beyond validity, various tags and attributes have a specific impact in the mobile world. For instance, CSS style sheets should be used to control the layout of the page instead of presentational tags (e.g. center, big, or font) and images sizes should be defined in the markup to avoid reflows.

   • The style attribute is used
     The style attribute is deprecated in XHTML Basic 1.1. As a generic rule, content and layout should be separated, and styles defined in an appropriate embedded or external CSS style sheet. This also favors re-use and caching of the different styles.

     Triggered by the resource under test:

     … <img alt="Switcher icon" height="16" src="/sites/all/modules/common/dm_switcher/desktop.gif" style="border:0;padding-right:2px;vertical-align:bottom" width="16"/>

     Related best practice:
     [STYLE_SHEETS_USE] Use style sheets to control layout and presentation, unless the device is known not to support them.
2. Structure of the page

   Markup validity does not ensure that tags are used appropriately. For instance, given the lack of support for nested tables in mobile browsers and the small screen sizes, using tables for layout will not work on mobile devices. The same goes with the use of applets, frames, pop-ups, and so on. The size of the page is also a very important aspect to keep in mind when designing mobile-friendly pages.

   1. Scripting

      Scripts can be used as long as scripting support is not required, since many mobile browsers have limited or no support for Javascripts.

      • An element uses an event attribute
        Using event attributes means that scripts and content are mixed in the page.

        Register the events listeners in the script, separated from the content of the page.

        Triggered 2 times by the resource under test:

        … <a href="http://mobiforge.com/?dm_switcher=true" onclick="document.cookie="dm_switcher=desktop;path=/;expires=Tue, 01-01-2030 00:00:00 GMT";"><!-- ...skipped by mobileOK checker... ---></a>

        … <a href="http://mobiforge.com/?dm_switcher=true" onclick="document.cookie="dm_switcher=desktop;path=/;expires=Tue, 01-01-2030 00:00:00 GMT";"><!-- ...skipped by mobileOK checker... ---></a>

        Related best practice:
        [OBJECTS_OR_SCRIPT] Do not rely on embedded objects or script.
3. Style sheets

   The most efficient way to control the layout of a page is to use CSS style sheets. To use them well in a mobile browser, it is important to ensure that the CSS style sheets referenced by a page and the CSS styles directly defined in the page are valid, and e.g. make a good use of the @media rules.

   • The resource does not specify UTF-8 as character encoding
     One of the resources required to render the page (most likely a CSS style sheet) does not declare its encoding as UTF-8 in an HTTP Content-Type header. Check that its content is properly encoded, and consider declaring its encoding at the HTTP level.

     Triggered by http://mobiforge.mobi/sites/all/themes/zen/mobiforge_mobi/mobile.css:

     check the Content-Type HTTP header

     Related best practice:
     [CHARACTER_ENCODING_USE] Indicate in the response the character encoding being used.
4. Images/Objects

   Images and/or image objects must be delivered in an appropriate format and dimensions so that they can be retrieved and rendered by most mobile browsers. mobileOK requires that all images and rendered objects be either GIF or JPEG images.

   • There is a small fully transparent image
     Requiring a user to download and render a completely transparent image does not bring any direct value to the user and slows down the loading of the page.

     Triggered by the resource under test.

     Related best practice:
     [GRAPHICS_FOR_SPACING] Do not use graphics for spacing.
5. At the HTTP level

   The source of the messages in this category is to be found in the HTTP headers that were sent along with the page. They are most likely due to the Web server configuration for static files, or the way the server-side scripts are written for dynamic content. Making sure that HTTP headers are correctly defined is essential in a mobile context with a usually low bandwidth and high latency.

   • The "Expires" header contains a date in the past
     An Expires date set in the past prevents browsers from caching the content, and thus requires them to retrieve it through the network every time.

     If the resource needs to be revalidated each time it is queried by users, consider using the Last-Modified and/or ETag HTTP headers to limit the complete retrieval of the resource to the cases where the resource has changed. See Mark Nottingham's tutorial on caching to learn more about these techniques.

     Triggered by the resource under test.

     Related best practice:
     [CACHING] Provide caching information in HTTP responses.
   • A cache related header or a meta http-equiv value contains an invalid value
     An unknown value in a caching directive may be the result of a typo, and could prevent browsers from properly handling the caching information.

     Triggered 2 times by the resource under test:

     Invalid value post-check

     Invalid value pre-check

     Related best practice:
     [CACHING] Provide caching information in HTTP responses.
   • The document is not served as "application/xhtml+xml"
     The recommended media type for serving XHTML is application/xhtml+xml. More browsers are likely to support that media type, and optimize the rendering for it. application/vnd.wap.xhtml+xml is widely used and supported in mobile networks as well but is unlikely to be supported by non-mobile browsers.

     See how to properly configure server mime types. If the page under test uses a non-XML version of HTML, you should first consider switching to XHTML. In any case, do not serve a non-XML version of HTML with an application/xhtml+xml media type.
     Beware: some browsers have no support for application/xhtml+xml (e.g. Internet Explorer) and prompt users to download pages served as such. You should not serve XHTML content to browsers that do not support it. Use Content Negotiation to match the browser's capabilities. See the XHTML Media Types - Second Edition W3C note for more information and in particular the Compatibility Guidelines to follow to have XHTML documents rendered on both XHTML-aware and HTML-only user agents.

     Triggered by the resource under test:

     served as text/html

     Related best practice:
     [CONTENT_FORMAT_SUPPORT] Send content in a format that is known to be supported by the device.
   • A matching HTTP response header does not exist for the meta http-equiv element
     The mobile HTTP delivery chains usually involve more intermediaries than typical desktop chains (e.g. mobile operator gateways). The intermediaries will stick to the HTTP level, and won't dig in the content of the page to check for meta http-equiv elements. For the value not to be ignored, a matching HTTP header should be defined in the HTTP response.

     Triggered by the resource under test:

     http-equiv=content-language
   • An HTTP response header that matches the meta http-equiv element exists but their values differ
     The value of an HTTP response header conflicts with the value of the matching meta http-equiv element defined in the content of the page.

     Triggered by the resource under test:

     HTTP header content-type

↑ Top