Mobile Website design/steps for Android, Iphone etc--Zahid Shaikh
Steps to create a mobile website for your main website:
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.