Your absolutely correct with your thinking, yes you absolutely need to keep them separate.

However, it doesn’t need to be as hard as you might think it is, in order to get your layout working correctly across multiple devices.

Realistically, you have 3 approaches that are considered modern practice in this arena.

1) Create a satellite site for each platform you wish to support, then in a single simple index controller, sniff the user agent and redirect to the appropriate satellite site.

2) Use media queries. Media Query support is now (and has been for some time) good enough and well supported enough to use in full production sites.

3) Use a UI toolkit such as KnockoutJS or Angular and modify class names and attributes on your layouts in real time, responding to user agent changes.

In more detail

If you decide to go with option 1, then the first thing you need to be aware of is the extra work.

Essentially, you’ll be maintaining two sites.

Your back-end however should likely still stay the same. If you use a classic nTier design with a SOLID Composition Root, then your business layer, data layer etc can all be shared, so maintaining separate sub sites does become much easier.

Option 2 on the other hand, means that you still only maintain one site, but the disadvantage you have here is one of complexity.

To use media queries successfully, you need to design your site for one platform, usually desktop, then you need to decide what rules you wish to override and for which screen widths.

While this is not strictly modifying your site based on user agent, you are still adapting your layout to a given screen width, which means that on narrower screens (such as a mobile device) you are still maintaining a readable output, while only having to change the minimum amount needed to maintain that readability.

This tends to be the route that many of the CMS’s take, especially wordpress designs, because it requires very little code, and everything can be changed directly in the CSS.

You are however limited to changing only what can be changed using CSS, and since there is still a fair bit of instability in the CSS3 spec, you may find that you still need to limit some of the changes you’d like to make.

This brings me to Option 3 (This is my preferred option) and the way I work for most of what I do.

Simply design your layout as a universal kind of layout, one which while not pretty, works generically on most devices.

Then, wire in your favorite UI toolkit. (For me this is KnockoutJS mixed with Twitter Bootstrap).

Use your UI toolkit to fill in the dynamic parts of your layout, based on a rest endpoint sniffing the UA from the request.

For example. in my CSS I might have:

.rule_for_desktop
{
  color: blah;
  width: blah;
}

.rule_for_iphone
{
  color: blah;
  width: blah;
}

.rule_for_android
{
  color: blah;
  width: blah;
}

and in my view model for knockout i might have:

var cssRule = ko.observable("rule_for_desktop");
// More code for the rest of the VM here

and in my HTML (This is based on knockout) I might have

<div id="myElement" data-bind="css: cssRule">... some content</div>

What then happens is my layout defaults to a desktop layout (or whatever I set as the default in my viewmodel.

If I then fire off an AJAX request, or perform some UA sniffing in the JS code, beacuse my ‘cssRule’ property is an observable the css rule used in my mark up instantly changes, and takes effect.