Programming the Mobile Web : Mobile Rich Internet Applications (part 2) - JavaScript Mobile UI Patterns

2. JavaScript Mobile UI Patterns

Mobile devices have had to develop alternate paths for handling common tasks.

2.1. Clear text box button

In their native UIs, touch devices have added a very nice feature to text boxes: the possibility of clearing all the text by touching a small X at the righthand side of the box (as shown in Figure 2). This is especially useful because of the lack of a keyboard. We can emulate this UI pattern easily by combining an image (or, as we’ll see later, a canvas tag) and a little JavaScript code.

Figure 2. You can see this pattern implemented in the Yahoo! website for touch devices like the iPhone.

To implement the clear button, we can use a 20×20-pixel image (great for inline images in compatible devices) with the following CSS style. The image can be shown as a div with a background image from the beginning, or only when the user starts typing. It is important to add a right padding to the input box so the X is not overlapped by text:

<style type="text/css">
div.clearx {
    background: transparent url('clearx.png') no-repeat right;
    height: 20px;
    width: 20px;
    margin-top: −26px;
    position: absolute;
    left: 235px;
}
input.clearx {
    padding: 2px 40px 2px 10px;
    width: 200px;
    height: 24px;
}

</style>

The HTML should look like this:

<input type="text" id="search" placeholder="Enter your search"
    class="clearx" />
<div class="clearx"
    onclick="document.getElementById('search').value=''"></div>

2.2. Autogrowing textarea

This UI pattern was created by the Google Mobile team and is currently used in Gmail. The problem is that if we have a large amount of text in a textarea, scrolling inside it is very painful in some browsers (Safari on iOS is one of them). The solution is to grow the textarea to fit the contents, so the user can use the normal page scrolling instead of the textarea’s.

---

Note:

All of these JavaScript UI patterns can be created using a nonintrusive, object-oriented approach with a little JavaScript work.

---

We can capture the onkeyup event and grow the textarea if necessary. We also need to capture onchange, because pasting in iOS doesn’t generate an onkeyup event.

The complete solution is available at http://www.mobilexcode.com/go/autogrowing. The code, borrowed from the Google Code Blog with a few changes, is:

<script>
// Value of the line-height CSS property for the textarea.
var TEXTAREA_LINE_HEIGHT = 13;

function grow(event) {
    var textarea = event.target;
    var newHeight = textarea.scrollHeight;
    var currentHeight = textarea.clientHeight;

    if (newHeight > currentHeight) {
        textarea.style.height = newHeight + 5 * TEXTAREA_LINE_HEIGHT + 'px';
    }
}
</script>
<textarea onkeyup="grow(event);" onchange="grow(event);" >
</textarea>

					  

---

Note:

The Google Mobile team are doing a great job with mobile web UI patterns and optimizations, and they release all the tips to the public in their blog: http://googlecode.blogspot.com.

---

2.3. Floating bar

Scrolling a large mobile page just to access a button or a link at the top of the document can be very painful. A floating bar is a great solution for avoiding this problem. A floating bar is just a full toolbar, a drop-down menu, or a mixture of both that always remains at the top (or bottom) of the page when the user scrolls the content.

It is not suitable for focus-based browsers, because there will be usability issues when the user is tabbing between links.

---

Note:

We need to create a custom floating bar solution because of the lack of position: fixed support in almost every mobile browser.

---

For floating bars to work, the browser needs to support the onscroll event. If the browser supports this event the toolbar moving can be done automatically, using a smooth animation on some browsers. You can decide whether to have the floating bar appear at the beginning of the navigation or only after scrolling.

The steps to create a floating bar (also known as floaty bar) are:

1. Create a div with the content of the floaty bar.

2. Define it as hidden off the screen with negative top values.

3. Define a WebKit transition animation (this will work only on compatible devices).

4. Capture onscroll.

