Your SlideShare is downloading. ×
Controlling YourSite Layout UsingThe Mobile-FirstOmega ThemeKendall TottenApril 24, 2013http://bit.ly/omega-layouthttp://b...
brought to you by
Kendall Totten● Bachelors inCommunication Technology& Graphic Design fromEastern Michigan University● Drupal Designer & Th...
Welcome!● What is Responsive Design?● What are Media Queries?● How does Omega use MediaQueries?● How do I use Omega tolayo...
The WhyMobile pageviews in May 2011: 5.8%Mobile pageviews in May 2012: 10.1%Today in the U.S. 81% of mobilesubscribers are...
The WhatSo we know we need a mobile-friendly site.How do we make our bulky website lookgood on a mobile device?
Responsive WebDesign (RWD)means designing awebsite in a mannerthat changes thelayout of the sitebased on the widthof the u...
Responsive Design
The HowCSS media queries allow us to inspect thephysical characteristics of the devicerendering our work.Specifically, how...
CSS Media Queries@media screen and(min-device-width: 700px) {body { font-size: 13px }}@media only screen and(min-width: 70...
Great! How do I makeDrupal Responsive?The OmegaTheme!
The Omega Theme● The Omega Base Theme for Drupal 7 is anHTML5/960 grid base theme that is 100%configurable.● It can be con...
Omega 3.x Theory● The global.css contains the basic designelements of the site and is always loaded.Then, CSS3 Media queri...
Omega Stylesheets● Mobile = global.css● Tablet = global.css + default.css + narrow.css● Normal = global.css + default.css ...
Modified Queries● Mobile = global.css● Tablet = global.css + default.css + narrow.css● Normal = global.css + default.css +...
Default Breakpoints● small (mobile) - 0px to 740px wide● narrow (tablet) - 741px to 979px wide● normal (laptop) - 980px to...
Omega Layout 101● 3 Sections: Header, Content, Footer● Each Section holds Zones● Each Zone holds Regions● Each Region can ...
The Grid System● Each Omega Zone can be a24, 16, or 12 column grid.
The Grid SystemYour 12 Column Grid System is like a lego.Region:Sidebar FirstRegion: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 Regionson tablets & desktopsleft to right -> [ 1 ] [ 2 ] [ 3 ]● Use "Weight" to arr...
Debugging
LibrariesFormalizeEqual HeightsMedia Queries=
Toggle Styles● Toggle off extraneous Omega or Drupalstylesheets before you begin writing yourcustom styles.● If you add a ...
Omega is great, but it workseven better with its friends.
Omega Tools● Sub-theme Wizard● Drush Integration● Easily Revert Theme Settings● Export Theme Settings (HUGE!)● Works with ...
Omega only looks to the theme settings pageOR the theme_name.info fileCODE:.info fileOmega Tools
Delta Module● Delta allows you to make copies ofyour theme settings =different layouts for different sectionsof your site ...
OMEGA 4.x!
● Based on the 960 grid system● Comes with 4 preset viewportsizes● Nice GUI interface for settingup custom layouts● The De...
● Yes ● YesHTML5● No, but you can add it inyourself● YesSASS● No ● YesSUSYOmega 3.x Omega 4.x
● Four main stylesheets:○ Global○ Narrow○ Normal○ Wide.○ Plus some Omegadefaults for forms,text, branding andmore that you...
● Formalize.js● Omega Media Queries (JStriggers that allow customfunctions to be executeddepending on the screensize)● Equ...
● Ability to enable/disableDrupal Core module andOmega core stylesheets● Set viewport settings likeinitial, min and max sc...
● Debugging placeholderblocks● Grid overlay● Drush integration (tocreate subthemes)● Rebuild theme registry onpage load● R...
● Create highly customizedlayouts for your site, and anyof the site sections that mayvary with layouts.● The downside is t...
Tips for RWD● Make a mobile & tabletwireframe if possible, tovisualize how the whole sitewill look on a smaller device.● T...
Tips for RWD● Designing in Photoshop?Download the grid-lines pluginGuideGuide● Consider the many ways toimplement a mobile...
Resources● Modernizr - modernizr.com● HTML5 Shim -code.google.com/p/html5shim● Adaptive Images - drupal.org/project/boreal...
Resources● http://www.mediacurrent.com/blog/inside-look-omega-theme● http://www.mediacurrent.com/blog/control-your-drupal-...
Thank You!Questions?@Mediacurent Mediacurrent.comKendall.Totten@mediacurrent.com@Starryeyez024slideshare.net/mediacurrent
Controlling Your Site Layout Using The Mobile-First Omega Theme
Controlling Your Site Layout Using The Mobile-First Omega Theme
Upcoming SlideShare
Loading in...5
×

Controlling Your Site Layout Using The Mobile-First Omega Theme

7,420

Published on

Published in: Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
7,420
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

Transcript of "Controlling Your Site Layout Using The Mobile-First Omega Theme"

  1. 1. Controlling YourSite Layout UsingThe Mobile-FirstOmega ThemeKendall TottenApril 24, 2013http://bit.ly/omega-layouthttp://bit.ly/omega-tips
  2. 2. brought to you by
  3. 3. Kendall Totten● Bachelors inCommunication Technology& Graphic Design fromEastern Michigan University● Drupal Designer & ThemeSpecialist at Mediacurrent● Web Design = 8+ years● Drupal = 5+ years @KendallTotten
  4. 4. Welcome!● What is Responsive Design?● What are Media Queries?● How does Omega use MediaQueries?● How do I use Omega tolayout my site?
  5. 5. The WhyMobile pageviews in May 2011: 5.8%Mobile pageviews in May 2012: 10.1%Today in the U.S. 81% of mobilesubscribers are on a 3G network.source: http://mobithinking.com/Mobile pageviews in April 2013: 15.7%
  6. 6. The WhatSo we know we need a mobile-friendly site.How do we make our bulky website lookgood on a mobile device?
  7. 7. Responsive WebDesign (RWD)means designing awebsite in a mannerthat changes thelayout of the sitebased on the widthof the user’s deviceor screen.
  8. 8. Responsive Design
  9. 9. The HowCSS media queries allow us to inspect thephysical characteristics of the devicerendering our work.Specifically, how wide(in pixels) is it?
  10. 10. 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 }}
  11. 11. Great! How do I makeDrupal Responsive?The OmegaTheme!
  12. 12. The Omega Theme● The Omega Base Theme for Drupal 7 is anHTML5/960 grid base theme that is 100%configurable.● It can be configured for content-first layouts.● Each region can be resized and rearrangedwithin its zone, based on the width of thescreen.
  13. 13. Omega 3.x Theory● The global.css contains the basic designelements of the site and is always loaded.Then, CSS3 Media queriesdetermine what the sizeof the window is andadditional stylesheets willbe tacked on.
  14. 14. 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
  15. 15. 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.cssExample of my narrow layout media query:all and (min-width: 740px) and(max-width: 980px)
  16. 16. Default Breakpoints● small (mobile) - 0px to 740px wide● narrow (tablet) - 741px to 979px wide● normal (laptop) - 980px to 1219px wide● wide (monitor) - 1220px and wider
  17. 17. 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!
  18. 18. The Grid System● Each Omega Zone can be a24, 16, or 12 column grid.
  19. 19. The Grid SystemYour 12 Column Grid System is like a lego.Region:Sidebar FirstRegion:Sidebar SecondRegion:Content
  20. 20. The Grid SystemYour 12-column grid layout on a monitor.
  21. 21. The Grid SystemYour 12-column grid layout on a tablet.
  22. 22. The Grid SystemYour 12-column grid layout on drugs.
  23. 23. Site LayoutSo... what happens on mobile?The regions stack.
  24. 24. Site Layout● Use "Position" to arrange Regionson tablets & desktopsleft to right -> [ 1 ] [ 2 ] [ 3 ]● Use "Weight" to arrange Regionsfor mobile[ 1 ] top[ 2 ] to[ 3 ] bottom
  25. 25. Debugging
  26. 26. LibrariesFormalizeEqual HeightsMedia Queries=
  27. 27. Toggle Styles● Toggle off extraneous Omega or Drupalstylesheets before you begin writing yourcustom styles.● If you add a custom stylesheet to yourtheme .info file, clear the cache, then go tothe theme settings page, "Toggle Styles"tab and enable your new CSS file.
  28. 28. Omega is great, but it workseven better with its friends.
  29. 29. Omega Tools● Sub-theme Wizard● Drush Integration● Easily Revert Theme Settings● Export Theme Settings (HUGE!)● Works with other themes too
  30. 30. Omega only looks to the theme settings pageOR the theme_name.info fileCODE:.info fileOmega Tools
  31. 31. Delta Module● Delta allows you to make copies ofyour theme settings =different layouts for different sectionsof your site (apply as a reaction inContext).● Delta can also make things like PageTitle & Main page content appearas blocks, & add Color moduleintegration
  32. 32. OMEGA 4.x!
  33. 33. ● Based on the 960 grid system● Comes with 4 preset viewportsizes● Nice GUI interface for settingup custom layouts● The Delta module allows youto re-use these layouts indifferent site sections bycoupling with Context.● You may set breakpoints onthe theme settings page.● Totally fluid layout● Add in your own breakpointswhere you need them.● The introduction of "layouts"essentially makes creatingvariations of page.tpl.php incode or the use of the Deltamodule unnecessary.● It splits up the CSS of Drupalcore into separate admin andcore stylesheets, reducing CSSload by 30%LayoutOmega 3.x Omega 4.x
  34. 34. ● Yes ● YesHTML5● No, but you can add it inyourself● YesSASS● No ● YesSUSYOmega 3.x Omega 4.x
  35. 35. ● Four main stylesheets:○ Global○ Narrow○ Normal○ Wide.○ Plus some Omegadefaults for forms,text, branding andmore that you maydisable if desired.● Recommended that you followSMACSS method, but you canorganize your stylesheetshowever you like.(Intro to SMACSS Video)CSSOmega 3.x Omega 4.x
  36. 36. ● Formalize.js● Omega Media Queries (JStriggers that allow customfunctions to be executeddepending on the screensize)● Equal Heights.js● Selectivizr.js● CSS3 Media Queries JS● Respond.js● CSS3 PIE● HTML5 shivPolyfill JS LibrariesOmega 3.x Omega 4.x
  37. 37. ● Ability to enable/disableDrupal Core module andOmega core stylesheets● Set viewport settings likeinitial, min and max scale.● Apple touch icons● Clear type support forWindows● Handheld friendly (metatag forBlackberries)● Mobile Optimized (for pocketPC)● Viewport (for modernsmartphones)● Chrome Frame and IE EdgesupportExtensionsOmega 3.x Omega 4.xMetatags and HTTPHeaders
  38. 38. ● Debugging placeholderblocks● Grid overlay● Drush integration (tocreate subthemes)● Rebuild theme registry onpage load● Rebuild css and JS aggregateson page load● Browser width indicator● LiveReload built-in support● Region demo mode.● Installs all the ruby gems youneed● Lots of Drush integrationDevelopmentOmega 3.x Omega 4.x
  39. 39. ● Create highly customizedlayouts for your site, and anyof the site sections that mayvary with layouts.● The downside is that thetablets often need customcode to account for the factthat portrait orientations aretwo skinny to fit 3+ columnsside by side.● It is challenging to create witha multi-layout totally fluidsite.● This version of Omega is targetedtoward moderate to advancedthemers. Because its driven bySASS+SUSY it will be incrediblyeasy & powerful to generatelayouts for totally custombreakpoints if you arecomfortable working in code.● There are fewer options in theGUI in Omega 4.x. Instead,Omega 4.x is about giving you a"Theme API" to work with.SummaryOmega 3.x Omega 4.x
  40. 40. Tips for RWD● Make a mobile & tabletwireframe if possible, tovisualize how the whole sitewill look on a smaller device.● Theme the mobile size first● Dont put large backgroundimages in the global.csshttp://bit.ly/omega-tips
  41. 41. Tips for RWD● Designing in Photoshop?Download the grid-lines pluginGuideGuide● Consider the many ways toimplement a mobile-friendlymenu
  42. 42. Resources● Modernizr - modernizr.com● HTML5 Shim -code.google.com/p/html5shim● Adaptive Images - drupal.org/project/borealis● Flexslider - drupal.org/project/flexslider● Display Suite - drupal.org/project/ds● Context - drupal.org/project/context● Style Guide - drupal.org/project/styleguide● CSS3PIE - drupal.org/project/css3pie● Convert icons to pure code: http://webcodertools.com/imagetobase64converter
  43. 43. Resources● http://www.mediacurrent.com/blog/inside-look-omega-theme● http://www.mediacurrent.com/blog/control-your-drupal-page-layout-context-and-delta● http://www.kendallsdesign.com/blog/omega-theme-responsive-design-resources● http://caniuse.com● http://html5doctor.com/● https://saucelabs.com/● http://www.springbox.com/mobilizer/● http://html.adobe.com/edge/inspect/
  44. 44. Thank You!Questions?@Mediacurent Mediacurrent.comKendall.Totten@mediacurrent.com@Starryeyez024slideshare.net/mediacurrent

×