Responsive Design with Drupal

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

Table of content

• Introduction
  • Welcome
  • Using the exercise files
  • Exploring the finished project
• Setting Up the Environment
  • Installing Acquia Dev Desktop
  • Importing a Drupal website
  • Restoring database snapshots with the Backup and Migrate module
  • Understanding the Devel module
• Adaptive vs. Responsive Design
  • What is responsive design?
  • Understanding adaptive design
• The Adaptive Approach
  • Discovering fixed-width layouts
  • Understanding breakpoints
  • Using Adapt.js with Drupal
• Fluid Layouts
  • Discovering fluid layouts
  • Exploring fluid widths
  • Working with fluid margins and padding
  • Making text fluid
• Fluid Images and Media
  • Discovering fluid images
  • Exploring fluid image techniques
  • Working with fluid media techniques
• Media Queries
  • Introduction to media queries
  • Writing our first media query
  • Creating a style sheet for each breakpoint
  • Understanding media query best practices
• Responsive Menus
  • Introduction to responsive menus
  • Creating a responsive menu
  • Integrating responsive menus into Drupal
• Responsive Tables
  • Introduction to responsive tables
  • Creating responsive tables
  • Integrating responsive tables into Drupal
• Responsive Forms
  • Introduction to responsive forms
  • Creating responsive forms
  • Integrating responsive forms into Drupal
• Responsive Tools and Techniques
  • Adding min-width and max-width support with Respond.js
  • Exploring context-aware image sizing
• Conclusion
  • Next steps

Rapidgator.net   

1. http://goo.gl/94ikA8