The Omega Drupal 7 Base Theme is a highly configurable HTML5/960 grid base theme that uses built-in media queries to make the site responsive. Each zone (group of regions) can be configured for content first layouts, that resize and rearrange themselves depending on the screen size of the user's device. The presentation will walk-through the theory behind Omega's mobile-first approach, how to use the many configuration options on the theme settings page and pitfalls to avoid. Additional Resources, Tips & Tricks & How-to can be found here: http://www.kendallsdesign.com/blog/omega-theme-responsive-design-resources

1. Let's Dig Into the
Omega Theme
October 27, 2012
http://bit.ly/omega-training
http://bit.ly/omega-tips

2. brought to you by

3. 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

4. Welcome!
● What’s Responsive Design?
● What are Media Queries?
● How does Omega use
Media Queries?
● How do I use Omega to
layout my site?

5. 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/

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

7. Responsive Web
Design (RWD)
means designing a
website in a manner
that changes the
layout of the site
based on the width
of the user’s device
or screen.

8. Responsive Design

10. 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?

11. 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 }
}

12. Great! How do I make
Drupal Responsive?
The Omega
Theme!

13. 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.

14. 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.

15. 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

16. 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)

17. 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

18. 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!

20. The Grid System
● Each Omega Zone can be a
24, 16, or 12 column grid.

21. The Grid System
Your 12 Column Grid System is like a lego.
Region: Region:
Sidebar First Sidebar Second
Region:
Content

22. The Grid System
Your 12-column grid layout on a monitor.

23. The Grid System
Your 12-column grid layout on a tablet.

24. The Grid System
Your 12-column grid layout on drugs.

25. Site Layout
So... what happens on mobile?
The regions stack.

26. Site Layout
● Use "Position" to arrange Regions
on tablets & desktops
left to right -> [ 1 ] [ 2 ] [ 3 ]
● Use "Weight" to arrange Regions
for mobile
[ 1 ] top
[ 2 ] to
[ 3 ] bottom

27. Debugging

28. Libraries
Formalize Media Queries
=
Equal Heights

29. 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.

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

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

32. Omega Tools
Omega only looks to the theme settings page
OR the theme_name.info file
CODE:
.info file

33. 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

34. 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

35. 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

36. 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

37. 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

38. 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/

39. Thank You!
Questions
Kendall Totten
@Starryeyez024
www.mediacurrent.com