Building a Mobile Site: Mobile Web Widgets

In this module, we’ll introduce Uranium, Moovweb’s open-source set of JavaScript-based HTML widgets.

We’ll expand on some of the concepts we learned in Starting a Mobile Site with Moovweb by taking a detailed look at how to implement essential widgets for mobile design as well as other features of the Uranium library.

Prerequisites: Starting a Mobile Site

Outline


Introduction to Uranium

In this lesson we’ll be learning about the Uranium framework. Follow along at uranium.io!

Uranium is a set of widgets that are most commonly used when designing mobile websites. These include:

Uranium is only 15KB zipped and it requires zero JavaScript programming to use!

It works by assigning your existing HTML nodes attributes such as the type of widget, the button to enable it, and the content to be enabled. As long as your DOM has the proper structure, it will work as soon as your attributes are assigned!


Toggler Widget

You may have noticed that we have already been setting up some of these attributes throughout the previous labs.

Open the header.ts file and add this line: attribute("data-ur-set", "toggler") inside the #Header scope.

  $(".//div[@id='Header']") {
    attribute("data-ur-set", "toggler")
    $("./div[@id='Logo']") {

Now when you click on the menu icon, your categories should appear below!

Checkpoint 1

This is because we have set up all the proper attributes for a Uranium toggler! The JavaScript takes care of the rest.

We’re going to use some widgets on the category page (e.g., http://igadgetcommerce.com/shop-computer-tablets/). The first widget we will use is the toggler — we’re going to use it to create an accordion that will show/hide the “Popular Brands” category.

If you haven’t done already, create a category.ts and _category.scss file in your project. Set up the mappings so that URLs with “shop-“ in them import the category files.

Make sure to navigate to one of the category pages with “shop-“ in the URL!

Let’s go over how to implement a simple show-hide accordion using the toggler widget.

To implement the toggler widget, you need 3 elements: a wrapper for your widget, a button to show/hide your content, and the content itself. These 3 elements are designated by the attributes:

The main idea here is to redesign the existing iGadget DOM structure to fit the structure we need for Uranium. Once that structure is set up (or if it already exists), all we have to do is assign the proper attributes.

Your mission is to turn the “Popular Brands” lists into accordions. When either title is clicked, the subcategories should appear.

  1. Starting in category.ts, add the class "_category" to the <body>.
  2. Remove the following items from the <body>: a <div> with class "NewsletterSubscription" (HINT: this XPath might be useful: .//div[contains(@class, 'NewsletterSubscription')]).
  3. Scope into #Wrapper and then .Left. This selects the wrapper for both of the items we want to accordionize.
  4. Select the wrapper element for “Shop by Brand” — it will have the ID "SideCategoryShopByBrand". Assign this element the attribute data-ur-set="toggler".
  5. Select the <h2>s inside those togglers and give them the class "mw_bar1" and designate them as the buttons of the toggler (by giving them the attribute data-ur-toggler-component="button").
  6. Inside the <h2>, use insert() to add a <div> with class "mw_indicator" — we’ll use this later on when we style.
  7. Outside of the <h2> scope, select the <div> child of #SideCategoryShopByBrand and assign it the attribute data-ur-toggler-component="content".
  8. Select every <a> child of the content <div> and insert a <div> with the class "mw_arrow" inside it.

We’ll be using all these classes for styling purposes later on.

Once you’ve followed each of those steps, you should be able to click the “Popular Brands” header and have the brand list items appear and disappear!

Apply the same code to #SideCategoryShopByPrice.

If you’re having trouble and are eager to see some results, check out the source code.

Show me the final category.ts file.
$("./body") {
  add_class("mw_category")
  
  $("./div[@id='Container']/div[@id='Outer']") {
    $("./div[@id='Wrapper']") {

      $("./div[@class='Left']") {
        # Create Togglers
        $("./div[@id='SideShopByBrand' or @id='SideCategoryShopByPrice']") {
          attribute("data-ur-set", "toggler")
          $("./h2") {
            attribute("data-ur-toggler-component", "button")
            insert("div", class: "mw_indicator")
          }
          $("./div") {
            attribute("data-ur-toggler-component", "content")
            $(".//li/a") {
              insert("div", class: "mw_arrow")
            }
          }
        }
  
        $(".//div[contains(@class, 'NewsletterSubscription')]") {
          remove()
        }
      }
  
      $("./div[@class='Content ']") {
        $("./div[@id='CategoryHeading']") {
          $("./div[@class='BlockContent']") {
            # Move page title on top of the content area
            $("./h2") {
              move_to("../../../../div[@class='Left']", "top")
            }
            $("./div[@class='FloatRight SortBox']") {
              $("./form") {
                wrap_text_children("span")
              }
            }
          }
        }
      }
    }
  }
}

Styling

The next step in the process of building a toggler is the styling that needs to be applied.

We need to style the <ul> content that appears (at the moment, it is just a list of blue links).

You might end up with something like:

Checkpoint 2

Spriting

Remember when we added sprites to our project in the mobile styling lesson? We used them a little bit in those styles, but here we’re going to explain in a little more detail how to use them in our iGadgetCommerce project.

There are a few ways of applying sprites as background images.

In this case, we’ll use the Sass @include function to apply our sprites to .mw_arrow elements we created for this purpose. Include the menu_go.png sprite and float it right:

.mw_arrow {
  @include sprites-menu_go;
  float: right;
}

Refresh and you’ll see the subcategories have arrows next to them, better to indicate that they are clickable.

Checkpoint 3

Conditional Spriting

Let’s use spriting for our Uranium buttons. We will make it so that when the button is loaded, there will be a plus sign on the bar. When the button is clicked, it will be changed to a minus sign. We can use the "enabled" and "disabled" states of the button to achieve this.

In our stylesheet, under where we assign the <h2> elements a height, padding, and margin, scope into .mw_indicator and float that element right.

To make the sprites conditional, we use the "enabled" and "disabled" states provided to you by Uranium. After we make the .mw_indicator float right (after that scope is closed), use the “&” to indicate your logic:

&[data-ur-state="disabled"] {
  > .mw_indicator {
    @extend .sprites-plus;
  }
}
&[data-ur-state="enabled"] {
  > .mw_indicator {
    @extend .sprites-minus;
  }
}

Checkpoint 4

Notice this time to apply sprites, we use the @extend function. In this way, your button components will show the plus icons when they are collapsed (“disabled”), and the minus icons when they are enabled.

You can also use sprites more directly in a project by using Tritium to assign classes to pre-existing elements.


Testing for Mobile

Finally, it’s always important to test your site in a mobile environment.

One site you can use to do this is: iphone4simulator.com. Also, check out the Testing Your Site page for more information.

If you’ve been following along with the same styles from our source code, you’ll notice that our site looks fine in the desktop browser, but when we test it on the mobile browser we see the title is squished into the logo and the search box drops below the header links.

We can fix these problems by giving our header a minimum width and narrowing down the search box so it fits into that width with the header links.

Testing Tips

  1. Whenever you encounter a problem, check the desktop website to make sure it’s something you’ve done locally and not a problem on their end.
  2. Using a simulator is fine for everyday development, but always do a full QA using actual mobile devices before launching to production.