Tag Archive | "mobile"

Getting started with mobile website development (part 1)


While mobile applications continue to grow in numbers, seeming exponentially, there is still the regular web that seems to be put to the back burner.  Even though there are companies that specialize in porting standard websites to mobile versions (e.g. – mobify), there is still a long list of sites that do not cater to the mobile crowd.  For example, take a look at this article about the “Digital Agencies of the Future!”.   It doesn’t take very long to realize that the big companies that specialize in design and the web do not even take mobile web too seriously.  I think this is just a symptom of the explosion of new technologies in the past years.   There are simply too many new technologies for companies to keep up with.

All that being said, it is not very hard for a competent web developer/designer to create a mobile version of a website.  This article will highlight some tips and tools to help you along the process.  There are essentially two paths to take with mobile web site development.  Do you want to create a site that caters to everyone, or a site that works for the more progressive and modern mobile device?  It’s analogous to going, do I want to keep supporting IE6 and not use CSS3/HTML5?  I’ll call Path A the more progressive way that does not guarantee a compatible site, and Path B the “safer” way.

Path A – Leverage Cool Mobile Libraries

Starting from the more exciting side, if you are creating a website for a webkit compatible browser (e.g. – safari for iPhone), you should be looking into these libraries:

These libraries provide a rich UI library to create mobile sites that function like applications.   It’s important to note these tools will not necessarily make your site compatible with most mobile devices, but it does cater to the growing trend and new breed (e.g. – iPhone, Android).

To get a better understanding of how complex web sites on mobile devices is, check out the video at the bottom from the jQuery mobile site.  Also, give the support matrix a look here.  If there is one thing this mobile web compatibility nightmare reminds me of, is a few years ago when CSS and Javascript were just starting to become popular.  Before any javascript library like jQuery existed, it was a complete nightmare working with the DOM.  CSS was a great invention, but it didn’t solve the problems of browser rendering incompatibilities.  We are now facing the same thing with the mobile web.

Path B – a recommendation for CSS styling and mobile web – use relative sizing

If you want to create a very “safe” site that works in most mobile devices, you should consider creating a basic fluid based site.  Although you cannot leverage the richness of the libraries mentioned before, you’ll have a mobile site that is likely to work in almost all mobile browsers.  Without going into great development detail, here is a quick list of tips to get started.  The next part of this article will go into the real details.

  1. Set the META tags appropriately:
    <meta content=”width=320, user-scalable=no” id=”iphone-viewport” name=”viewport”>
  2. CSS: Use % sizing for width:

    body { width:100%; }

    .mainContainer {
    /*Scale to fit max width*/
    width:100%;

    /*Android Small – uncomment to view on Android small */
    /*width:257px; overflow:scroll;*/

    /*iPhone, Android Large  – uncomment to view on iPhone and Android Large */
    /*width:337px; overflow:scroll;*/
    }

  3. Define all other divs relative to each other with %.
  4. Use images inline instead of as background to scale appropriately.

    <div class=”header”><img src=”image.jpg”></div>where css is like this:

    .header {
    display:block;
    width:100%;
    }
    .header img {
    width:100%;
    }

  5. Detect the mobile device
    To render specific quality of images per device type you can look into companies like deviceanywhere which provide data on different device types.

If you follow the above steps, you can create a basic website that could work in any mobile device.  It’s essentially creating a fluid website with some specific attention to mobile devices.

This was just a short look at some of the issues with developing mobile websites.  The next part will look into more technical details about the process of development.  I will provide real sample code to use for a base site.

.root {
background:#ccc url(‘../img/bg.jpg’) repeat;

/*Scale to fit max width*/
width:100%;

/*Testing for specific dimensions*/

/*Android Small- 240px */
/*width:257px; overflow:scroll;*/

/*iPhone, Android Large  – 320px */
/*width:337px; overflow:scroll;*/
}

Posted in Development, iPhone, Tips & TricksComments (0)

Mobile coupons – have you cashed in yet?


One of the oldest traditions in the world of retail sales has spread to the digital world of mobile devices: coupons! Offering discounts in digital format isn’t a new concept, and it still remains to be seen how successful mobile coupons will be now that our phones have all gotten a lot smarter, but there might be some winning formulas out there in the world of mobile apps.

Read the full story

Posted in iPhoneComments (0)

Taptu, google for mobile search?


Taptu, a specialized search engine for mobile phones is an interesting idea that actually makes sense.  As many iPhone users will know, browsing the web with Safari is not always the most pleasant experience with having to zoom in and using cumbersome form controls.   Unless you know which sites are designed for mobile phones, quite often you’ll spend as little time as possible on a site to just obtain that particular piece of information you came for. Read the full story

Posted in iPhone, iPhone AppsComments (5)