The Picture module allows you to manage images in Drupal sites that are using Responsive Design. The module provides an interface to map existing image styles to breakpoints. The Picture module is a backport of the Drupal 8 solution for responsive images, and promises to provide a smooth upgrade path.

Installation

Recommended to download the latest version as usual. This version doesn't use JavaScript to detect the device width, but uses a picture tag and full media queries.

Module dependencies

1. Breakpoints
2. Ctools

Install and enable

1. Place all the modules in: your sites/all/modules directory; or your sites/[my site]/modules directory.
2. Enable the modules at: admin/modules

Configuration

1. Configure your theme

After you have all the modules enabled and ready to go, start with theme configuration. You set the breakpoints for view ports in your theme’s .info file.

breakpoints[mobile] = (min-width: 0px)
breakpoints[narrow] = (min-width: 560px)
breakpoints[wide] = (min-width: 851px)
breakpoints[tv] = only screen and (min-width: 3456px)

The Responsive images and styles module allows you to manage images in Drupal sites that are using Responsive Design. The module provides an interface to map existing image styles to breakpoints.

This documentation is only for the 7.x-2.x Version.

Installation

Recommended to download the 7.x-2.x Version and install. This version doesn't use javascript anymore to detect the device width, but uses a picture tag and full media queries.

Pre-requisites

1. Breakpoints
2. Ctools
3. Field formatter settings API module

Steps

1. Place all the module in: your sites/all/modules directory; or your sites/[my site]/modules directory.
2. Enable the modules at: admin/modules

Configure responsive images

1. Configure Breakpoints module
2. Create image styles required for your site at:admin/config/media/resp_img/create_style
3. Visit the responsive images configuration page: config/media/resp_img

@TODO - break this down into separate pages.
@ToDo - While most of this is still valid, we need to update this to v3.x.

USEFUL INFORMATION

• Out of the box Sasson will give you a 960 pixel grid system, you may change grid properties in your theme settings.
• Sasson gives you a responsive layout - that means your site adapts itself to the browser it is displayed on. you may set the layout breakpoints or disable this behaviour via theme settings.
• The default responsive layout takes a desktop-first approach, you can go mobile-first with a click in your theme settings.
• New - Sasson can auto-generate image sprites and matching stylesheets out of a directory of images. under your sub-theme's image directory you'll find 3 directories (horz, vert, and smart), all you need to do is put images inside those directory and call them from your Sass file:
  

  @import "sprites/DIRNAME";
  
  .selector {
     @include sprite-DIRNAME-FILENAME;
  }
  

Mojo is a starter theme geared towards advanced themers who want a solid
starting point without extraneous Drupal markup.

The main goals of the Mojo theme are:

Working with Omega

1. Install and enable the Omega Core Theme
2. Install and enable the Omega Tools module (admin/modules/). If you don’t already have it, you’ll also need the Ctools module installed and enabled. If you're a Drush user, you can skip the rest of these steps and quickly generate a subtheme of Omega using Drush.
3. Go to admin/appearance, and click on "Create new Omega Subtheme" 
4. Add your preferred subtheme name.
5. Check the “Install automatically” option if you want to create your subtheme in/sites/all/themes/ automatically, Apache needs write permissions to perform this operation. If the option is not checked, Omega Tools will generate a mysubthemename.tar file that can be downloaded after completing the steps. To install, simply unzip and place your subtheme folder into sites/all/themes.
6. Choose your subtheme save destination, the default folder is sites/all/themes.
7. Choose your base theme.

Responsive design provides a way for your site's content to be viewed in an optimal way independent of screen size. It subscribes to the "one web" idea where you only build one site for all channels, instead of a dedicated mobile version.

Responsive design is a good solution for many website owners and builders, and while it won't suit every use case it's certainly a compelling and popular concept.

Responsive design uses a blend of fluid layouts, CSS3 media queries and flexible images that when combined allow your site to adapt to the device it's being viewed on.

Your standard desktop site might be three columns, but in your average smartphone you might want to display only one column - this is entirely doable using responsive design - it's a way of re-flowing the content and layout to suit the width of the device.

You can read more about responsive design here: http://www.alistapart.com/articles/responsive-web-design/

Drupal themes that support responsive design out of the box include:

Base themes
Zen 7.x-5.x
Adaptivetheme
Omega
Aurora

Styled themes
Pixture Reloaded