Lynda - Creating a Responsive Web Experience

F4V | AVC 553kbps | English | 960x600 | 29.97fps | 1h 23mins | AAC stereo 160kbps | 480 MB

Genre: Video Training

Many times, simply resizing your web design is not enough to create a satisfying user experience. This course helps you make your webpages more responsive to different screen sizes with HTML, CSS, and JavaScript. Picking up where he left off in Creating a Responsive Web Design, Chris Converse shows how to modify your existing HTML, dynamically load content, animate elements on the page, and collapse the navigation on smaller screens—while allowing users to expand menus with a tap of their finger.

Note: This course uses the jQuery JavaScript library to add interactivity and other features to the example site. But if you've never written JavaScript before, don't worry. This course provides a step-by-step approach to writing just the code you need to replicate the experience Chris shows on screen.

Introduction

Preview the final project

About the exercise files

The software you'll need to complete this course

For those using Dreamweaver

1. Modifying the Previous Project

Modifying the graphics

Adjusting the CSS for the navigation

2. Dynamically Loading Content

Adding a content container and files

Adding JavaScript and jQuery to your project

Loading content with jQuery

3. Styling the Hero Area

Positioning the image and caption

Styling the hero captions

4. Adjusting the Experience Based on Screen Size

Determining the screen size with JavaScript

Detecting a change in screen size

Loading alternative content based on screen size

Setting up the mobile nav button

Setting up the mobile nav panel

Opening and closing the nav panel

5. Animating the Hero Panel

Preloading images

Animating the hero elements

6. Maintaining Support for Internet Explorer 7 and 8

Altering the CSS and JavaScript for Internet Explorer 7 and 8

Conclusion

Where to go from here