Applied Responsive Design

By: James Williamson

Released: Mar 07, 2013

Level: Intermediate

Duration: 5h 58m

Description

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

About Author

James Williamson is a senior author for lynda.com and an Adobe Certified Instructor. He has many years of web, print, and digital video experience, and has been a featured speaker at Flashforward as well as a regular speaker at Adobe MAX. James also blogs (infrequently) about all things web at his site, Simple Primate, which can be found at www.simpleprimate.com.

Get Download James Williamson – Applied Responsive Design at Forimc.net right now!

Salepage:

Archive: https://web.archive.org/web/20130618131449/http://www.lynda.com/Developer-Mobile-Web-tutorials/Applied-Responsive-Design/114899-2/transcript

Delivery Method

– After your purchase, you’ll see a View your orders link which goes to the Downloads page. Here, you can download all the files associated with your order.
– Downloads are available once your payment is confirmed, we’ll also send you a download notification email separate from any transaction notification emails you receive from esygb.com.
– Since it is a digital copy, our suggestion is to download and save it to your hard drive. In case the link is broken for any reason, please contact us and we will resend the new download link.
– If you cannot find the download link, please don’t worry about that. We will update and notify you as soon as possible at 8:00 AM – 8:00 PM (UTC+8).

Thank You For Shopping With Us!