ASP.NET MVC site that works for mobile and non-mobile sites? - asp.net-mvc

Question

I am working on a website, using ASP.NET MVC3 with .aspx pages. The web site supports desktop browsers and mobile phones with the same site. The site has a single master page. I want to avoid redirecting to a mobile site, because that would duplicate a lot of html. I still intend to use the user-agent to determine when a mobile device is hitting the site, but instead of redirecting the browser, I set a flag that I use in the master page to control what HTML is generated.
I have run into trouble determining the best way to get the master page to generate the HTML I want. I have two strategies in mind to solve this problem, but I don’t know if this is the best way.
The first strategy is, to use the mobile flag to add, replace, or remove HTML content that is mobile specific.
Pro: Minimize duplication of HTML
Con: Multiple if statements.
Requires a second mobile specific .css to be downloaded. (Because the html has multiple if statements, we really need 2 css files, one for mobile and one for none mobile. We can't easily use specificity rules to deal with this in one css file).
Here is an excerpt from the master page using this strategy:
<% if (isMobile)
{
Html.RenderPartial("MobileSearchControls");
}
else
{ %>
<div id="viewTabs" class="span3">
...
</div>
<% }
%>
<%--body --%>
<div id="bd" class="row-fluid">
<% if (!isMobile)
{ %>
<div id="left-column" class="span3">
<div id='controls-and-preferences'>
<asp:ContentPlaceHolder ID="LeftColumnContent" runat="server" />
</div>
</div><!--left-column -->
<% }
%>
<div id="main" class="span9">
<div id="search-results">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</div>
</div>
<% if (!isMobile)
{ %>
<div class="span2" id='right-column'>
</div>
<% }
%>
The second strategy is divide most of the body in master page into two parts, one for mobile, and one for desktop.
Pro: Avoids downloading an additional .css file. (Because the mobile code can be in a div with id of mobile and use specificity rules in the css).
Con: Greater duplication of code.
The tags must have unique ids, even though they are in mutually exclusive code blocks.
css is more complex for mobile page, because all tags are underneath a mobile tag.
A similar excerpt for the master page using this strategy:
<% if (isMobile)
{
%>
<div id="mobile-search-controls">
<asp:ContentPlaceHolder ID="MobileSearchContent" runat="server" />
</div>
<%--body --%>
<div id="bd" class="row-fluid">
<div id="main" class="span9">
<div id="search-results">
<asp:ContentPlaceHolder ID="MobileMainContent" runat="server" />
</div>
</div>
</div>
<%--body end--%>
</div>
<%
}
else
{ %>
<div id="bd" class="row-fluid">
<div id="left-column" class="span3">
<div id='controls-and-preferences'>
<asp:ContentPlaceHolder ID="LeftColumnContent" runat="server" />
</div>
</div><!--left-column -->
<div id="main" class="span9">
<div id="search-results">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</div>
</div>
<div class="span2" id='right-column'>
</div>
</div>
<%--body end--%>
<% }
%>
Which way should I go? Is there a third better way?

Answer 1

You might want to consider using a framework such as Twitter Bootstrap (http://twitter.github.com/bootstrap/).
They have some examples that work well on devices of any resolution:
http://twitter.github.com/bootstrap/examples/fluid.html

Answer 2

you should be using css 3 media queries for things like this.. have a look at this link it has a demo
http://webdesignerwall.com/demo/adaptive-design/final.html

Answer 3

user277498,
I've used the Mobile Ready HTML5 MVC.NET template for vs:
http://visualstudiogallery.msdn.microsoft.com/9df9c61c-4d90-43e5-9aa1-a58786b7a1e4
to great effect. this basically has a viewengine that allows views to be directed twds mobile and/or normal mvc. it's actually quite 'magic' the way it works. give it a try, I've used in 3 projects now with no hiccups.