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.
Earlier in this course, we had a brief look at how our sample web site behaved when it was viewed in a mobile context, as well as on desktop. In this chapter, I am going to spend some time showing you how a web site that was designed using the principles that we talked about earlier in this course, such as designing for one web and using well-defined standards, and so on, I am going to show you how a web site that was designed with those principles is moved over to the mobile context. Now to be clear, the focus of this chapter is not going to be on taking an existing desktop web site that was not built using those principles and getting it onto a mobile device quickly and easily. But I will show you parts in the code you will need to pay attention to if you have an existing web site and you want to port it over to mobile.
So with that in mind, let's go ahead and get started. So here in the browser window is our web site, and remember, just as a quick refresher, as I size the window down, you can see that the tablet form factor shows up. And if I keep going, then we get the mobile form factor. So now let's take a look at the major places where we are going to need to pay attention to make sure that we are successful in getting this desktop site to work on mobile. So right here on the homepage, there is this logo over here. This logo is kind of large.
So we're probably going to want to display a different logo, and we'll take a look at how that was done. Here is the navigation bar. Now, the navigation bar is pretty large and horizontal. Remember, in the mobile setting, if we just quickly take a look at that, the nav bar becomes vertical and looks a little bit different. So we'll take a look at how that was achieved. It's also worth noting that there's a pretty big background image here on the page, and this image didn't exist on the mobile version, nor did this section over here, the Explore your world our way, and the Find your tour! button, those were not on the mobile site.
So we need to make sure that that's handled correctly. Let's scroll down a little bit. You can see here also that the page is laid out using a two-column layout. There's the Monthly Specials over here, and over here we have the Spotlight and the Explorer's Podcast, which contains some video. Now, this video may or may not work on a mobile device that we're looking at, so that is going to have to be taken into account. It's also pretty big. This is probably larger than most mobile screens, so we'll have to figure how to handle that. Okay, let's go ahead and take a look at some of the other pages.
Let's look at the Tours page. By the way, notice how the nav bar has these dropdown menus. We'll have to fix that as well. That's not going to work on mobile. So let's take a look at the Tours page. The Tours page, we have the same two-column layout which we'll have to address. We have this big image right here on the Tours intro page. That's not going to work on the mobile web site. We're going to have to get rid of that somehow. And then down here we have all the tour information listed. If you scroll down, you can see that there's a lot of information here.
Each one of these tour descriptions has a title, a graphic, and some text, and putting all of these on the mobile web page is probably going to be a lot of scrolling for the user, co we'll have to figure out a way to deal with that. Let's go back up to the Contact page. So the Contact page, again, two columns, large image, and if we scroll down, here is the contact form, and it's broken up into sections. A couple of things going on here. First, the contact form fields are kind of wide.
These will have to be made a different size for the mobile context. And the labels are not top-aligned; they are left-aligned here. And recall earlier, we learned that having top-aligned form label is actually more well suited to being in the mobile context, so we'll have to fix that. If we scroll down a little bit further, we have some more General Information. We've got this three-column layout on these check boxes, and on mobile, we'll want these to show up in one single column.
Here, we have a text area that's pretty wide, so that will also have to be resized. So we are going to take a look at how each of these three web pages was made to work on mobile by adapting some of the styling and the content and before we do that, let's take a look at the code. So here I am in the index.htm page for the site, and a couple of things I want to point out. First, we are using CSS media queries to adapt the site to different form factors, and the media queries are right here on lines 15 and 16.
I am going to highlight them right here. So you can see that there is a CSS file for the tablet and the mobile form factors. If I scroll over, you can see the media queries--and if we recall, we learned about media queries earlier. In this case, the tablet media query is being applied when the width of the screen is between 481 and 800 pixels, and the mobile CSS file is being applied when the width of the screen is between 0 and 480 pixels. And if we scroll back over here, you can see that there is a main style sheet.
The main style sheet is right here and it is always applied. It has a media of just screen and projection. So the main style sheet is always applied. There is no media query on that. The way that this web site works is that the tablet and mobile CSS style sheets build and override the styles that are defined in the main style sheet. Let's scroll down a little bit more. So one of the things I want to point out, one of the reasons why this web site works well and is really ready to be made to work on both tablet and mobile form factors is because of the way the site was designed.
There is no embedded inline EventHandlers. It's all just semantic markup. So if you have an existing web site that does not follow these principles, before you can get to the point where you can just define style sheets and have your web site work well on tablet and mobile, you should take some time to go through the code and remove things like embedded inline styles, anything that makes the form factor hard to convert, like large images, and so on. So let's take a look over the CSS code, and you'll see what I am talking about. So recall that the logo for the page--let's just scroll back up here.
You can see that there is an anchor tag right here that has a class of logo on it. There's no image that's embedded directly in the page. If we just go over to the main.css file, you'll notice that the logo was defined right here on line 251 as a background image of this particular style sheet. If we go and take a look at the same thing in the mobile style sheet, you'll see that the logo class is simply being overridden to use a data URI, which we learned about earlier, and the style sheet is different. It's positioning the image a little bit differently to work well in the form factor for mobile than it is in the main style sheet.
Well, here it's absolutely positioned, and it's got a height and a width. Over in the mobile style sheet it's positioned to be relative, and the height and the width are different. So those are the kinds of things that we're going to look at more deeply as we go through the rest of this chapter and see how each of these pages was made to work on the mobile context.
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.