ZTE S302

Coming from the mobile conference, after a shot of innovative technology, I was reading about the launch of the ZTE S302 phone.

It was advertised as a phone for seniors and it seems a success so far. Of course, we cannot discuss about mobile web here , but sometimes simplicity and ease of use takes over functionality. Just 15 big keys, a monochrome screen with 12 big digits and a big red emergency button in the back.

Mobile conference 2010

I participated yesterday in the Mobile Marketing Conference 2010 in Bucharest. Interesting and informative. The speakers wanted to describe the Romanian mobile marketing in the context of the worldwide movement.
They all talked about different technologies, methodologies, challenges, successes, but one thing was clearly the common nominator: mobile web is GROWING. In the last year the number of visits to Romanian mobile sites increased with 162% and we reached 5 millions web mobile users. The last figure was calculated taking into account the estimations of the major mobile carriers.
The predictions are that the mobile will become the main browsing device in the next 5-10 years in Romania and all over the world. Again Google is visionary and they say mobile first.
Dragos Stanca, Managing Director F5 Realitatea – Catavencu, had a nice presentation about mobile web, stating the importance of having a presence here. He presented statistics, principles and examples from Romania and abroad.
Another hot topic was the QR codes presentation. It was clear that the marketers in the audience did their homework and this is on a clear path to a wide adoption.
I would like to summarize for you some principles about mobile marketing mentioned by speakers

• The mobi-banners must link to a (personalized) landing page and not the homepage. This will enable you to keep track of the campaign and its ROI.
• Integration of different media channels.
• Clear and easy call to action: click2call, click2sms, …
• Keep in mind the message, not the technology
• The mobile is a two-way communication device, so you should keep a channel open for your customer.

The conference was also a good opportunity for the launch of Romanian Mobile Marketing Association, three of speakers being the founders.
Regarding the conference, unfortunately I need to mention one negative fact – the flat and dull presentation style for some speakers (although very few).

In the second part I skipped the case studies and joined MobileApps conference, an event in parallel, for which a better name should have been OviApps conference . Two guys from Nokia presented their last application development framework, Ovi, along with the entire ecosystem, Ovi Store, Ovi Maps etc. Interesting.

Altogether, a very good initiative, already at the third edition, the first one being launched in October 2008.

Fun fact: I was shocked by the number of iPhone’s in the audience.

In the end, a very cool movie about the mobile world in figures from Qualcomm: http://www.youtube.com/watch?v=OgAkbu73L5A. Enjoy!

Carlets – mobile car integration

I will start a new category in my blog: ideas. I will post here cool (in my opinion) new ideas to be implemented in the web, software or technology field area.
First one. From the making of the car more than 100 years ago since today, things evolved tremendously. Except the fuel, but that’s another discussion. A lot of features and gadgets are part now of the modern car, just to make your life easier.
I always liked when gadgets and technologies are integrating and interoperating smooth and nicely. In auto industry there are a lot of efforts in this direction: some cars have integrated Bluetooth, so if you enter with your phone you can use it as a handset, others have special connectors for your iPod and iPhone and so on. But what I’m talking here is really true integration. Also when it comes to personalize your car, things are looking pretty good. Some cars memorize different seat positions for different drivers. Or even mirrors position.
The mobile phone is probably the most personal device. Unlike the car, that can be driven by any member of the family or it can even be a rental. So a true integration between these two will be the most desired. Imagine that you enter your car. Previously you memorized driver seat position, mirrors etc. Just a few button pushes and your car is exactly like you want it. But if you rent the car, you will need more than this.
Now, imagine that you enter a car, not just your, but any, and the car simply adapts to your needs. Sci-fi? Not quite. The entire technology is there, it misses only the INTEGRATION.
How this will work? Simple. Enter a car, just any car, personalize it and then save the settings to your mobile phones through Bluetooth. Next time your enter another car, the settings will be taken from the mobile phone and the car will instantly adapt to your wishes. Just like that.
And the entire technology is there. Cars, for sure, can be personalized and can understand Bluetooth, mobiles, for sure, can understand Bluetooth. There is only one link missing. You can even use existing protocols in the Bluetooth stack, like OBEX. Or if you’re concerned about wireless technology and security, USB is also available .
And now let’s take a few moments to day dream of what a car can do.

