Join Chaz Chumley for an in-depth discussion in this video What is responsive design?, part of Drupal: Responsive Design.
So what is Responsive Design? In simple terms, Responsive Design is making sure your design responds to all environments, from mobile, to tablet, to browser, and even television screens, ensuring your design displays the most important content, comparable to the amount of viewing area now needs to be considered on all web design moving forward. Let's take a look at some websites that take Responsive Design into consideration and discuss why you would want to design responsibly and the concepts, and techniques that make up Responsive Design.
When you think responsive, you generally think fluid, and a layout that scales from large to small as the browser resizes. If we take a look at our drupal.fixed theme, as we begin the resize the browser, we notice that number one, we get horizontal scrollbars. Number two, we start to lose content. Number three, our menu disappears, and pretty much the site is starting to look, well, not very much like a site should look. If I expand the browser back out, and we take a look at our favorite coffee company, Starbucks, we're going to start to see what Responsive Design is all about.
Let's take a look some of the features first, the most important, the content. As we begin to resize our browser, the content begins to scale, items start getting smaller, yet all the content is still visible. If I scroll down the page a little bit to where I see even more of the content area and then begin to resize down even further, we can see some shifting taking place. Content that was smaller in the right sidebar now becomes bigger and is part of the main content flow. As I continue to resize our browser down to what we would expect to be the view in an iPhone or in Android device, we can see that those images and content take even more focus, and the content becomes more important.
Also, if we take a look at the menu, the menu has completely changed. These are all responsive characteristics. As I begin to expand the site out, I can watch the menu change back into what we expect menus to look like. And if I keep going even wider, I can notice that the menu itself starts to get larger. And if I hover over items, I have as a dropdown effect that displays even more content. So taking that in mind how does the page exactly react to smaller screen sizes? This is one of the major implementations of Responsive Design, known as a Media Queries, the ability to detect screen sizes, and then manipulate the CSS Hide, Show, or Scale content accordingly.
Another concept you may have seen is moving from a fixed-width pixel-based design to a percentage based fluid design so that this layout scales according to the browser itself. Finally, how about the images and how they scale? This is another common responsive characteristic that we're seeing in the mobile sphere. We've discussed what Responsive Design is. We've taken a look at some examples of responsive websites, and why it's so important to consider this when trying to reach your target audience.
However, before we begin to dive into some different techniques of Responsive Design, you may have heard another term that describes the same approach we just viewed, Adaptive Design. Let's take a minute and discuss this term and how it compares to Responsive Design.
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.
- 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