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 examine the Tours page and the differences between making the tours page work on desktop and mobile. So here is the Tours page, and just as a quick reminder, I'm going to resize this down to the mobile size. And you can see that as I scroll down the page, there is a single column, and we've already fixed our navigation across the site. So here is each one of the tours, and you can see that the tour information for each one of these guys has been collapsed down so that only the logo for the tour is visible.
And the way that it gets revealed is if I move my mouse over it, you'll see that as I hover and unhover, the content is being shown in hidden. Now you might be saying to yourself, "Well, wait a second. That's not going to work on mobile because there is no hover event." Well, it turns out that mobile browser is actually sort of fake the hover event. When you put your finger down on a clickable element, mobile browsers will send the hover message to the page as well, along with the tap message. And that's for backwards compatibility with a lot of the desktop content that's already out there.
So we'll take a look at how that works. So let's go ahead and scroll this back up, and we'll resize this to the desktop size, and we'll scroll back up. And recall also that this image needed to be taking care of, as well as the two-column layout. So let's go ahead and take a look at the code to see how this was addressed. So the first thing we want to do is take a look at that big intro image, the one with the bear flag. So I'm going to do a find our articleImage, and that's right down here. You can see that in this case the page does contain an embedded image, and the image is this one right one here, articleImage, and here is the path to that image.
Now this is too large, and in this case even though we have embedded media file that's too large for the mobile context, since all we are doing is getting rid of it, it's a pretty simple solution. Let's take a look at the main style sheet, and we'll look for articleImage right there. Okay, so here is the articleImage in the main style sheet. You can see that display is block and that there is a margin around it. Let's take a look at the same thing in mobile. So in this case we fixed the problem by simply making the display none on the articleImage.
So you can see here it's display is block, here it's display is none. So that just simply gets rid of the image from the page and is what makes the page a lot easier to read on mobile. Okay, let's take a look also at the text that's in the intro text. Let's go back to the tours right here. You can see that this is the text right here that's underneath that image, and it has a class of multiCol. So let's go take a look at what multiCol is, and we'll do a search on multiCol.
And you can see that the multiCol class defines a multiple-column count for browsers that support that. Here is the one for the Mozilla prefix, here is the WebKit prefix, and here is the unprefixed version. So let's take a look at the site and this page in a browser that supports multi-column text real quick. So here in Firefox if you take a look at that text, you'll see that's being displayed in a two-column layout. And this is something that's not going to work, or work very well, in a mobile context and the small screen size.
And what I mean by that is it may work in certain browsers, you may be able to do multi-column text, but in this particular example it's going to make the text hard to read. So we want this to flow as one column. So let's go back to the code. So we can see here in the main style sheet that's defined as two columns. Over in the mobile stylesheet, let's look for it. Here is multi-column, and you can see that the column count is being set back to 1 and because it's one column we don't need the column-gap definition, which is right here. So the style sheet is a little bit simpler on mobile.
So, when we go back to the page--and I'm going to resize this down in Firefox this time-- you can see that when we get down to the mobile size, the paragraphs are now visible in a flowing one-column layout rather than two columns. Okay, let's scroll this back up, and let's take a look at one more example. Let's take a look at the hover effect that we're putting onto the tours. So what I'm going to do is take a look at the tourDescription, which is right here.
So you can see that each one of these has a tourDescription class on each one of the tour descriptions. So let's take a look at where that tourDescription is defined in the main style sheet, and we'll look for tourDescription. And that's right here. You see the tourDescription begins on line 483 in the main style sheet, and the tourDescription has various things for the desktop version. Let's go back and take a look at that really quick, so you can see what it looks like. So here is the tour description, and we've got the title, we've got the image for the tour, and the text.
Now let's go take and look at the mobile version, and we'll look for tourDescription, okay. So here in the tourDescription the only difference is that the style is defined a little bit differently for how the text is revealed, and there is this hover effect right here on the tourDescription. So you can see that the tour description starts out at a height of 170 pixels, and the overflow is hidden. That is to prevent scrollbars from showing up in the div that contains the information about the tour description, all of that text.
If this wasn't here, we would see some pretty ugly scrollbars, depending on the browsers that it was viewed in, and we don't want that to happen. When the user hovers over it, in this case when they tap their finger on the tourDescription div, the height is going to get changed to 450 pixels. In this case, we still want the overflow hidden, because we don't want the scrollbars to show up during the transition. Now, on some browsers, like WebKit and Mozilla and so forth, there is these transitions you can define in CSS style sheets that will gradually reveal the content.
And for browsers that don't support that, the content is going to show up immediately. There won't be any transition. But during the transition, we don't want scrollbars showing up, so we have the overflow hidden, and that's the main difference there. Okay, so that's how we adapted the tours page. You can see that we had to change the articleImage display to none, so it wouldn't show up in the mobile context. We had to change the multi-column layout into one column. And we changed our tour descriptions so that information would be revealed when the user tapped on it, rather than having all that content be right there in the page.
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.