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

Creating an Adaptive Web Site for Multiple Screens
Illustration by John Hersey

Creating an Adaptive Web Site for Multiple Screens

with Ray Villalobos

Video: Welcome

My name is Ray Villalobos. Welcome to Creating an Adaptive Web Site for Multiple Screens! In this course we will be designing a single web site, which we'll adapt to display differently on different types of devices; desktops, handheld, and tablets. We'll start by designing and customizing a series of interactive web pages to display on a desktop. We'll take a look at how to load pages and other content dynamically using jQuery and AJAX. Next, we'll look at how to customize the site's layout for handheld devices like iPhone and Android.
Expand all | Collapse all
  1. 3m 33s
    1. Welcome
      53s
    2. Using the exercise files
      2m 11s
    3. Using the code snippets file
      29s
  2. 27m 50s
    1. Setting up a local server on a Mac
      3m 24s
    2. Setting up a local server on a Windows computer
      5m 44s
    3. Setting up the iPhone simulator
      2m 21s
    4. Installing the Android emulator on a Mac
      3m 45s
    5. Installing the Android emulator on a Windows computer
      5m 48s
    6. Working with a remote server
      2m 26s
    7. Testing on live devices
      1m 28s
    8. Touring the final project
      2m 54s
  3. 8m 34s
    1. Understanding design approaches
      3m 1s
    2. Designing for mobile devices
      2m 22s
    3. Working with adaptive design
      3m 11s
  4. 13m 44s
    1. Starting with an HTML5 reset template
      2m 39s
    2. Customizing the HTML template
      4m 32s
    3. Using the free Google web fonts
      2m 10s
    4. Modifying the remaining template pieces
      2m 28s
    5. Preparing graphics for a web site
      1m 55s
  5. 13m 57s
    1. Creating a page template
      3m 23s
    2. Putting together a menu page
      5m 8s
    3. Developing an "about us" page
      1m 14s
    4. Displaying a Google map on a page
      4m 12s
  6. 32m 54s
    1. Creating style sheets
      3m 22s
    2. Building body and header styles
      5m 37s
    3. Crafting footer styles
      2m 24s
    4. Assembling the menu items
      10m 21s
    5. Styling the "about us" page
      3m 5s
    6. Styling the map page
      1m 24s
    7. Crafting utility items
      6m 41s
  7. 25m 29s
    1. Loading external pages with AJAX
      12m 40s
    2. Displaying a high-resolution photo overlay
      12m 49s
  8. 23m 58s
    1. Resetting and hiding elements
      4m 56s
    2. Making footer-like buttons for a handheld device
      6m 14s
    3. Modifying menu lists
      3m 33s
    4. Creating mobile tabs
      5m 17s
    5. Modifying other pages for mobile layout
      3m 58s
  9. 23m 43s
    1. Making the tabs work
      4m 2s
    2. Detecting the mobile device on the client
      6m 58s
    3. Making fixed-position elements work properly on all mobile browsers
      8m 6s
    4. Centering images
      2m 2s
    5. Dealing with orientation changes
      2m 35s
  10. 7m 3s
    1. Redefining the menu CSS for tablets
      5m 22s
    2. Changing the CSS to make other pages display properly on a tablet
      1m 41s
  11. 6m 25s
    1. Testing and debugging
      6m 25s
  12. 2m 20s
    1. Next steps
      2m 20s

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 ...
Watch the Online Video Course Creating an Adaptive Web Site for Multiple Screens
3h 9m Intermediate Oct 19, 2011

Viewers: in countries Watching now:

This course demonstrates how to build a web site that automatically adapts its layout to various screen sizes, orientations, and resolutions. Ray Villalobos shows how designers and developers can create a single HTML document and customize its display for desktop browsers and mobile devices such as the iPhone, Android phones, and tablets. The course covers creating a basic HTML5 structure and using reset templates, and styling the site with CSS.

Topics include:
  • Setting up testing servers and emulators
  • Creating and formatting a site template
  • Using free Google fonts
  • Preparing graphics
  • Creating style sheets
  • Loading external pages with AJAX
  • Creating mobile tabs
  • Detecting mobile devices
  • Using JavaScript to deal with scrolling and orientation changes
  • Testing and debugging site code
Subjects:
Developer Web Responsive Design Mobile Web
Author:
Ray Villalobos

Welcome

My name is Ray Villalobos. Welcome to Creating an Adaptive Web Site for Multiple Screens! In this course we will be designing a single web site, which we'll adapt to display differently on different types of devices; desktops, handheld, and tablets. We'll start by designing and customizing a series of interactive web pages to display on a desktop. We'll take a look at how to load pages and other content dynamically using jQuery and AJAX. Next, we'll look at how to customize the site's layout for handheld devices like iPhone and Android.

We'll also cover how to deal with problems and inconsistencies that pop-up when displaying the site on different devices. Finally, we'll make coding and design adjustments to make the pages work well on tablet devices. Now, let's get started with Creating an Adaptive Web Site for Multiple Screens.

Find answers to the most frequently asked questions about Creating an Adaptive Web Site for Multiple Screens .


Expand all | Collapse all
please wait ...
Q: I have set my WAMP server to point to the document root path in the http.conf file as shown in the beginning of the course (C:\Users\myname\Desktop\lynda\Ex_Files_Adapt_Sites\Exercise Files\working folder\staging.mexsantos.com).