• Mirrors (front and lateral), driver seat, wheel position, all these are adapted instantly to your driving style. It can even differ according to the speed.
• Forget about setting the heating or air conditioner. The car simply knows what is your favorite temperature (in summer and winter) and it sets the heating system, also according to the external temperature in such a way to be just right for you.
• Play my favorite radio station. Or no, better play my favorite tunes, directly from my phone. And change the music genre when I go faster.
• Your smartphone becomes instantly a small computer board, displaying, speed, average speed, rpms, fuel consumption etc. And the GPS software just got a little better. No guess for the average speed, it simply knows the real instant one.
• In a convertible, I don’t care about the rooftop. Weather, speed and the secret ingredient, my preferences, make the recipe.
• Lights are adapting to the road, time and weather.
• And if not everything so far wasn’t making your life easier, add voice commands on top. Anyway, it is already there, on your smartphone.
• Now let’s take a step further and replace the board panel with a small touchscreen. This will display only the information that you find useful. Forget about rpms, show me only the speed. Or do it in a different color. By day and night. Everything skinnable. And all these possible in a blink of an eye.

You can even develop plug-ins for either your mobile device (the client) or your car (the server). And because I like Java, I even found a cool name: carlets (like applets, midlets or servlets). Or you can use widgets. And you have to admit that this opens a new world of opportunities.
For all this, the auto makers will need to agree to some standards, which could be very hard in this industry.
But I can still hope and dream about it. What would you like to personalize in your car?

Mobile transcoders – evil or not?

I read once someone saying that mobile transcoders are the most evil thing. Indeed, but if you refer to the general ones, like the ones put in place by the GSM providers, e.g. Vodafone in UK. To be frankly that someone was also continuing with the fact that the GSM providers don’t know what they’re doing.
Previously I wrote an article about how can you expand your online presence into the mobile world. Taking into account that you will use the transcoding option, I will give you some tips about.

• Transcode content, not layout. You should focus on transcoding content, not layout. I think this is the biggest problem on general transcoders, they try to transform a layout into another one. It is understandable, because they don’t have any knowledge about the content. I’m not talking here about implementing a neural network, but you should at least have some high level knowledge about the pages.
• Use a mobile template. Build a mobile optimized template and then move the content from the classic online website into it. You can, of course, do this either statically or dynamically
• Transcode images. Don’t forget about images. An image that looks just great on the desktop, could not even be rendering on the mobile devices. Most mobile devices can only display images up to a certain resolution. Also bandwidth is a concern there, don’t make your visitors pay too much for just visiting your site. I also explained this in detail here
• Strip out the non-mobile content. If a part of your site is dedicated to download Windows/Linux/Mac software, don’t even bother to transcode it. Remove even the links to that part of the site. I cannot even think to a scenario where somebody will download an application on his mobile phone so that he can install it later on his laptop. The other way around, very likely.
• Optimize the pages for different set of devices. If you target mobile users, take into account that the number of devices is huge and their capabilities quite different. Here, CSS will do just fine. But don’t fall into the other extreme and create a CSS for every device, it will be a nightmare to maintain it
• JavaScript – don’t even think about it. You can even strip it out entirely during the transcoding process. Act as the browser has this disabled by default. On the other hand, you can improve the user experience on some high end devices with JS, but NOSCRIPT alternative is a MUST.
• Flash, Applets etc – forget about them. Simply remove them while transcoding. They will be a total waste of bandwidth. There are very few devices able to render Flash, actually FlashLite, and they’re not so popular.
• Table transcoding. If you have to transcode tables, I totally understand your headache. Still, choose one strategy (row-by-row or column-by-column) and do your magic. Row-by-row is easier to implement and I would recommend to transform every TR into a P or DIV and the TD into a SPAN. But this is far from being a rule. You can choose different strategies for different types of tables, if it better suits your needs.
• Meta data. Remember to propagate them too. But only those that makes sense and with appropriate values.

This will be all for the moment, but the list remains open.

Browsing with QR codes

