Creating a Responsive Web Design [repost]

Discover how to make your website more readable and efficient across various screen sizes and devices. Join author Chris Converse as he shares his own specialized techniques for creating a responsive site. The course takes the site from start-to-finish, from comping your ideas in Photoshop, to setting up the HTML page and containers, to styling established elements for small, medium, and large screens. In particular, Chris shows how to load images with CSS, reposition the nav bar for better viewing on mobile devices, and how to make the download time faster for small screens by providing multiple versions of your banner graphic and other images.

Topics include:
Understanding your software needs
Planning your layout
Adding containers, content, and links
Creating and slicing multiple-sized banner images in Photoshop
Linking to CSS files with media queries
Setting the viewport scale
Styling headings, body text, and footers
Styling and repositioning navigation links

Introduction 7m 39s
Previewing the final project 4m 0s
About the exercise files 1m 15s
Exploring the software you'll need to complete this course 49s
Beginning your project 1m 35s

1. For Those Using Dreamweaver 3m 45s
What to expect with Design view in Dreamweaver 2m 1s
Accessing code for HTML and CSS in Dreamweaver 1m 44s

2. Setting Up Your Project 9m 19s
Planning your layout 2m 47s
Adding the main HTML containers 1m 47s
Adding the promo containers 31s
Adding links and the copyright 1m 47s
Adding sample content into the HTML containers 2m 27s

3. Creating Web Graphics 8m 37s
Creating and slicing multiple-sized banner images 5m 53s
Exporting content and template artwork 2m 44s

4. Preparing the HTML File 7m 27s
Linking CSS files for all screen sizes 1m 42s
Linking CSS files based on screen size with media queries 2m 13s
Enabling Internet Explorer 7 and 8 to understand HTML5 1m 25s
Setting the viewport scale 2m 7s

5. Creating CSS Rules Across All Screens 9m 0s
Adding the background pattern and the page container color 3m 43s
Styling the headings 2m 17s
Styling the body text and the links 1m 15s
Styling the footer 1m 45s

6. Preparing the HTML File 9m 49s
Understanding compound rules 2m 58s
Styling the promo links with a CSS sprite 2m 48s
Styling the promo text 1m 26s
Adding the promo images with CSS 2m 37s

7. Creating the Content and the Layout Containers 7m 46s
Adding CSS rules for layout 2m 8s
Styling the header on large screens 2m 34s
Styling the article on large screens 3m 4s

8. Styling the Promos 6m 29s
Styling the navigation links 2m 1s
Styling the navigation for large screens 1m 16s
Positioning the navigation for large screens 1m 37s
Clearing the float for the promos 1m 35s

9. Working with CSS Rules 2m 47s
Adding CSS rules with inline media queries 2m 47s

10. Styling for Medium Screens 6m 0s
Styling the header for medium screens 2m 32s
Styling the navigation for medium screens 1m 10s
Styling the promos for medium screens 2m 18s

11. Styling for Small Screens 12m 7s
Styling the header for small screens 2m 27s
Styling the navigation for small screens 1m 12s
Styling the navigation links for small screens 4m 13s
Styling the promos for small screens 2m 57s
Styling the footer for small screens 1m 18s

Conclusion 57s
Where to go from here 57s