Today we kick off a new series design to get you started with responsive web design in Drupal.
We'll take a fictitious site to use as our case study, The Anytown Farmers Market. This site was built using the Drupal theme, 960 Robots, a theme based on a 960px grid and designed for the desktop. (You might recognize this theme from our series on theming).
Our journey to transform the 960 Robots Drupal theme into the Responsive Robots theme will unfold in stages. First, we'll prioritize and scrutinize our content in anticipation of the content flowing into one column for mobile. Then we'll take incremental steps in adapting our site to be more fluid and flexible, converting our pixels into ems and percentages and restoring the natural flow and order of our content and site components.
Along the way, we'll make use of responsive techniques in responsive typography, implement a fluid and flexible layout, and use media queries and breakpoints to change the way the regions in our theme display for wide, narrow, and small screens.
We'll make use of some neat developer tools in both Firefox and Chrome that will help inform our decisions, as we develop adapt and enhance our site, eventually transforming it to be fully responsive.
You'll learn how to implement a responsive web site using HTML and CSS within the context of a Drupal 7 site. While preprocessors such as Sass certainly have their place in a front-end developer's toolkit, this series focuses on getting you started with responsive web design with basic tools and techniques. You will be able to make the most of this series if you are familiar with and have some working knowledge of HTML, CSS, Drupal template files, and installing a Drupal module. You should be comfortable opening and editing CSS and Drupal template files in an editor of your choice.
This week, we'll start out with the first five tutorials in this series. These lessons will move the site from static to flexible and prep our site to be responsive.
- Introduction to Responsive Web Design in Drupal
- Setting Content Priorities that Stack up
- Percentages Not Pixels: Adapting the 960px Grid
- Converting Pixels to Ems for Responsive Typography
- Calculating Responsive Margins and Padding
Next week, you'll learn how to transform your layout, menu, and images from flexible and fluid to fully responsive. I hope you'll join me in Getting Started with Responsive Web Design in Drupal.
Add new comment