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.
All right, let's take a look at the contact form. The contact form is here in my desktop browser, and I'm going to scroll down. And you can see that on the contact form there is some of the same images we had to worry about in the Tours page are present here. So we have the same two-column page layout, and the large graphic element on the top of the page needs to be taken care of. And the two-column text paragraphs here, that's not going to read well on a small mobile screen. But the main focus of this page is the contact form itself.
So this is the contact form. You can see that the fields are kind of wide and the labels are all aligned to the left of the input fields, which makes sense on a desktop web site. But on the mobile version of this form, we're going to want to make sure that these labels are aligned at the top of the input elements that they're associated with. Down here in the General Information section, there are these three columns of these check boxes.
Once again, that's not going to work well on mobile. So we want to make sure that those guys are all aligned in a single column and we're going to need to make sure that the text area is aligned correctly. If I scroll back up a little bit, you'll see that some of these pieces of information--such as, Email, and Phone, and if we look down here, the Zip Code is a number, and this right here is a date-- these are input fields that will lend themselves well to using the new HTML5 form input types.
So we're going to want to make sure that we take advantage of those. So let's just quickly scroll back up, and let's size the window down to the mobile version. And we'll scroll down, and you can see that when we scroll down now that the form is in the smaller mobile width, the form fields have been aligned to the top of the input types. If we scroll down here, you can see that these check boxes are now on one single line and the text field is sized appropriately.
And you can't really see it here on the desktop, but we've taken advantage of some of the HTML input types which will show up in the emulators when we see that in a little bit. So let's size this back up. Let's go take a look at the code. Okay, this is the code for the contact form. So let's go ahead and take a look at the articleImage. So remember, we had the same problem with the articleImage in the Tours page where we had a large image and it needs to be hidden on the mobile version.
So just to show you that the same thing is happening here in the Tours page, here is the articleImage class definition and if we just do the same search over here in the contact, you can see that this is the embedded image with a large photo of Emerald Bay of the Lake Tahoe, and the class here is articleImage. And you can see in the name it's being displayed as block, but in mobile it's being displayed as none, so that way it's not showing up. And same thing with the intro text in the main.css. And if we look for the multiCol, you'll see that you got the same two-column text count on the main version of the web site. And over here in the mobile version the multiCol layout is just being set back to one single column.
All right, but now let's take a look at the contact form itself. So I want to go back over to the HTML code, and I'm going to scroll down here to the contact form, and that's this form right here with the id of frmContact. Now let's take a look at some of the styling information here. One of the things that you'll notice right away is that when we take a look at the input types, you'll see that here on the input for type the input for the name field, the type is set to text. And if you've been working with forms, up until HTML5 input type="text" was pretty much all you had, but now we've got input type="email," we've got input type="tel," and if e scroll down a little bit, we'll get down to the rest of the form, so here is the input for the Zip Code.
We're just going to go ahead and change that to number. And we're going to scroll down a little bit more. We can see like these are the check boxes for what tours I'm interested in. And if we go down here, you'll see that there is an input for type="date," and that's the tripDate field with a label, "When are you thinking of touring?" So we're using the new HTML5 input types here. And the support for those are beginning to be implemented in various mobile browsers. WebKit browsers pretty much support those now, as well as some other ones.
So let's go ahead and scroll back on up. Again, as you look through this file, you'll notice that there really isn't any styling information embedded into the contact. So many contact form you see on the web today have a whole lot of embedded style sheets, or some kind of trickery in the HTML code to get them to lay out properly. That's not what's happening here. Each one of these columns of check boxes in the desktop setting, you can see that there is a div that surrounds each one of the three check boxes. And this one has a class of col1. This has a class of col2.
This has a class of col3. So the check boxes are basically aligned inside these divs, which is giving us those three columns of check boxes. So that's going to help us a lot when we go to lay things out a little bit differently later. But for now let's go back up to the start of the form. Okay, here is the form. Let's take a look at how the form is laid out in the main and mobile contexts. So here in main.css I am going to just look for form styling because that's this comment right here.
And this is where the form styled for the desktop version, and you can see that there is a whole bunch of styles being defined for forms. They have paragraphs in them and so on and so forth. The fieldset here, which contains all the field elements is being set to a width of 650 pixels, so that's not going to work on mobile, for example. We've got some forms defined for a legend and so on. We're going to fix all of this stuff. Also here, you can see that the inputs for type="text," type="email," and so on are being given width of 350 pixels.
Well, that's larger than most mobile screens are horizontally, and the text area is way bigger--that's 500 pixels. So clearly we need to fix that as well. We also have a style sheet defined for labels, and you can see that the labels are being defined as a width of 80 pixels, and they have some float and clear assigned to them as well, which is what's making them line up on the left-hand side of their input types. So let's go over to the mobile.css and take a look at the same thing. We're going to look for form styling, and here is where the mobile form styling starts.
So you can see that the inputs for text emails or all the input types are being sized as 220 pixels instead of 350, which makes them fit onto a mobile screen. The textarea also is being sized down to 220 pixels. Whereas, the label text style sheet definition in the main style sheet was for floating and clearing, here we have a float of none and a display of block, and that's what gets those labels to appear above the input types on their own lines rather than appearing next to the input fields that they are assigned to.
If we scroll down a little bit further, you can see that we've got style definitions for all of those col1, col2, and col3s. This is for where those check boxes are defined. Now if we go back to the main version and we look for .col1, you can see that here we've got some floats defined and we've got some padding and widths. So the columns are being given widths of 160, 170 pixels, and again, that's what gives us that three-column layout on the desktop, but we don't want that on the mobile version.
We don't want them to have set widths of 160, 170 pixels, because that's going to line up to be much larger than the horizontal width on the screen. So back here in the mobile version we don't assign fixed widths. We simply say that the width is 100%, and that makes this particular column be 100% width of its containing value, which in this case is going to be the fieldset. So this is what makes all three of these columns flow in one single column, one after the other. There is no floating, and we just give it a width of its container, and that forces each one to flow after each other.
For column3, we just give it a margin- bottom of 2ems that there's a space between the last column and the input fields that follow. So let's go ahead and take a look again and see the effect of all this one more time. We'll switch back over to the browser. So here is the browser okay, and you can see that in the desktop version we've got the labels floating next to the input fields. The input fields are kind of wide. And down here we have our three columns of check boxes. So I'm going to now go ahead and just size this down. And you can see that now the form fields are smaller and the labels are top aligned. The check boxes all flow in one single column.
Okay, so that summarizes the changes we had to make to the contact form. We had to get rid of the articleImage by setting its display to none for the mobile context so it wouldn't show up. We're going to change the multi-column layout to be just one column of text. And I am going to fix the form by using the new HTML5 form input types, as well as changing the styling, so that the form elements would show up in sizes and positions that made sense on a mobile screen size.
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.