Archive

Posts Tagged ‘mobile’

ZTE S302

May 14, 2010 Leave a comment

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.

ZTE S302

Advertisements
Categories: Technology Tags:

Mobile conference 2010

May 14, 2010 1 comment

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!

Categories: Web Tags:

Carlets – mobile car integration

October 19, 2009 Leave a comment

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?

Categories: Ideas Tags: , ,

Mobile transcoders – evil or not?

September 24, 2009 3 comments

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.

Categories: Web Tags:

Browsing with QR codes

August 20, 2009 3 comments

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.
    Kaywa QR code reader Kaywa QR code reader - URL decoded Kaywa code reader - settings page
  • 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).
    NeoReader snapshot NeoReader - URL decoded NeoReader - settings page
  • 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! 🙂
QR code for my blog

Last update: May 4th, 2011.

Categories: Web Tags:

Resize images for mobile web

January 13, 2009 2 comments

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 <a href="https://beradrian.wordpress.com/2008/09/04/mobile-device-filter-in-aspnet/">WURFL filter</a>
            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 &lt; 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();
        }
    }
Categories: Software, Web Tags: , , ,

Mobile web

January 10, 2009 3 comments

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.

Categories: Web Tags: , , ,