Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Examining the hover effect and layout styles on the Tours page

From: Mobile Web Design & Development Fundamentals

Video: Examining the hover effect and layout styles on the Tours page

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.

Examining the hover effect and layout styles on the Tours page

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.

Show transcript

This video is part of

Image for Mobile Web Design & Development Fundamentals
Mobile Web Design & Development Fundamentals

46 video lessons · 24354 viewers

Joe Marini
Author

 
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

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
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.


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.

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

Your file was successfully uploaded.

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.