Responsive Theming drupal and omega theme

1. By: Shafqat Hussain

2. ● What is responsive here.
● Why we need responsive design.
● Drupal Omega theme
● Other related modules
Contents

3. What is responsive design.
Responsive Web design (RWD) is a Web design
approach aimed at crafting sites to provide an optimal
viewing experience—easy reading and navigation with a
minimum of resizing, panning, and scrolling—across a wide
range of devices (from mobile phones to desktop computer
monitors)
http://en.wikipedia.org/wiki/Responsive_design

5. Why we need responsive design
Growing number of Internet Browsing devices.
● Smartphones
● Tablet Computers
● Other devices
● 3G and 4G networks
● …...

9. Responsive Themes in Drupal
● Omega
● AdaptiveTheme
● Zen
● ….

10. Omega 3 Theme - Drupal
Omega 3 is a highly configurable HTML5/960 grid
base theme. Each zone (group of regions) can be
configured for content first layouts (push/pull
classes), hidden at any time and each region can be
disabled, resized, and placed easily any way you
see fit.

11. Omega 3 Theme - Drupal
Omega 3 is best suited to those who like to build
their themes through the user interface. The
theme’s layout can be modified through the theme
settings and then contextually changed (different
layouts/settings for various portions of a site)
through integration with Delta and the Context
module.

12. Omega Tools
Build omega subtheme UI

13. Delta
Delta allows you, via the Context module to make
duplicates of your theme settings for any context
on your site. This gives you the ability for
alternative layouts as a reaction in Context

15. Omega Theme website Demo
…

16. Omega theme settings
…...

17. Delta module Demo
…….

18. Some related Modules
● Picture Module.
● Responsive images
● Responsive menu
● Modernizr(feature detection)
● html5shiv(HTML5 and CSS3 backward compatibility)

19. Questions?

20. Thank you!
By:Shafqat Hussain