Presentation
•Download as ODP, PDF•
0 likes•281 views
Examples: http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html http://css-tricks.com/ http://www.engadget.com/ http://localhost/d8/ Related modules: http://drupal.org/project/omega_tools http://drupal.org/project/delta http://drupal.org/project/resp_img http://drupal.org/project/picture http://drupal.org/project/breakpoints http://drupal.org/project/browscap More examples: http://css-tricks.com/examples/ResponsiveTables/responsive.php http://jsbin.com/emexa4 http://www.drupalcommerce.org/ http://stephencaver.com/ http://colly.com/ http://www.formfett.net/ http://www.anderssonwise.com/ http://earthhour.fr/ http://clearairchallenge.com/ http://dressresponsively.com/
Recommended
More Related Content
Viewers also liked
Similar to Presentation
Similar to Presentation (20)
Presentation
- 1. Drupal, Omega Hussain Abbas Blisstering Solutions Pvt Ltd hussainweb@gmail.com @hussainweb
- 3. What is Responsive Web Design? ● Mainly Three things: – Fluid Grids – Media Queries – Flexible Images ● Adaptive Layout ● Example(s)
- 4. Other Concepts ● Grids ● Media Queries ● Breakpoints ● Mobile First Design
- 5. 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 integration – Contains starter kits for XHTML, HTML5/960px grid, etc... ● Not only for responsive designs.
- 6. Let's Build
- 7. Challenges ● Bandwidth / Performance – Browser Detection – Responsive Images ● Browser Support ● Layout Options – Breaking sidebars – Hover / Dropdown menus
- 8. Related ● Responsive Images Module ● Breakpoints Module ● Delta ● Context / Mobile Tools (D6) ● Browscap
- 9. Next? ● Drupal 8 – Breakpoints – Picture ● Responsive Images ● Responsive Videos
- 10. Questions?
- 11. Thank you for listening Hussain Abbas Blisstering Solutions Pvt Ltd Email: hussainweb@gmail.com Twitter: @hussainweb
Editor's Notes
- 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).
- 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).
- 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.
- 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 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.
- 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.
- 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.