Mobile Website design/steps for Android, Iphone etc

Steps to create a mobile website for your main website:

a) Add detection code in your main website to redirect to mobile site like "m.yourwebsite.com" based on the UserAgent header. You can get code from http://detectmobilebrowser.com/. (which has .net, php etc examples). If you use their code - then add code to handle case where "User Agent" is null or is less then 4 characters in length(sent by automated testing tools). You may alternatively choose to do the detection using Javascript(instead of serverside code) for performance reasons.

b) Design your HTML template with header(logo+header links) , content and Footer (Copyright, back to top etc) eg Go to http://m.cnn.com/ or http://m.paypal.com/ and take a look at layout.

c) Add docType so that iphone/android can recognize that this website is optimized for them.

d) Add below header to control the scaling.

You can get idea on viewport at: Configuring the Viewport. You may note that viewport is supported by both android and iphone browser(which are both derived from webkit) By default iphone(or maybe android) will assume virtual window width of 980 pixels even though the width may be only 320 pixels - and then it will scale it down by 3. You may add below for blackberry:

e) Add support for web clips (shortcut/bookmark icon)- by having icon of around 60*60 PNG(for android you may have to use apple-touch-icon-precomposed for higher resolution icons, which when used in iphone - wont add rounded border unlike for apple-touch-icon).

f) You may Add below code to explicitly use favicon - for certain mobile browsers. (as they don't pick it up from default locations - for optimization purpose)

g) The URL bar takes important real estate space . Hence you may remove top URL bar in iphone and android by scrolling by 1.

Other tips:

a) If you Add labels - then add it above text field - so that there are space between controls. (else user may touch nearby control by mistake) Also you may associate the label to the text field.

b) Prefer 1 or 2 columns format(as you have very low width is default portrait mode).

c) Give option to avoid - text fields which uses type of password. (as its easier to make mistakes on small cell phones)

d) Use relative width for images,tables eg

This will make the image automatically increase width in landscape mode.

e) You may note that "webkit" has new css elements like doing transformation , transition etc eg -webkit-transform:rotate(10 deg)

f) You also get new events like touchstart, touchmove, touchend, gesturestart(two finger touch), gestureend, gesturechange. If you want pinch zoom etc to be disabled then you addEventListener to your custom function and code like event.preventDefault() to it.

g) You can use window.orientation to detect portrait view, landscape(left), landscape(right) eg http://www.engageinteractive.co.uk/blog/2008/06/19/tutorial-building-a-website-for-the-iphone/

h) The media attribute resolves to screen instead of handheld for iphone/android . Hence you may avoid it or you would need to also check device width to detect if it is iphone. Eg http://www.table2css.com/articles/how-style-same-html-document-differently-different-display-devices

i) You may add "tel:" or "sms:" tags(though android is smart enough to detect phone number without it) http://www.catswhocode.com/blog/10-useful-code-snippets-to-develop-iphone-friendly-websites - good one

j) Add debugging using console.log eg http://articles.sitepoint.com/print/iphone-development-12-tips -good one (In iphone - you can enable developer debugging settings to see it)

k) If you are getting lots of slow connection(global audience) for your websites - then you may consider optimizations like making "css"(or even images) - internal/inline(instead of external css) etc. (though android/iphone can open 4 connection at same time)

l) You may add alt tag to image tags - in case the user chose to disable image tags(to save on bandwidth or to save on loading time).

Testing:

It is always a good idea to test on an actual device. (you may use ipod touch instead of iphone.)

If you don't have actual device - the next best alternative are the emulators/simulators etc. For quick(but not reliable) testing - I prefer the user agent switcher plugin in firefox to simulate mobile websites.

There are professional companies like deviceanywhere which can help you to test with all kind of devices.

Books :

If you are just focussing on making your website work with iphone/android then the material on the web(or this article) should be more then sufficient. However you would need books like Programming the Mobile Web which is excellent reference(and it goes beyond android, iphone - and covers all kind of mobile devices) This may be imp. as globally (outside US) - Nokia sells lots of phone on its Symbian OS. But the above book does not explain well - and I got more concepts from unrelated - "iphone in action" (which is iphone specific sdk/web development - and hence does not go in depth on mobile websites) Another alternative is Beginning Smartphone Web Development .

NOTE:

All of my blogs on BlogsOnCloud are my personal opinion, and they don't represent views of any company that I have worked.