This doesn't include the specific exercise file folder (04_04, etc.) in the path. So when I make changes to individual files in those folders, I'm failing to see them appear when I navigate to localhost in a browser. Did I miss a step where the documentroot path was changed? Has a step been missed? Please advise.
A: Your WAMP server/documentroot path is set up correctly. However at the beginning of each chapter, you need to replace the contents of the working folder with the exercise files for that chapter, as instructed in the "Using the exercise files" movie.

To do so, open the exercise file folder for the chapter (e.g. 04_04) and copy and paste the staging.mexsantos.com folder into the working folder on your computer.
Q: I'm having a problem with the exercise files for this course. None of the links work and some of the CSS appears to be broken. 
A: This is probably a file path issue you've encountered due to placing the exercise files into a different folder structure.

The links in the files use an absolute URL, which starts with a '/'. So, take a link like this.

    <a href="/"><img src="/images/mexsantos.png" alt="Mexsantos Logo" /></a>

This link assumes that you've placed the exercise files in the root folder of your website.

Say that your website is called http://mywebsite.com and that instead of putting the files in the root folder (the folder on your site with every other folder), you move them into a subfolder called "mexsantos". The example above would have to be changed to:

    <a href="/mexsantos"><img src="/mexsantos/images/mexsantos.png" alt="Mexsantos Logo" /></a>

The links to the CSS files would also need to be changed, so that:

    <link rel="stylesheet" href="/_/css/style.css" />

would become:
 
    <link rel="stylesheet" href="/mexsantos/_/css/style.css" />

You can also use relative references. So this link:

    <link rel="stylesheet" href="_/css/style.css" />

becomes:

    <link rel="stylesheet" href="mexsantos/_/css/style.css" />

Notice that this when using relative link references. Any links to the root '/' will need to point to index.html. So this link:

    <a href="/"><img src="/images/mexsantos.png" alt="Mexsantos Logo" /></a>

becomes this:

    <a href="index.html"><img src="images/mexsantos.png" alt="Mexsantos Logo" /></a>

If you need help with absolute vs relative URLs, check out my course on Managing a Hosted Website. See the video called Understanding link references.
Q: I'm having a problem with the exercise files for this course. None of the links work and some of the CSS appears to be broken. 
A: This is probably a file path issue you've encountered due to placing the exercise files into a different folder structure.

The links in the files use an absolute URL, which starts with a '/'. So, take a link like this.

    <a href="/"><img src="/images/mexsantos.png" alt="Mexsantos Logo" /></a>

This link assumes that you've placed the exercise files in the root folder of your website.

Say that your website is called http://mywebsite.com and that instead of putting the files in the root folder (the folder on your site with every other folder), you move them into a subfolder called "mexsantos". The example above would have to be changed to:

    <a href="/mexsantos"><img src="/mexsantos/images/mexsantos.png" alt="Mexsantos Logo" /></a>

The links to the CSS files would also need to be changed, so that:

    <link rel="stylesheet" href="/_/css/style.css" />

would become:
 
    <link rel="stylesheet" href="/mexsantos/_/css/style.css" />

You can also use relative references. So this link:

    <link rel="stylesheet" href="_/css/style.css" />

becomes:

    <link rel="stylesheet" href="mexsantos/_/css/style.css" />

Notice that this when using relative link references. Any links to the root '/' will need to point to index.html. So this link:

    <a href="/"><img src="/images/mexsantos.png" alt="Mexsantos Logo" /></a>

becomes this:

    <a href="index.html"><img src="images/mexsantos.png" alt="Mexsantos Logo" /></a>

If you need help with absolute vs relative URLs, check out my course on Managing a Hosted Website. See the video called Understanding link references.
Q: I'm having a problem with the exercise files for this course. None of the links work and some of the CSS appears to be broken.
A: This is probably a file path issue you've encountered due to placing the exercise files into a different folder structure.

The links in the files use an absolute URL, which starts with a '/'. So, take a link like this.

    <a href="/"><img src="/images/mexsantos.png" alt="Mexsantos Logo" /></a>

This link assumes that you've placed the exercise files in the root folder of your website.

Say that your website is called http://mywebsite.com and that instead of putting the files in the root folder (the folder on your site with every other folder), you move them into a subfolder called "mexsantos". The example above would have to be changed to:

    <a href="/mexsantos"><img src="/mexsantos/images/mexsantos.png" alt="Mexsantos Logo" /></a>

The links to the CSS files would also need to be changed, so that:

    <link rel="stylesheet" href="/_/css/style.css" />

would become:
 
    <link rel="stylesheet" href="/mexsantos/_/css/style.css" />

You can also use relative references. So this link:

    <link rel="stylesheet" href="_/css/style.css" />

becomes:

    <link rel="stylesheet" href="mexsantos/_/css/style.css" />

Notice that this when using relative link references. Any links to the root '/' will need to point to index.html. So this link:

    <a href="/"><img src="/images/mexsantos.png" alt="Mexsantos Logo" /></a>

becomes this:

    <a href="index.html"><img src="images/mexsantos.png" alt="Mexsantos Logo" /></a>

If you need help with absolute vs relative URLs, check out my course on Managing a Hosted Website. See the video called Understanding link references.
 
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 Creating an Adaptive Web Site for Multiple Screens.

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 preferences from 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.

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.