{"id":184,"date":"2006-10-24T21:25:28","date_gmt":"2006-10-25T04:25:28","guid":{"rendered":"http:\/\/wapreview.com\/?p=184"},"modified":"2020-09-25T09:46:27","modified_gmt":"2020-09-25T16:46:27","slug":"validation-is-your-friend","status":"publish","type":"post","link":"https:\/\/wapreview.com\/184\/","title":{"rendered":"Validation is Your Friend"},"content":{"rendered":"<p><img decoding=\"async\" loading=\"lazy\" class=\"alignright\" title=\" Opera Mini Error \" src=\"https:\/\/wapreview.com\/images\/invalid.png\" alt=\" Opera Mini Error \" width=\"144\" height=\"176\"\/>It constantly amazes me that so many mobile web sites fail validation. And it&#8217;s not just new sites, even some of the biggest names in the industry have mobile pages that have been failing for years when validated by the W3C&#8217;s online <a href=\"http:\/\/validator.w3.org\/\">validator<\/a>. Probably a third of all the sites I look at don&#8217;t validate. The most common problems are:<\/p>\n<ul>\n<li>&#8220;Naked&#8221; ampersands in text and URLs (XML based markup requires that all ampersands be represented by the appropriate html entity). If you host ads on your site watch out for unencoded ampersands in both the inter text and link url of the ads. I found that about half the ads I was being served had that problem. My solution, in PHP, was to use urlencode() on both the ad text and url.<\/li>\n<\/ul>\n<ul>\n<li>Improper tag nesting &#8211; &lt;div&gt;&lt;strong&gt;This is so wrong!&lt;div\/&gt;&lt;strong\/&gt;<\/li>\n<\/ul>\n<ul>\n<li>unclosed tags &#8211; &lt;img&#8230;&gt; instead of &lt;img&#8230;\/&gt;.<\/li>\n<\/ul>\n<p>I&#8217;m sure a lot of you who are web developers are saying, &#8220;Yeah, but validation is an academic thing, what really matters is that my site works in the real world&#8221;. Of course you are right, users don&#8217;t care about validation they just want stuff to work. Furthermore, when building PC web pages validation really isn&#8217;t very helpful. Desktop browsers silently ignore almost all markup problems -the real trick is getting the pages to look good in the various browsers. Six PC browsers have something like 99% of the market so you can test a page in a few minutes with at most three PCs.<\/p>\n<p>Mobile is different world, browser designers are faced with severe memory and processor constraints as well as the need to obtimize performance on an already slow system. For the browser to work around invalid markup is just a waste of resources. There are literally hundreds of different mobile browser versions. Testing on real devices is great but it&#8217;s impractical to actually test on more than a small fraction of the various mobile browsers out there. Most mobile development shops are probably testing with just a few devices, maybe a recent Nokia, a Palm Treo or something with Openwave 6. The trouble is that those are among the most forgiving of browsers when it comes to bad markup. Pages that work fine on an N70 will fall over on Opera Mobile or Mini or the Teleca browser used on many Samsungs, LG&#8217;s and Sony Ericsson&#8217;s. The good news is that if your markup is valid and page size is under 20 KB (including images) your site will load and display without errors on 99% of WAP2 browsers.<\/p>\n<p>It&#8217;s easy to validate a single mobile page. The W3C validator I mentioned above is a no brainer &#8211; just paste in the page&#8217;s URL and press <em>Validate<\/em>. For proper results the page should be on a public server and sent with the correct mime type (application\/xhtml+xml for WAP2 or text\/vnd.wap.wml for WAP1 &#8211; the validator doesn&#8217;t support application\/vnd.wap.xhtml+xml but then neither do many mobile browsers.) Also note that while the site can validate an html page uploaded from a local disk file that feature doesn&#8217;t work properly for XML based markup like wml or xhtml-mp.<\/p>\n<p>It&#8217;s even easier is to use Firefox to validate mobile pages. You do need to install a few Firefox extensions first:<\/p>\n<ul>\n<li><a href=\"http:\/\/chrispederick.com\/work\/webdeveloper\/\">Web Developer<\/a> &#8211; adds dozens of development tools to Firefox&#8217;s menu and\/or toolbar. I mainly use <em>Tools|Web Developer|Tools|Validate HTML<\/em> which opens the W3C validator in a new tab validating against the current page. In spite of it&#8217;s name the validator handles wml, xhtml basic and xhtml-mp in addition to html.<\/li>\n<\/ul>\n<ul>\n<li><a href=\"http:\/\/users.skynet.be\/mgueury\/mozilla\/index.html\">HTML validator<\/a> &#8211; validates every page you visit and puts an <a href=\"https:\/\/wapreview.com\/images\/tidy_tooltip_04.png\">icon<\/a> in the browser status bar indicating the validity of the current page. It runs locally so it&#8217;s fast and works with local pages. When you View Source it lists the errors and goes to the offending line when you click on an error. HTML validator also describes the error in detail and even shows how to fix most errors. But, I find it misses some xhtml errors and doesn&#8217;t validate wml or even xhtml if the application\/vnd.wap.xhtml+xml mime type is used. I use HTML Validator as a quick sanity check while developing pages and then do final checks with the W3C validator, mobile browser emulators and real handsets.<\/li>\n<\/ul>\n<ul>\n<li><a title=\"XHTML Mobile Profile 0.3.6\" href=\"http:\/\/www.garethhunt.com\/index.php\/2006\/10\/12\/released-xhtml-mobile-profile-036\/\">XHTML Mobile Profile<\/a> &#8211; Allows Firefox to render pages with mime type application\/vnd.wap.xhtml+xml.<\/li>\n<\/ul>\n<p>Validating an entire large mobile site one page at a time is a painful process. Fortunately the Web Design Group has a <a href=\"http:\/\/www.htmlhelp.com\/tools\/validator\/\">validator<\/a> that will validate a site recursively. It doesn&#8217;t give as detailed reports as the W3C validator and it displays the message &#8220;Level of HTML: Unknown (XML)&#8221; when validating xhtml-mp pages. But I spot checked it&#8217;s results against the W3C validator and it found the same errors;&nbsp; unescaped ampersands, improperly nested tags,&nbsp; unclosed tags and even tags like strike and center that are valid in html but not in xhtml. Unfortunately, it&#8217;s limited to only validating 100 pages per site. Anyone know of a recursive validator with a higher or no limit?<br \/>\nIf you don&#8217;t validate your xhtml mobile sites you risk losing at least 10% of your potential audience. That&#8217;s the approximate combined market share of the Opera Mobile, Opera Mini and Teleca browsers. Ten percent of US mobile web users is 3.5 million users. The W3C <a href=\"http:\/\/www.w3.org\/2005\/MWI\/BPWG\/\">claims<\/a> that there are 1.1 billion web capable handsets worldwide. Do you want to give up reaching 100 million sets of eyeballs because of trivial errors in your site&#8217;s markup? I don&#8217;t think so &#8211; validate! Incidentally, if you are still maintaining wml sites validation is even more important , very few browsers can handle ANY errors in wml markup.<br \/>\nRelated:<\/p>\n<ul>\n<li><a href=\"http:\/\/www.osnews.com\/story.php\/13446\/Introduction-to-Phone-Web-Browsers\">Introduction to Phone Web Browsers &#8211; OSNews<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>It constantly amazes me that so many mobile web sites fail validation. And it&#8217;s not just new sites, even some of the biggest names in the industry have mobile pages that have been failing for years when validated by the W3C&#8217;s online validator. Probably a third of all the sites I look at don&#8217;t validate. The most common problems are: &#8220;Naked&#8221; ampersands in text and URLs (XML based markup requires that all ampersands be represented by the appropriate html entity). &hellip; <a href=\"https:\/\/wapreview.com\/184\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":21528,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[51,47,3],"tags":[],"_links":{"self":[{"href":"https:\/\/wapreview.com\/wp-json\/wp\/v2\/posts\/184"}],"collection":[{"href":"https:\/\/wapreview.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wapreview.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wapreview.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wapreview.com\/wp-json\/wp\/v2\/comments?post=184"}],"version-history":[{"count":1,"href":"https:\/\/wapreview.com\/wp-json\/wp\/v2\/posts\/184\/revisions"}],"predecessor-version":[{"id":21529,"href":"https:\/\/wapreview.com\/wp-json\/wp\/v2\/posts\/184\/revisions\/21529"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wapreview.com\/wp-json\/wp\/v2\/media\/21528"}],"wp:attachment":[{"href":"https:\/\/wapreview.com\/wp-json\/wp\/v2\/media?parent=184"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wapreview.com\/wp-json\/wp\/v2\/categories?post=184"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wapreview.com\/wp-json\/wp\/v2\/tags?post=184"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}