By: Shafqat Hussain

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

Contents

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

Why we need responsive design

Growing number of Internet Browsing devices.● Smartphones● Tablet Computers● Other devices● 3G and 4G networks● …...

Responsive Themes in Drupal

● Omega● AdaptiveTheme ● Zen● ….

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.

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.

Omega Tools

Build omega subtheme UI

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

Omega Theme website Demo

…

Omega theme settings

…...

Delta module Demo

…….

Some related Modules

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

Questions?

Thank you!

By:Shafqat Hussain