Take the 2-minute tour ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free, no registration required.

I have a website developed in ASP.NET MVC.

Now, I am looking forward to getting up a mobile interface for it. My knowledge in this regard isn't that great, so I will explain what is needed to be done. It's much like on the lines of StackOverflow or Programmers and following are the few points that need to be addressed.

  1. Much like Stack Overflow, if a site is visited from mobile, auto-detection should happen and the mobile version should be displayed.
  2. Do I need to setup some sub-domain like m.mysite.com and should I have the mobile site installed for this domain (SE sites don't do this now but Facebook does that)
  3. Lastly, How to design the website that is easily readable on all sized of screens for mobile.
share|improve this question
    
If you're willing to use something that isn't a full release yet, ASP.NET MVC 4 has some nice looking (I haven't tried them) features for mobile device detection and site skinning. asp.net/mvc/tutorials/mvc-4/aspnet-mvc-4-mobile-features –  AndyBursh Apr 26 '12 at 16:05

3 Answers 3

up vote 4 down vote accepted

Re: 1 - Shouldn't (necessarily) be your responsibility to detect mobile devices, as long as yu use the @media type correctly in your stylesheet.

Re: 2 - That would depend on whether the difference between what you want to serve mobile devices as opposed to "normal" viewers is large. If your main site is heavy on JavaScript and you want to serve your mobile users a much simpler view, use a separate subdomain. If it's pretty much the same content, you just want the presentation to be different, you don't need a subdomain, just a different stylesheet (or parts thereof).

Re: 3 - Follow best practices, use em font sizes rather than px, etc... beyond that would take quite a while to answer this part ;-)

share|improve this answer

For 1., see here: http://detectmobilebrowsers.com/

For 2., That's up to you, technically it doesn't make much of a difference.

For 3., Javascript frameworks like jQTouch or Sencha Touch might help. Beyond that, design questions are probably off-topic here.

share|improve this answer
    
jQTouch and Sencha Touch should only be used if your interface relies heavily on touch. Remember mobile internet makes external javascript files really expensive to download. Minimize your external resources as much as possible for mobile. –  Raynos Jan 23 '12 at 10:00
    
Also please don't use server-side UA sniffing to detect mobile or desktop. –  Raynos Jan 23 '12 at 10:02
    
@Raynos, while searching over the better solution for various interface requirements, I came across this SLIDE .. Let me know your views on this –  Pankaj Upadhyay Jan 23 '12 at 10:34
    
@PankajUpadhyay that's a very good slide show. –  Raynos Jan 23 '12 at 10:51

If you are using MVC 3, there is very little code to write to detect a mobile client and subsequently display the mobile view. The two small additions you'll have to make are:

  1. Override the RazorViewEngine.FindView, and check the Request.UserAgent to determine what browser is sending the request.
  2. Create a "Mobile" folder under the Views folder for a particular area, and create your mobile-styled views there.
  3. Complete the work to tell "FindView" where to get the mobile views

This separates your regular browser views from your mobile views, and eliminates the need to change your controller code.

To get started with this, you could start rolling your own (perfectly fine - you learn a lot that way), or you could leverage what others have started. I personally used a template on NuGet called "Mobile Ready HTML5", which is an MVC project that includes the pieces I described above, including HTML 5 support. Check it out, it helped me a ton:

http://tekprolixity.blogspot.com/2012/04/instant-mvc-3-mobile-app.html

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.