Join James Williamson for an in-depth discussion in this video HTML5 form inputs, part of Applied Responsive Design.
In this chapter we are going to take a look at a couple of the ways that you can enhance your site's experience for mobile users. Most web designers are quite comfortably designing for desktop devices, so much so that we probably simply take for granted the context that we are designing for. Because of that, a fair part of learning responsive design is also learning how to enhance the user experience on devices like smartphones and tablets. The good news is that most of the things that you can do don't really require a lot of extra work, and many are the result of simple using the latest web standards.
Take forms for example. By simply using some of the newer input types and attributes found in HTML5, we can improve our site's performance on mobile devices. Let me show you what I mean. I have the contact.htm file open in the 05_01 directory. Now, before I start working on this, I am going to preview this on a mobile device. In previewing this page on a mobile device, let's say I scroll down to where the forms are. So, if I click inside the form element, of course the keyboard comes up and allows me to type in name, email, things like that.
Well, notice when I hit Next and go to email, nothing really happens with the keyboard. It doesn't change, because there is no contextual awareness about what is that I am really looking at. The reason for this is because there's nothing really happening here, in terms of some of the newer HTML5 form attributes that smartphones just sort of inherently understand and know how to react to. So, let's take a look at how we do that. All right! So I am going to go into my form here, my contact form. The first thing I want to do is find the email form element. It's an input. Right now it's type=text.
What I am going to do is I am going to change that type from text to the new HTML5 type of the email. The next thing I am going to do is I am going to put up some placeholder text inside that. So, I am going to use the placeholder attribute, and I am going to say "valid email." Placeholder attributes aren't just for emails. I am just going to do placeholder, and I am going to type in "your full name." That way they give us their whole name and not just their first name. You know there are also things that we can do like required. It's a Boolean attribute and basically, what this does is it triggers native form validation.
I'll be honest with you. I haven't really seen a really good implementation of it yet, and most people are still handling form validation through server-side or client-side scripts. So, I'm just showing that. The next thing I want to do is "website." Instead of the type being "text" that's going to be "url." So we have a lot of different new input types that we can use. I'm also going to put some placeholder text here, and I'll just say "website." There's another form element that I want to change as well, and it's not actually in this form.
I am going to scroll down to the bottom of the page, and I can see that I have a search field down there. Again, instead of "text," this time I am going to change it to "search," and I'm also going to put some placeholder data in there as well. So, let's do placeholder, and inside that I am just going to type in Search, or you can type in "what you are looking for?" or "what can help you find?" that sort of thing. So I am going to go ahead and save that, and I'm going to preview this again in my phone. So now, if I go scroll down to my form, you can see that right there, we have the placeholder information that we placed in.
So, right off the bat, we're being a little bit nicer to our users, but watch happens when I click inside these now. When I click inside the first one, Name, it's still text, so we don't really see any difference. But when I hit Next, check out the keyboard. The keyboard changed and it gave me the @ symbol, because it realizes that this is an email address, and that's probably a character that you are going to use a good bit. Same thing for my URL. If I click in that, the keyboard changes again. I get the forward slash with the dot and the .com, which is really nice. Now, if I hit Done and I go all the way down to my Search, notice that by changing it to Search input, when I click inside that, the keyboard changes as well, and we have a nice little search button down there in the lower right-hand corner when we are going to look for something. That is a much better user experience.
And although it is a better experience, it's really only scratching the surface in terms of some of the new HTML5 form elements. There are things like date pickers, slider, and numeric steppers that are really gaining support from devices like smartphones and tablets. It's also worth noting that in many ways, mobile devices are actually early adopters of these new standards, so, be sure to check support before using them so that you can provide fallback to nonsupporting devices and browsers.
- Creating mockups
- Structuring page regions
- Defining default styles and media queries
- Building desktop, tablet, and mobile layouts
- Structuring and styling menus
- Dynamically replacing menus
- Creating a responsive image gallery
- Adding phone functionality
- Testing responsive sites