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

http://alistapart.com/article/responsive-web-design

Responsive Web Design - Ethan Marcotte - 2011, New York - ISBN 978-0-9844425-7-7 -

https://abookapart.com/products/responsive-web-design

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.

https://medium.com

Responsive Web Design: What It Is And How To Use It

https://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/

Made with Slides.com