Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
This course surveys the core principles and techniques essential to building web sites for mobile devices. Author Joe Marini introduces the mobile context, sheds light on its unique coding requirements, and discusses interface design techniques that enhance existing sites for mobile viewing. The course shows how to approach designing for mobile form factors such as smaller screens and finger-based interaction, along with how to incorporate CSS3 and HTML5 capabilities, such as geolocation, local storage, and media queries.
Designing forms to work well on mobile is also something you're going to have to pay close attention to. Now, forms on mobile devices are naturally constrained by several things. There is the width of the screen, there is the device's input capabilities, and so on. There is, however, a nice basic checklist that you can follow to make sure that your mobile web forms work pretty well. First, minimize the number of screens that the user has to pass through, because this increases the amount of time the user has to spend focusing on input and responding to responses.
Also, each form has to go through an individual HTTP request and so on. So if you can minimize the number of screens, that helps a lot. Also, try to use native web form controls instead of customs ones when possible. A good example of this is using the select list. Most mobile web browsers provide a native implementation of the select list that is well suited to the form factor and the native experience on that device. So when you have a chance, try to use the native form controls, because in many cases, especially in the future, mobile web browsers will provide platform-native and optimized ones for form entry.
Use top-aligned form labels instead of labels that are left or right of input fields, and we'll take a look at an example of that and why you should do it. Give the user the option to display password characters as they enter them. I don't know about you, but whenever I am using level device I usually have it right in front of my face, and it's not very often that I've got somebody over my shoulder jumping around trying to see my password. So if you have a form on your web site that requires the user to enter a password, consider giving them the option to enter that password as fully visible characters.
Then finally, use the new HTML5 form input types, and we'll go through a quick review of those as we get to them. First, let's look at using top-aligned form field labels. Usually you'll see a form on a web page screen that looks something like this, where you have the label next to the edit field where the user is going to enter data. The problem with this approach is that on some form factors, when the user puts the focus in the edit field, the user experience zooms in, so the user can focus on the form field.
You can see that the problem here is that when that happens the label gets cut off, and you're like, "Okay, now which field was I entering data in?" So this can cause confusion. However, if you use top-aligned form fields, that won't happen. You can see here that in this case the form fields are underneath the labels that they go with. This has several advantages. First, you don't need any fancy CSS or tables to lay the form out. It's just optimized for the vertical scrolling experience.
The labels also stay visible when the form is zoomed in, and they work well when using left-to-right or right-to-left text. In some languages, the text goes from right to left and when using this kind of form label layout, it works well, regardless of the direction of the language text. Localization is also easier. If the field names grow when translated-- so for example, if I were to translate those labels into German, then they triple in size-- they don't cause the form to reflow, or at least it will reflow vertically.
Top-aligned labels lend themselves to vertical scrolling. The user can just use their thumb and scroll through the contents. Let's look at handling password entry. Giving user the option to show characters when entering passwords results in a better experience. So again, let's imagine that we have our form on our web page. You can see that in this case entering a password where you get all dots is not a very good experience, because as I'm typing on a small keyboard, I might more easily make a mistake. If I make a mistake, it's hard for me to see what the password is.
Now, some platforms do this automatically for you. They show you each character as you type it in. Again, this is better, but it's not the best experience, because I might miss it, or I can't see the whole password, and if I am moving around while I am doing this, it's not entirely obvious that I'll be able to see the character before it disappears behind the dot. So give the user an experience of something like this, where they have a check box they can check off, and if they choose to, they can show the characters, but if they're in an environment where they're surrounded by people, or it's not private, then they can choose to uncheck that box and enter the characters normally in a normal password-entry format.
Finally, let's use the new HTML5 form input types. Now I've got another title here on lynda.com that focuses exclusively on web forms and it covers these new form input types, called HTML5 Web Forms In-Depth, but I am going to quickly review them here for use in the mobile context. HTML file defines more than a dozen new input types, and you can use them right now, because they will fall back to plain text fields in older browsers. There are two types of form enhancements. There are input types, which give a hint to the browser to display a more appropriate user interface for certain kinds of fields, and there's input attributes, which provide enhanced interactivity or other functionality on the form field, for example, giving the form field the autofocus, or making it required, or so on.
Now, I am going to focus here on the input types because that's what's most germane to the mobile context. And there are input types for email, URL, number range, and so forth, and we'll see examples of these in just a moment. So let's go ahead and jump over to the code and take a look at some of the concepts we've discussed here. So here we are in the code, and what I am going to do in this example is take a form that's using form labels that are on the left side of input fields and adapt it to use top-aligned labels, and I am going to do that in a way where each one of the form factors gets the form laid out appropriately.
So let's take a look at the code. Right here, you can see I have this style sheet defined for a label, and you can see here that I'm setting a width and a text align, and you've probably seen something like this in forms that you've used. So here are these two form inputs right here, text and password, and I've got a username and password label next to each. So let's see how that looks in the browser. You can see that the labels are right-aligned so that the colons line up with each other and the form input fields are next to each other right here on the labels.
So if I resize the window, you'll see that what happens, however, is that in the case where we want the labels to be top-aligned, there is this width over here that maybe looks okay in the desktop case, but in the mobile case it doesn't look so good. So what we are going to do is fix that, and I'm going to go back into the code. So what I am going to do is go over to my snippets file and under the Mobile Forms section I am going to copy these lines right here. Now we haven't covered media queries in depth yet-- that's going to come later in the chapter--but this is a little trick that you can use to make the labels line up on the top of input fields when they're in the mobile form factor and behave otherwise when they're on the desktop.
So I am going to copy that code, and I want to come over here and then down below my original label style sheet, I am going to paste that in. So just in a nutshell, what this is doing is saying, "Hey, on screens where the max width is 480 pixels, display the label as a block element instead of an in-line block element and have the width to set to auto instead of whatever the width was set up here." So if you've got form fields that are laid out right-aligned using a fixed width like this, this is a neat little trick that you can use.
So I am going to save that. Let's go back to the browsers. In this case, we are going to look at them in the mobile browsers to see how they look both before and after. So I am going to go back to the desktop. And before I show you the example, what I am first going to do is show it to you in Android and in Windows Phone, and you can see that before I refresh the page the layout here is not really optimal for a mobile. What we really want is to have these labels on top of the form fields. So what I am going to do then is copy the file that I just edited over to the web server.
So I am going to copy this into my server, and I am going to replace it. Okay, now I am going to refresh, so I will click in here, hit Return And you can see that in this case now we've got form labels that are left-aligned with the screen and above the input, and I will do the same thing over here on Windows Phone, and you can see that the same thing happened. I now have a top-aligned label on top of the input field. And let's go back to the desktop browser.
And if I refresh, the behavior is still the same in the desktop where we have the left-aligned label, but in the mobile browsers it looks correct. Now, let's take a look at the new input types on Safari for mobile. So here we are on the Mac, and I've got my iPhone Simulator running, which you should have if you have the Xcode development environment installed. And I am going show the HTML5 form input types on Mobile Safari, because Mobile Safari has really good support for the new input types in HTML5.
So this is the document that I am going to be working on, and you can see I haven't put them in yet. The URL that I am looking at is the mobileforms_start example, which is in your exercise files on the local web server, and I've copied it in here, and it's also in your Exercise Files folder. So following the workflow from before, I'll edit the file in the exercise files and then copy it over to the web server. So I am going to start by opening up the mobileforms_start in my Xcode editor, and here we are. And I'll scroll down and you can see that this form right here, this is where we are going to put the new HTML5 input types, and to do that, I am actually going to open up my snippet file.
So here in the examples folder, I am going to open this with Xcode. Here's my snippets. I am going to scroll down to the Mobile Forms section, and I am going to copy this code right here. And I am going to go over to the mobileform_start page, and I am just going to paste this in. I'll paste that in right there. So let's take a look at what it is that I've pasted in. Let me save this first. All right! So I've pasted in some form fields. Here are the input types, and here are the labels that go with them.
So I have placed it in a set of four fields. There is a number field, an email field, a URL, and a telephone field. And you're probably used to seeing input type=text in normal web forms, but HTML5 introduces a number of new input types, a few of which I'm demonstrating here, because they're supported well in Safari. So for example, this type=email tells the browser that an email address is expected in this field and URL and so on. Some of these input types come with additional attributes.
For example, in the case of number, there is min and there is and there is step. So to see how these work, let's go ahead and save this, and we'll go back out to the finder. And what I am going to do is copy the file that I just edited, which is the mobileforms_start, and I'm going to copy that. And I am going to go over here, and I am going to go ahead and paste it. And I'll replace the existing one.
So now when I refresh, you can see now that the input fields have been placed into the form. So let's take a look at what happens when I place the focus in each one of these. For the numeric input fields you'll notice that when I give it the focus, instead of giving me the normal text-based soft keyboard, the keyboard has now been changed to optimize numerical input. So I'll click on Done. Now let's click on email. Notice here that in the case of the email input field, I am getting a keyboard that's optimized for email input.
You can see down here there is an @ sign and so forth for entering email addresses. If I click in the URL field, you'll see that the keyboard has changed to be optimized for URL inputs. It's a subtle change, but you'll see that the @ sign is now s slash. There's a .com down here. If click and hold on that, I get the other kind of top-level domains. Let's try the tell input field. In this case when I place the focus inside the tell input field, the keyboard changes to be optimized for entering phone numbers. So using the new HTML5 input fields, your mobile web forms can be optimized on certain mobile devices that understand this input types and really make the task of entering certain types of data easier for the user.
There are currently no FAQs about Mobile Web Design & Development Fundamentals.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.