W3C mobile website validation tool

In a precedent article I wrote about the mobile website checkup tool by ready.mobi. If you are serious about designing mobile website, you must bookmark this page. As there are more and more smartphones on the market, especially the Iphone, regular webmasters will gear toward learning the specific syntax for html tags and css, because the handsets have limited capabilities compared to your desktop computer. Ready.mobi tool performs rather well because its reports is a wealth of information.

Why bother with W3C

W3C mobile checking tool act differently, it does not reveal you with a fancy report about the good or weak points of your actual website.

So what is W3C mobile website checking tool going to tell you? There are 7 categories of validation : markup, page structure, stylesheet compliance, character encoding, links, Image/object and the HTTP headers sent. Ok, now let's go through the remarks one by one:

1 : Markup problem solving

The homepage does not validate against XHTML Basic 1.1 or MP 1.2. because of the alt attribute and size tags of the image missing. XHTML 1.1 and MP 1.2 are standards specifically made for mobile phone and smartphone. You may check this standar before I'll cover them in the future. I had 2 warnings, one for the doc type declaration (I declared XHTML 1.1 Strict, which is normal because I am trying to validate a page made for desktop browsers), one for the in-tag style declaration style="clear:both" for the break tag , the solution is to declare a class in the stylesheet named for example .both {clear:both} which is enough to solve the problem.

2 : Structure of the page problem

I received a red alert for the page weight, which according to the standard for mobile phone should not exceed 20 K, mine was 220K ! mostly due to the images. But how much is my code? Fortunately the tool tells it to you, my HTML code was worth 5KB, CSS 11 KB, images 230 KB ! For your information, it takes nowadays on most mobile network and phones one minute to download 100 KB of datas. I could easily reduce the CSS to 1 or 2 KB becasue many tags are not allowed, for the images, I can chose not to display them or display a smaller version. The latter is quite annoying, it means I should write some extra code. I will stick for no image solution at the moment. I have one warning, there are more than 10 external embedded resources. This is important anyway to sole, 10 external resource means 10 request to the server, each request needs sending HTTP headers back and forth, if you barely notice this on the desktop browser, mobile phone which are not so fast can easily be penalised. I currently have 3 stylesheet embedded, I will reduce to one stylesheet. Removing the images may solve my problem too.

3 : The stylesheet problem

I have many errors due to the absolute length declaration, you can easily figure out the problem. A warning for the page encoding, I used iso-8859-1 whileas I should use utf-8 encoding. Utf-8 support all the languages in the world, when Internet was invented, it was mostly in the hands of USA, so there was no need to address the foreign languages issue, but in modern times and in a context of globalization, it comes very handy to natively code in utf-8. The second warning is more interesting it says "position, display or float properties " not supported by all mobile browsers, and "Floating and absolutely positioned elements should also be avoided". It seems more than easy to reduce my stylesheet weight though ! The third warning is a bit fuzzy "@media attribute", I don't know about the @media, but I'll do a research and post something about this item in the future.

4 : Images and object problems

The only image format that are allowed are .jpg and .gif. I have a .png image hence the warning. Enough said, my images are too big, I should remove them. But how can I do I want to serve images anyway? One solution is to detect the browser and serve the apprpriate image, say you have two version of one image tree.gif and tree_m.gif for the reduced version, you can serve the right image depending on the type of browser, it's feasible, but you need some extra code, the W3C calls it content negociation. If I have time to implement this I'll cover it in the future.

Another error returned says the specified width and height (remember them ?) are smaller than the actual size of the image. They suggest me to resieze at the server level.

5 : HTTP handling problem

Connection to the Internet via a mobile phone is slow, that's why you should do your best to reduce the downloading time. reduce the weight of a page, reduce the number of request by reducing the number of external includes, and allow the caching of recurrent datas. The document gives you a link to implement caching for browser, so much interesting things to read, I have no time to cover this at the moment, maybe in the future (ok I make a lot of promises here :) ) Two warnings, one is related to not properly sending MIME types (ready.mobi also tells me this issue), and the other is related to HTTP header content-type.

6 : Character encoding problem

To sum up, your header should specify the character encoding which should be utf-8 of course. This returning message really annoys me but I should solve it.

7 : Links warnings

Nothing serious, just some broken links and link leading to non utf-8 web pages.

Let's get to work now !

Where should you head when you have many warnings and errors? I'll keep this original document as a starting point, and will compare the progress of my mobile friendliness any time I improve my site for mobile browsing. This is the order in which I will address the validation problem :

• Style sheet and Markup
• Image and Objects

But before I go into coding, the fundamental thing I will do is to create a mobile template for my site. That means I will redirect mobile browser to a specific page. I don't think you can easily design one webpage that fits mobile browser and desktop browsers ! First thing first, I will redesing my site with a prettier desktop template before going into the mobile one.