Typing URL addresses on mobile phones is not a pleasant or easy task. Not even on iPhone or other touchsmart devices.
If you have an URL like m.my.com, then you and your visitors are happy. But what if you have a longer URL? Would your customers stay for 2 minutes in front of a billboard to write down that URL? Maybe not. But there’s a faster, yet very simple way to do it. And everything will become a matter of about two clicks for your visitors.
The solution is named QR codes, a type of 2D barcodes.
The process is very simple: you generate the QR codes, put them on your advertising materials (banners, billboards, print ads, even TV ads) and then your visitors will scan them and be redirected to your website. So you will need QR codes generators and your customers will need QR codes readers installed on their mobiles.

QR codes content

But first of all what can you encode in these codes? Of course, text and of course links. And not only links to web pages, but links to phone calls, SMSes etc.

QR codes generators

Here everything is reduced to the creation of an image. There are different software applications to generate QR codes, but I would prefer the online ones. There you can specify the URL, optionally the image size and you get the image. Also you get image generated URL for future use. Maybe you want to include it in your website, let’s say for downloadable coupons.
Besides URLs, you can generate phone numbers, email addresses, VCards, texts etc.

• Nokia mobile barcode generator – generates QR and DataMatrix codes (size S, M and L) for links, texts and VCards
• Kaywa generator – generates QR codes (size S, M, L and XL) for URLs, texts, phone numbers and SMSes
• Mobile barcodes generator – generates QR codes (only one size) for URLs, VCards, messages, phone numbers, SMSes and emails.
• QR Droid – generates QR codes for URLs, phone numbers, texts, contacts, events, android apps, SMS, email, geo locations. You can customize the size and color.
• For Firefox enthusiasts there is also a plugin: Mobile Barcoder which generates 2D barcodes, QR Codes, Data Matrix, Semacode for the current URL

QR codes mobile readers

Usually the mobile code reader applications can be downloaded on your computer, through SMS or by directly visiting the website with your mobile.

For Android

Barcode Scanner (alias ZXing) or search for one in Android Market.

For iPhone

To find a QR code reader it’s pretty easy. Just start the iTunes, go to the iTunes store and search for QR code or barcode. You will see quite a few results. I tried

• Barcode from Stefan Hafeneger which can scan QR and DataMatrix codes and open the URLs in Safari, email addresses in mail application, send content via email, save phone numbers in the contacts.
• Barcodes from the ZXing project. It is open source in case you’re interested and it has versions for other mobile platforms as well.

For Symbian S60

You have the following options here:

• Kaywa Reader – I have a Nokia N95 and this one worked just fine. It requires a two steps registration: a form on their website and confirmation of a valid email address. After downloading and installing the application, you don’t even have to take the snapshot, just point the phone camera on the code and the URL will be recognized and you will be asked if you want to open the URL in the browser.
  
• NeoReader – No registration is required, but you can download it only from your phone from get.neoreader.com. Your mobile will be automatically recognized and you can download and install the application. Remember to turn on auto focus from the settings (disabled by default).
  
• Nokia Barcode Reader
• Glass Reader
• UpCode Reader
• Semacode Reader

On some newer Nokia phones (I tested on Nokia E71) a barcode scanner application is included by default. If you use a Nokia E71, just go to Menu / Tools / Barcode and select Scan code. As soon as you point your phone to a barcode it is automatically recognized.

For Java phones

• I also tried on my Nokia a Java(J2ME) barcode reader: ZXing. The problem there was the lack of autofocus for snapshots taken and, as a consequence, no barcodes were recognized. This project is open source if you’re interested in how it is done.
• Another Java barcode reader is Okotag, the successor of Snap’A'Bar from Jaxo Systems. Just choose Nokia N93 for N95, but there is the same problem with the autofocus.

For Windows Mobile phones

I tested QuickMark on a HTC Touch HD. It requires two steps registration (website form and email confirmation) and then you are able to download the version needed for your phone. Besides QR, it also automatically recognizes DataMatrix, EAN8, EAN13.

In the end a nice QR to visit!

Last update: May 4th, 2011.

Resize images for mobile web

If you decide that your mobile website won’t be nothing more than a translation of your website, then you have to look into resizing the images too. There are pretty good reasons for doing it:

• mobile devices supports images only up to a certain file size
• mobile devices supports images only up to a certain image width and height
• mobile devices supports web pages only up to a certain total size (page + resources)
• performance, when it comes to bandwidth
• user experience, when it comes to rendering capabilities

