2013
Lynda
Chris Converse
1:23
English

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

http://www.lynda.com/

Download File Size:464.67 MB

---