What is a responsive website?
One whose contents folds, flows, hides or appears as the device and its

orientation changes...
Why go responsive?
Why are there so many mobile companies coming up? Because people

are increasingly buying them.
Why res...
Why go responsive?
http://www.bitrebels.com/wp-content/uploads/2011/04/Mobile-Marketing-Avertising-Landscape.jpg

some ima...
Why go responsive?
http://www.bitrebels.com/wp-content/uploads/2011/04/Mobile-Marketing-Avertising-Landscape.jpg

some ima...
Why go responsive?
http://www.bitrebels.com/wp-content/uploads/2011/04/Mobile-Marketing-Avertising-Landscape.jpg

some ima...
Where to get started? How to approach this?
Graceful Degradation
[image]
- desktop first
or

[image]

Progressive Enhancem...
Graceful Degradation
Less content - less functionality - develop for desktop degrade gracefully - YES!

More content - mor...
Progressive enhancement vs Graceful degradation
when? why?
Graceful degradation

•
•
•

starts with complexity and tries t...
Progressive Enhancement
Less content - less functionality - develop for mobile - easy

enhancement - got it!
More content ...
Progressive enhancement vs Graceful degradation
when? why?
Progressive enhancement

•
•
•

list out the essential function...
Designing and Theming
The design for different devices must be connected - each
design should flow to the next.
...
Drupal & Responsive Theming
Our options -

1. media queries
2. context

3. panels
4. and of course...responsive base theme...
Media Queries - Brief Intro
The query contains two components:

1. a media type (screen), and
2. a particular media featur...
Context
Context module - https://drupal.org/project/context

Specify condition

-

Add reaction
Panels
Customized layouts for multiple uses - all from ui

Family of modules for panels and panesPanels : https://drupal.o...
Dos and Don’ts for responsive
•
•
•
•
•
•
•
•

no pixel perfect designing/theming
everything should be flexible
on touch d...
Testing
•
•
•

browser plugin examples and demos
websites examples and demos
actual devices
Try it out!
•

Lets have a demo by creating a simple 2-3 page responsive website

[create a simple demo site - go to devel...
Upcoming SlideShare
Loading in …5
×

Basic Responsive Theming - Somedutta Ghosh

423 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Basic Responsive Theming - Somedutta Ghosh

  1. 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. 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. 3. Why go responsive? http://www.bitrebels.com/wp-content/uploads/2011/04/Mobile-Marketing-Avertising-Landscape.jpg some images from above infographics
  4. 4. Why go responsive? http://www.bitrebels.com/wp-content/uploads/2011/04/Mobile-Marketing-Avertising-Landscape.jpg some images from above infographics
  5. 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. 6. Where to get started? How to approach this? Graceful Degradation [image] - desktop first or [image] Progressive Enhancement - mobile first
  7. 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. 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. 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. 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. 11. Designing and Theming The design for different devices must be connected - each design should flow to the next. ...
  12. 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. 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. 14. Context Context module - https://drupal.org/project/context Specify condition - Add reaction
  15. 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. 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. 17. Testing • • • browser plugin examples and demos websites examples and demos actual devices
  18. 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]

×