I'm looking for 2nd & 3rd opinions on a general mobile strategy for a website I work with. We have decided that tablets generally have an acceptable experience with our site (especially in landscape orientation) but mobile phones do not.

The site has an extensive and well-documented back-end, and recently (~1.5 years ago) got a new front-end built in MVC2. At the time, we had designs made for mobile views of specific pages, but nothing was done to implement them.

Now we are circling back and attempting to implement those designs. Since development of the site occurred, the developer who had first come up with the overall strategy has left the company. Whatever strategy he may have intended to use for adding in mobile views was not documented, which leaves us working somewhat blind.

As I understand it, having never developed mobile views for an application before, we have a few options:

  1. We can create an entirely separate site and direct mobile users there. I'm sure the mobile site could live in the same overall solution, but might need a different IIS site/binding/IP?

  2. We could upgrade the project to MVC4 to take advantage of the features it has for mobile sites and site skinning. I'm unsure of the wisdom of this - wouldn't we need to rewrite all of the '.as[p|c]x' files we currently use as Views as '.cshtml' files?

  3. We could simply use media queries to swap in a different CSS for the existing site (based on screen size). This seems most likely to me from a time/effort standpoint, but my research has lead me to some potential problems: we use jQueryUI extensively, and I understand jQuery Mobile doesn't play nicely with it. I haven't been able to find a way to use media queries to determine which scripts to import (which makes sense, since they are CSS tools) and I understand that sometimes the sizes javascript can see (through 'window' or 'document') don't always match what CSS media queries see.

Obviously, I can't simply ask you guys, "What should I do?" - the correct way to implement a mobile site depends on a large number of factors and none of you are privy to most of the details you'd need to make that call.

Instead, I simply want to make sure that I don't have any glaring errors in my short breakdown of the 3 main strategies listed above. Are there other strategies I haven't considered? Are there hidden caveats or gotchas in the ones I've listed? Is the jQuery Mobile/UI interaction problem solved?

In short, based on the limited details I've provided, is there anything I don't appear to know or have considered with regards to choosing a strategy for mobile implementation?