2h 38m Intermediate
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
Introduction – 3m 19s
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