|Mobile programming question|
How do you associate links with pressing a number?
I've stripped down the output and menus for one of my [perl, html] scripts so that it works on my Motorola Razr screen. The info is very useful out in the field, but usually needs 2 - 3 menu choices to be made. Instead of having to scroll to each and select them (works, but awkward) how do I set it so that it's more like this:
where clicking the number on the keypad equals scrolling to the link and clicking it? Lots of mobile content works this way, I just can't figure out how to do it. Any ideas?
Thanks for your help!
Thank you. I was able to figure it out from that. For the benefit of others, here's what I found:
The link above is to the DotMobi Web Developers Guide, a 91 page pdf manual on lots of issues about designing sites for the web. It was necessary to register for the site to download the manual. On page 43 I learned that what I was looking for is called an accesskey.
|The primary navigation should include an assigned accesskey that corresponds to a keypad number key whenever possible: |
<li><a href="news.html" accesskey="1">News</a></li>
This code links the News item to the “1” key on the mobile keypad and displays the number 1 by it (if the <li> it is part of is the first in the list, of course).
You can tuck code inside any A, AREA, BUTTON, INPUT, LABEL, and LEGEND, and TEXTAREA tags. By putting accesskey="3" (then 4, then 5) inside the INPUT tag on a radio button, pressing that number automatically selects that radio option.
|<input type="radio" name="when" value="now" accesskey="3"> |
Slick. Now for the submit. Same basic deal:
|<input type="submit" name="Submit" accesskey="6" value="Submit"> |
So press 6 and it's submitted. No navigating to the submit button, no selecting the button, just press 6 on the phone keypad from anywhere and away it goes.
But I had two dropdown lists. They were in a SELECT tag, so I used the LABEL tag to make it work. When you hit the keypad number (2 in this case) it jumped to the dropdown and highlighted the options so you could move up or down the list and then select your choice. This looked like this:
|<p>Choose widget size:</p> |
<LABEL for="howbig" accesskey="2">
<select name="howbig" id="howbig">
<option value='big' >BIG</option>
<option value='small' >small</option>
So my web application is now ported to mobile and it works great. The first step was to really strip everything down as much as possible for the small screen and limited data size allowed, and reduce navigation options. Even so, clicking around a very small page was a pain. Using "accesskey" makes it a breeze, just click a few numbers and done.
The one thing I haven't done yet is put visible numbers next to the options to tip off users that pressing that key gets that result. This is easy to implement, but I'm going to play with what looks best for a bit.