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.
Okay, let's begin by taking a look at the homepage and understanding what the key differences were in making it work on both desktop and mobile. So let me just size this down to the mobile version for just a second. You can see a couple of things right away: first, the logo is smaller; second, the navigation bar is vertical now instead of horizontal, and the appearance is also different. And if I scroll down, you'll see that the content is now in one single vertical column, not two columns, and the Tour Spotlight is now above the Monthly Specials.
The video element is now gone and if we scroll down little bit more, you can see that the footer navigation has changed it layout just a little bit, so let's scroll back up. So let's think over the code, and I'm going to show you the key places in the code where we have to make some changes in order to make that work. Let's begin by taking a look at the logo section. So here in the main.css file you'll see that the logo is a class that's defined on the a.logo rule inside the main header.
So if we look back in the index code, you'll see that we scroll down. So here's the header and it has the ID of main header, and this is the linked tag that has the logo class on it. So the logo image is not embedded directly into the page; it's defined as part of a style sheet. So here in the main style sheet you'll see that it has a width and a height that's appropriate for that particular image. It's displayed as a block-level element. And here's the part where the image is being included as a background image from that URL. It's absolutely positioned on the page, which works well for desktops, but not so much for mobile, and so we specify the top and the left, and that's so the navigation bar to get around it.
Now, take a look at the same thing over in the mobile. So if we go down to the mobile version of that logo--and that's right down here on line, I think it's a 211, yeah here it is. So same thing where we have the main header in the a.logo class, but now look at the differences here. In this case the position is relative, and we're relatively position it because we don't want to be an absolute place on the screen, because mobile screen sizes can be a little bit different. The background image here, instead of including it from a URL to an image that's directly on disk, we're using a Data URI. And you'll recall we learned about Data URIs earlier on the course.
Now the last thing about using the Data URI here is that it's saves us a HTTP request back to the server and since this dial sheet will be cached along with the other style sheets and other assets that come down with the site, this image wont have to be downloaded again and again, unless of course it changes. We've also change the width and height to be more appropriate for the smaller logo, and the position, again as I said earlier, is being displayed as relative as a block-level element. So the result of that is that when a page is displayed in the smaller context on a mobile screen, we're using a smaller version of the image, and it's positioned in the middle of the page content rather than absolutely at the upper left.
All right, now let's take a look at the navigation bar. Let's go back over here. So this is where the navigation bar begins and you can see that the siteNav is the ID of the navigation bar that we're to be changing Go back over the code. You can see that this guy right here. Now the navigation element, again, it's based this the bunch of unordered lists with list items in it, and we don't care on the mobile contacts about these sub-items down here. So we're not going to be showing those. What we're going to do is take look at there main.
So here in the main.css file you can see that the list items and the unordered list that take up the navigation bar are defined using left floating. There's a list-style of none. This is always basic nav bar stuff, but you can see that they have heights defined. There's background colors. There is a width here of 1038 pixels, because that's the width of the screen and in fact, if you take that and add this you'll get something around like 1280 pixels. Now that's a desktop width, and that's not going to work on the mobile context, so we need to change that.
Also, each of the list items that make up the navigation bar, you can see there being floated to the left, and they've being positioned as relative. So let's take a look over at the mobile.css to see how that's a little bit different, and that's defined up here on line 141. So in this case, we have the siteNav URL, and it's not floated at all, and that's because we want it to display in a vertical fashion, rather than a horizontal fashion. You can see here that we've got some style that defined on the unordered list that makes up the navigational in.
So for the background color we're going to inherit with the background color is underneath it--in that case the white screen. The list style type is still set to none. We have a little bit of margin bottom underneath it. That sets the bottom of the unordered list off from the content. And we aligned the text in the center of the page. And instead of having a width of 1280 pixels, we just say that the width is 90% of whatever its container element is. And if we go back to the code, we'll see that the container element of the unordered list is this navigation bar right here.
So we don't want this to take up a large horizontal space; we want it to be vertical and just take up 90% of the width. So that's the main change there. The other change that we made is in each list item you can see that we changed the background color, the text is aligned in the center of each one of the list item elements, and the width is defined as 45%, with a minimum width of 170 pixels, so that that way each list item takes up about half of the unordered list container, which is what give us that nice centered look to the navigation bar when it's viewed in that vertical fashion in the mobile site. Let's take a look it now at the background image.
So recall back here in the code-- in fact that we bring it up again. So this background image right here is not going to make sense in mobile, so we need to get rid of it. We also need to get rid of this Find Your Tour button and this big h1 that sitting here. We're not going to need to use that. So let's go back to the code. All right! Let's go to the main.css, and we scroll to line 131. And in mobile we'll also take a look at where that's defined. So this was pretty easy.
Here in the main.css file, the background image of the homepage, you can see its home wrapper right here. And if look at the index.html, that's this guy right here. There's the home which is the body, and this is the wrapper that wraps all the contents in the homepage. So the background image of that is this giant background image right here. In the mobile context, however, we just simply say background image is none. So we want to hide that so that way it want be displayed when the page is viewed in a mobile setting. And right below that is the actionCall section, which is this area right here. Let's find it.
So this actionCall section right here, that's for that big h1 that says, "Explore our world your way," and here's that big Find Your Tour button. So if you look at the main.css, you can see that the action call has a height, it has a position, it has all the styles associated with it. And in the mobile.css we simply say display none for all that stuff, so it's being hidden in the mobile version. All right! Let's take a look at the menus, because recall that in the desktop version of the site we have these dropdown menus. Well, we don't want those to show up in the mobile or tablet versions, so let's take a look at the code for that.
Here in the menus file you'll see that we are doing a test right here. Now this is jQuery and if you're not familiar with jQuery, don't freak out. It's basically just a statement it says, "Hey, is the width of the document greater than 800," and if the width of the document is greater than 800 then we go ahead and build all the menus. I'm not going to walk through all that because that's just complex code. But the main thing to take away from here is that this code is only to execute if the document width is greater than 800 pixels. If it's less than 800 hundred pixels, none of this is going to happen, and those menus just simply won't be there.
All right! Let's lastly take a look at the content wrapper section. Let's go back to the main, and we'll look here. This is the homes contentWrapper, and that's this div right here. So the contentWrapper is what wraps all the main content in the page, everything below the navigation bar and that action call section we had at the top. This is-- if we go back to the page you'll see it. So the contentWrapper is all this stuff down here, the two-column layout, the video, everything up until the footer. So let's go back and take a look at the code.
So in the contentWrapper for the main, a couple of differences here. The main content floats to the right, right here, This main content, that's this part right here, the Spotlight, the Explorer's podcast, that floats to the right. The secondary content, which is the multi-specials and all that stuff, that floats to the left. And you can see that they are being given a widths of 700 pixels and 400 pixels collectively. So that's what gives us that two-column layout. But we don't want that in mobile. So we're going to look over mobile and we're going to see that in the contentWrapper the main content has no float, it takes up 100% of the width, and its got no padding or margin. And the secondary content also has no float, and it takes up 100% of the width.
This is what it causes those two elements to flow in one single line rather than next to each other. And last but not least, let's take a look at the video element, so that this guy right here, videoPodcast. Now on the desktop site, we want that to show up, but the problem is it's 512 pixels wide, and that's too large. And on some mobile devices HTML video is not going to work. So, just to make things simple, we're going to look for the videoPodcast, and you can see that on mobile that's being set as display to none.
Okay, so those are the main changes that we had to make to the index page to get things to work on both desktop and mobile.
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.