Tag Archive | "jquerymobile"

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)