responsive web design
Intro - What is RwD
Terms & Techniques
How It Works
TIP S & BEST PRACTICE
What is RWD?
Responsive web design (RWD) is an approach to web design aimed at allowing desktop webpages to be viewed in response to the size of the device one is viewing with.
A site designed with RWD adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images, and CSS3 media queries.
Fluid, proportion based
A fluid is a substance that continually deforms (flows) under an applied shear stress
It means that size of the elements is not fixed and will change acording to the screen size.
Fluid, proportion based
Means that sizes are not specified with static values but rather as percentage of parent container.
Same as the elements can be fluid thanks to fluid grid, flexible images allow content to adapt to layout and screen size
Media Queries is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution, ratio, pixel density etc...
thanks to media queries you can for example hide unwanted content for smaller screens.
Responsive Web design is not only about adjustable screen resolutions and automatically resizable images
It is also about
The same matter
You have to realize that the HTML code is the same on mobile, tablet, laptop, or a smart watch and the CSS is used to display various designs.
It's like when you change clothes during winter and summer
You cannot change
Stop using words
like mobile, tablet or desktop
In reality there are tablets that will use your mobile layout and also tablets that will use desktop layouts
You can use for example your breakpoints and result can be something like this: page-320, page-640, page-960 ...
not for devices
The fact that some device screens are small does not mean that you should create a shrinked design with smaller font sizes in order to display as much information as possible.
Its much easier to expand elements then try to let them fit where it simply cannot fit.
At the beginning
Since Your whole design and development are closely connected with breakpoints, it is More than wise to define them at the very beginning of project.
Focus on important content
RWD is not for every situation
Facebook, Twitter ...
Make responsive Singlepage about what have youe learned today
#1 Hi-fidelity Wf or Design for small, medium and Large screens
#2 html prototype of your design
320+, 768+, 1200+
Use At least one Flexible image, One 2+ columns grid, Hide / show one element
Responsive Web Design - Ethan Marcotte May 25, 2010
Responsive Web Design - Ethan Marcotte - 2011, New York - ISBN 978-0-9844425-7-7 -
Responsible Responsive Design - Scott Jehl - 2014, New York - ISBN: 978-1-9375571-6-4 -
A few things about responsive web design you need to realize.
Responsive Web Design: What It Is And How To Use It
LB Academy - RWD
By Vladimir Pittner