Omega Theme / Responsive Design Resources

Submitted by starryeyez024
on June 15, 2012 - 1:54pm

Since I've begin working with the Omega Theme and Responsive design, I've accumulated quite a list of handy links and tools that I use to help me build my wireframes and mockups, test my designs, and work with Omega (yes, I do refer to my own blog posts sometimes!) Hopefully this list can help you in some way too!

And just in case you aren't sure what responsive design is or why it's important, here's a couple good reads.
 

The Omega Theme (an inherently responsive theme for Drupal) and it's complementary modules

 

Write-Ups and Slideshow Resources

 

Omega Basics

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: 

Omega Stylesheets

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

Omega Breakpoints

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

  1. Omega can let you set all the regions in a zone or all the blocks in a region to be the same height (via javascript). In the "Toggle Libraries" tab of the theme settings page, first enable the equalheights.js library and save the theme settings. Then go to the configuration options for a zone or region, and check the box, "Force equal height for all child elements."
  2. 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.
  3. 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

  1. 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". 
  2. 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.
  3. 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.
  4. 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. 
  5. Remove the left & right margins from subregions to avoid breaking the layout.
  6. Having troubles with IE7, IE8, or IE9 loading responsive styles? Check out this thread.

Tips on Designing for Omega

  1. 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.
  2. In the mobile view, eliminate large background images. These should only be added via the default.css, normal.css, or wide.css. 
  3. 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.
  4. 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.
  5. 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.
  6. On a separate Photoshop layer, draw colored boxes in the background to indicate where regions and zones are. This can help with theming tremendously.
  7. 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.
  8. 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

  
 

Sites that I've themed with Omega. More coming soon!

 

Tags: 
Responsive Design
Omega Theme
howto
how to
documentation
drupal
Omega
responsive
RWD
mobile
tools
960 grid
960
front

Comments

August 28, 2012 - 3:12pm — CIsSharp (not verified)

Hi,

Thank you for this awesome article. Could you please explain the support of panel with omega theme?

Thanks.

starryeyez024's picture

September 20, 2012 - 2:59pm — starryeyez024

Thanks! And there's actually a great discussion and post on Panels & Omega here. :)

[UPDATE] - Omega comes with a handful of panels layouts by default. If you enable Panels on your site with the Omega theme also enabled, and you go to add a new panel you will see Omega: 12, ( or 16 or 24) Column Grid listed. Choose one of those, then choose a layout. I'm embarrassed about how easy it was, and I never even knew!

October 2, 2012 - 3:22pm — CIsSharp (not verified)

Thank you Kendall,

Can you suggest me if there is any responsive menus out of the box? I want to use mega menu for normal layout and select-box type menu for mobile view. Do I need to create separate menus for normal and hide one of them with browcap or something?

Thanks,

Pradip

starryeyez024's picture

October 2, 2012 - 4:50pm — starryeyez024

Good question! I wrote up a quick blog post outlining a few thoughts on mobile menu solutions. :)

October 3, 2012 - 8:52am — CIsSharp (not verified)

Thank you Kendall.
It is so helpful.

October 16, 2012 - 12:04am — Hao (not verified)

Hi Kendall,

If we use omega tool module for theme configuration exporting, is there any blind spot(s) that this module doesn't cover? In other words, possibly in what circumstances theme configurations can't be exported by omega tool?

Thanks,

Hao

starryeyez024's picture

October 16, 2012 - 9:43am — starryeyez024

Hi Hao,

It seems there is some issue with the standard theme settings (like toggling main menu, site name, site slogan) not being reverted properly, but there is a patch for it which was recently added. As far as settings not being exported properly I have not encountered any problems personally, but I did talk to someone at a camp who mentioned they had an issue regarding this matter. Sorry I can't elaborate on it, I didn't see it, nor do I know what happened.

I can tell you that if you use the export button to move the code into your theme .info file, it does the job nicely. If you choose to copy and paste the code, be sure not to overwrite your zones, regions and css declarations at the top of the .info file. Start with the line that matches what you copied from the Omega export screen.

There is a patch to use Drush to revert your theme settings, but as far as I know, there is not a Drush command to export your theme settings (yet)!

October 16, 2012 - 9:50pm — Hao (not verified)

Appreciate your helpful feedback!

December 13, 2012 - 12:52pm — CIsSharp (not verified)

Hi Kendall,

Is it possible to do not display slider in the mobile layout? I can use display:none, visibility:hidden but I believe the contents will still be loaded and no advantage in speed. So is there any techniques or modules to do so?

Thank you

starryeyez024's picture

December 13, 2012 - 2:26pm — starryeyez024

If you're using the CS Adaptive Image module, you could set the mobile size images to a thumbnail size and display them that way. There's no reason to totally hide the content from mobile users if it's valuable and there are mobile solutions to do so. If it's just useless flair, then perhaps desktop users don't need to see it either?

There's no good way that I know of to easily load or not load chunks of content in mobile only without doing browser sniffing which is unreliable.

If you are really determined, you could look into maybe integrating an AJAX solution which then uses media queries in the javascript.

December 17, 2012 - 4:31pm — David1246 (not verified)

Thank you for this... I love Drupal, awesome platform to work with...

December 21, 2012 - 12:03am — Mark (not verified)

Thanks for the helpful page and online videos! I like the concept in 'Tips on Designing for Omega' #8, of not loading a narrow css page 1st and then overriding it for the wide version. However, I don't follow how a media query itself would affect which combination of css files are loaded--did you modify the Omega code somewhere, for example specifying which css files 'wide layout' would load?

starryeyez024's picture

