Guidelines for Making W3C Compatible Mobile Websites

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.
  • Make CSS & Javascript external. Eliminate inline CSS & javascript code. It increases page size as well as blocks initial content from loading.
  • <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.
  • Try to avoid pop-ups on mobile websites. On a small screen with no pointing device, pop-ups are hard to follow and likely to cause user confusion. They may not be properly handled by some mobile browsers anyway. Most mobile devices should render the page but the user experience is strongly impacted. But If you still want to add some external links which needs to be opened in a new tab / window, then try to add “target=’_blank’” <a> tag attribute on runtime using javascript code. E.g social media profile links for FB, Twitter, Google plus etc..
  • 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.
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s