Targeting Mobile and Desktop Browsers - ASP.NET MVC2 with MS Web Application Toolkit and Sencha Touch

Question

I'm building a web app that I'd like to:

• Use the native UI capabilities of mobile devices (e.g. iPhone, Windows Mobile, Android phones) when rendered on those devices
• Render nicely on non-web toolkit browsers (i.e. desktop browsers) such as IE, Firefox, Opera

My research so far has brought me to using the following technologies:

• ASP.NET MVC 2 for my dev framework (writing different views for each target device)
• Sencha Touch (previously called ExtJS) for rendering in each different mobile device's browser
• The Microsoft Web Application Toolkit for distinguishing between the requesting device / browser type

I have no experience in either of the 3 technologies specifically (I've done plenty of C# server-side, WinForms and ASP.NET 2 development), so I'm really basing this decision on what info I've been able to dig up on the web.

Can anyone can think of a reason that this combo of technologies wouldn't work? My main concern is how I can wedge Sencha Touch into this solution alongside the MS Web App Toolkit. In fact, whether both of them are even necessary in this case.

Any suggestions or feedback greatly appreciated.

Ash

Answer 1

Speaking from personal experience, you don't have to specifically use certain framework. I use asp.net and simple JavaScript to design mobile sites and haven't had many problems.

If you want to target broad range of devices and don't want to bother with different views front-ends you need to make sure you are not using extensive JavaScript as many low end devices don't support JavaScript at all. For example jQuery works fine on webkit browsers but it doesn't on pocket ie.

I haven't had any experience with MS Web App Toolkit but it looks like requires JavaScript support and I doubt it would work on many phones.

IF your main target is mobile but want desktop browsers to access your site you could just change css to make fonts larger so it would look nice on PC

My motto on mobile design is keep it as simple as possible.

Answer 2

Hi and thanks for your feedback. I'm not sure you've gotten the right idea about the MS Web App Toolkit - it's a very simple component that's specifically designed for working with a large number of different mobile devices (67 I believe): http://code.msdn.microsoft.com/WebAppToolkitMobile

My understanding of it is simply that it:

• determines which device type / browser made the request by using an in-built database of devices

• provides a component for use within your ASP.NET MVC 2 code so the request is routed to a suitable View for rendering on the calling device

I was going to include the Sencha Touch libraries so I could write a single View (for each page) that could be rendered on multiple different mobile devices. Thus when the Web App Toolkit determines that a Sencha Touch-supported device has made the request, the call is routed to the appropriate View that uses the Sencha Touch libraries. For requests from desktop browsers, the call would be routed to another View, and for requests from all other devices, I could either use another View again or, as you say, inject a simplified stylesheet with scaled up fonts.

Hope that's a clear-enough explanation!

Answer 3

I think ASP.NET MVC and MobileWebApplicationToolkit is the best choice for developing mobile sites using asp.net.

I would consider WURFL better then mdbf (it is used in mobileWebAppToolKit) because the last release will be in August.

I´m not expert in JS in mobile sites, I try avoid it for maximize compatibility. But I think Senda is big, more than 200KB. Maybe you could look xui-js or other specific mobile js framework. Anyway I think you are doing good decision.

Answer 4

[Sencha person] Sencha Touch is an application framework that targets Android & iOS devices only right now, and will support RIM & Nokia devices when they come out with high quality webkit based browsers later this year/next year, as they've promised.

We don't have a progressive enhancement/degradation philosophy in Touch, so there is no fallback behavior. If you absolutely need progressive enhancement you should check out jQTouch, which is a jQuery plugin. But even jQTouch requires a sane javascript/CSS capability in the browser, and many existing phones simply don't have this. Cf, a majority of just ordinary web-sites don't render properly in the current RIM browser.

Ergo, if you want 100% phone coverage, you'll have to dumb down your "app" to something that even WAP phones with limited HTML capabilities can display. But it won't be much of an app by that stage.