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:

     … <p style="clear:left;"><!-- ...skipped by mobileOK checker... ---></p>

     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.

      • The document uses scripting
        Scripting can be used, but shouldn't be relied upon, since many mobile devices do not support or hardly support scripting. The page should still be usable when scripting is not enabled.

        Use scripting to enhance your page, but degrade gracefully when scripting is not supported.

        Triggered by the resource under test:

        … <script type="text/javascript"> check = document.getElementById('check'); bookmarklet = document.createElement('a'); bookmarklet.href="javascript:window.location.href='http://validator.w3.org/mobile/?docAddr='+escape(window.location.href); void 0"; bookmarklet.appendChild(document.createTextNode("mobileOK check")); paragraph = document.createElement("p"); paragraph.appendChild(document.createTextNode("Drag the mobileOK bookmarklet to your toolbar to quickly check pages: ")); paragraph.appendChild(bookmarklet); check.appendChild(paragraph); </script>

        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 CSS style sheet contains rules referencing the position, display or float properties
     Support for CSS style sheets varies from one device to the other, and cannot be entirely relied upon, especially to position the elements precisely. Floating and absolutely positioned elements should also be avoided on limited screens for usability reason since they may trigger scrolling in two directions.

     Triggered 2 times by http://www.w3.org/Mobile/styles/handheld.css:

     … display: block

     … display: inline

     Related best practice:
     [STYLE_SHEETS_SUPPORT] Organize documents so that if necessary they may be read without style sheets.
   • The CSS Style contains at-rules, properties, or values that may not be supported
     Support for CSS varies from one device to the other. It is relatively safe to assume that mobile devices that support CSS support the CSS Level 1 grammar along with the @media attribute.

     Triggered by http://www.w3.org/Mobile/styles/handheld.css:

     Line 3 — Property max-width doesn't exist in CSS level 1 but exists in [css2, css21, css3]

     Related best practice:
     [STYLE_SHEETS_USE] Use style sheets to control layout and presentation, unless the device is known not to support them.
4. 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.

   • "Cache-Control" HTTP header is present and contains value "no-cache", or contains value "max-age=0"
     A no-cache (or max-age=0) directive 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, 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.
5. Links

   Following a link may require cost, time, and attention from users in a mobile context. When a user follows a link that leads to nowhere, or cannot be rendered by the browser, the user experience is poor.

   • The linked resource format may not be appropriate for mobile devices
     Mobile browsers cannot handle as many formats as usual desktop browsers. In particular, formats that may require plugins to be installed are likely to break on mobile devices.

     Measures to take depend on the exact root of the message:

     • check that the format of the resource(s) below is correctly set in the HTTP Content-Type header
     • see if you could serve the resource(s) in an alternate format
     • decorate the link to the resource with a short message intended for users, e.g Example (PDF)

     Triggered by http://www.w3.org/blog/xmlsrv/rdf.php?blog=10:

     format application/xml

     Related best practice:
     [LINK_TARGET_FORMAT] Note the target file's format unless you know the device supports it.
   • The linked resource character encoding may not be appropriate for mobile devices
     The linked resource uses a character encoding other than UTF-8. Given the number of character encodings used across the world, sending UTF-8 encoded content to browsers that requests it increases significantly the chances of properly displaying a page.

     Learn more about declaration of character encoding.

     Triggered by http://validator.w3.org/mobile/:

     character encoding ""

     Triggered by http://validator.w3.org/mobile/?docAddr=http%3A%2F%2F:

     character encoding ""

     Triggered by http://www.w3.org/Mobile/Testimonials:

     character encoding iso-8859-1

     Triggered by http://www.w3.org/Mobile/training/:

     character encoding iso-8859-1

     Triggered by http://www.w3.org/blog/MWInews/2009/10/06/last_call_of_guidelines_for_web_content_:

     character encoding iso-8859-1

     Triggered by http://www.w3.org/blog/MWInews/2009/11/05/public_feedback_solicited_for_transcodin:

     character encoding iso-8859-1

     Triggered by http://www.w3.org/blog/MWInews/2009/11/17/first_draft_of_mobile_web_for_social_dev:

     character encoding iso-8859-1

     Related best practice:
     [LINK_TARGET_FORMAT] Note the target file's format unless you know the device supports it.

↑ Top