Check your version

This video covers a topic in Drupal 7 which may or may not be the version you're using. We're keeping this tutorial online as a courtesy to users of Drupal 7, but we consider it archived.

Alternate resources: 

Introduction to Responsive Web Design in Drupal

Video loading...

  • 0:07
    Getting Started with Responsive Web Design in Drupal
  • 0:11
    Introduction to Responsive Web Design in Drupal
  • 0:13
    with Amber Himes Matz
  • 0:18
    Responsive web design preaches flexible grids and images,
  • 0:22
    relative font sizing, and conditional changes in design
  • 0:25
    called media queries.
  • 0:27
    While some of these techniques have broader and more historical support
  • 0:31
    than others, the principles behind responsive web design
  • 0:35
    have been around in one form or another
  • 0:38
    since the beginning of the web.
  • 0:39
    One could say, to communicate on the web is to make information
  • 0:44
    accessible to a broad audience, wider
  • 0:46
    and broader than we ever imagined.
  • 0:49
    The growth of this audience has been helped in no small part
  • 0:52
    by the introduction of smartphones, tablets, and other devices
  • 0:56
    of a variety of sizes and capabilities.
  • 0:59
    These devices render the web with more variation
  • 1:02
    than we could ever keep track of.
  • 1:04
    If you think browser compatibility was hard before,
  • 1:07
    try testing on every device out there
  • 1:09
    and retesting as new ones emerge.
  • 1:11
    It's an impossible task.
  • 1:13
    As the print design industry influenced web design
  • 1:16
    through pixel perfect layouts and precisely cropped images,
  • 1:20
    the smartphone industry is now affecting how we present, access,
  • 1:24
    and design websites and applications.
  • 1:27
    We can no longer turn up our noses to variation from the norm.
  • 1:31
    Variation is the norm, and we must embrace the challenge of designing
  • 1:35
    and presenting our websites in a way that
  • 1:38
    is responsive to the ever-changing window
  • 1:40
    through which we access the web.
  • 1:42
    To implement responsive web design seems a daunting task,
  • 1:47
    as websites have become central to businesses and organizations.
  • 1:51
    Increasingly sites are run by teams of developers who need tools that
  • 1:55
    increase efficiency, allow for complexity,
  • 1:58
    and manage files and workflows.
  • 2:01
    As a result, the number of technologies, framework, software,
  • 2:04
    and tools out, there is absolutely massive.
  • 2:07
    What happened to good old CSS and HTML markup?
  • 2:10
    Well, it's there.
  • 2:11
    It might be preprocessed or lurking in templates, but it's there.
  • 2:16
    And what about our Drupal themes?
  • 2:18
    Those themes that served us so well with
  • 2:21
    XHTML and CSS and even a grid-based layout.
  • 2:25
    They're breaking on us.
  • 2:26
    They were pristine on a 1024 by 768 monitor.
  • 2:30
    But on an iPhone, it's not looking so good.
  • 2:34
    In this series, Getting Started with Responsive Web Design in Drupal,
  • 2:38
    I'll take an old Drupal theme based on a 960 pixel grid
  • 2:42
    and convert it step by step using good old CSS
  • 2:45
    and HTML to be more fluid, more flexible, more
  • 2:49
    responsive than ever.
  • 2:51
    Our case study is the Anytown Farmers Market.
  • 2:55
    Anytown Farmers Market has an existing website
  • 2:58
    that uses a theme based on a 960 pixel grid.
  • 3:01
    It works great on larger screens, pretty well on iPads,
  • 3:05
    but on an iPhone the text is really small
  • 3:07
    and you have to pinch and zoom and horizontally
  • 3:09
    scroll to get around the screen.
  • 3:12
    Our goal will be to transition the site from a fixed width,
  • 3:16
    two-column desktop site to a flexible and fluid site whose
  • 3:21
    layout, images, and type gracefully transform at practically any size
  • 3:25
    screen to provide a user friendly experience where our site's content
  • 3:30
    can be enjoyed by users browsing with a more diverse set of devices.
  • 3:35
    We'll start out by taking a look at the content components of the home
  • 3:38
    page and walk through a content priority exercise,
  • 3:42
    deciding how each component should be prioritized and ordered when
  • 3:46
    transitioning from two columns to one column.
  • 3:50
    Next, we'll adapt our pixel based 960 grid to use percentages
  • 3:55
    instead, and make it fluid instead of fixed.
  • 3:58
    Then we'll address our typography, some of which
  • 4:00
    is in pixels, which we'll convert to the relative unit em.
  • 4:04
    We'll also address margins and padding with a lesson
  • 4:07
    on identifying the correct context when converting pixels to ems.
  • 4:12
    After that, we'll prep our markup for mobile consumption,
  • 4:15
    adding a viewport meta tag and rearranging and refactoring
  • 4:18
    a few components to restore the natural flow of elements
  • 4:22
    instead of needlessly fighting against it.
  • 4:26
    Now we're ready to implement elements of responsive web design.
  • 4:30
    We'll begin with identifying breakpoints and adding media
  • 4:33
    queries to our layout style sheet, and begin
  • 4:36
    to adapt the two-column layout to one column for smaller screens.
  • 4:40
    Throughout this series, you'll learn how to use, configure,
  • 4:44
    and customize the style of a Drupal contributed module that provides
  • 4:48
    a responsive, mobile-friendly main menu.
  • 4:51
    We'll tackle images, tables, and slide shows,
  • 4:55
    and explore some select solutions for making these traditionally
  • 4:58
    rigid elements flex with a fluid container.
  • 5:02
    In the process of converting this theme to be responsive,
  • 5:05
    you'll learn to tackle some real world, sometimes messy,
  • 5:08
    and oftentimes not so clear-cut problems and potential solutions.
  • 5:13
    To take advantage of this series, you'll
  • 5:16
    want to be comfortable with HTML and CSS and the basics
  • 5:20
    of setting up a theme in Drupal 7.
  • 5:22
    You don't need to know Sass or any advanced theming.
  • 5:26
    This series will help you understand common problems encountered
  • 5:29
    in responsive web design and how to solve them
  • 5:33
    in the context of a Drupal 7 theme using CSS.
  • 5:36
    So come on.
  • 5:37
    Let's get started with responsive web design in Drupal.

