Making It Mobile-Friendly

“Make everything as simple as possible, but not simpler.”
    Albert Einstein

With the changes we made in the previous chapter, we now have a site that is starting to look a little bit more like a mobile-friendly website, but there are still several issues that remain. If we use our demo site and scroll the page up and down, you’ll see that the header scrolls off the page and disappears, and the list doesn’t really have any graphical flair like a mobile-styled list should have. There are many things we could address, but let’s start by fixing those two things.

Fixing the Headers

Currently the header is attached to the top of the page. If you scroll the page, the header disappears. Adding a data-position tag to the header makes that header stick at the top of the page when you scroll up or down.

<div data-role="header" data-position="fixed" data-theme="b">

That’s it!  One of the great things about using jQuery.Mobile is that it has a lot of built-in features like this that you can use easily. With this tag in place, the header will stay at the top of the screen. If the user taps the screen, he or she can also make the header appear or disappear.

Styling Our List Objects

Next let’s take a look at the menu and give that a little bit of visual pizazz. Adding the data-role and data-inset tags to the list header will make that list take on a new style. In addition, we can add a header to the list by using a list-divider item to give it a little more visual interest:

 <nav>

   <ul data-role="listview" data-inset="true">

      <li data-role="list-divider">Menu Items</li>

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

      <li>@Html.ActionLink("About", "About", "Home")</li>

      <li>@Html.ActionLink("Contact", "Contact", "Home")</li>

    </ul>

  </nav>

By making these extremely small changes, we will have a much nicer looking page:

Improved Headers and Styling of List Items

Now we’re making some progress toward making this site mobile-friendly. While viewing the home page, click on the About page link and see what happens. One thing you will notice is that you can click anywhere on that line and the action will happen. You don’t have to be restricted to just clicking on the word About.

If you’ve been following along (and not forging ahead on your own), when you click on the About link, you should see something like the right half of the previous image. Notice anything missing? You should notice that there is no back button in the header bar. Most mobile applications keep track of their context and provide you with a way to go back easily. You might be tempted to reply that the user can always just use the Back button in the browser, and that would work in many cases. But what if this goes into a full-screen web app mode? As you’ll see in Chapter 7, we can set up our applications to take over the screen and emulate a native app, and in that case, there is no Back button, so we do need to deal with this.

Another thing that’s very noticeable is that we’re also showing the menu on the Home page and the About page, which is redundant. On a desktop, users expect to have that menu bar at the top of the screen. But you have to remember that this is a mobile device with a tiny screen—we want to maximize our real estate and only show information that is absolutely necessary on each page. Our goal here is to create a mobile-friendly site and also a desktop-friendly site at the same time, so we need to customize that as well. Our next step would be to remove that menu and add in the Back button functionality.

Detour: Why do we need three copies of everything?

Before we head down the path of adding in a Back button, let’s take a quick side trip. Take a look at the Views folder and see if you notice anything that seems a bit unusual:

Views Folder Contents

When we created a mobile-friendly view of the Index page, we copied that file to Index.Phone.cshtml and Index.Tablet.cshtml, and put in special layout commands in each of those. We haven’t done that yet with the About view, so how did that get a mobile view? And why do we even need these two extra files if the About page worked without them?

The answer is that by simply putting the layout files out there, any page that does not have a *.Phone or *.Tablet counterpart will load the default page, and if it matches up with our DisplayMode definitions it will use the _Layout.Phone or _Layout.Tablet layout file. That may or may not be what we want. If our goal is to create a unique experience across all three platforms, we’ll want to supply a unique version of each file. That does lead to some maintenance issues if you have your content replicated three times, but we’ll touch on how to address that in Chapter 8.

Adding Home and Back Buttons

For now, our number one goal is to put a Back button in our toolbar, so let’s get back to that. Typically, there are two basic buttons you will expect to find in the upper left corner: a Back button or a Home button. Many times a Back button is all you need, but there are times when you don’t want to go back to the previous screen so you want a fixed-behavior Home button. For example, if you present a list of editable items to a user, and then he or she edits an item and clicks Save, you don’t want the user to click the Back button and be taken back to the edit screen they just left. The old data would still be present in the list, so we’ll have to handle that scenario. (Whew! We’re getting a lot of things on our to-do list!)

Let’s start by editing our Layout file and adding code for an optional Back or Home button in the header. Open this file in the editor and insert the following code in the div with the data-role=header:

<div data-role="header" data-position="fixed" data-theme="b">

  <h1>@ViewBag.Title</h1>

@{

  bool ShowBackButton = false;

  bool ShowHomeButton = false;

  if (ViewBag.ShowBackButton != null &&

      ViewBag.ShowBackButton == true)

  {

    ShowBackButton = true;

  }

  if (ViewBag.ShowHomeButton != null &&

      ViewBag.ShowHomeButton == true)

  {

    ShowHomeButton = true;

  }

  if (ShowBackButton)

  {

    <a data-rel="back" data-role="button"

       data-transition="slide" data-direction="reverse"

       data-icon="back">Back</a>

  }

  if (ShowHomeButton)

  {

    <a href="@Url.Action("Index", "Home")" data-role="button"

       data-transition="slide" data-direction="reverse"

       data-icon="home">Home</a>

  }

}

</div>

The data-rel="back" tag is another special tag for jQuery.Mobile and prompts it to keep track of the current stack of pages. When you click on this button it will go back to the previous page (this is very similar to onclick="history.back()" in JavaScript that you are probably familiar with). The transition, direction, and icon tags decorate the button a bit more and give it some default behaviors.

There is also an alternative way of doing this. You can actually add a “data-add-back-btn” tag on the page div like this:

<div data-role="page" data-theme="b" data-add-back-btn="true">

  <div data-role="header" data-position="fixed" data-theme="b">

  <h1>@ViewBag.Title</h1>

</div>

Both of these work, but they do have one small gotcha: they use the stack within jQuery.Mobile, which changes depending on how the user arrives at the page. If the user bookmarks your secondary page then comes back to it later—guess what? The Back button in the second version will be gone if they navigate directly to the page, and if you use the first technique, the Back button will be there but it may not do anything. If that’s a concern, you may want to use the Home button to link directly back to the home page.

Next we’ll create a unique version of About.cshtml for our phone and tablet. Copy that file and paste it twice into the Home directory, and then rename those files to About.Phone.cshtml and About.Tablet.cshtml. Open them in the editor and insert the Layout assignment and the ViewBag setting (for either the ShowBackButton or the ShowHomeButton) so that the start of the file looks like the following code sample:

@{

  Layout = "../Shared/_Layout.Phone.cshtml";

  ViewBag.ShowBackButton = true;

}

@{ ViewBag.Title = "About"; }

<hgroup class="title">

  <h1>@ViewBag.Title.</h1>

  <h2>@ViewBag.Message</h2>

</hgroup>

...the rest of the file...

Do the same with the tablet version by inserting the following lines at the top so that it looks like the following code sample:

@{

  Layout = "../Shared/_Layout.Tablet.cshtml";

  ViewBag.ShowBackButton = true;

}

@{ ViewBag.Title = "About"; }

<hgroup class="title">

  <h1>@ViewBag.Title.</h1>

  <h2>@ViewBag.Message</h2>

</hgroup>

...the rest of the file...

That’s it. Now when you try running it, you have a website that’s finally starting to look a bit like a mobile application.

Application with Home and Back Buttons

In this chapter, we’ve added fixed headers, nice-looking menus, back and home buttons, and a few other things that make our website look a little bit more like a mobile app. We can extend it even further with a few more enhancements, but this is a good start with only a few lines of code.