Controlling Your Site Layout Using The Mobile-First Omega Theme

  • 6,447 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
6,447
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
5

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Controlling YourSite Layout UsingThe Mobile-FirstOmega ThemeKendall TottenApril 24, 2013http://bit.ly/omega-layouthttp://bit.ly/omega-tips
  • 2. brought to you by
  • 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. Welcome!● What is Responsive Design?● What are Media Queries?● How does Omega use MediaQueries?● How do I use Omega tolayout my site?
  • 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. The WhatSo we know we need a mobile-friendly site.How do we make our bulky website lookgood on a mobile device?
  • 7. Responsive WebDesign (RWD)means designing awebsite in a mannerthat changes thelayout of the sitebased on the widthof the user’s deviceor screen.
  • 8. Responsive Design
  • 9. The HowCSS media queries allow us to inspect thephysical characteristics of the devicerendering our work.Specifically, how wide(in pixels) is it?
  • 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. Great! How do I makeDrupal Responsive?The OmegaTheme!
  • 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. 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. 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. 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. 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. 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. The Grid System● Each Omega Zone can be a24, 16, or 12 column grid.
  • 19. The Grid SystemYour 12 Column Grid System is like a lego.Region:Sidebar FirstRegion:Sidebar SecondRegion:Content
  • 20. The Grid SystemYour 12-column grid layout on a monitor.
  • 21. The Grid SystemYour 12-column grid layout on a tablet.
  • 22. The Grid SystemYour 12-column grid layout on drugs.
  • 23. Site LayoutSo... what happens on mobile?The regions stack.
  • 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. Debugging
  • 26. LibrariesFormalizeEqual HeightsMedia Queries=
  • 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. Omega is great, but it workseven better with its friends.
  • 29. Omega Tools● Sub-theme Wizard● Drush Integration● Easily Revert Theme Settings● Export Theme Settings (HUGE!)● Works with other themes too
  • 30. Omega only looks to the theme settings pageOR the theme_name.info fileCODE:.info fileOmega Tools
  • 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. OMEGA 4.x!
  • 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. ● Yes ● YesHTML5● No, but you can add it inyourself● YesSASS● No ● YesSUSYOmega 3.x Omega 4.x
  • 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. ● 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. ● 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. ● 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. ● 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. 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. Tips for RWD● Designing in Photoshop?Download the grid-lines pluginGuideGuide● Consider the many ways toimplement a mobile-friendlymenu
  • 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. 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. Thank You!Questions?@Mediacurent Mediacurrent.comKendall.Totten@mediacurrent.com@Starryeyez024slideshare.net/mediacurrent