Responsive web design (RWD) is an approach to web design that makes web pages render well on a variety of devices and screen sizes. It utilizes a flexible grid, flexible images, and media queries. There are four main approaches: fluid grids that use percentages instead of pixels, flexible images that adapt based on screen size, media queries that allow different styles based on device characteristics, and server-side components where content is rendered differently based on device specifications. Common tools for RWD include wireframing tools, CSS frameworks like Bootstrap and Foundation, and testing sites like Responsinator to test across devices.

1. RESPONSIVEWEB
DESIGN
(RWD)

2. What
is it?
 This is a design approach aimed at crafting sites to
provide an optimal viewing experience across a wide
range of devices(Desktop computers to mobile phones)
 “A flexible grid(with flexible images) that incorporates
media queries to create a responsive, adaptive layout”-
Ethan Marcotte

3. What
do I mean ?

4. How
is it Done?
APPROACHES
1. Fluid grids
2. Flexible Images
3. Media Queries
4. Server Side Components(RESS)

5. APPROACH
1
: Fluid Grid
This is a grid that flexible and based upon percentages
rather than pixels.
In a couple of the fluid grid columns determine the width of
where content is placed whereas the content will determine
the height.

6. APPROACH
2
: Flexible Images
 Flexible media includes images and videos, which can adapt
depending on the screen size.
 In most cases it involves using the same image of different sizes
which can be loaded on different layouts/resolutions.

7. Example

8. APPROACH
3
: MEDIA QUERIES
 This is a CSS3 module allowing content rendering to adapt to
conditions such as screen resolution, size, orientation e.t.c.
 This is accomplished by using specific styles based on device
characteristics.

9. APPROACH
4
: Server Side Components
 In this approach the client side and server side work hand in hand.
 Client Side: The client side sends the specifications of the type of
view and then renders the view sent from the server side
 Server side:The logic for the content to be loaded is contained on
the server side.

10. What
do IUse?
TOOLS FORTHETRADE
 Wire-framing
 CSS and Fluid Grids
 Testing

11. WIREFRAMING
This is the process of designing/ prototyping the look and flow of an
app.
Some tools are bought and others are free
Tip: Beginners can use this to test out how responsive websites
Work.

12. WIREFRAMING

13. CSS and Fluid
Grids
To be used for the actual coding/ implementation.
The mostly heard about and used areTwitter’s
Bootstrap and Zurb’s Foundation.
The best thing about the two you get more than just the
CSS and Fluid grid, you also get some components (e.g.
buttons, dropdowns etc. )

14. Twitter’s
Bootstrap
http://twitter.github.io/bootstrap/

15. Zurb’s
Foundation
http://foundation.zurb.com/

16. Testing
After finishing with building the website, you can test
them at
 1.The Responsinator- Shows how your page loads on a
variety of mobile devices
 2. Matt Kersley site-Test online or download code in
order to test at your local server
http://springload.responsinator.com
http://mattkersley.com/responsive

17. ISSUES
SOLVED BY
RWD:
 One code base, one deployment, one URL
 All content is available everywhere
 Future friendly

18. References
 ResponsiveWeb Design by Ethan Marcotte
 Wikipedia
http://en.wikipedia.org/wiki/Responsive_web_
design
 Blog
http://blog.crazyegg.com/2013/05/07/responsiv
e-web-design-tools/