Responsive Web Design With Drupal
Drupal Responsive theme is a mixed work of CSS3, Drupal’s base themes like Zen, Omega, AdaptiveTheme etc., and Drupal standards. Drupal base theme provides back-end and file structure for the developer so the theme development becomes easy. Most of the Drupal’s base themes are supporting responsive theme from 7.x version of the Drupal.
You can find your base theme from the Drupal site. There are about 1,759 themes available in Drupal. You can choose any base theme to make a sub-theme out of it. Actually, you can make as many themes as you want from a base theme. Base theme comes with a starterkit/subtheme. Zen, Omega and AdaptiveTheme are among the most popular themes if Drupal.
You will need to download the latest version of a base theme to start with. After the download is done, extract it and copy the theme folder to sites/all/themes. You will get a README/README-FIRST OR GETTING_STARTD.txt files which will guide you through the initial steps.
As a first step, you will need to copy the starterkit (which is a blank theme) to sites/all/themes. Rename the folder with your theme name i.e. yourtheme. So you will see the directory structure as sites/all/themes/yourtheme. Always remember that you should not rename any file or folder or should not modify any CSS or PHP file in the base theme folder. Whatever changes you want will need to be done in the sub-theme you create following the first step.
You will find one more README.txt file from inside of the sub-theme which you just created following the step above. This README.txt file will provide you the step by step information to complete the basic setup of your sub-theme.
That’s it! These are the basic things you will need to do before going into making a Drupal Responsive Theme.
The Base of Responsive Theme: The Media Query
A responsive theme is a theme which adjusts itself according to the device on which it is being viewed.
A responsive theme uses media query to detect the screen size. Examples of media queries are as given below,
For Small screen phones: @media screen and (min-width: 320px)
For Smart phones in portrait mode: @media screen and (min-width: 480px)
For Smart phones in landscape mode and Tabs in portrait: @media screen and (min-width: 480px) and (max-width: 959px)
Tabs in landscape mode and anything bigger than this resolution size: @media screen and (min-width: 960px)
The theme will find the screen size of the device and will call the most fitting media query, i.e. if your website is being viewed in a Smartphone (portrait mode), the site will know this and will call the media query with min-width: 480px and will apply a related CSS to every part of your website to make it proper fit to that screen.
There is no fixed rule of the resolutions used in the media queries. However, there are certain standard resolutions which most devices have and your CSS should cover them to match best with them.
How the text and images gets resized on different devices?
The CSS will be divided into the media query and each media query will have its sets of sizes and other CSS attributes for each part which need to be adjusted according to the device resolution. For example, in the media query with 480px (for smart phone) and main content region with max-width of 480px, any image you add with the size bigger than 480px will be displayed of the max-width of 480px. The width will be defined in %, i.e. width 100% will show the image with max-width of 480px and width 50% will show the image with the width of 240px. This means the size in % will make a proportionate change in the size of image in relation to the max/min-width.
Same rule will be applied for other contents like titles, texts and blocks. Generally, this max and min-width rule applies to the main content and divisions, i.e. Header, Content, Sidebars (right/left) and footer. All the child divisions will be defined in %, so they will adapt to the respective sets of CSS attributes of a media query and will stay in the min/max limits of its main division set by that particular media query. See below example.
Hope this article will help those developers who are looking for a guide to making a responsive theme in Drupal. Note that the media queries are independent of the technology and CMS.
Best of luck with responsive design!
Visit www.aumbss.com and submit a contact us form for your Drupal related needs.