1. What is a responsive website?
One whose contents folds, flows, hides or appears as the device and its
orientation changes.
A good responsive website should have
•
•
•
•
easy viewing
easy navigation
no resizing needed
NO horizontal scrolling!

2. Why go responsive?
Why are there so many mobile companies coming up? Because people
are increasingly buying them.
Why responsive? Because ^. And as mobile usage increases, it now
accounts for 10% of worldwide Internet usage.
And by going responsive we make sure our users have a comfortable
and enjoyable experience no matter what device they are on.

3. Why go responsive?
http://www.bitrebels.com/wp-content/uploads/2011/04/Mobile-Marketing-Avertising-Landscape.jpg
some images from above infographics

4. Why go responsive?
http://www.bitrebels.com/wp-content/uploads/2011/04/Mobile-Marketing-Avertising-Landscape.jpg
some images from above infographics

5. Why go responsive?
http://www.bitrebels.com/wp-content/uploads/2011/04/Mobile-Marketing-Avertising-Landscape.jpg
some images from above infographics
Lets have LOOK at what we are talking about! (check out 1 or 2 good
responsive website)

6. Where to get started? How to approach this?
Graceful Degradation
[image]
- desktop first
or
[image]
Progressive Enhancement
- mobile first

7. Graceful Degradation
Less content - less functionality - develop for desktop degrade gracefully - YES!
More content - more functionality - develop for desktop ALAS! we don’t have so much space in a smartphone! :O

8. Progressive enhancement vs Graceful degradation
when? why?
Graceful degradation
•
•
•
starts with complexity and tries to fix for smaller screens
content and functionality gets chopped off as we go smaller
at the end - we have a website that is great on desktop and….well it doesn’t
break on tablets and smartphones
But we can still go for it! With lesser content and basic very few functionality we
can easily have the content move and flow to suit the device.

9. Progressive Enhancement
Less content - less functionality - develop for mobile - easy
enhancement - got it!
More content - more functionality - we must have this, this … and
this functionalities - develop for mobile - smooth..
move to tablet - give me more!
move to desktop - give me most!
- Enhance progressively - We Want!! ^_^

10. Progressive enhancement vs Graceful degradation
when? why?
Progressive enhancement
•
•
•
list out the essential functionalities - for mobile and larger devices
add features, complex designs, enhancement as screen size grows
at the end - we have a website that gives the basic functionality in all
devices. And more to look at in larger screens!
Any website - simple or complex - will fit into this approach.

11. Designing and Theming
The design for different devices must be connected - each
design should flow to the next.
...

12. Drupal & Responsive Theming
Our options -
1. media queries
2. context
3. panels
4. and of course...responsive base themes like zen, omega, etc.

13. Media Queries - Brief Intro
The query contains two components:
1. a media type (screen), and
2. a particular media feature (max-device-width) to inspect, followed by the
target value (480px).
eg.
@media screen and (max-device-width: 480px) {
.column {
float: none;
}
}

14. Context
Context module - https://drupal.org/project/context
Specify condition
-
Add reaction

15. Panels
Customized layouts for multiple uses - all from ui
Family of modules for panels and panesPanels : https://drupal.org/project/panels
Mini Panels : https://drupal.org/project/panels_mini
Panels In-Place Editor : https://drupal.org/project/panels_ipe
Views content panes : https://drupal.org/project/views_content
Custom content panes : https://drupal.org/project/ctools_custom_content

16. Dos and Don’ts for responsive
•
•
•
•
•
•
•
•
no pixel perfect designing/theming
everything should be flexible
on touch devices - links and buttons should have enough space for fingers
lighter/smaller images for smaller devices
good for seo - since one site for all devices
mobile friendly navigation
know from before the basic functionalities you want
...

17. Testing
•
•
•
browser plugin examples and demos
websites examples and demos
actual devices

18. Try it out!
•
Lets have a demo by creating a simple 2-3 page responsive website
[create a simple demo site - go to development]