Controlling Your Site Layout Using The Mobile-First Omega Theme


Published on

Published in: Technology
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Controlling Your Site Layout Using The Mobile-First Omega Theme

  1. 1. Controlling YourSite Layout UsingThe Mobile-FirstOmega ThemeKendall TottenApril 24, 2013
  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: 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 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.css
  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 -● HTML5 Shim● Adaptive Images -● Flexslider -● Display Suite -● Context -● Style Guide -● CSS3PIE -● Convert icons to pure code:
  43. 43. Resources●●●●●●●●
  44. 44. Thank You!Questions?@Mediacurent