W3C MobileOk Checker performs tests on a web page to determine its level of mobile-friendliness. http://validator.w3.org/mobile/
This also helps in page speed.
Following are some basic guidelines to make mobile sites W3C compatible.
- The total size of the page should not be exceeded 20 kilobytes (Primary document, Images, Style sheets)
- Big pages require a possibly high cost and a long waiting time in many mobile networks. For instance, on many mobile networks, downloading 100KB worth of data takes as long as 1 minute.
- Scale down images to a reasonable size. Remove images that are not essential to the layout of the page.
- <input type=’image’> assumes that the user will click on a specific area of an image, which is not possible on many mobile devices. So don’t use the image input type, try to use another input mechanism like “button”, “submit” or <img> etc…
- The size of the document’s markup should not exceed 10 kilobytes. Mobile devices have limited screens. Long pages on small screens are confusing, because users can’t see the big picture and feel lost. The 10Kb limit ensures that the page is still usable on devices with small screens.
- Remove extraneous (whitespaces or comments) characters from the page. Given the limitations of mobile networks, sending extraneous whitespaces and comments make pages slower and more costly to load.
- Use efficient markup.
- Using absolute measures in CSS creates layouts that do not adapt to the screen dimensions.
- Don’t use px based values for length properties like width/height. Use em or percentage based values in CSS. So it will adjust the block as per device screen.
- Always add width and height attributes matching the actual dimensions of the image. When the width and height attributes are not specified on an image, browsers need to re-flow the page when the image has finished loading, which may disrupt the user experience.
- Use JPG or GIF images instead of PNG images. Images in formats other than GIF or JPEG may not work on some mobile browsers.Convert with an image editor the said images either to GIF or to JPEG, depending on the type of images.
- Avoid inline Style attributes.
- Avoid 3xx redirections for internal links.
- Floating and absolutely positioned elements should be avoided on limited screens for a usability reason since they may trigger scrolling in two directions. Support for CSS style sheets varies from one device to the other, and cannot be entirely relied upon, especially to position the elements precisely. Try to organize documents so that if necessary they may be read without style sheets.