Responsive web design is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).
According to the technology of responsive web design, there is no need to create different versions of the site for different types of devices to make the website comfortable to watch. The same site can easily be viewed on a smartphone, a tablet, a laptop, a TV - on all range of devices.
Main principles:
- Use of flexible, grid-based layout
- Use of flexible images
- Work with media queries
«Mobile first»
Creation of the site begins with the responsive version of the website for mobile devices. At this point, designers have to implement the main idea of the site to the little screen and one column. If necessary, some information is reduced and some blocks are removed in order to keep the most important stuff. Theme we are going to use when making a responsive website is Omega theme.
First it is necessary to download the theme and 3 modules:
- Omega Tools
- Delta
- Context
Creating a subtheme based on Omega theme
After installing the theme and the modules, a link “Create new Omega subtheme” will appear in “Appearance” section. Follow this link and set the parameters for a new theme:
- Name, i.e. Mytheme;
- Machine-readable name, i.e. admarketplace;
- Put a tick on “Install automatically”;
- Choose Destination;
- as a Base theme we choose Omega;
- as a Starterkit we choose Omega HTML5 Starterkit.
Press Save and continue, after that follow 2 simple steps, where you can set additional parameters of your theme, set it by default right after install or make changes in the .info-file. If everything is done correctly and no mistakes appeared during the install, than our theme is ready! Now we can look it up in the list of themes and set default.
Layout settings
Click “Settings” link and you’ll see several tabs where Omega framework suggests us a detailed Layout configuration.
1. Grid settings
Here you can choose one of the grid types: Default (960px) — standard, adaptively fixed for different screen sizes (800, 1024, 1280), or Fluid — stretching for full screen width. We can also set @media to necessary widths on this tab.
Through @media the following CSS files are linked to our theme:
- global.css — main file, that activates on all screens including mobile, realising “mobile-first” concept
- omega-example-alpha-default.css — main styles file to use with the grid
- omega-example-alpha-default-narrow.css — file for screens with width of approximately 800 px
- omega-example-alpha-default-normal.css —file for screens with width of approximately 1024 px and all IE 8 and less
- omega-example-alpha-default-wide.css — file for screens with width of more than 1200 px.
2. Zone and region configuration
All main layout configuration happens in this tab. You can configure Drupal-regions for placing Drupal-blocks in theme settings instead of editing page.tpl.php file. This is the main feature of Omega framework. Using Omega theme prevents you from creating custom or even opening files like html.tpl.php or page.tpl.php or others. This saves you from necessity to edit html-code. You can concentrate on CSS and on a necessary layout. Width and placement of left and right sidebars, main content, and footer blocks may now be configured in a couple of clicks.
Now let’s say a couple of words about how to use it all. From the first sight everything looks a little complicated, but if you understand it once it turns to be easy further on. Adding to a standard Drupal Region, Omega introduces Sections and Zones. Regions are united into Zones, and Zones are united into Sections. There are three sections: Header, Content and Footer, and they cannot be redefined. Inside these sections it is possible to place Zones and Regions.
Each Zone has settings, main of which are: Section (a Section, where this Zone belongs), Weight (weight which defines the order of Zones in the Section), Column count (you can set number of columns for each section - defaults are 12, 16, and 24), Primary Region. Width of each Zone is equal to the page width. If the Primary region is defined, than the total number of columns of all regions inside of the zone should not exceed the number of columns of the Zone itself. Thus, if one or several regions are empty, the Primary region will fill all width. For example, if there are no blocks in Regions Sidebar First and Sidebar Second on the front page, than Region Content will fill 12 columns. And if blocks appear in the Left Sidebar on an inner page, Main Content Region width will be 9 columns. But if there will be blocks in both Sidebars, than the width of Main content will be 6 columns (as it is set). It will happen in case if the Primary region is defined in the Zone. If it is not, the Regions will have fixed widths.
Further the Regions included to the Zone are enumerated, the Regions themselves have setting similar to the Zones: Zone, Prefix (number of columns for the shift - similar to offset classes in Bootstrap), Width (width, number of columns), Weight.
By changing all these settings you can set the placement of blocks as you wish. Regions can be redefined in a standard way - in the .info file, Zones are redefined the same way (the quantity of Zones is not limited).
Additionally it is possible to completely redefine positions of all Regions for all Regions for different site pages and set other theme settings with the help of modules Delta and Context.
3. Debugging
It is a very helpful tool which adds 2 buttons, which let to turn on and off the grid and debugging blocks.
4. Toggle libraries
On this tab you are able to turn on and off different libraries. Library is an essence of Omega framework, and it is not related to Libraries API. Libraries are defined in the .info file and can contain JS and CSS files.
5. Toggle styles
Similarly to the previous tab, we can turn on and off CSS files which Omega uses, and also default Drupal styles. It is very convenient when we do not want the styles of some module to disturb us.
6. Toggle advanced elements
On the last tab we can turn off all the standard Drupal elements which cannot be turned off in default theme configurations: messages, tabs, breadcrumbs, page title, RSS icon. All other elements can be turned off in default theme settings, that are placed below the tabs and are common for all themes: logo, site name, main menu and additional menu.
Delta
If you’ve ever wanted a very different layout for the home page of your website, or perhaps for a landing page that needs to be stripped of menus and extraneous blocks, you’ve likely had to go and create a custom page.tpl.php (template file) within your Drupal theme. But instead, what if you could control the layout of your whole site (for both desktop browsers and mobile browsers) with the Omega theme, and then have different instances of those settings for different scenarios?
The Delta module is the way to do just that. Rearrange sidebars, add or remove entire regions, or change up the layout of the whole page without ever having to touch code. Once you’ve set up the generic layout for your theme in the settings page (yoursite.com/admin/appearance/settings/your_theme), install and enable the Delta module. On the theme settings page, you’ll see a new Delta tab link appear at the top. Here you can create a new Delta template. You have two options: to either start over completely with entirely new theme settings, or to reference the original theme settings page in all areas except those that you change in this Delta template.
Delta + Context
The magic comes into play when you combine Delta and the Context module. Context provides a user interface which allows you to introduce conditional statements into the theming layer. For example, you can specify that all URL paths that begin with /news* or /events* should use Delta Template XYZ, instead of the core theme settings. In this way, these pages can have a different layout than the rest of the site. (Update: You may need to enable the "Context Layouts" on the module page for this to work.)
You can also use context to hide or show blocks, add body classes, add section titles and more based on conditions like URL paths, user roles, or taxonomy terms. Context is a very powerful tool.
