Resources for combining traditional and mobile ASP.NET web development

As a developer of a traditional ASP.NET web application (non-MVC) who is getting requests for a mobile-friendly version, I'm wondering where I might find some wisdom about the best way to approach the problem. We currently mask most of our database access through web service calls.

It seems like many shops would find themselves in this situation:开发者_开发技巧 We have limited resources and don't wish to create a maintenance headache by having versions of an application diverge greatly.

Is there a set of best practices for taking an existing System.Web application and reorganizing code in order to accommodate adding mobile-friendliness. The general approach I'm thinking of is:

1. Make small stylistic changes on the client using CSS or even JavaScript.
2. Make any necessary changes in data, workflow, or markup in server-side code.
3. Keep as much code as possible common to the two versions by organizing non-UI logic into separate assemblies. Conditional compilation would be used in code-behind where UIs must diverge.

What are the gotchas that I'll run into with this approach?

Short and sweet:

• Read the W3C Mobile Web Application Best Practices
• Separate your business/application logic and presentation logic as much as possible
• Do server-side detection of mobile devices; serve an extremely simplified UI to mobile devices
• Use client-side techniques like CSS media queries and feature detection (such as that done with Modernizr) to do progressive enhancement

The long version:

The most important thing to remember is that as similar as they appear, the mobile web and desktop web ARE different. The analogy I use the difference between a street and a sidewalk. Both of them are made for generally the same purpose - to get people from one location to another. However, they were designed separately and are intended for use by different modes of transport. You can drive a car on the sidewalk, and you can walk in the middle of the street, but neither experience will be optimal.

Long story short, for a good mobile site, you must design specifically for a mobile device. This doesn't mean you can't reuse logic - you definitely should. I'm just saying that using JavaScript/CSS to hide a few elements does not turn a regular site into a mobile site.

For what it's worth, I recently gave a presentation with one of my colleagues on mobile web development strategies. It is mostly targeted towards mobile web in higher education (college campuses) and my campus (UCSB), but many of the strategies and techniques are widely applicable. Interested parties can find the presentation and related resources here: https://it.ucsb.edu/groups/wsg/mobile-web-brown-bag

Resources

Server-Side Device Detection:

• DeviceAtlas
• WURFL
• 51Degrees.mobi

Client-Side Feature Support Detection / Progressive Enhancement:

• Modernizr
• EnhanceJS

Random Resources

• Mobile Web Resources (My colleague's reading list)
• W3C Mobile Web Application Best Practices

First, these days mobile doesn't necessarily mean doing the things that System.Web.Mobile come, but rather supporting the mobile use case and the limitations of mobile devices. Or, you want to strip down your app to be relevent to mobile users, and you want to do things like limit bandwidth required, browser plugins, heavy scripting and screen size required. But you actually don't need to go back to the bad old days of WAP and such.

From my reading the way forward seems to be to design for mobile first and then customise the layout using @media CSS to introduce more design/functionality concepts in more capable devices.

http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

http://www.slideshare.net/arborwebsolutions/practical-beyond-responsive-web-design