+

Responsive Web Design

+The Web Landscape

(Image credit: zurb http://foundation.zurb.com)

+

+

The future is here

Mobile traffic is growing

+

(Image: http://www.freenaturepictures.com/)

New challenges

Old ones re-visited

+Why you should be concerned?

+

Designing a different interface for

every device is impossible.

Ignoring a set of devices is not an

option.

+

Ancient ways of web design won’t work anymore

(Image credit: Trey Ratcliff http://www.StuckInCustoms.com)

+

Hello there!

I am Dhruva Krishnan

I work with NetApp

+Lets talk about Architecture a bit,

shall we?

(Image credit: The Google HQ – Trey Ratcliff http://www.StuckInCustoms.com)

+And now look at websites

+

A white lie called “Minimum Screen Resolution”

In the words of Jeremy Keith “Consensual hallucination”

+

How do we handle this?

Dedicated apps?

Device specific sites?

Or, Something else?

+

So lets say hello to “Responsive Web Design”

The process of building websites/web

applications that respond to their

environment.

+What’s so great about RWD?

You can create designs for every device

Cut down on the development effort

Getting ready for interfaces/devices of the future

Improved analytics

+

What exactly is RWD then?

First principles for building sites that are responsive.

+

Give control to devices

+

Focus on Content

Everything else is designed around that content

+

Check designs across devices early on

#Richmansid

#Richmansid

#Richmansid

Think of ways people might access your design

+Sounds great. But how do you do

all this?

So what constitutes an RWD tool kit?

Awesome front-end tools

+

Flexible, FLUID grid system

+

Image styles that aren’t driven by pixels. Fluid Images to be more specific

+

Well Hello there

Well Hello there

Well Hello there

Components like typography, forms, buttons..

+

Media Queries

Media Type + Media Feature = Media Query

+A few more factors why RWD is

important

For more awesomeness

Viewport diversity

Interface Diversity

Specs Diversity

Connectivity Diversity

+Challenges?

+

Re-direct to mobile site

Optimize resources and requests and use caching

Have stand alone interfaces for different class of devices

+

RWD is the future and the way forward

Design reviews on real layouts

Look out for new resolutions

+Feeling Lazy?

Twitter Bootstrap

ZURB Foundation

jQuery Mobile + jQuery

+

+

https://gist.github.com/1792559