Responsive Web Design
Suresh
160210733317
Out Line
• INTRODUCTION
• HISTROY
• DEFINITION
• NEED OF RWD
• BASIC PRINCIPLES
• GRIDLAYOUTS
• FELXIBLE IMAGES
• FLEXIBLE...
History
History
• May 2010 article in A List Apart. Described the theory and
practice of responsive web design in brief 2011 book ...
Definition
• Responsive Web Designing is a small principle of scaling a size of
screen in percentages, works based on simp...
Why We Need RWD….?
The total number of people using the web on mobile devices is set to surpass desktops by 2015.
INTERNATIONAL DATA CORPORAT...
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 featur...
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 ingr...
The fluid grid concept calls for page element
sizing to be in relative units like percentages,
rather than absolute units ...
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....
Flexible Grid Layouts
Flexible images are also sized in
relative units, so as to prevent them
from displaying outside their
containing element
F...
Flexible Images
file:///D:/edu/4.1/seminor/rw
d/images/clagnut.com/sandbox
/imagetest/index.html
file:///D:/edu/4.1/semino...
Flexible Video
Similar situation as images, but maintaining proper proportions is a problem.
A lightweight, easy-to-use Jq...
Flexible Video
img, embed, object, video
{
width:
100%;
}
.video iframe,
.video object,
.video embed {
position: absolute;...
Media Queries
Media queries allow the page to use different CSS style rules based on characteristics of
the device the sit...
Media Queries
@media all and (max-width: 1024px) {...}
Common Media Query Conditions
min-‐device-‐width or min-‐device-‐he...
What web browsers support CSS3 media
queries?
Depends on
CSS3
JAVASCRIPT
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...
Queries………?
Rwd ppt
Rwd ppt
Upcoming SlideShare
Loading in …5
×

Rwd ppt

1,376 views

Published on

a presentation on the responsive web designing..that tell you technology gives more efficient way to meet the end clients and solving the user experience problems

Published in: Design, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,376
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
49
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Rwd ppt

  1. 1. Responsive Web Design Suresh 160210733317
  2. 2. Out Line • INTRODUCTION • HISTROY • DEFINITION • NEED OF RWD • BASIC PRINCIPLES • GRIDLAYOUTS • FELXIBLE IMAGES • FLEXIBLE VIDEO • MEDIA QURIES • BROWSER SUPPORT • TOOLS • NEED MORE INFORMATION….?
  3. 3. History
  4. 4. 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.
  5. 5. 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
  6. 6. Why We Need RWD….?
  7. 7. 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
  8. 8. How do we cope with users having a range of different size devices?
  9. 9. 1.Separate UI Design 2.Separate URL 3.Images 4.Video’s 5.Money Mobile Web Sites
  10. 10. Very expensive. Native App’s
  11. 11. ->methods are not completely reliable unless used in conjunction with a device capabilities database ->HTML and CSS features are supported User Agent Detection
  12. 12. Solution…….?
  13. 13. Ethan Marcotte
  14. 14. How it works…….?
  15. 15. Basic Principles 1.The Flexible Grid Layouts 2.Flexible Images 3.Flexible Videos 4.Media Queries Well, We need only 4 ingredients for this….
  16. 16. 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
  17. 17. target ÷ context × 100 = percentage target- Require Amount Of Space. context- Total Page/Grid We Have Flexible Grid Layouts
  18. 18. 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%
  19. 19. Flexible Grid Layouts
  20. 20. 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
  21. 21. Flexible Images file:///D:/edu/4.1/seminor/rw d/images/clagnut.com/sandbox /imagetest/index.html file:///D:/edu/4.1/seminor/rw d/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%; } }
  22. 22. 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
  23. 23. Flexible Video img, embed, object, video { width: 100%; } .video iframe, .video object, .video embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
  24. 24. 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) { ... }
  25. 25. 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
  26. 26. What web browsers support CSS3 media queries?
  27. 27. Depends on CSS3 JAVASCRIPT
  28. 28. BROWSER SUPPORT Responsive design is supported by 70-80% of today’s web devices
  29. 29. How many mobile browsers support CSS3 media queries?
  30. 30. Many websites are using responsive design to target mobile devices
  31. 31. Semantic Grid System Golden Grid System Inuit.Css TOOLS
  32. 32. 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- web-design www.abookapart.com/products/responsive-web-design msdn.microsoft.com/en-us/magazine/hh653584.aspx www.abookapart.com/products/responsive-web-design Need More Information………?
  33. 33. Queries………?

×