How to create a custom, mobile version of your MVC website

Objective: Take your existing MVC website and create a great mobile experience.

Step 1 – Get a mobile emulator

Before you can start building a custom, mobile version of your MVC website you need a testing tool that emulates exactly how your website will look and behave on different mobile devices – iPhone 5, Samsung Galaxy, Kindle Fire, etc. Here’s a mobile browser emulator I like and it’s FREE:

Keystone Systems MITE (Mobile Internet Testing Environment) - http://mite.keynote.com/

Step 2 – Get jQuery mobile

jQuery Mobile is a library that adds an elegant mobile UI framework to your MVC project.  jQuery Mobile allows all mobile browsers to display the basic content of a web page, while allowing more powerful browsers and devices to have a richer display. This ability is known as progressive enhancement.

Step 2a – Open your MVC 4 project in Visual Studio 2012

Step 2b – In the Package Manager Console, enter Install-Package jQuery.Mobile.MVC

Step 3b – Add the following line as the last line in the Application_Start method in Global.asax.cs:

BundleMobileConfig.RegisterBundles(BundleTable.Bundles);
 

MVC site after  adding  jQuery mobile

MVC site before adding  jQuery mobile

 

 

 

 

Step 3 – Identify which views have a bad mobile experience

To identify which issues exist with your MVC website, open MITE, click “browse website” and select a mobile device. Browse each MVC view, try different devices, and make a list of issues.

Here are some common issues with displaying MVC views on mobile devices:

-- Menus or result sets that are too wide

-- Too much content on a mobile view

 

Here’s an existing MVC view with a wide result set. This view looks fine on a desktop browser, but not on a mobile browser. We will show how to improve this view in the next section.

Step 4 – Enhance your views to create a great mobile experience

MVC 4 provides an easy way to add mobile specific views to your project – just create a copy of an existing MVC view and add the extension “.Mobile.cshtml”. For example, if you have an existing view called “Student.cshtml”, copy Student.cshtml to a new file called “Student.Mobile.cshtml”.

jQuery Mobile provides a set of mobile-friendly UI widgets. These widgets can be used to create custom views with an improved UI for mobile browsers.

Here’s an example of the jQuery Mobile  listview widget “data-role="listview"”:

<ul data-role="listview">

    <li>@Html.ActionLink("Students", "Index", "Student")</li>

    <li>@Html.ActionLink("Courses", "Index", "Course")</li>

    <li>@Html.ActionLink("Instructors", "Index", "Instructor")</li>

    <li>@Html.ActionLink("Departments", "Index", "Department")</li>

    <li>@Html.ActionLink("Activities", "Index", "Student")</li>

    <li>@Html.ActionLink("Campus", "Index", "Student")</li>

    <li>@Html.ActionLink("Cafeteria", "Index", "Student")</li>

    <li>@Html.ActionLink("Library", "Index", "Student")</li>

</ul>

 

Use MITE to display the updated mobile view:

We can also use the listview widget to solve the wide result set issue:

<ul data-role="listview">

    @foreach(var student in Model) {

        <li>

            <a href="@Url.Action("StudentsByName", new { student.Name })">

                <h3>@student.Name</h3>

                <p>@string.Join(", ", student.Grade), @student.Major</p>

                <p>DOB: @student.Birthdate.ToShortDateString()</p>

            </a>

        </li>                                        

    }  

</ul>

Here’s the updated view, “Student.Mobile.cshtml”: 

Conclusion

If you’re already familiar with creating ASP.NET MVC websites it’s not too difficult to create a custom, mobile version of your MVC website using MVC 4 and jQuery Mobile. I hope this article helps get you started. If you have additional suggestions or recommendations for creating a great mobile experience please leave a comment.