Next, I will present a short and practical solution, implemented as an aspx page. The page is taking only one parameter (i), which is the URL of the original image, downloads it, resizes it and sends it back to the client. This can also be implemented as an HTTP filter as well: every time an image is requested, it gets the original image, resizes it and pushes it into the response. The advantage as a page is that you can process this way, even images from other servers.
As for how to recognize the user mobile device, we will use my favorite, WURFL. For more information see Mobile device recognition.

I will include here only the C# code with enough comments so I won’t need to say anything else.
But before, one more thing: what is the new size of the image? First of all we need the maximum image width and height supported by the user mobile device. Here, WURFL is the solution. Then I made the supposition that the images are optimized for 800×600 and I will reduce the image proportionally to the maximum width and height supported by the mobile device. To not give anomalies, I also introduce a minimum width and height, not to go below.

public partial class MobileImageResizer : System.Web.UI.Page
    {
        // image should not be reduce under this width
        private static int MIN_WIDTH = 24;
        // image should not be reduce under this height
        private static int MIN_HEIGHT = 24;
        // images on the desktop version are optimized for this width
        private static int OPTIMIZED_WIDTH = 800;
        // images on the desktop version are optimized for this height
        private static int OPTIMIZED_HEIGHT = 600;

        protected void Page_Load(object sender, EventArgs e)
        {
            HttpContext context = HttpContext.Current;
            // get the image URL
            String url = context.Request.QueryString.Get("u");

            // if no URL is specified in the u parameter then send a NOT_FOUND error
            if (url == null)
            {
                Utils.Send(context.Response, HttpStatusCode.NotFound);
                return;
            }
            
            HttpWebRequest request = (HttpWebRequest)WebRequest.Create(url);
            // specify a timeotu for the request
            // request.Timeout = 10000; // 10s
            // if you want use a proxy for request
            // request.Proxy = WebProxy;
            HttpWebResponse initialResponse = (HttpWebResponse)request.GetResponse();
                    
            // if something went wrong don't try to transform
            if (initialResponse.StatusCode != HttpStatusCode.OK)
                throw new HttpException((int)initialResponse.StatusCode, initialResponse.StatusDescription);

            context.Response.ContentType = initialResponse.ContentType;
            Image image = Bitmap.FromStream(initialResponse.GetResponseStream());

            // get the maximum image size from the WURFL database
            // see my other article about WURFL filter
            int maxWidth = ...;
            int maxHeight = ...;

            // calculate the resize ratio
            double ratio = Math.Min( // final ratio
                    Math.Max( // final width ratio
                        ((double)maxWidth) / Math.Max(image.Width, OPTIMIZED_WIDTH), // width ratio
                        ((double)MIN_WIDTH) / image.Width // minimum width ratio
                    ),
                    Math.Max( // final height ratio
                        ((double)maxHeight) / Math.Max(image.Height, OPTIMIZED_HEIGHT), // height ratio
                        ((double)MIN_HEIGHT) / image.Height // minimum height ratio
                    )
                    );

            if (ratio < 1)
            {
                // if we have to reduce the image
                int newWidth = (int)(image.Width * ratio);
                int newHeight = (int) (image.Height * ratio);

                Image newImage = new Bitmap(newWidth, newHeight, image.PixelFormat);
                Graphics g = Graphics.FromImage(newImage);
                g.CompositingQuality = CompositingQuality.HighQuality;
                g.SmoothingMode = SmoothingMode.HighQuality;
                g.InterpolationMode = InterpolationMode.HighQualityBicubic;
                Rectangle r = new Rectangle(0, 0, newWidth, newHeight);
                g.DrawImage(image, r);
                newImage.Save(context.Response.OutputStream, image.RawFormat);
            }
            else 
            {
                // otherwise simply send the image
                // we don't make bigger the smaller images
                image.Save(context.Response.OutputStream, image.RawFormat);
            }

            // finish
            context.Response.End();
        }
    }

Mobile web

Mobile web is a new trend and a website for mobile devices is more like a must have these days. It is more likely that your company has a web site, but if you access it with a mobile device, the user experience could be unpleasant.

It is not easy to create a site for mobile devices and it is definitely hard to maintain. And not only because of the huge amount of mobile devices, but also because you have to keep it in sync with the normal one. Following I’ll give you a few pointers.

