Creating an Adaptive Web Site for Multiple Screens

with Ray Villalobos
please wait ...
Creating an Adaptive Web Site for Multiple Screens
Video duration: 0s 3h 9m Intermediate

Viewers:

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
Author:

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.
please wait ...