I have seen many people asking questions in forums about Mobile web application development using ASP.NET WebForms. So i planned to write a blog post on the same.
ASP.NET is a powerful web application development platform, allows to leverage most of the features in Mobile web application development. Now a days, mobile devices are capable of rendering HTML 5 content. Websites which works in desktop browser is rendering great in mobile browsers too. Mobile web browsing is rapidly increased and every one looking for ON THE GO solution!
Now, the question is, Can we convert the existing web application to Mobile web application?
Answer is YES. You can can do that. Just by adding the Viewport meta tag to the Head section of the webpage and you are done!
To know more about the Viewport meta tag, check this link – Viewport. This viewport meta tag works absolutely fine in all major mobile device browsers including –
- Apple iPhone – Mobile Safari
- Android(GingerBread, ICS, Jelly Bean) – Native browser, Google Chrome, Opera
- WindowsPhone – IE9 and IE 10
- BlackBerry – Native Browser
Sample Code –
Try the above code in a mobile browser and you will find the difference!
Next question is, How do we create a separate version of Mobile web application?
We can create stunning mobile specific web application using ASP.NET WebForms and when you access the web application from desktop browser it renders the general desktop web app and when you access it from Mobile browser it renders the mobile web app.
How we need to redirect the user to the respective web app, when user access from different devices?
I explained the same in one of my earlier blog post – Detect the device and redirect in ASP.NET. That’s one way of doing it. We have few more ways to do the same.
- CSS 3 Media Queries – Take advantage of CSS 3 media queries and you can redirect the users based on the requested device – MediaQueries. I feel it’s more elegant way.
It’s up to you to choose the right method, based on the devices you are going to support!
There are many mobile frameworks available, but the above mentioned are good and have great API’s to quickly design a mobile web application.
Now comes the final part, Testing. Testing the mobile web application is real challenge. Everyone can’t afford to buy physical devices and test the web applications. Few device manufacturers provide Emulators, so that we use to test your web application.
Check the below links, which i have blogged earlier related to testing the web application on Emulators!
So, not least, ASP.NET Mobile website – Mobile. Great repository of information related to developing mobile web applications in ASP.NET and links to some cool tutorials.
If you have any queries or doubts in developing Mobile web applications, do post your questions in Mobile and Handheld Devices Section in ASP.NET Forums. All time experts, great answers!
Happy mobile web programming!!!