Adaptive Design: the very impressive MVC Display Modes addition to MVC 4

I have recently began development on a website where Adaptive Design has been spec’d.

There are a few different approaches for choosing where to adapt, the most common being rendering different layouts based on predefined screen size ranges, but how many variants can differ greatly site to site.

In our case we have drawn a line in the sand and are going with a desktop, mobile and tablet layout. It's quite common to see Adaptive and Responsive design achieved through 100% client side solutions. That is great if you can get away with it.

In the case of this project, it's a transactional site with large amounts of tabular data. The mobile variant will need to have very different UI in places. So we have no choice, there will be times when the server side output must to change to accommodate the requirements.

The ideal solution is to be able to render alternate views based on the user's device in MVC per device while sharing a common model.

The solution I came up with in the end is a mashup of 51 Degrees mobile detection library and the new "Display Mode Provider" feature in MVC 4.

I was expecting to have to develop a custom solution to manage the switching of views but was very impressed when I discovered the new MVC Display Modes addition to MVC 4. The concept is that you define additional Display Modes in your global.ascx. A Display Mode is essentially a variant of the standard view content. In our case we are adding Display Modes for Mobile and Tablet, since they are variants of the desktop site.

A new Display Mode is defined with a name and a ContextCondition. This is the full HttpContext object so you have access to virtually everything that you'd ever want to factor in, for example the Browser and Cookie objects.

This is where I utilized the 51 Degrees detection library because of its comprehensive database and it's ability to easily differentiate between Mobile and Tablet devices. In this project's case for the mobile and tablet versions we will be serving out touch optimised UI, if we were to do a simple screen size check, it could result in a desktop user being served one of the touch versions. For this case we want to be sure that the user is actually on a Tablet or Mobile device and doesn’t just happen to have a small screen.

On my tablet DisplayModeProvider, my ContextCondition is (context => context.Request.Browser["IsTablet"] == "True"). The IsTablet property only exists in 51 Degree's library. For more information on 51 Degrees library, see my earlier web development blog.

Once a DisplayMode is defined, a variant of any Layout, View or Partial View can be created. It’s as simple as creating a new version with the display mode name as the suffix. For example Login.cshtml would be the default (desktop) version and Login.tablet.cshtml would be the tablet version. DotNet will automatically look for a version of each razor file (or any view engine fir that matter) based on the current display mode and will fall back to the default version, so you only create one when you wish to override the desktop view.

I was very impressed by this feature, it has saved me hours of headache and in the end is an extremely clean and logical approach to the problem.