5. If the value of window.scrollY (the top position of the scroll) is near zero, hide or move the div off the screen; if not, move the div (changing the top value) to the scrollY position.

---

Note:

For mobile Safari, there is a solution that will have better performance: instead of using a transition animation and changing the top value, we can use the translateY function and do a transformation animation. Transformations use hardware implementations for improved performance.

---

The following code produces a floaty bar with animation for compatible devices, similar to the one shown in Figure 3:

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
    "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><html
    xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mobile Web Test Suite</title>
<style>

    p {
        font-size: xx-large;
    }

    #floaty {
        width: 200px;
        text-align: center;
        border: 2px solid red;
        -webkit-border-radius: 5px;
        background-color: silver;
        right: 0px;
        position: absolute;
        top: −50px;
        -webkit-transition: top 0.2s ease-out;
    }

</style>
<script type="text/javascript">
window.onscroll = function() {
    var floaty = document.getElementById("floaty");
    if (window.scrollY<10) {
        // It is near the top, so we can hide the floaty bar
        floaty.style.top = "-50px"; // out of the screen
    } else {
        floaty.style.top = window.scrollY + "px";
    }
}
</script>

</head>
<body>

<h1>Floaty Bar</h1>
<div id="floaty">
    This is a floaty bar
</div>

<!-- Document goes here -->
</body>
</html>

					  

Figure 3. Here you can see my Gmail spam folder with a nice floaty toolbar at the top-right corner.

2.4. Cascading menu

A cascading menu should be used for large toolbars and only for touch devices. It can also be used in cursor-based browsers, but remember that in these browsers it may take the user a while to get the desired zone of the screen using the navigation keys.

As these menus will typically be used on touch devices, we should not use mouseover events to open and close the menu bar, and it is best to use onclick for both the opening and closing actions. We can also hide the menu when the user selects an option, scrolls the page, and moves the focus to another object.

A simple div show/hidden interaction with JavaScript will work, or (with care) you can use a JavaScript library for this purpose.

2.5. Autocomplete

An autocomplete (or autosuggest) feature to reduce the user’s typing, like the one in Figure 4, is a great feature, but it is not as simple to implement in a mobile site as it is in a desktop site. There are two kinds of autocompletes: preloaded and Ajax-based. The preloaded ones involve downloading all the possible values to suggest (not recommended for more than 2,000 values) and storing them in JavaScript variables and then, if offline storage is available, storing them in the device for future usage.

Figure 4. Google.com autocomplete on an Android device.

The first problem is the issue of network latency and consumption. If the user is using 2G technologies (GPRS, EDGE), the latency for going to the server or for preloading all the possible values can be long and costly. The second problem is the UI design, for a few reasons: generating a floating div over other elements can be problematic in many mobile browsers, and browsing between suggestions in non-touch devices can be difficult.

---

Note:

If you are going to use a JavaScript-based autocomplete solution, remember to deactivate the browser’s standard autocomplete feature using autocomplete="off" in the text input.

---

All that aside, if we can save the users a lot of typing, we will be their heroes.

So, the first conclusion is that this solution is recommended only for touch-enabled smartphones, which we suppose are connected using WiFi or a 3G network. Next, we need to think about the design. The recommendation is not to use a floating div over other content, and instead to use a hidden div that replaces or pushes down the previous content. This div will appear just below the text box, and there must be a close button at the top-right corner.

Another thing to keep in mind for touch devices without QWERTY keyboards is that when the user has the focus in the text box (and our autocomplete feature is working), the virtual keyboard will be on the screen and there will not be much space available. One solution that will ensure that as much space as possible is available for the suggestion list is to scroll the document to the text box position when the user focuses in the text box. This will leave the text input just at the top of the screen, and with the keyboard at the bottom the middle will be open for our suggestion list (as we can see in Figure 4).

---

Note:

For BlackBerry 5.0, we can create local autocomplete solutions using the new HTML 5 datalist element.

---