2013
Lynda.com
Chaz Chumley
2h 38m
English
In this course, Chaz Chumley takes you through the process of transitioning a Drupal website to a responsive model that automatically tailors and sizes content for a wide range of displays, from desktops to mobile devices.
The course starts with setting up the Drupal environment in Acquia and defines some basic principles of responsive design before moving on to creating a new Drupal theme with fluid layouts, fluid media, and responsive tables and forms. Chaz also covers writing media queries, which allow you to create different style sheets for each device type.
The course wraps up with a look at Respond.js and content-aware image sizing in Drupal—responsive design tools that can optimize your project for maximum performance.
Topics include:
What is responsive design?
Understanding fixed-width vs. fluid layouts
Working with fluid margins and padding
Writing a media query
Creating responsive menus and forms
Adding min- and max-width support with Respond.js

Welcome 51s
Using the exercise files 1m 25s
Exploring the finished project 1m 3s
1. Setting Up the Environment 16m 30s
Installing Acquia Dev Desktop 3m 37s
Importing a Drupal website 4m 7s
Restoring database snapshots with the Backup and Migrate module 3m 13s
Understanding the Devel module 5m 33s
2. Adaptive vs. Responsive Design 5m 48s
What is responsive design? 3m 32s
Understanding adaptive design 2m 16s
3. The Adaptive Approach 15m 33s
Discovering fixed-width layouts 3m 47s
Understanding breakpoints 3m 33s
Using Adapt.js with Drupal 8m 13s
4. Fluid Layouts 27m 21s
Discovering fluid layouts 3m 43s
Exploring fluid widths 8m 34s
Working with fluid margins and padding 7m 41s
Making text fluid 7m 23s
5. Fluid Images and Media 16m 37s
Discovering fluid images 3m 5s
Exploring fluid image techniques 5m 6s
Working with fluid media techniques 8m 26s
6. Media Queries 21m 36s
Introduction to media queries 3m 2s
Writing our first media query 6m 10s
Creating a style sheet for each breakpoint 3m 53s
Understanding media query best practices 8m 31s
7. Responsive Menus 8m 14s
Introduction to responsive menus 2m 32s
Creating a responsive menu 3m 5s
Integrating responsive menus into Drupal 2m 37s
8. Responsive Tables 14m 52s
Introduction to responsive tables 1m 25s
Creating responsive tables 7m 30s
Integrating responsive tables into Drupal 5m 57s
9. Responsive Forms 21m 6s
Introduction to responsive forms 3m 9s
Creating responsive forms 8m 30s
Integrating responsive forms into Drupal 9m 27s
10. Responsive Tools and Techniques 6m 38s
Adding min-width and max-width support with Respond.js 2m 35s
Exploring context-aware image sizing 4m 3s
Conclusion 1m 11s
Next steps 1m 11s

http://www.lynda.com/Drupal-tutorials/Responsive-Design-Drupal/107419-2.html

Download File Size:413.48 MB

---