Viewers: in countries Watching now:
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.
One thing we probably don't think about much in the US anymore is bandwidth, and assuming that everyone must have fast speeds and with more users having mobile devices and 4G speed, why would we? How about other countries where bandwidth is not so fast? How does your website look on a mobile device in let's say Africa? How long does it take to load? Even though we've applied responsive techniques to our images for them to scale visually, we are still serving up a larger image file size. Let's remedy that by discussing context aware image sizing and a technique known as adaptive images.
Let's begin by browsing to drupal.org/projects/adaptive_image. The adaptive image module provides device- appropriate versions of images from all your fields. You can activate the adaptive images by simply adding an adaptive effect to any of your image styles. The technique used is derived from the adaptiveimages.com created by Matt Wilcox. Let's go ahead and scroll down the page and click on the zip file to download it. Once the download is complete, go ahead and open up your Downloads folder, double-click on the file to extract it, and then let's copy this to our Desktop/Drupal/drupal.responsive/sites/all/modules folder.
With the module in place, go ahead and close the download window, and let's tab back over to our responsive theme. Go ahead and log in, Username and Password all lowercase, the word admin, navigate to modules, and then scroll down the page until we find the module so that we can enable it. Here we go, Adaptive Image. Make sure it's checked, and then click on Save configuration. Unlike most modules, though, there is actually no configuration, so to speak. Instead, we actually need to go to Configuration > Image Styles, and we need to add a new preset for mobile devices.
We can do this by clicking on Add style, giving it a STYLE NAME of mobile, and the naming convention here is whatever you want to call it, but for my purposes, I'm going to call mobile and then click on Create new style. Underneath the Effects, go ahead and select Adaptive and then click Add. For the resolutions, these are actual breakpoints that we've been dealing with. For demonstration purposes, I'm going to go ahead and leave the resolutions as is. But if you have different breakpoints that you're theming against, this is where you would make those modifications. Notice the Mobile First has been checked.
This will send out to smallest version of the image when the resolution cannot be determined. Go ahead and click on Add effect. In order to utilize this effect, we need to go to Structure > Content Types, locate the content type that you want to use this against. In our case, the Article which is our blog post that is utilizing images. I then want to click on manage display, and for the Image field you see a little icon to the right. If I click on this, I can choose my mobile preset that I just configured. Go ahead and do that now, click Save, and you're done with the configuration portion.
Go ahead and click on Home, and then let's go ahead and click on Blog, and then go ahead and click actually on one of the blog posts themselves. What I'm going to do here is scroll up a little bit, and then I'm actually going to start resizing the page. And before, everything was fluid. Now you're actually going to see some different snapping take place. There is one, there is another, now it scales, and then it jumps back. So what's happening is it's actually doing an image replacement when you're seeing this snap based off the different breakpoints. So we're actually serving up a smaller file size of that image.
Scalable images both visually and physically are now capable depending on where your end user market is located and the time you want to spend in implementing context aware image sizing. With the adaptive image module, we're able to achieve that concept very easily and increase the performance of our design in mobile devices. The nice thing about this module is we don't have to create different sized images. By simply making that preset, those images are actually created for us and served up appropriately.
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.