Start learning with our library of video tutorials taught by experts. Get started
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.
Hello, I am Chaz Chumley, and I would like to welcome you to Responsive Design with Drupal. In this course we'll explore exactly what Responsive Design is, why it's important when creating or modifying websites, the different techniques involved, and how that is applied to Drupal 7. We will begin by quickly setting up our Drupal environment and installing the fixed-width theme and then progress to how we make that theme scalable for mobile devices. Along the way we will take a look at various techniques involved in the mobile workflow, such as CSS 3 Media Queries, fluid layouts, fluid images, responsive forms, and how to apply these techniques within the Drupal 7 framework.
So let's get started with Responsive Design with Drupal.
There are currently no FAQs about Responsive Design with Drupal.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.