December 21, 2012 - 9:55am — starryeyez024

I didn't need to modify Omega code, it is already built to load the CSS files based on the media query specified on the theme settings page. For example, if you modify the "Normal" layout media queries to look like this: http://bit.ly/UVI5Gw  then Omega will only load the normal.css file between the screen widths of  980px and 1220px. Same goes for the other layout sizes. :)

 

February 5, 2013 - 4:15pm — CIsSharp (not verified)

Hi Kendall,

Is there any custom css file we can edit if we apply fluid layout along with normal one? I have fluid layout for 740 px to 989 px and it is working fine but I want to change some styles. But I didn't find any css file related (I tried with narrow without success).

starryeyez024's picture

February 11, 2013 - 9:23am — starryeyez024

I had some trouble understanding how the grids in Omega were setup too, because I was trying to figure out how to create an Omega theme custom grid system that uses two different fluid layouts. Here are my notes: http://bit.ly/ThotLJ

February 7, 2013 - 9:40am — CIsSharp (not verified)

I have a site and it is using omega. It has custom layout with min-width 998px and responsive is checked. I have a media query for that layout as 'all and (min-device-width: 600px), (min-device-width: 1120px) and (min-width: 998px) and (orientation: landscape)'. Now, when I view the website in my tablet (1024*600) and in landscape mode, it is choosing right css but there is a scrollbar and I need to scroll to see hidden contents at right. I am not sure why it happens. I followed http://www.mydrupaljourney.com/articles/2011/06/24/omegas-grid-layout-se... but no success. I also tried with setting maximum scale option to 3 but still no changes. I tried it in firefox and opera also.

Am I missing something here. I assume 998px website should display on 1024px tablet without scrollbar. Moreover, I think the website need to be fit on the display (no scrollbar) even with 600px tablet/ipad as I have correct meta tags.

starryeyez024's picture

February 11, 2013 - 9:26am — starryeyez024

I've seen this happen from time to time too, but horizontal scrollbars are not usually something related to the Omega theme settings. More often than not, there is an element on your page that is breaking out of the grid. Generally culprits include: images, tables, and iframes. If you have any of these on your site, try narrowing your browser to a tablet size, then check out those items with web inspector and make sure that they are not breaking out of their parent container. 

February 11, 2013 - 4:47am — Anelia (not verified)

Hi, I've been trying to finish up a web in drupal 7 and of course using Omega 3 for theming, but now that I am configuring the Content (articles and basic pages) I saw that the images I put in the content are not rescaling with the responsive grid. And I really don't know if I should have this in mind before I configure the content field or what?!
The thing is if the images don't rescale it looks weird because all of the web components rescale pretty good. Do you know where I can find help, or if you have an Idea how to fix it, I would appreciate it very much!

Thank you in advance!

starryeyez024's picture

February 11, 2013 - 9:19am — starryeyez024

 

Hi Anelia,
 
There are several modules out there which you should absolutely consider installing that helps create different sizes of each image and loads the proper one depending on the width of the screen, try Borealis, CS Adaptive Image, or Adaptive Image.
 
A bit of basic CSS will make it so that the images auto scale to fit your grid, but this is not a total solution, especially if you have any large images on your site. If for some reason you only have small thumbnail size images, this would be enough (for now)!
 
img {  
  max-width: $percent;
  max-width: none\9;
  display: block;
  height: auto;
}
 
*Note, the second max-width contains an Internet Explorer hack for version older than IE9. This is because they don't understand the max-width property. I also include a display: block because Firefox will only apply max-width to elements that are displayed as a block as opposed to inline.
 
If you happen to be using SASS, I use a mixin that looks similar and it comes in handy on other elements besides just images:
 
//mixin max-width
@mixin max-width($percent: 100%)
  max-width: $percent
  max-width: none\9
  display: block
  height: auto
 
//include it in the .sass file like this:
img
  +max-width(100)

February 14, 2013 - 3:08am — Drupal Omega (not verified)

Hi Folks,
I was looking for tutorial where I can learn Omega Theming for drupal 7 .
I got so many of them. I can make sub theme and other admin-grid settings .
Can somebody let me know how to apply my HTML-CSS template layout and css image background with Omega.
which css file should I modify..?

I put my style.css codes into global.css but it didn't work :(

Thanks in advanced.

starryeyez024's picture

February 14, 2013 - 10:00am — starryeyez024

I recommend checking out www.buildamodule.com, there are some great videos there for getting started with theming Drupal sites. Look for Chapter 8, "How to Add to and Manipulate the Theme Layer". 

The global.css file of your Omega subtheme will apply to the entire site. 

March 10, 2013 - 1:46pm — Shasha (not verified)

Thank you for your super tutorial.

What I still dont know is, how to change the Layout Patterns . Is that somehow possible with delta module?

thank you
S.

starryeyez024's picture

March 12, 2013 - 9:49am — starryeyez024

The layout can be control independently for mobile devices vs desktop by adjusting the weights and positions of the regions. See the Omega documentation for more details. 

March 11, 2013 - 2:54pm — Yvette (not verified)

Thank you for this! #8 under Tips on Designing for Omega saved me from pulling my hair out!

May 7, 2013 - 8:19am — CatieB (not verified)

What a great resource! I wish I would have found this a couple weeks ago, but I'm glad I found it now.

Post new comment

More information about text formats

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
Type the characters you see in this picture. (verify using audio)
Type the characters you see in the picture above; if you can't read them, submit the form and a new image will be generated. Not case sensitive.

 

Psst, I also have quite a few blog posts at Mediacurrent.com!

 

 

©2012 Kendall Totten