Summary: I recently completed a responsive layout Drupal 7 build, which was on a tight deadline. As there was less time for R&D than I would have liked, I had to launch into the build before fully understanding some of the principles I had committed myself to. With a bit of luck this may offer some idea of what is involved in setting up a responsive layout without falling into some of the traps I did.
Overview:
- Install Drupal 7 & get running
- Install Omega Theme and build sub theme
- Install Delta
- Install Context and Context Mobile Detect
- Build Mobile Version of site
- Build Desktop Version of site
Details: The build used Drupal 7, with the Omega Theme. I have largely used the zen theme for previous builds and have been very happy with it, but this was for fixed sites. The general opinion on the research I carried out before starting the build was that Omega provided a good working solution for responsive layouts. A very rough overview, it uses the 960 grid system and allows you to configure the layout of the site using sections, zones and regions.
In a nutshell:
- All content needs to be in a Drupal block.
- These blocks are then assigned to Omega regions and the regions are contained within a zone.
- The Sections contain the zones.
Rather than just rewrite the documentation, you can read the official Omega layout configuration.
In practice this setup allows for you to get the layout you need to match the design you have. Just as long as you remember that to keep elements within their sections, it should work quite well. You can read the full documentation on the Omega Documentation.
A section is a full width block [at least, I set it to be the full page width]. The Zones that make up the content of a section can be split into 12, 16 or 24 columns. The regions that build a zone can then be set to fill from 1 up to the the number of columns a zone has.
There is also weighting to control the positioning of the zones within a section and the regions within a zone. You can also set up which is the default area for the mobile (single column) layout so that your important content appears before everything else in that zone.
If you need to add more building blocks to the theme, you need to update the theme .info file, which can get a little tricky as there seemed to be very little documentation on the options [at least when I was building... either that or my search skills were lacking, which is quite possible].
Once you have your general layout sorted - WRITE AND TEST THE MOBILE CSS. I 'missed' [ignored] this advice in the rush to get something up and ready and this proved to be quite a major mistake as it took quite some time to go back and unpick. The basics of the CSS set up are as follows:
- global.css: provides the default styles for the site in all its variations. As the mobile version of the site should be a simple 1 column set up this should be defined here.
- theme-name-alpha-default.css: The base style sheet for the multi column / desktop version of the site.
- theme-name-alpha-default-narrow.css, theme-name-alpha-default-normal.css and theme-name-alpha-default-wide.css: apply styles specific to a width.
For example, if you are using a view and the content of the view block appears in a 12 column region, the width of each element in the view output needs to be set to the corresponding number of columns you wish it to cover. So a style that is common to all version of the site (for example the font weight) is defined in the global.css. If there are styles only applicable to all the desktop versions, for example the font is bold, then this style definition should be in theme-name-alpha-default.css.
To mimic the column layout of the theme, I calculated the width of a column in each wide, normal and narrow versions of the layout. In my set up the width came to 80px, normal 60px and narrow 40px. If I then wanted an element to cover 2 columns then I defined it's width in each of the width stylesheets (-narrow.css, -normal.css and -wide.css) so the wide came to 160px, normal 120px and narrow 80px.
Inevitably the design of a site will not use one template for all content. This is were Context and Delta come in. Delta provides theme layout variations. If you have your default layout all set up in the Omega but need some of the regions rearranging, or additional regions, or regions removed, [for example the difference between a content page and the home page] Delta provides the mechanism to do this. There are two methods:
- Preserve method where it only saves the changes you make and uses the root layout for all the other parts... except this seems to have a few errors in it. I ran into this a few times, but it did not cause too many problems in my set up, but it is something to be aware of.
- Override method which stores all the settings - any changes to the root layout will not affect the child layout.
Context provides the rules to use the delta templates and then which blocks go in which regions. For example if I have a listings page [essentially a view block showing all the items that meet the specified criteria] I want to use a different layout for this type of page, perhaps with no sidebar content or other page elements either removed or moved.
The layout of the page content used a different layout and could be defined in context by assigning a specific delta layout to a node type. Partly due to my error in building the desktop version of the site first, but also partly due to the content/design differences between the mobile and desktop version of the site, the Context Mobile Detect module provided a method to supply different delta layouts and block content based on the device type - I also included a custom mobile only css file to the mobile delta layouts to avoid adding css that was mobile only that would need to be overridden on the desktop version of the site.
The last part of the puzzle are the responsive images. As the column width changes between the mobile up to the wide version of the site, a method of re-sizing images on the fly is required. I normally use CKEditor with IMCE for the images. To get responsive images, I used Responsive images and styles.
For the most part this was seamless and did what it said it would - specifically send the browser the correct size image rather than just re-size the image to fit. Sending full sized images to a mobile would slow the mobile site down and suck up the user's monthly bandwidth!
There are a few things that you need to be aware of when using the module. It says on the module description: "Selecting _default as suffix might break your theme, safer is to always use __ (2 underscores) like __default."
Really, do this. Again in my rush to meet the deadline I did not fully understand what this meant and then ran into problems [RTFM?? EBKAC??]. Changing the names I had set up to use the double underscore did cause some difficulty as I ended up with missing images that I could not for the life of me work out how to get them back - and ended up deleting them and starting again. Luckily there were only a few images to deal with.
The IMCE module does not provide a nice solution to using these image styles and I could not find a good workaround. So I ended up using the media module. This is a great module for the most part, but there were some quirks that seemed a little awkward. Specifically, to add different image presets you need to write a custom module - it would have been nice to have that option within the media module. It also seems tricky to to edit images once they were in. This may be down to having IMCE in there as well, as IMCE seemed to be the plugin that activated when I tried to edit an existing image. Or it may be me not knowing the media plugin as well as the IMCE one.