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!

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.

Why go responsive?

http://www.bitrebels.com/wp-content/uploads/2011/04/Mobile-Marketing-Avertising-Landscape.jpg

some images from above infographics

Why go responsive?

http://www.bitrebels.com/wp-content/uploads/2011/04/Mobile-Marketing-Avertising-Landscape.jpg

some images from above infographics

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)

Where to get started? How to approach this?

Graceful Degradation

[image]

- desktop first

or

[image] Progressive Enhancement

- mobile first

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

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.

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!! ^_^

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.

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 themes like zen, omega, etc.

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;

}

}

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 panes-

Panels : 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

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

• ...

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 development]