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.
As good as emulators are for testing things like layout and making sure that things appear correctly, there is really no substitute for testing your finished site on a real device, because a real device will show you how response of the site really is and whether things are working as you intended in the real world. So we are going to take a look at our finished site on a real device, and this is the Android Nexus S phone that I am going to test on. So here is our homepage, and you can see right away that the media query that we built is detecting the phone's screen size, and it's triggering correctly to give us our own phone screen optimized layout.
So you can see that the logo is displaying correctly, and the navigation elements are stacked vertically rather than horizontally, because we restyled them. So scroll down a little bit, and as I scroll, you can see that the page is optimized for vertical scrolling. There is no side-to-side movement. Under the Tour Spotlight, we have got the logo in the right place--it's above the text, taking advantage of the vertical space. Let's scroll down. Here is the Monthly Specials there being laid out nice and vertical just as we styled them. Here is the Did You Know section. Our bottom nav bar is also using the two short columns and the wider one to take advantage of the limited horizontal space that we have.
So this page actually looks pretty good. Let's scroll up and take a look at some other parts of the site. Let's make sure that our Tours page looks correct, so I'll click on that link. Okay, here is our Tours page. Let's scroll down. So we can see that the navigation subheads are there. The text looks good. It's optimized vertical scrolling and reading. Here's the tours. Let's make sure the interactivity is working. So when I click, the tour reveals. That great. Let's scroll on down a little bit more.
Okay, here's our Monthly Specials layout. We can see that's nice and laid out vertically the way we styled it, no longer horizontal. And there's the restyle Did You Know section, and of course on this page the nav bar at the bottom is also working correct. All right, let's do one more thing. Let's make sure our contact form looks good, so I'll click on the contact form. Okay here's our contact form, text looks good, and you can see here that the form has now been laid out to take advantage of vertical space.
So we have a label above the form control, instead of horizontal like it was on the desktop. The required fields are properly marked with the red borders on the side. We are getting the placeholder text behavior. Here's the General Information. The check boxes are laid out completely vertically, just as we styled them, and our date fields and text fields are properly sized. Okay, so that's working properly on the phone. Now let's move it to tablet and see how it works on the tablet form factor.
Okay so here's the same site, only now are looking at it in the tablet form factor, so let's take a look at some thing changes we made and make sure everything looks right. So as expected, the nav bar is a little bit more concise, and you can see that the dropdown menus are gone. And as I scroll down a little bit, you can see that the background image, we have more space. We will be able to put that back in. On the Tour Spotlight section we have a little bit different layout. The logo is now to the right because it fits. This device actually understand how to play video, so we can tap on this and play video.
So we will be able to detect the video presence. That looks good. So let's pause that. Here, the Monthly Special section, as we re-laid it out to be more vertical, we can say that's working correctly. And down at the bottom you see that we have more horizontally space for the bottom nav, so we are able to fit each section horizontally across. Okay let's go back up to the top. Let's take a look at the Tours section to make sure that came out well. Okay so as we expected, once again you can see that each one of the tours is laid out again more vertically oriented, and we scroll down. And let's make sure that the--yep, there's the Monthly Specials and Did You Know also vertically laid out.
The horizontal alignment of the bottom nav, and let's just make sure that our form is working correctly. So we go to the Contact page, and we can see here that the form is laid out correctly vertically. We have enough space for both the label and the control to be side by side, so those are laid out horizontally. We are getting the styling for the required fields. The placeholder text is all working. I'm going to scroll down. And our Monthly Specials and Did You Know section is spanning the entire horizontal space and is laid out vertically, and our horizontally bottom nav looks correct as well.
Okay, so using what we learned, we were able to build a web site that works well both on mobile phones and tablets as well as desktops.
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.