Microsoft 70-486: Plan an adaptive UI layout

Exam Objectives

Plan for running applications in browsers on multiple devices (screen resolution, CSS, HTML), plan for mobile web applications

Quick Overview of Training Materials

Exam Ref 70-486: Developing ASP.NET MVC 4 Web Applications - Objective 2.5
Programming ASP.NET MVC 4 (OReilly) - Chapter 10 (Mobile Web Development)
Professional ASP.NET MVC 5 (WROX) - Chapter 16 (Advanced Topics - Mobile Support)
MSDN - Creating Mobile-Optimized Views in ASP.NET MVC 4
jQuery Mobile Official Site
YouTube: jQuery Mobile 101, Intro to jQuery Mobile
ASP.NET MVC 4 Mobile Features

Display Modes

While adaptive rendering will allow a single view to display properly on a variety of display sizes, there are cases where optimizing a view for mobile viewing requires serving up a completely different view file.  Display modes is a mechanism for this in ASP.NET.  By default, two types of display modes are available:  The default display mode, which is what our views use by default, and the "mobile" display mode.  A razor view using the default mode is simply Index.cshtml, whereas the mobile version of the same view is called Index.Mobile.cshtml.  Because the "mobile" display mode is cooked into the framework as a convention, nothing beyond creating the view is necessary to put it to work.  Devices that are identified as "mobile" are served the Index.Mobile.cshtml view.  The example below shows the Mobile view being served up to the simulated iPhone, while the simulated Tablet gets the default view.  To emphasize that the mobile display mode is device based and not sized based, I changed the size on the Nexus 10 to match the iPhone (the Nexus was still served the default view):

Other display modes may be created by registering with DisplayModeProvider.  In the appliction_start method of the Global.asax file, include something to this effect:

             
DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("Nexus")
{
    ContextCondition = (context => context.GetOverriddenUserAgent().
        IndexOf("Nexus", StringComparison.InvariantCultureIgnoreCase) >= 0)
});
 

I created an Index.Nexus.cshtml file that just says "NEXUS VIEW!!" in the jumbotron.  This is the result when I spoof the Nexus 5:

The WROX text points out the ContextCondition isn't limited to checking the user agent string. It isn't even required to use the context at all.  Any predicate expression can be used (but just because you CAN doesn't mean you SHOULD...).

While my first reaction to display modes was "why would I want to do that, it creates so much more code to maintain, when I could use one well designed adaptive view to serve everyone..." but Dino Esposito makes a pretty good argument for using multiple views.  There may be instances where efficiently supporting devices with radically different capabilities means serving up different views.

jQuery Mobile

The jQuery Mobile site describes itself thus:

jQuery Mobile is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices. It is built on the rock-solid jQuery and jQuery UI foundation, and offers Ajax navigation with page transitions, touch events, and various widgets. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design.

jQuery Mobile is a UI framework for developing web applications that perform well across different browsers and operating systems.  jQuery Mobile uses unobtrusive HTML attributes to define the layout and behavior of the UI.  Pages created with JQM can use themes created with Themeroller.
The wikipedia page gives a pretty good overview of the framework, and the tutorial videos listed above demonstrate it's use.

jQuery Mobile can be added to existing projects by installing it's nuget package, and the MVC 4 Mobile application template includes JQM by default.  Here is the what the default home view code looks like:

@{
    ViewBag.Title = "Home Page";
}
 
<h2>@ViewBag.Message</h2>
<p>
    To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" 
     title="ASP.NET MVC Website">http://asp.net/mvc</a>.
</p>
 
<ul data-role="listview" data-inset="true">
    <li data-role="list-divider">Navigation</li>
    <li>@Html.ActionLink("About", "About", "Home")</li>
    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>

Eww... not too pretty but then it's just the template

Designing for Mobile

In Visual Studio 2012, there is an MVC 4 template specifically for mobile.  It is still accessible in VS 2013 when you select "Visual Studio 2012" under "Web" templates, then select the mobile template as seen below:

This mobile template includes jQuery Mobile, integrating it into the _Layout view.  The _Layout view also contains a meta tag defining the viewport.  This template does not exist for the MVC 5 project template, probably because MVC 5 uses Bootstrap, which is already geared toward mobile.  Bootstrap utilizes adaptive rendering based on media queries to adjust to different display sizes.  Out of the box, the new templates will do things like collapsing the navigation menu to a drop down when the screen width falls below a certain threshold.  

See Objective 2.4 

There is a LOT of overlap between this objectives 2.4 and 2.5.  Study them together.  The divisions I made, content wise, between them were pretty arbitrary, as evidenced by the fact that they reference the exact same chapers in the OReilly and WROX books.