Released
10/19/2011- 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
Skill Level Intermediate
Duration
Views
- [Voiceover] Hello, my name is Ray Villalobos. Welcome to Creating and Adaptive Web Site for Multiple Screens. In this course, we'll be designing a single website, which will adapt to display differently on different types of devices: desktops, handhelds, and tablets. We'll start by designing and customizing a series of interactive webpages that 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.
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 this video
Embed this video
Video: Welcome