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 templace 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.
<?xml version="1.0" encoding="utf-8"?><!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.wapforum.org/DTD/xhtml-mobile12.dtd">
d) Add below header to control the scaling.
<meta name="viewport" content="width=device-width" user-scalable="yes" initial-scale="1.0" /> <!-- iphone,android -->
You can get idea on viewport at:
http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
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:
<meta name="HandheldFriendly" content="true" /> <!-- 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)
<link rel="apple-touch-icon" href="images/abc.png" /> <!-- shortcut/bookmark icon for iphone and android -->
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)
<link rel="icon" href="favicon.ico"/> <!--some mobile browser explicitly expects this -->
g) The URL bar takes important real estate space . Hence you may remove top URL bar in iphone and android by scrolling by 1.
<script type="text/javascript" language="javascript">
<!--
window.addEventListener("load", function() { setTimeout(loaded, 100) }, false);
function loaded() {
window.scrollTo(0, 1); // pan to the bottom, hides the location bar
}
//-->
</script>
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
<img src ="image.gif" width=90% height=auto>
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.
f) 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/
g) 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
h) 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
i) 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)
j) 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)
k.) 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
.Other blogs:
You my go to http://www.jroller.com/zahid for list of my blogs. (eg android tutorial , firefox plugins etc)