But first you have to clearly define your mobile web presence. Sometimes it doesn’t even make sense to invest time and effort into it. Let’s say that your solely company product is an FTP server. Definitely you won’t expect to sell it to mobile users. So your entire mobile website can consist of a page stating the company name and logo, product name and description, the link where you can find out more information by browsing with a non-mobile web browser. The best part is that you don’t have to update it and it could remain like this for many years. And that could be the case with many other products for which the target user is an enterprise one, with required access from a non-mobile web browser, like a SDK, online 3D highly graphical game etc.

On the other side of the coin, is when your company product is an exclusively mobile product, like a game for mobile devices, ring tones etc. Then you can simply have only a mobile web site. Of course the desktop users won’t an experience up to their device capabilities, but they aren’t actually your target and your site is not of any real use to them.

And there is the case where your presence has to be strong in both worlds. Following I will concentrate more on this, but most of the below pointers apply to the above cases as well.

1. CSS. First of all, your web site has to be CSS-based. Forget about tables, use DIVs. Move all CSS rules into external files. Keep the HTML as clean, simple and free of layout settings as possible. Then supporting a mobile device will be as simply as defining a CSS file.
   You can include a CSS in a page and have it active only for mobile devices using the handheld value for the media attribute of the link tag. Even tough this is very convenient, I wouldn’t recommend to be the only thing to rely on. I would define a series of CSS files for each device or set of devices. So, you would include in your HTML the following lines:

   <link rel='stylesheet' type='text/css' href='desktop.css' media='screen'/>
<link rel='stylesheet' type='text/css' href='[mobile].css' media='handheld'/>
<link rel='stylesheet' type='text/css' href='print.css' media='print'/>


   [mobile] should be dynamically generated and it should point to a file corresponding to the user mobile device. Notice also that I didn’t forget about the printable version . The CSS media target can be specified also with

   <style type='text/css' href='[mobile].css' media='handheld'>
</style>


   or directly in the CSS

   @media handheld {
       /* mobile specific CSS rules */
   }
   

   If you want to split the devices and optimize for groups, one important criteria could be the screen resolution.

   Even tough this is a very clean approach, as I already said, I would not recommend this to be the only one, especially for very large and complex websites. The mobile website should be a stripped down version, both in terms of layout (most important) and content.

2. XHTML. Use XHTML instead of HTML. It is better structured and much easier to maintain and to automatically transform.
3. Dynamically generated content. Even after using CSS for layout, you still have to have different HTML code, then consider generating automatically on the server the specific parts inside the page. For performance purposes you should have in mind using some kind of cache for those automatically generated parts.
   If your entire website is automatically generated, like a portal or an e-commerce website, then you could have different layouts. But don’t fall into having too many device specific code. That should be maintained as well.
4. Transcoded content. It is the case when you already have a website, specifically a larger one, more likely on the non-mobile web, and you want to reach the mobile users as well. You should consider implementing an automatic translation tool between the two layouts. Of course, here a CSS based website will make your life much more easier. XHTML too.
   As a translation tool, I would recommend XSLT. If your code is HTML, then you have to convert it first to XHTML.
   Don’t forget to resize the images too. Many devices supports images only up to a certain file size, width or height.
   This is a fast and cheap solution, but probably not the best one. Also take into account here the size of your website, otherwise the translation tool could become more expensive then recreating your entire website. And remember that it comes to a cost in performance.
5. Real life testing. Consider using for testing real mobile devices, not emulators. Use mobile devices with different screen resolution, operating systems, browsers. Don’t forget about touch screens either.
6. Performance. Test for performance here too, but be careful how you define it. The bandwidth here is different: smaller pages, smaller images, different number of users etc.

If you’re interested in recognizing user’s mobile device on the server side, see my other article: Mobile device recognition.

I hope these will help you in outlining your mobile web personality, but as I said before, first take a step back and think of what exactly you need, want and invest in this.
The mobile web is for sure a different, but thrilling experience.

Testing web mobile pages

In an earlier post, I was telling you how to detect a mobile device on the server side so you will be able to serve the appropriate page. The next step after you implemented those pages will be to actually see your work.

