Let's Dig Into theOmega ThemeOctober 27, 2012

http://bit.ly/omega-traininghttp://bit.ly/omega-tips

brought to you by

Kendall Totten● Bachelors in

Communication Technology & Graphic Design from Eastern Michigan University

● Drupal Designer & Theme Specialist at Mediacurrent

● Web Design = 7+ years

● Drupal = 4+ years @Starryeyez024

Welcome!

● What’s Responsive Design?● What are Media Queries?● How does Omega use

Media Queries?● How do I use Omega to

layout my site?

The Why

Mobile pageviews in May 2011: 5.8%

Mobile pageviews in May 2012: 10.1%

Today in US and Western Europe, 90% of mobile subscribers have an Internet-ready phone.

source: http://mobithinking.com/

The What

So we know we need a mobile-friendly site.How do we make our bulky website look good on a mobile device?

Responsive Web Design (RWD) means designing a website in a manner

that changes the layout of the sitebased on the width of the user’s device or screen.

Responsive Design

The How

CSS media queries allow us to inspect the physical characteristics of the device rendering our work.

Specifically, how wide (in pixels) is it?

CSS Media Queries

@media screen and(min-device-width: 700px) { body { font-size: 13px } }

@media only screen and (min-width: 700px) and (max-width: 980px) and (orientation: landscape){ body { line-height: 1.2 } }

Great! How do I make Drupal Responsive?

The Omega Theme!

The Omega Theme

● The Omega Base Theme for Drupal 7 is an HTML5/960 grid base theme that is 100% configurable.

● It can be configured for content-first layouts.● Each region can be resized and rearranged

within its zone, based on the width of the screen.

Omega Theory

● The global.css contains the basic design elements of the site and is always loaded.

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

Modified Queries

● Mobile = global.css● Tablet = global.css + default.css + narrow.css● Normal = global.css + default.css + normal.css● Wide = global.css + default.css + wide.css

Example of my narrow layout media query:all and (min-width: 740px) and (max-width: 980px)

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

Omega Layout 101

● 3 Sections: Header, Content, Footer● Each Section holds Zones● Each Zone holds Regions● Each Region can hold blocks● Blocks hold your content!

The Grid System

● Each Omega Zone can be a 24, 16, or 12 column grid.

The Grid System

Your 12 Column Grid System is like a lego.

Region:Sidebar First

Region:Sidebar SecondRegion:

Content

The Grid SystemYour 12-column grid layout on a monitor.

The Grid SystemYour 12-column grid layout on a tablet.

The Grid SystemYour 12-column grid layout on drugs.

Site LayoutSo... what happens on mobile?

The regions stack.

Site Layout

● Use "Position" to arrange Regions on tablets & desktopsleft to right -> [ 1 ] [ 2 ] [ 3 ]

● Use "Weight" to arrange Regions for mobile[ 1 ] top[ 2 ] to[ 3 ] bottom

Debugging

Libraries

Formalize

Equal Heights

Media Queries

=

Toggle Styles

● Toggle off extraneous Omega or Drupal stylesheets before you begin writing your custom styles.

● If you add a custom stylesheet to your theme .info file, clear the cache, then go to this tab and enable your new CSS file.

Omega is great, but it works even better with its friends.

Omega Tools

● Sub-theme Wizard● Drush Integration● Easily Revert Theme Settings● Export Theme Settings (HUGE!)

Omega only looks to the theme settings page OR the theme_name.info file

CODE:.info file

Omega Tools

Delta Module

● Delta allows you to make copies of your theme settings =different layouts for different sections of your site (apply as a reaction in Context).

● Delta makes things like 'Page Title' & 'Main page content' appear as blocks

Tips for RWD

● Make a mobile & tablet wireframe if possible, to visualize how the whole site will look on a smaller device.

● Theme the mobile size first● Don't put large background

images in the global.css

http://bit.ly/omega-tips

Tips for RWD

● Designing in Photoshop? Download the grid-lines plugin GuideGuide: www.guideguide.me

● Consider the many ways to implement a mobile-friendly menu: http://www.mediacurrent.

com/blog/responsive-design-mobile-menu-options

CSS3 PIE (progressive internet explorer) makes IE 6-9 capable of rendering some of the most useful CSS3 decoration features:● border-radius● box-shadow● border-image● linear-gradient

http://drupal.org/project/css3pie

Resources● Modernizr - modernizr.com● HTML5 Shim -code.google.com/p/html5shim● CS Adaptive Images - drupal.org/project/cs_adaptive_image● Adaptive Images -drupal.org/project/adaptive_image● Flexslider - drupal.org/project/flexslider● Display Suite - drupal.org/project/ds● Context - drupal.org/project/context● Style Guide - drupal.org/project/styleguide● Convert images to pure code: http://webcodertools.

com/imagetobase64converter

Resources● http://www.fontsquirrel.com● http://caniuse.com● http://mobitest.akamai.com/● http://html5doctor.com/● https://saucelabs.com/● http://www.springbox.com/mobilizer/● http://html.adobe.com/edge/inspect/

Thank You!

QuestionsKendall Totten@Starryeyez024www.mediacurrent.com