2013
Lynda.com
James Williamson
5h58m
English
Following the concepts introduced in Responsive Design Fundamentals, senior author James Williamson demonstrates the practical applications of responsive design and shows how to enrich the appearance and behavior of your website across multiple devices. First, discover how to plan your design and take advantage of CSS media queries to create multiple layouts. Then make your site navigation respond to changing screen sizes with CSS and jQuery, and display media like images and video fluidly. Plus, discover how to take advantage of mobile capabilities like touch events and HTML5 forms to enhance the experience of mobile visitors. James also shows how to effectively manage resources and optimize the performance of your site.
Topics include:
- Creating mockups
- Structuring page regions
- Defining default styles and media queries
- Building desktop, tablet, and mobile layouts
- Structuring and styling menus
- Dynamically replacing menus
- Creating a responsive image gallery
- Adding phone functionality
- Testing responsive sites

Introduction 6m 42s
Welcome 1m 6s
Using the exercise files 1m 59s
Exploring the finished project 3m 37s
1. Planning Responsive Designs 47m 3s
Content planning 11m 21s
Creating mockups 10m 38s
Planning responsive UX 7m 24s
Structuring page regions 6m 46s
Structuring content for multiple devices 10m 54s
2. Building Responsive Layouts 1h 18m
Controlling the viewport 4m 59s
Defining default styles 11m 18s
Determining content breakpoints 6m 49s
Defining media queries 7m 41s
Building the basic desktop layout 8m 5s
Building the basic tablet layout 6m 30s
Building the basic mobile layout 5m 3s
Refining desktop layouts 10m 25s
Refining tablet layouts 10m 6s
Refining mobile layouts 7m 49s
3. Responsive Navigation 2h 0m
Defining a responsive navigation strategy 5m 43s
Structuring basic menus 7m 7s
Styling basic menus 10m 29s
Using CSS sprites in menus 7m 53s
Structuring complex menus 9m 42s
Using jQuery for menu behavior 9m 34s
Responding to changes in screen size 4m 41s
Minimizing menus for small screens 9m 31s
Expanding submenus through touch 5m 42s
Replacing hover styling with touch 12m 3s
Resetting menus for large screens 7m 17s
Preventing conflicts 5m 28s
Providing fallbacks 5m 5s
Dynamically replacing menus 5m 39s
Converting menus to select elements 9m 3s
Converting select elements to menus 5m 27s
4. Creating Responsive Media 56m 59s
Creating fluid images 11m 10s
Making video fluid 6m 47s
Using CSS in place of images 9m 52s
Image gallery overview 3m 8s
Structuring a responsive image gallery 4m 47s
Controlling gallery styling 11m 43s
Adding image gallery functionality 9m 32s
5. Enhancing Sites for Mobile 16m 24s
HTML5 form inputs 4m 30s
Adding phone functionality 6m 16s
Adding home screen icons 5m 38s
6. Managing Resources 28m 20s
Modernizr and Respond.js overview 5m 32s
Loading resources with Modernizr 10m 10s
Conditional resource loading 8m 56s
Testing responsive sites 3m 42s
Conclusion 4m 10s
Additional resources 4m 10s

http://www.lynda.com/Developer-Mobile-Web-tutorials/Applied-Responsive-Design/114899-2.html

Download File Size:1.81 GB

---