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.
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
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.
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.
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.
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. )
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/
Notes de l'éditeur
Ethan Marcotte is a web designer & developer, a speaker and author of a couple of books on Responsive web designHe has created websites choosen for being responsivePeople Magazine, New York Magazine, the Sundance Film Festival, The Boston Globe,