presentation
If you can't read please download the document
TRANSCRIPT
Drupal, Omega
Hussain AbbasBlisstering Solutions Pvt Ltd
[email protected]@hussainweb
Hi everyone,My name is Husain. I am here to take you through a few slides about Drupal, Omega and RWD (not necessarily in that order).
Responsive Web Design?
Let me start by asking, with a quick show of hands, how many here have heard of RWD? Used it? Worked with it?How many have used Drupal + Omega?
Let's cover a bit of RWD first (anyway).
What is Responsive Web Design?
Mainly Three things:Fluid Grids
Media Queries
Flexible Images
Adaptive Layout
Example(s)
The concept, as introduced by Ethan Marcotte in the heading of RWD, is mainly these three things: Fluid Grids, Media Queries and Flexible Images.The bigger picture, however, deals with a lot more than just fluid layouts. Adaptive layout contains different fixed width layouts which makes it easier to work with certain types of designs.
Other Concepts
Grids
Media Queries
Breakpoints
Mobile First Design
Before we jump into Omega, lets look a little deeper into the world of RWD.Grids Think of these as equal width columns you draw on paper, except this can be fixed width or flexible. Web designers usually use 12 columns to layout the page.Media Queries These are something like filters. The CSS under a media query will only be applied if the query result is true. This way, you can define a set of CSS styles to be active in conditions like when the screen width is at least 800px and portrait mode.Breakpoints These are specific points in the width of your design where you would affect a change in stylesheet rules, via media queries.Mobile First Design As against progressive design, this idea proposes that the designs should be built from ground-up first targetting mobile devices and then adding features up to desktop and beyond.
Omega
Based on Alpha theme.Has the basic CSS reset, grid, core layout.
Provides responsive features.
Has basic templating functions.
Basic Interface and Debugging
Omega contains advanced libraries and functions and other integrationContains starter kits for XHTML, HTML5/960px grid, etc...
Not only for responsive designs.
Omega is based on another theme called Alpha which provides basic CSS housekeeping like resets, various grid options and responsive features. It provides some of the basic template overrides and debugging options (which we'll see, soon).Omega provides some more libraries and functions, and overrides some more templates. The Omega package also contains starter kits that you can use to start your theme.
Let's Build
Challenges
Bandwidth / PerformanceBrowser Detection
Responsive Images
Browser Support
Layout OptionsBreaking sidebars
Hover / Dropdown menus
We are developers and designers. We like to think that all our visitors will use a 1.5 Ghz quad-core phone with a GB of RAM and use LTE to browse our website on their phone. Official statistics show that this dream is at least a few years away. While we can build for that glorious day; today, we have to live with our visitors using a 2.5 phone over a 2G network. It is our problem to plan for that.Cue in the thing we were trying to avoid all the while device detection. We need to find ways to serve lower resolutions images, and lesser page content to these devices.While browser support is less of a problem now, it can be useful to come to terms once in a while. Of course, Omega takes care of most of these problems.A bit more engaging problem would deal with layout itself and how to handle events such as mouse hover and adaptive layout to break parts of sidebars.
Related
Responsive Images Module
Breakpoints Module
Delta
Context / Mobile Tools (D6)
Browscap
Specific to Drupal, these are some of the modules available that assist in building a responsive website.Like we saw earlier, responsive images are one of the biggest issues today. Modules like resp_img along with breakpoints (or picture formatter from D8) provide solutions to this problem.As for selective loading of page content, options range from very generic use of Context along with Delta (to reconfigure the entire region structure) to somewhat specific use of Browscap along with modules like Browscap Block or Browscap Ctools to hide page sections on mobile browsers.
Next?
Drupal 8Breakpoints
Picture
Responsive Images
Responsive Videos
Questions?
Thank you for listening
Hussain AbbasBlisstering Solutions Pvt Ltd
Email: [email protected]: @hussainweb