If you have a mobile device everything is fine. Frankly I don’t like to directly use one, because only typing a web address can be a challenge. Just a while ago, I discovered the My Mobiler application, some kind of Remote Desktop or VNC. So you can use your Windows Mobile from the comfort of your own desktop mouse and keyboard.

But this still involves having an actual device.

If not, you can use an emulator. For iPhone a good choice is Safari web browser under Mac or Windows. It uses the same rendering engine (WebKit) and has very similar functionality.
For Android, the Android emulator in Android SDK is a very good choice. It has almost the entire functionality of an actual device.

Another way of testing mobile pages will be to rewrite the User-Agent HTTP header of your own browser. This will ensure that you will get redirected (if the website is properly behaving) to a mobile web page.
How to do this?
In Firefox you type in the address bar about:config and define a new preference (by right clicking and selecting New » String) with the name general.useragent.override and the value of your choice.
In Internet Explorer things are a little bit more complicated and involves some registry editing.
In the [HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Internet Settings\5.0\User Agent] key you have to define the (Default), Compatible, Version and Platform. The final user agent string will look like [(Default)] ([Compatible]; [Version]; [Platform]).
If you add some values in the registry key [HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Internet Settings\User Agent\Post Platform] they will be added in the user agent string.

But the easiest method to do this is with a Firefox add-on: User Agent Switcher.

If you choose an user agent string from the WURFL database and then visit Google, Yahoo, YouTube etc you will see a different version than the one you are used to.

Last update: May 12th, 2010

Mobile device recognition

Nowadays when you create a web site you should also think to the ones accessing it from a mobile device. But how you can know this?
I’m going to show you next a few methods on how you can do this and present the advantages and disadvantage of each one.

WURFL

My favorite method of detecting a mobile device is WURFL. WURFL is an open source database of mobile devices capabilities. Every mobile device is identified by its User-Agent string (you can find it in the HTTP headers) and has associated a list of capabilities grouped into categories. How exactly you can use it in .NET you can see here.
You will also have to consult the X-Device-User-Agent HTTP header because some mobile providers are rewriting the User Agent. And just to be sure that you also recognize Opera Mini (and actually the real device) you can inspect the information in the X-OperaMini-Phone-UA header.
More on the User-Agent HTTP header you can find out on W3C (section 14.43).
I personally like WURFL because it is open source, it tells you more than if the device is mobile or not. The downside is that probably it does not contain info about all the latest mobile devices. But you can easily become a WURFL contributor and submit these info yourself into the WURFL database. Before doing these you should familiarize very well with the WURFL documentation.
I also like that the community is very active and the database contains approximately 7000 devices, making it a very effective method and most importantly with no false positives, unlike the next methods.
Moreover, WURFL has a library for accessing the XML database implemented in Java, .NET and PHP.

UAProf

If WURFL is a devices database, UAProf (User Agent Profile) is a capabilities database for a single device.
The mobile browser could contain an HTTP header usually named x-wap-profile and its value is an URL pointing to the profile described in RDF (see UAProf specs as PDF).
There are some serious downsides to this method:

• The name of the HTTP header is not always x-wap-profile. It could also be wap-profile or xx-profile, where xx is a number. The Opt header can contain this number.
• There is no standard regarding the capabilities naming and grouping
• Not all the devices have UAProf
• Not all the UAProfs are still available
• Retrieving and parsing the UAProf can be quite time consuming

Altough you can use an UAProf to define a device in the WURFL database, which should be the preferred way.

Browser.isMobile (.NET dependent)

This is the method that I recommend the less because it is .NET dependent, not quite up-to-date and it doesn’t offer too many information about the device capabilities. Anyway for your reference I include it as well.

if (HttpContext.Current.Request.Browser["IsMobileDevice"] == "true") 
{
    // the browser IS a mobile device
}
else
{
    // the browser IS NOT a mobile device
}

.

Next steps

What you do next, after knowing with each type of device are you dealing with, it’s a different story. For sure I wouldn’t recommend you to create two versions of the same page. The best way will be to have only one version and to customize the layout using CSS. Then you definitely have to avoid the “evil” HTML table to build your layout. A lot of current mobile browser don’t handle very good nested tables. Here a method of finding out also the mobile device capabilities (such as screen width and height) will help you in building a better layout. Altough recommended will be to use percentages instead of fixed sizes.

