Tuesday, January 11, 2011

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 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)

22 comments:

  1. Great post. The content you have mentioned in your post is superb. I visited your link and found it great. Its very informative.
    qr codes generator

    ReplyDelete
  2. Hi there, awesome site. I thought the topics you posted on were very interesting. I tried to add your RSS to my feed reader and it a few. take a look at it, hopefully I can add you and follow.




    Mobile Website Design

    ReplyDelete
  3. thanks sir
    i have use all your meta for my mobile wap.
    if i will get any error so will contact to you.

    make a facebook application

    ReplyDelete
  4. Nice Info..

    Thanks for sharing such useful info with us.

    -------------------------------------------------
    iPhone Apps Development

    ReplyDelete
  5. contact me on manager@propertyforcheap.com . i want you to develop a andriod as well as a mobile website for my online property portal www.propertyforcheap.com

    ReplyDelete
  6. Website designing is one the most important field which is used in each era, as many companies provides the excellent services for website design and its promotion.
    for further info visit our website idx feed.

    ReplyDelete
  7. I am using the Mobile Website Builder for WordPress by DudaMobile. It’s very easy to use and really effective. It made my site mobile friendly in just 3 steps. All I had to do was just download & install the plugin and press the “Create your mobile site now” button. It took me to the dudamobile website, where I can customize the Mobile site according to my need. And it’s a very easy WYSIWYG editor. Then I published my site and Bingo !!! I had a mobile site just like that. Guys you can check out the plugin yourself here : http://wordpress.org/extend/plugins/mobile-website-builder-for-wordpress-by-dudamobile/

    ReplyDelete
  8. Thanks for sharing the code, as it was very difficult before I read your posting to do, but while I was looking for code online, I also came across responsive website design. I would suggest responsive website design would be great if I could implement for mobile ready website.

    ReplyDelete
  9. I believe mobile web is the future of the internet (almost everyone’s online through their iPhones) and this is a really helpful post for some of us who are just tapping into mobile web :)
    http://mobileconvert.wordpress.com/

    ReplyDelete
  10. I am really inspired from your blog hoping you will be there with a more interesting post like this.
    airport pickup w2
    heathrow to w2
    southend to w2

    ReplyDelete
  11. It's nice to see you're creating more mobilizable views for partners. Thank you.

    Mobile Application Development

    ReplyDelete
  12. The way you shared your knowledge here is amazing....

    Branded Logo Designs

    ReplyDelete
  13. Your article is very informative and coherent. I'm happy that I stumbled upon your page and hope to find more articles of such caliber on this site in the future.
    Affordable Dissertation Writing

    ReplyDelete
  14. Hi,Using high quality animation for ; involves file size optimization and professional development techniques to enable quick downloading and compatibility. With this deeper understanding, i will have the ability to apply even more incorporated design practices to their daily work. Thanks...

    web designer in Toronto

    ReplyDelete
  15. Thanks for sharing valuable information, it is good and resourceful post. Web design play very important role in life of website and in Search Engine Optimization.

    Web consultancy & seo consultancy

    ReplyDelete
  16. This is such a nice post on this great topic Iphone App development. iphone application development company

    ReplyDelete
  17. This is an awesome idea, I'll definitely be using this code, when im developing an iphone or android app
    iphone app development company

    ReplyDelete
  18. Hi,Using high quality animation for ; involves file size optimization and professional development techniques to enable quick downloading and compatibility. With this deeper understanding, i will have the ability to apply even more incorporated design practices to their daily work. Thanks...
    Website development Islamabad

    ReplyDelete
  19. We take pride in delivering the highest level of technology to your app without compromising time or budget. It's not enough to just have an app for your business, the app has to be exceptional. Building you an app that stands out. We develop Mobile Website Design, ipad app development, mobile app development, mobile app development tampa, app development tampa, app development florida, app development, webos app development, apple watch app development, apple watch app developer and iwatch app.

    ReplyDelete