Omega Theme / Responsive Design Resources
The Omega Theme (an inherently responsive theme for Drupal) and it's complementary modules
- The Omega Theme
- Sites using the Omega Theme
- The Omega Theme Handbook (documentation)
- The Omega Tools module (this module and the Delta module are practically must-haves while working with the Omega Theme. The go together like PB & J.)
- The Delta Module
Write-Ups and Slideshow Resources
- Getting your site future-ready with Drupal + a Responsive Theme
- An Inside Look at the Omega Theme
- Control Your Page Layout using the Delta and Context Modules
- Slides for "Let's Dig Into the Omega Theme" - from Capitalcamp, DC
- Webinar: Demo of the Omega Theme
- Using the Omega Theme like a Champ
Since Omega is a "mobile first" theme, it literally means that you should add the mobile styles first, then add on CSS for tablets, desktop, and wide desktop themes. In a technical sense, it means that the global.css should contains the basic styles for text elements on the site (things like H1-H6 tags, paragraphs, UL & OLs, background & font colors, etc., since is loaded no matter what device you are using to view the website.
Then, CSS3 Media queries determine what the size of the window is and additional stylesheets will be tacked on:
Mobile = global.css
Tablet = global.css + default.css + narrow.css
Normal = global.css + default.css + narrow.css + normal.css
Wide = global.css + default.css + narrow.css + normal.css + wide.css
small (mobile) - 0px to 740px wide
narrow (tablet) - 741px to 979px wide
normal (laptop) - 980px to 1219px wide
wide (monitor) - 1220px and wider
In contrast, if the desktop version of a site was loaded first, and then media queries discover that the user is viewing using a mobile device, the only option at that point is to hide some assets from mobile browsers. Using "display: none;" only means that the asset isn’t shown — but the user still has to wait for these images to download. The only way to not initially load an asset is to not include it in your stylesheet. The way to achieve this is to make the mobile stylesheet the default, and then add in the large background images and extra styles for the desktop theme using a media query.
Typically my global.css file is the largest, and I use the Styleguide Module to add all the basic styles first. Then when I'm adding things like floats, margins, and paddings, I just have to choose if its universally needed padding for a particular element (then it will go in global.css), or if its only needed for larger devices (then it will go in default.css or some other size file).
Omega Goodies You May Have Missed
- Are you a CSS purist? Disable Omega base styles to begin theming from a clean slate. You can also disable unwanted module css within the theme settings page, under the "toggle styles" tab.
- Use the Delta module to create alternate versions of the theme settings configuration. You can then use context to apply these settings to specific sections of your site, such as the home page, to give it a whole new layout.
Omega Pitfalls to Watch Out For
- If a region (like content) is set as the primary region and it is still not auto-filling the available space horizontally, make sure the debugging blocks are turned off, and also make sure none of the other regions in that zone, such as sidebar first or second is set to "force enable".
- If you add a custom stylesheet to the CSS folder, you must also add it to the themename.info file AND then go into the Omega Theme Settings page and enable that stylesheet under the "Toggle Styles" tab.
- If you define a new custom zone or region in the .info file you must go to the theme settings page and assign it to a section or zone, and give it a weight, column width settings, etc.
- You can also add custom subregions (a.k.a. nested regions that can live inside another region), but they cannot be adjusted to terms of weight vs. position. They can only have 1 order (top to bottom order is the same as left to right order.
- Remove the left & right margins from subregions to avoid breaking the layout.
- Having troubles with IE7, IE8, or IE9 loading responsive styles? Check out this thread.
Tips on Designing for Omega
- It's best to make a mobile & tablet mockup if at all possible, so you can visualize how the whole site will look on a smaller device.
- In the mobile view, eliminate large background images. These should only be added via the default.css, normal.css, or wide.css.
- Stick with CSS3 (and CSS3PIE) to add rounded corners, gradients, drop-shadows, and even background patterns. CSS instead of images will help the page load much faster.
- If you have a large image for the site logo, section headers, or banner images, you'll need to create smaller versions for the mobile site, or implement a module that will do it for you you like CS-Adapive Images. Or if its a long, horizontal banner, can you split up the image into two smaller images? On the normal layout, the images can sit side by side and appear as one, but on mobile they can stack vertically and still be readable.
- Design on a grid! Use the Photoshop plugin GuideGuide to help you draw column guides. Try to stick to the the gridlines as much as possible.
- On a separate Photoshop layer, draw colored boxes in the background to indicate where regions and zones are. This can help with theming tremendously.
- Looking for a responsive slideshow? If you're already using Client-Side Adaptive Images, try this custom slideshow method that uses Views Slideshow and CS-Adaptive Images, or use a ready-to-go option like flexslider.
- I've started making my media queries that pull in the stylesheets for narrow, normal, and wide mutually exclusive. Meaning I am also specifying a max-width breakpoint. That way when the site loads at a "wide desktop" size, the only stylesheets being pulled in are global, default, and wide. It seemed silly to me to load narrow and normal at this size, so I got rid of them. I do this by editing the media queries on the theme settings page.
My narrow media query: all and (min-width: 740px) and (max-width: 980px)
My normal media query: all and (min-width: 980px) and (max-width: 1220px)My wide media query: all and (min-width: 1220px)
Simplicity = winning.
Responsive / Grid Tools
- Browser bookmarklet for testing your Responsive Site at various device & browser widths
- Media Queries for Standard Devices
- The 960 grid bookmarklet
- Chrome Extension: WIndows Resizer
- Responsive Tester Website
- SizeUp this is a desktop utility that allows you to use hotkeys to quickly resize and window to a "mobile" size, and back for full screen. This is a great timesaver when testing your responsive site!
- Mobilizer - A mobile preview desktop app that allows you to preview mobile websites, design mockups, and local HTML on Mac or PC.
- Omega Theme Layout Guide (PSD)
- Photoshop Guide Tool - and I also attached snapshots of the settings I use for 12 col, 16 col, and 24 column grids. Note that the first completed field in these examples is the left margin, which you may need to adjust depending on the width of your photoshop document. For example, if your PSD is 1000px wide, the left margin should be 20px.
- American Society of Clinical Oncology - (Assisted in theming using the Omega theme), a Mediacurrent project.
- Alaska Dispatch News - (Migrated to Drupal 7 & themed with Omega), a Mediacurrent project.
- Conquer Cancer Foundation - conquercancerfoundation.org (Migrated to Drupal 7 & themed with Omega), a Mediacurrent project.
- ASCO University - university.asco.org (Migrated to Drupal 7, re-designed, & themed with Omega), a Mediacurrent project.
- Tampa Bay Drupal Users Group - tbdug.com (Re-designed & themed with Omega)
- Florida Department of Children and Families (Migrated to Drupal 7, re-designed, & themed with Omega), a Mediacurrent project.
- Cancer.net (Migrated to Drupal 7 & themed with Omega, a Mediacurrent project)
- 2012 Drupalcamp Atlanta (Assisted with much of the responsive design, added mobile menu solution), a Mediacurrent project.