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

Taking a look at the finished site

From: Mobile Web Design & Development Fundamentals

Video: Taking a look at the finished site

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.

Taking a look at the finished site

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.

As I scroll through here, you'll notice that there're no big embedded media files. There is no form-factor-specific code. It's all just semantic markup. So this part right here is the navigation. This is the siteNav. It's using the HTML5 nav element. Up here, we are using the HTML5 header element, and you can see that in the nav, for example, there's just a bunch of ULs and LIs, and these make up the nav bar and the dropdown menus. But there's nothing in here. There's no embedded inline style sheets. There's no embedded inline JavaScript code.

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.

Show transcript

This video is part of

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

46 video lessons · 24338 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.