Another way will be to use XSLT to transform the desktop version into the mobile one. Please keep in mind that the transformation should be made on the server side, as almost certain the device will not have this capacity. This is a good approach and you can even transform the page into WML (or even, why not, VoiceXML) but you will have to sacrifice some performance on the server side. This is acceptable as the mobile device version traffic has a lower bandwidth. I already wrote an XSLT server side transformer in .NET and should be as simple and straightforward to implement it in Java as well.

In conclusion, I would recommend to use a combination of the above methods for detecting mobile devices and creating mobile web pages.

Later edit: If you’re also interested in how you can test your mobile web pages please see the next article Testing web mobile pages.

Mobile device filter in ASP.net

The mobile web is increasing rapidly. Creating different web sites for mobile users is not a solution, rather having the same content, but customized through CSS for different browsers and devices. But this article will not focus on this part, but rather on what is before: recognizing the browser/device of the user so you can choose the right CSS file(s).

For recognizing the devices we will use WURFL, on open source database containing device capabilities. I will also not cover here the mobile device recognition topic.

What I will describe, will be an HTTP filter for pages that will try to recognize the mobile device and store it in the context items for future use. Of course you can add your own custom tasks to it (e.g. redirect to another page if a page is not available for mobile devices or select automatically the right CSS).

The filter is implemented as an HTTP module that is executed before the actual request is processed. Then it matches the User Agent string against the WURFL database for getting the device id. Because some mobile providers are rewriting the User Agent and putting the information into the X-Device-User-Agent HTTP header we will also look into that one as well. (Later edit) And just to be sure that you also recognize Opera Mini (and actually the real device) you can inspect the information in the X-OperaMini-Phone-UA header. As a consequence the filter will use a list of headers.

And now the code:

public class WURFLFilter : IHttpModule
{
    /// 
    /// The HTTP headers inspected for the User Agent string. The headers are inspected in this order.
    /// User-Agent - the standard header containing the user agent string
    /// x-device-user-agent - some mobile providers overwrite the User Agent,
    ///     but they put the real user agent in this header
    /// X-OperaMini-Phone-UA - Opera mini overwrites the standard header, 
    ///     but moves the information in this header
    /// 
    private static String[] UA_HEADERS = new String[] 
                { "HTTP_USER_AGENT", "X-DEVICE-USER-AGENT", "HTTP_X_OPERAMINI_PHONE_UA" };

    private HttpApplication httpApp;
    private deviceFileProcessor wurfl
    {
        get 
        {
            // get the WURFL processor from cache or load it from file
            deviceFileProcessor d = (deviceFileProcessor)httpApp.Context.Cache["wurfl"];
            if (d == null)
            {
                String wurflPath = httpApp.Server.MapPath(ConfigurationSettings.AppSettings["wurfl.path"]);
                d = new deviceFileProcessor(wurflPath);
                httpApp.Context.Cache.Insert("wurfl", d, new CacheDependency(wurflPath));
            }
            return d;
        }
    }

    public void Init(HttpApplication httpApp)
    {
        this.httpApp = httpApp;
        httpApp.PostAcquireRequestState += new EventHandler(OnRequest);
    }

    void OnRequest(object sender, EventArgs a)
    {
        HttpContext context = ((HttpApplication)sender).Context;
        String mobileDeviceId = null;
        Hashtable userAgents = wurfl.getsdUserAgentAndId;

        for (var i = 0; i < UA_HEADERS.Length; i++)
        {
            String ua = context.Request.Headers[UA_HEADERS[i]];
            mobileDeviceId = (String)(String.IsNullOrEmpty(ua) ? null : userAgents[ua]);
            if (mobileDeviceId != null)
                break;
        }
            
        context.Items.Add("mobileDeviceId", mobileDeviceId);
    }

    public void Dispose()
    {
    }

}

Some improvements can be made, like caching the mobileDeviceId into the session (we suppose that you cannot change your device during the session ). You probably noticed that I cached the WURFL file processor (the WURFL data file is quite big and it doesn’t make sense to read it every time). The cache dependency is made on the WURFL data file (the path is stored into application settings under the wurfl.path key) so you can update the file without any worries.