views:

25

answers:

2

I've been thinking about this recently and I don't know a really nice and tidy way of creating a mobile version of an existing or new MVC2 website/app.

I think the easiest way would be to just use a different stylesheet depending on whether a mobile was detected but sometime you need to change the view content too if you have massive inline images everywhere or for other reasons.

What is a good approach for this? Is there a way of theming fairly easily in MVC2?

+1  A: 

Well MVC is just your server-side technology, what you should ask to yourself is "what is the best practice to create a mobile web site, regardless of the server side tech".

In my opinion, creating a well-formed and semantic (x)html is the first step. As you say, the most logical thing to do is create different style sheets for different media types, and you're right.

As for the problems you mention, like inline images, consider this: are those images content or presentation?

In the first case, they should be present even in the mobile version. In the latter, they are defined in the style sheet, so you can simply avoid them in the mobile css.

The only exception I can think of is when you want to provide different functionality on mobile, or if you're forced to, i.e. on pages that rely heavily on JS and those scripts wouldn't run on mobile browsers. In this case, you might want to create different versions of those pages and serve the appropriate version based on the user agent.

Matteo Mosca
But what do you do for images that are not defined in the CSS? Just set display:none on the mobile version?
Andi
"create different versions of those pages and serve the appropriate version based on the user agent." - Was wondering of a nice way of doing this for said pages in MVC
Andi
For the images, well, it depends. Are they important content even for mobile? In that case you should display them. Otherwise a display:none would be appropriate.For the other issue: you could create 2 views for your actionmethod. Then in the actionmethod you can read the user agent, and depending on it, render one view or another.
Matteo Mosca
+1  A: 

Check the source code for NerdDrinner. They've implementated a MobileCapableWebFormViewEngine class which inherits from base WebFormViewEngine class. The MobileCapableWebFormViewEngine uses the HTTPContext to decide which View to render in the client. This'll make more sense when you see the source code

heads5150
I have worked through most of ner dinner but must of stopped before the mobile stuff. Will check it out.
Andi