Let's Dig Into the Omega Theme October 27,

Transcription

1 Let's Dig Into the Omega Theme October 27,

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+

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:

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

9

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 screen and (min-device-width: 700px) { body { font-size: 13px } 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) px and wider

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

19

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

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

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 So... what happens on mobile? Site Layout 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

35 Tips for RWD Designing in Photoshop? Download the grid-lines plugin GuideGuide: Consider the many ways to implement a mobile-friendly menu: 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

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

38 Resources

39 Thank You! Questions