Technorati

Technorati Profile
I just joined technorati ;)

Your website on mobile phone DIY

Hi,
today I decided to share my experience of creating website version for mobile devices such as mobile phones.
As you probably understand mobile devices are quite limited in screen size and keyboard, so you as creator have to do things to help your visitors on the go.
There is two main languages designed for mobile phones:
1. Wireless Markup Language which stands as WML and is older (and simpler) format
2. XHTML MP is more modern and more similar to "normal" xHTML just restricted for mobile devices. MP stands for Mobile Profile so this is HTML for mobile phones.
Both of them uses standard HTTP protocol and server such as Apache. WML was designed in times then mobile data transfare was very unreliable and slow, so for that reason WML content was send through getaway device which is between phone and server and this protocol is called WAP (wireless application protocol).
Nowadays new phones support both protocols. So if you need to deliver your content (whatever poor it will look) to most devices (old and new) use WML. Anyway if you are not crazy about supporting old phones or you just want to use color images use XHTML MP.
For learning WML language I suggest visiting w3schools WML formatting lesson for learning more about XHTML MP usage visit this referance

More about cross platform (cross phone) support

There is one way to make your mobile website more pleasant for more visitors and it is auto filtering by their phone or device compatibilities. This mean if visitor come with old old phone which support only WML he sees WML version of your site, but if your visitor isn't that conservative and has upgraded his phone in at least last 3 years he's redirected to better looking XHTML MP version of your website.
You can do this filtering by reading HTTP_ACCEPT headers sent by browser (yes mobiles use browsers too). This HTTP_ACCEPT header contains information about MIME types of information which browser support. Then you know that you can redirect them by this type. If you run php on your server you can do filtering like this:

    $container = $_SERVER['HTTP_ACCEPT']; //reading HTTP_ACCEPT header
    $wml = "text/vnd.wap.wml"; //this is how WML Mime type looks like
    $xhtml = "application/xhtml+xml"; //this is how normal xhtml header looks
    $wapxml = "application/vnd.wap.xhtml+xml"; //added for support of some strange phones

    if(strstr($container,$wml) && strstr($container,$xhtml)) {
        //browser (phone) supports XHTML & WAP let them pass
    }elseif(strstr($container,$wml) && strstr($container,$wapxml)){
        //browser (phone) supports XHTML & WAP let them pass (support stupid phones)
    }elseif (strstr($container,$wml)) { //if supports WAP only redirect to WML version
        header("Location: http://wml.example.com");
        exit();
    }else { //all other browsers to normal version
        header("Location: http://www.example.com");
        exit();
    }

This code should be at the very beginning of index.php of your website version dedicated to mobile devices. It will let mobile phones which support XHTML pass in and will redirect old phones to WML version as normal browsers to normal version of your website. More about redirecting and technical stuff about WAP protocol

open search - search from modern browser panel

So you are working on Internet shop like me? And you want to improve it as much as you can?:) OK I am doing the same, because I like my work.

Ok you probably use new and modern browser like Firefox 2 or Internet Explorer 7, and you already noticed and get used to use integrated search field (usually in upper right corner of your window). You probably have Google, Yahoo, eBay and wikipedia in it or more of them for different needs. So if you do something from last two sentences you should noticed thats very nice feature (probably as nice as tabbed browsing). You can create search engine for you own website and add it to the list of engines. It's incredibly simple by using "openSearch" format.

One way of making it is to go to your firefox system catalog C:\Program Files\Mozilla Firefox\searchplugins (in my windows system) here you will see your already installed search engines. Open one of them as XML file (it actually is not more then it) and look at what you see. It looks something like this:

<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/"
                       xmlns:moz="http://www.mozilla.org/2006/browser/search/">
<ShortName>engineName</ShortName>
<Description>engineDescription</Description>
<InputEncoding>inputEncoding</InputEncoding>
<Image width="16" height="16">data:image/x-icon;base64,imageData</Image>

<Url type="text/html" method="method" template="searchURL">
  <Param name="paramName1" value="paramValue1"/>
  ...
  <Param name="paramNameN" value="paramValueN"/>

</Url>
<Url type="application/x-suggestions+json" template="suggestionURL"/>
<moz:SearchForm>searchFormURL</moz:SearchForm>
</OpenSearchDescription>

I think it pretty self explaining, but its probably because I've already made one for my company shop :)
I will skip explanation of ShortName and Description it's easy to understand.
InputEncoding is encoding used by your website, if you use UTF-8, it will be UTF-8
Image is your website icon encoded in Base-64 (one of first tools for encoding base64 I found: http://www.motobit.com/util/base64-decoder-encoder.asp) I personally used PHP integrated function for that.
method is method used in your website search form (GET or POST) GET preferred, because it's the only one which works in IE7 and we love cross browser compatibility, don't we?
searchURL is address for search request in your website insert {searchTerms} variable in your URL where needed
you can set more parameters by ParamName1 and ParamValue1 which will be send then user hit Enter.
SearchFormUrl should be your website address...
So I think our search engine engine work now, you can try it by saving it to searchengines directory and restarting Firefox. You can test it and fix any bugs you found, if you still face same problems here you will find more help

Now then you have your website with new feature you can make it easier to discover.

If you visit www.php.net you will notice autodiscovery feature working:

the blue mark on FF and orange on IE7 means website you are visiting have search engine which can be installed on your browser. This is made quite simple - you just need to add one line in head of your website:
<link rel="search" type="application/opensearchdescription+xml" title="searchTitle" href="pluginURL">
searchTitle should be the same as the one in freshly your created plugin
pluginURL is URL to this plugin XML file on you website

Thats it, you have new cool and usefull feature on your website ;)