rwd ppt
Post on 21-Oct-2014
891 views
DESCRIPTION
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 problemsTRANSCRIPT
![Page 1: Rwd ppt](https://reader034.vdocuments.site/reader034/viewer/2022051311/5445dee9afaf9fef2a8b46b9/html5/thumbnails/1.jpg)
Responsive Web Design
Suresh160210733317
![Page 2: Rwd ppt](https://reader034.vdocuments.site/reader034/viewer/2022051311/5445dee9afaf9fef2a8b46b9/html5/thumbnails/2.jpg)
Out Line• INTRODUCTION• HISTROY• DEFINITION• NEED OF RWD• BASIC PRINCIPLES• GRIDLAYOUTS• FELXIBLE IMAGES• FLEXIBLE VIDEO• MEDIA QURIES• BROWSER SUPPORT• TOOLS• NEED MORE INFORMATION….?
![Page 3: Rwd ppt](https://reader034.vdocuments.site/reader034/viewer/2022051311/5445dee9afaf9fef2a8b46b9/html5/thumbnails/3.jpg)
History
![Page 4: Rwd ppt](https://reader034.vdocuments.site/reader034/viewer/2022051311/5445dee9afaf9fef2a8b46b9/html5/thumbnails/4.jpg)
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.
![Page 5: Rwd ppt](https://reader034.vdocuments.site/reader034/viewer/2022051311/5445dee9afaf9fef2a8b46b9/html5/thumbnails/5.jpg)
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
![Page 6: Rwd ppt](https://reader034.vdocuments.site/reader034/viewer/2022051311/5445dee9afaf9fef2a8b46b9/html5/thumbnails/6.jpg)
Why We Need RWD….?
![Page 7: Rwd ppt](https://reader034.vdocuments.site/reader034/viewer/2022051311/5445dee9afaf9fef2a8b46b9/html5/thumbnails/7.jpg)
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
![Page 8: Rwd ppt](https://reader034.vdocuments.site/reader034/viewer/2022051311/5445dee9afaf9fef2a8b46b9/html5/thumbnails/8.jpg)
How do we cope with users having a range of different size devices?
![Page 9: Rwd ppt](https://reader034.vdocuments.site/reader034/viewer/2022051311/5445dee9afaf9fef2a8b46b9/html5/thumbnails/9.jpg)
1.Separate UI
Design
2.Separate URL
3.Images
4.Video’s
5.Money
Mobile Web Sites
![Page 10: Rwd ppt](https://reader034.vdocuments.site/reader034/viewer/2022051311/5445dee9afaf9fef2a8b46b9/html5/thumbnails/10.jpg)
Very expensive.
Native App’s
![Page 11: Rwd ppt](https://reader034.vdocuments.site/reader034/viewer/2022051311/5445dee9afaf9fef2a8b46b9/html5/thumbnails/11.jpg)
->methods are not completely reliable unless used in conjunction with a device capabilities database->HTML and CSS features are supported
User Agent Detection
![Page 12: Rwd ppt](https://reader034.vdocuments.site/reader034/viewer/2022051311/5445dee9afaf9fef2a8b46b9/html5/thumbnails/12.jpg)
Solution…….?
![Page 13: Rwd ppt](https://reader034.vdocuments.site/reader034/viewer/2022051311/5445dee9afaf9fef2a8b46b9/html5/thumbnails/13.jpg)
Ethan Marcotte
![Page 14: Rwd ppt](https://reader034.vdocuments.site/reader034/viewer/2022051311/5445dee9afaf9fef2a8b46b9/html5/thumbnails/14.jpg)
![Page 15: Rwd ppt](https://reader034.vdocuments.site/reader034/viewer/2022051311/5445dee9afaf9fef2a8b46b9/html5/thumbnails/15.jpg)
How it works…….?
![Page 16: Rwd ppt](https://reader034.vdocuments.site/reader034/viewer/2022051311/5445dee9afaf9fef2a8b46b9/html5/thumbnails/16.jpg)
Basic Principles
1.The Flexible Grid Layouts
2.Flexible Images
3.Flexible Videos
4.Media Queries
Well, We need only 4 ingredients for this….
![Page 17: Rwd ppt](https://reader034.vdocuments.site/reader034/viewer/2022051311/5445dee9afaf9fef2a8b46b9/html5/thumbnails/17.jpg)
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
![Page 18: Rwd ppt](https://reader034.vdocuments.site/reader034/viewer/2022051311/5445dee9afaf9fef2a8b46b9/html5/thumbnails/18.jpg)
target ÷ context × 100 = percentage
target- Require Amount Of Space.
context- Total Page/Grid We Have
Flexible Grid Layouts
![Page 19: Rwd ppt](https://reader034.vdocuments.site/reader034/viewer/2022051311/5445dee9afaf9fef2a8b46b9/html5/thumbnails/19.jpg)
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%
![Page 20: Rwd ppt](https://reader034.vdocuments.site/reader034/viewer/2022051311/5445dee9afaf9fef2a8b46b9/html5/thumbnails/20.jpg)
Flexible Grid Layouts
![Page 21: Rwd ppt](https://reader034.vdocuments.site/reader034/viewer/2022051311/5445dee9afaf9fef2a8b46b9/html5/thumbnails/21.jpg)
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
![Page 22: Rwd ppt](https://reader034.vdocuments.site/reader034/viewer/2022051311/5445dee9afaf9fef2a8b46b9/html5/thumbnails/22.jpg)
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%; } }
![Page 23: Rwd ppt](https://reader034.vdocuments.site/reader034/viewer/2022051311/5445dee9afaf9fef2a8b46b9/html5/thumbnails/23.jpg)
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
![Page 24: Rwd ppt](https://reader034.vdocuments.site/reader034/viewer/2022051311/5445dee9afaf9fef2a8b46b9/html5/thumbnails/24.jpg)
Flexible Video img, embed, object, video { width: 100%; }
.video iframe,
.video object,
.video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
![Page 25: Rwd ppt](https://reader034.vdocuments.site/reader034/viewer/2022051311/5445dee9afaf9fef2a8b46b9/html5/thumbnails/25.jpg)
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) { ... }
![Page 26: Rwd ppt](https://reader034.vdocuments.site/reader034/viewer/2022051311/5445dee9afaf9fef2a8b46b9/html5/thumbnails/26.jpg)
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
![Page 27: Rwd ppt](https://reader034.vdocuments.site/reader034/viewer/2022051311/5445dee9afaf9fef2a8b46b9/html5/thumbnails/27.jpg)
What web browsers support CSS3 media queries?
![Page 28: Rwd ppt](https://reader034.vdocuments.site/reader034/viewer/2022051311/5445dee9afaf9fef2a8b46b9/html5/thumbnails/28.jpg)
Depends onCSS3JAVASCRIPT
![Page 29: Rwd ppt](https://reader034.vdocuments.site/reader034/viewer/2022051311/5445dee9afaf9fef2a8b46b9/html5/thumbnails/29.jpg)
BROWSER SUPPORT
Responsive design is
supported by 70-80% of
today’s web devices
![Page 30: Rwd ppt](https://reader034.vdocuments.site/reader034/viewer/2022051311/5445dee9afaf9fef2a8b46b9/html5/thumbnails/30.jpg)
How many mobile browsers support CSS3 media queries?
![Page 31: Rwd ppt](https://reader034.vdocuments.site/reader034/viewer/2022051311/5445dee9afaf9fef2a8b46b9/html5/thumbnails/31.jpg)
Many websites are using responsive design to target mobile devices
![Page 32: Rwd ppt](https://reader034.vdocuments.site/reader034/viewer/2022051311/5445dee9afaf9fef2a8b46b9/html5/thumbnails/32.jpg)
Semantic Grid System
Golden Grid System
Inuit.Css
TOOLS
![Page 33: Rwd ppt](https://reader034.vdocuments.site/reader034/viewer/2022051311/5445dee9afaf9fef2a8b46b9/html5/thumbnails/33.jpg)
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………?
![Page 34: Rwd ppt](https://reader034.vdocuments.site/reader034/viewer/2022051311/5445dee9afaf9fef2a8b46b9/html5/thumbnails/34.jpg)
Queries………?
![Page 35: Rwd ppt](https://reader034.vdocuments.site/reader034/viewer/2022051311/5445dee9afaf9fef2a8b46b9/html5/thumbnails/35.jpg)