Responsive Web Design

Suresh160210733317

Out Line• INTRODUCTION• HISTROY• DEFINITION• NEED OF RWD• BASIC PRINCIPLES• GRIDLAYOUTS• FELXIBLE IMAGES• FLEXIBLE VIDEO• MEDIA QURIES• BROWSER SUPPORT• TOOLS• NEED MORE INFORMATION….? 

History

History

• May 2010 article in A List Apart. Described the theory and

practice of responsive web design in brief 2011 book titled

Responsive Web Design. Responsive design was listed as #2 in

Top Web Design Trends for 2012 by .net magazine after 

progressive enhancement at #1.

Definition

• Responsive Web Designing is a small principle of scaling a size of

screen in percentages, works based on simple principles of Grid

Layout’s, Flexible Images, Flexible Video’s and simple css3 and

extension of Media Queries

Why We Need RWD….?

 

The total number of people using the web on mobile devices is set to surpass desktops by 2015.

INTERNATIONAL DATA CORPORATION (IDC)

http://www.idc.com/getdoc.jsp?containerId=prUS23028711

How do we cope with users having a range of different size devices?

1.Separate UI

Design

2.Separate URL

3.Images

4.Video’s

5.Money

Mobile Web Sites

Very expensive.

Native App’s

->methods are not completely reliable unless used in conjunction with a device capabilities database->HTML and CSS features are supported

User Agent Detection

Solution…….?

Ethan Marcotte

How it works…….?

Basic Principles

1.The Flexible Grid Layouts

2.Flexible Images

3.Flexible Videos

4.Media Queries

Well, We need only 4 ingredients for this….

The fluid grid concept calls for page element sizing to be in relative units like percentages, rather than absolute units like pixels or points.

Flexible Grid Layouts

In graphic design, a grid is a structure (usually two-dimensional) made up of a series of intersecting straight (vertical, horizontal, and angular) or curved guide lines used to structure content

target ÷ context × 100 = percentage

target- Require Amount Of Space.

context- Total Page/Grid We Have

Flexible Grid Layouts

Flexible Grid Layouts  

MENU

215/960*100=22.395833333%

CONTENT AREA

685/960*100=71.354166666%

INSET SLIDEBAR

215/685*100=31.3868613333%

20px margin for the Menu and

Content Area:

20/960 × 100 = 2.0833333333%

20px margin for the Inset Sidebar:

20/685 × 100 = 2.9197080292%

Flexible Grid Layouts

Flexible images are also sized in

relative units, so as to prevent them

from displaying outside their

containing element

First discovered by designer Richard Rutter, this one rule immediately provides an

incredibly handy constraint for every image in our document. Now, our img element will

render at whatever size it wants, as long as it’s narrower than its containing element.

But if it happens to be wider than its container, then the max-width: 100% directive

forces the image’s width to match the width of its container

Flexible Images

Flexible Images

file:///D:/edu/4.1/seminor/rwd/images/clagnut.com/sandbox/imagetest/index.html

file:///D:/edu/4.1/seminor/rwd/rwd/clearleft.com/index.html

Img {

width:100%; }

}

#container{

width:600px;

margin-right:auto;

margin-left:auto;

}

#left-column{

width:420px;

float:left;

background:red;

}

#right-column{

width:180px;

float:right;

background:green;

}

@media screen and(max-width: 590px)

{

#container{

width:100%; }

#left-column{

width:70%;

background:red;}

#right-column{

width:30%;

background:green;

}

img{

width:100%; } }

Flexible Video

Similar situation as images, but maintaining proper proportions is a problem.

A lightweight, easy-to-use Jquery plugin for fluid width video embeds

http://fitvidsjs.com/

jQueries a fast, small, and feature-rich javaScript library. It makes things like html document

traversal and manipulation, event handling, animation and Ajax much simpler with an easy-

to-use API that works across a multitude of browsers

Flexible Video img, embed, object, video  {  width:  100%;  }

.video iframe,

.video object,

.video embed {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

Media Queries

Media queries allow the page to use different CSS style rules based on characteristics of the

device the site is being displayed on, most commonly the width of the browser.

Media Queries is a CSS3 module allowing content rendering to adapt to conditions such as screen

resolution (e.g. smartphone vs. high definition screen).

When a media query is true, the corresponding style sheet or style rules are applied, following the normal

cascading rules.

Here is a simple example:

@media screen and (min-width:500px) { ... }

Media Queries

@media all and (max-width: 1024px) {...}

Common Media Query Conditions

min- ‐device- ‐width or min- ‐device- ‐height

Applied if the device screen is equal to or greater than this value

max- ‐device- ‐width or max- ‐device- ‐height

Applied if the device screen is equal to or less than this value

What web browsers support CSS3 media queries?

Depends onCSS3JAVASCRIPT

BROWSER SUPPORT

Responsive design is

supported by 70-80% of

today’s web devices

How many mobile browsers support CSS3 media queries?

Many websites are using responsive design to target mobile devices

Semantic Grid System

Golden Grid System

Inuit.Css

TOOLS

http://mobile.smashingmagazine.com/2013/05/29/the-

state-of-responsive-web-design/

http://mattkersley.com/responsive/

http://

learn.shayhowe.com/advanced-html-css/responsive-we

b-design

www.abookapart.com/products/responsive-web-design

msdn.microsoft.com/en-us/magazine/hh653584.aspx

www.abookapart.com/products/responsive-web-design

mediaqueri.es/

Need More Information………?

Queries………?