RWD
Vladimír Pittner
Lighting Beetle
responsive web design
#lbacademy
#1 Presentation
Intro - What is RwD
Terms & Techniques
How It Works
#2 Workshop
TIP S & BEST PRACTICE
PROBLEMATIC THINGS
#1.1
#1.2
#1.3
#1.4
#1.5
Intro
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.
wikipedia
A site designed with RWD adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images, and CSS3 media queries.
the website should have the technology to automatically respond to the user’s preferences.
TERMS&
Techniques
Fluid, proportion based
grids
Fluid
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
grids
proportion based
Means that sizes are not specified with static values but rather as percentage of parent container.
Flexible
Images
Same as the elements can be fluid thanks to fluid grid, flexible images allow content to adapt to layout and screen size
Media Queries
Media Queries is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution, ratio, pixel density etc...
Wikipedia
thanks to media queries you can for example hide unwanted content for smaller screens.
HOw
IT
WORKS
Responsive Web design is not only about adjustable screen resolutions and automatically resizable images
It is also about
Layout change
Hiding elements
prioritization
other adjustements
And don't
Forget
Everything is
made from
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
Onlyyour
Clothes
Your body
Tips&
Best PRACTICe
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 ...
Designfor situations
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.
Expand
Not shrink
Its much easier to expand elements then try to let them fit where it simply cannot fit.
Explanation
Define breakpoints
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.
Mobile
First
Focus on important content
Improve Performance
PROBLEMATIC
THINGS
Tables
RWD EMAILS
RWD is not for every situation
Facebook, Twitter ...
Performance
Relax time
Workshop
Make responsive Singlepage about what have youe learned today
Output
#1 Hi-fidelity Wf or Design for small, medium and Large screens
#2 html prototype of your design
Breakpoints
320+, 768+, 1200+
BOILERPLATE
Use At least one Flexible image, One 2+ columns grid, Hide / show one element
Sources
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 -
https://abookapart.com/products/responsible-responsive-design
A few things about responsive web design you need to realize.
Responsive Web Design: What It Is And How To Use It
https://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/