Introduction to Responsive Web Design in Drupal

Loading...

In this series, Getting Started with Responsive Web Design in Drupal, we'll take an old Drupal theme based on a 960 pixel grid, and convert it, step by step, using just good ole CSS and HTML, to be more fluid, more flexible, more responsive than ever.

Our case study is the Anytown Farmers Markets. Anytown Farmers Markets has an existing web site that uses a theme based on a 960 pixel grid. It works great on larger screens, pretty well on iPads, but on an iPhone, the text is really small and you have to pinch and zoom and horizontally scroll to get around the screen.

Our goal will be to transition the site from a fixed width two column desktop site to a fluid and flexible site whose layout, images, and type gracefully transform at practically any size screen to provide a user-friendly experience where our site's content can be enjoyed by users browsing with a more diverse set of devices.

Throughout this series, you'll learn how to use, configure, and customize the style of a Drupal contributed module that provides a responsive, mobile-friendly main menu. We'll tackle images, tables, and slideshows and explore some select solutions for making these traditionally rigid elements flex with a fluid container. In the process of converting this theme to be responsive, you'll learn to tackle some real-world, sometimes messy and often times not-so-clear-cut problems and potential solutions.

To take advantage of this series, you'll want to be comfortable with HTML and CSS and the basics of setting up a theme in Drupal 7. You don't need to know Sass or any advanced theming. This series will help you understand common problems encountered in responsive web design and how to solve them in the context of a Drupal 7 theme.

Downloads: 
Log in or sign up to download companion files.
Additional resources: