Thursday, May 17, 2012

Getting started with creating Mobile App like websites, quickly and Easily

So, I am assuming if you have come across this posting, you're looking to create a mobile friendly website of your current website or from scratch. Well, you've come to the right place. I am going to assume you have at least some familiarity with things like CSS, HTML, jQuery & Javascript, and we'll go from there.

So how do we begin? Step one. Have a design, well at-least in mind. To create something mobile friendly, your content is going to have to be presented in a mobile friendly fashion. In alot of cases, these changes can be made very easily and I'll outline a few examples. So without further ado, Lets start.

Step 1.

Start with the correct html structure and  doctype.

In this case, there are two doctypes you should look into using, the mobile doctype like so:

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN"
"http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">

or the standard HTML5 doctype like so:


<!DOCTYPE html>


Using one of theses doctypes will help your application render better in Mobile devices.

Step 2.

Add in the appropriate "meta tags"

<meta name="HandheldFriendly" content="true" /> <meta name="viewport" content="user-scalable=no" /> <meta name="viewport" content="width=480" /> 

The meta tags above are going to give you much better cross device look and consistency. As you can see, in my example, I am assuming the viewport should be 480px wide (I have found this yields nice results on most devices).

Add in the optional "Meta tags"

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
These are i-Device specific meta tags (see apple documenation

And lastly, add some polish (note file paths will be unique and you'll have to change).

<link rel="shortcut icon" href="/GetSiteFile/favicon.ico" />

These are all Apple specific items

<link rel="apple-touch-icon" href="/GetSiteFile/touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/GetSiteFile/touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/GetSiteFile/touch-icon-iphone4.png" />
<link rel="apple-touch-startup-image" href="/GetSiteFile/startup.png">
Step 3.

We have our doctype, we have our meta tags and other tid bits setup, now how about actually displaying content. This goes back to having a design in mind, and designing in mind for mobile.

Mobile Layouts have to be tuned to work with less real-estate, which means, cut the crap, and only show what is relevant. This can be a bit challenging when scaling from a Desktop website to a Mobile site, but its not impossible.

A typical Menu on a website may look something like this:

[Option 1][Option2][Option3][Option4][Option5]

but in a mobile site, that should be re-structured to something like this:

[Option 1]
[Option 2]
[Option 3]
[Option 4]
etc...

Step 4.

Consider implementing touch gestures (where applicable). Not everything, or everyone will require swipe gestures for items, but in some instances it makes sense to include it. To keep this posting short, I'll leave you with a nice little jQuery plugin which I have found most useful and easy to use.

http://www.netcu.de/jquery-touchwipe-iphone-ipad-library



Step 5.

The rest is for you, this is very quick list of things to create a mobile website quickly.

Other things to investigate if you haven't
-Using a mobile framework like Sencha Touch
-Using a framework like Less.js to make styling changes easier

I will post more relevant items when I think of them.



View this: http://bren1818.blogspot.ca/2012/09/simple-web-app-for-android-and-ios.html (A newer post)