Tag Archive | "iPhone"

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)

Creating a custom ringtone for your iPhone (for free)


Have you ever wanted to make a custom iPhone ringtone without downloading programs or paying a fee? If you answered yes, then keep reading as this article will show you how in a few simple steps. By using a free audio sampling site Audiko (http://audiko.net/) and iTunes, you can create a 30 second ring tone quite easily. Follow below to get started: Read the full story

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

i.TV – a tv guide, movie finder, and remote control in an iPhone app


i.TV is a free iPhone application that acts as a TV guide, local movie finder, and even a remote control. Out of all my free apps, I find I use i.TV quite often as I do not receive the listings and always forget what’s on TV.  You just load up the app, provide it with your general location and it pops  in the daily listings. One of my favourite features is the ability to view the listings horizontally like a regular tv guide. Another nice feature is the way it links up to movie listings in theatres nearby. Look at the screen shots below to see how it works. Read the full story

Posted in iPhone, iPhone AppsComments (3)

Disable Cellular Network Data on iPhone with unlockit APN (How To)


This article is for those iPhone owners who didn’t sign up for a data plan and are being charged for packets of data sent from your iPhone when a WiFi connection is not around.  Normally, your provider can disable data transfer for you, but they do not guarantee it works.  I found out the hard way and was charged excessive amounts for data packets being sent.  After two attempts from my provider, data was still being transferred and the best they could do is credit my account 50% of the additional data charges. Read the full story

Posted in iPhone, iPhone Tips & Tricks, Tips & TricksComments (4)

AppBox Pro – a swiss army knife for the iPhone?


AppBox Pro is an app of mini apps that comes with 18 apps  (plus 3 semi apps). For $0.99 it didn’t take much for me to try this app out.  Here’s a quick list of what you get:

Read the full story

Posted in iPhone, iPhone AppsComments (0)

Google's mobile app market is here


Wow, Google’s market place is almost identical to the iPhone’s App Store, and that’s not a bad thing. With the contentious issue of Google Voice not coming to the iPhone anytime soon (or ever), and Google’s software prowess, it will be interesting to see if the Android can match or surpass the iPhone.

My take is that Google will do what they do best, build very smart and useful applications that make your life a lot simpler.  The adoption rate from developers will depend on their Developer API, but it’s likely to attract more developers as it’s not limited to Mac only.

Although iPhone development is changing with new “wrapper like” technologies for iPhone development such as Mono or PhoneGap.  PhoneGap is a very cool development environment created by Nitobi that allows developers to create iPhone apps in one language (Javascript) for many platforms.  Currently, PhoneGap targets the iPhone, Android, and Blackberry.

All I can say is that, as a consumer, I would expect the rate of application growth to increase dramatically in the coming year.

Posted in Video ClipsComments (0)