New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Start learning with our library of video tutorials taught by experts. Get started

Mobile Web Design & Development Fundamentals
Illustration by

Examining the header and background image style on the Home page


From:

Mobile Web Design & Development Fundamentals

with Joe Marini

Video: Examining the header and background image style on the Home page

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.
Expand all | Collapse all
  1. 2m 48s
    1. Welcome
      1m 2s
    2. Using the exercise files
      1m 46s
  2. 29m 25s
    1. Understanding the mobile context
      8m 5s
    2. A survey of mobile sites
      11m 44s
    3. Targeting mobile browsers
      4m 31s
    4. Previewing a complete mobile site
      5m 5s
  3. 27m 20s
    1. Designing for one web
      3m 43s
    2. Using well-defined web standards
      3m 45s
    3. Designing mobile-friendly pages
      3m 40s
    4. Being crisp, clean, and succinct
      5m 45s
    5. Minimizing input where possible
      6m 47s
    6. Focusing on the core scenarios
      3m 40s
  4. 1h 13m
    1. Installing the tools
      3m 52s
    2. Setting up a local web server
      9m 13s
    3. Installing device emulators
      17m 5s
    4. Using device emulators
      13m 9s
    5. Downloading Modernizr and Mobile Boilerplate
      6m 22s
    6. Building a first mobile web page
      5m 43s
    7. Developing mobile pages with desktop browsers
      8m 6s
    8. Exploring useful mobile web development resources
      10m 23s
  5. 53m 26s
    1. Reviewing mobile markup languages
      5m 10s
    2. Understanding content adaptation approaches
      10m 32s
    3. Controlling the viewport layout
      12m 50s
    4. Designing forms
      13m 30s
    5. Using CSS media queries
      11m 24s
  6. 1h 11m
    1. Detecting client capabilities with script
      10m 8s
    2. Caching information with local storage
      9m 16s
    3. Determining position with geolocation
      12m 52s
    4. Minimizing HTTP requests with data URLs
      7m 39s
    5. Understanding user agent detection
      9m 8s
    6. Using server-side detection with PHP
      6m 52s
    7. Using server-side detection with ASP.NET
      4m 54s
    8. Using HTML5 Boilerplate for mobile
      11m 6s
  7. 39m 22s
    1. Measuring performance
      7m 41s
    2. Creating full-screen web apps
      6m 30s
    3. Customizing the user interface
      5m 14s
    4. Detecting orientation changes
      3m 58s
    5. Detecting device movement
      5m 21s
    6. Using touch events
      10m 38s
  8. 47m 14s
    1. Taking a look at the finished site
      7m 40s
    2. Examining the header and background image style on the Home page
      10m 10s
    3. Examining the hover effect and layout styles on the Tours page
      6m 42s
    4. Examining mobile forms on the Contact page
      9m 45s
    5. Viewing and testing the mobile site on emulators
      8m 11s
    6. Viewing the site on devices
      4m 46s
  9. 2m 34s
    1. Goodbye
      2m 34s

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
Mobile Web Design & Development Fundamentals
5h 47m Beginner Jul 20, 2011

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.

Topics include:
  • Implementing well-defined web standards
  • Working with Modernizr and Mobile Boilerplate
  • Building a first mobile web page
  • Understanding content adaptation strategies
  • Designing forms for mobile
  • Detecting client capabilities with script
  • Using server-side detection with PHP and ASP.NET
  • Working with mobile browser capabilities
  • Viewing and testing the mobile site on device emulators
Subjects:
Developer Web Web Foundations Mobile Web
Software:
HTML
Author:
Joe Marini

Examining the header and background image style on the Home page

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.

 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Mobile Web Design & Development Fundamentals.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.