Responsive_Web_Design

Agenda:
 What is RWD?
 Why RWD?
 Advantages & Disadvantages
 How RWD works?
 Frameworks
 Try out

What is Responsive Web Design?
RWD is a process of designing a single website to be used and
compatible on different portable or handy electronic devices with
different Screen size, platform and orientation.

Why RWD?
 Supporting the Multi-Device User
 One Site to Rule Them All
 Improved Search Engine Rankings
 Future Scalability

Advantages:
 Flexible
 User Experience
 Cost Effective
 It is Recommended By Google
 Very Easy to manage

How RWD works?
 View Port
The viewport is the user's visible area of a web page.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
It sets the browser's layout viewport, relative to which CSS declarations such as
width: 20% are calculated, to the device width.
 Media Queries
The @media rule is used to define different style rules for different media types/devices.
<link rel="stylesheet" href="this.css" media="(min-width: 960px)">
@media only screen and (max-width: 500px) {
.gridmenu {
width:100%;
}
}

View Port Sizes / Media Query Break Points:
 320 x 480 px: Smartphone
 480 x 320 px: Smartphone in landscape orientation
 768 x 1024 px: ipad/tablet
 1024 x 768 px: ipad in landscape orientation/netbook
 Anything larger: Desktop / laptop computer

Frameworks:
 Bootstrap
 Foundation
 960 grid
 Semantic UI
 Pure by Yahoo!
 W3.CSS

We can verify whether the site is designed in
responsive or not with below links.
http://responsivetest.net/
http://www.responsinator.com/
Try out:

Responsive_Web_Design

More Related Content

Viewers also liked (12)

Similar to Responsive_Web_Design (20)

Responsive_Web_Design