RWD Layout

Responsive Web Design

What does it mean - Responsive?

Responsive vs Adaptive

Responsive: % + media-queries + %-media
Adaptive: % + media-queries + %-media + JavaScript + magic

Responsive: single HTML&CSS for browsers
Adaptive: single HTML&CSS for browsers

Three Core Techniques

Fluid Foundation
Flexible Content
Media Queries

Who is using RDW now?

Is it safe enough?

http://mediaqueri.es

Ethan Marcotte

Hello World RWD?

A long time ago
in a galaxy far, far away....

In a period of civil war.

Lives a little fixed web....

Rebel spaceships,

striking from a hidden base

have won their first victory against

the evil Galactic Empire

It was a dark time for the Rebellion....

But that's another story...

Flexibility is new norm

What we need to be Flexible?

Grid
Layout
Typography
Images

Going from fixed to fluid

RWD Grid Systems

Foundation
Bootstrap
Skeleton
Columnal
and more and more

RWD Layout Patterns

Source Order Stacking
Content Chareography
Off Canvas

Source Order Stacking

Off Canvas: Beyond The Limit

Typography

Type flexes by default
We need to consider readability

Typography

Small screen != Small size
Consider contrast

Typography

Small screen != Small size
Consider contrast
If text has links, give adequate touch

Flexible images

Easy Way

			img {
			    width: 100%;
			    }

Flexible images

"CSS4" Way

			.pic {
			    background-size: cover;
			    background-image: 
    image-set(url(...) 1x,
    url(...) 2x;
			    }

Image Problem(s)

Content
Bandwidth
Pixel density
Format

Image: Content

Image: Bandwidth

About 80% of sites demonstrate the same weight
and load time at different resolutions.
(mediaqueri.es)

Responsive vs Responsible

by @scottjehl

https://speakerdeck.com/scottjehl/responsive-responsible

Image: Pixel density

You Have an IPhone
With Retina Display
Let's Surf

Wat You Have

What You Want

Image Solution(s)

SVG/WebP
Icon Fonts
Pixel density media queries
Picture(fill)

SVG (Scalable Vector Graphics)

Small file sizes that compress well
Scales to any size without losing clarity (except very tiny)
Looks great on retina displays
Design control like interactivity and filters
but
Low support in old browsers

WebP (Google proposal)

Image format employing both lossy and
lossless compression
Scales to any size without losing clarity
Looks great on retina displays
but
Low support in browsers

Using Fonts for Icons…

...is a good idea, I'm telling you.

Using SVG is even better…

Pixel Density Media Queries

soon

Image Solution(s)

SVG
Icon Fonts
Pixel density media queries
Picture(fill)

<picture>

Picturefill

No extra size
Like <picture> element
Allows user to choose experiance
thay would like to have
Demo

Media Queries

Breakpoints

			/* Smartphones (portrait and landscape) ----------- */
			@media only screen 
				and (min-device-width : 320px) 
				and (max-device-width : 480px) {
				/* Styles */
			}
			
			/* Smartphones (landscape) ----------- */
			@media only screen 
				and (min-width : 321px) {
				/* Styles */
			}
			
			/* Smartphones (portrait) ----------- */
			@media only screen 
				and (max-width : 320px) {
				/* Styles */
			}
			
			/* iPads (portrait and landscape) ----------- */
				@media only screen 
				and (min-device-width : 768px) 
				and (max-device-width : 1024px) {
				/* Styles */
			}
			
			/* iPads (landscape) ----------- */
				@media only screen 
				and (min-device-width : 768px) 
				and (max-device-width : 1024px) 
				and (orientation : landscape) {
				/* Styles */
			}
			
			/* iPads (portrait) ----------- */
				@media only screen 
				and (min-device-width : 768px) 
				and (max-device-width : 1024px) 
				and (orientation : portrait) {
				/* Styles */
			}
			
			/* Desktops and laptops ----------- */
				@media only screen 
				and (min-width : 1224px) {
				/* Styles */
			}
			
			/* Large screens ----------- */
				@media only screen 
				and (min-width : 1824px) {
				/* Styles */
			}
			
			/* iPhone 4 ----------- */
			@media
				only screen and (-webkit-min-device-pixel-ratio : 1.5),
				only screen and (min-device-pixel-ratio : 1.5) {
				/* Styles */
			}

Breakpoints

			@media only screen and (min-width : 1200px) {/* Styles */}
			@media only screen and (min-width : 960px)  {/* Styles */}
			@media only screen and (min-width : 860px)  {/* Styles */}
			@media only screen and (min-width : 740px)  {/* Styles */}
			@media only screen and (min-width : 600px)  {/* Styles */}
			@media only screen and (min-width : 340px)  {/* Styles */}

Question Media Queries Of:

To Desktop First
Or First to Mobile?

Large Resolutions First

			/* File main.css */
			/* Your original styles */
			@media (max-width: 960px) {
			  /* styles 960px and lower */
			}
			@media (max-width: 560px) {
			  /* styles 560px and lower */
			}

Small Resolutions First

			@media (max-width: 659px) {
			  @import "small"; }
			@media (min-width: 661px) (max-width: 959px) {
			  @import "medium"; }
			@media (min-width: 960px) {
			  @import "original"; }

Pixel Density Media Queries On

Breakpoints

			@media only screen and (min-width: 320px) {
			
			  /* Small screen, non-retina */
			
			}
			
			@media
			only screen and (min-device-pixel-ratio: 2) and (min-width: 320px),
			only screen and (   min-resolution: 192dpi) and (min-width: 320px),
			only screen and (    min-resolution: 2dppx) and (min-width: 320px) { 
			
			  /* Small screen, retina, stuff to override above media query */
			
			}
			
			@media only screen and (min-width: 700px) {
			
			  /* Medium screen, non-retina */
			
			}
			
			@media
			only screen and (min-device-pixel-ratio: 2) and (min-width: 700px),
			only screen and (   min-resolution: 192dpi) and (min-width: 700px),
			only screen and (    min-resolution: 2dppx) and (min-width: 700px) { 
			
			  /* Medium screen, retina, stuff to override above media query */
			
			}
			
			@media only screen and (min-width: 1300px) {
			
			  /* Large screen, non-retina */
			
			}
			
			@media
			only screen and (min-device-pixel-ratio: 2) and (min-width: 1300px),
			only screen and (   min-resolution: 192dpi) and (min-width: 1300px),
			only screen and (    min-resolution: 2dppx) and (min-width: 1300px) { 
			
			  /* Large screen, retina, stuff to override above media query */
			
			}

Alternatives

Respond.js
css3-mediaqueries-js

Still problems

Development
Speed
Accessability
Images
Tables
Test
etc

CSS3 layout modules

What is layout?

Table "Layout" module

Float

CSS Real Layout Modules

CSS Multi-column Layout
CSS Grid Layout
CSS Regions and Exclusions (Shapes)
CSS Flexbox layout

Flexbox

HTML

			<div class="container">
			    <div class="item">x</div>
			    <div class="item">x</div>
			    <div class="item">x</div>
			    <div class="item">x</div>
			</div>

			.container {
			    overflow:hidden;
			    height:640px;
			    }
			    .container .item {
			        float:left;
			        }

x

Turn On

			
			.container {
			    display:flex;
			    }

x

Axes

Main axis

Cross axis

Row

			
			.container {
			    display:flex;
			    flex-direction:row; /*by default*/
			                  :row-reverse;
			    }

x

Column

			
			.container {
			    display:flex;
			    flex-direction:column;
			                  :column-reverse;
			    }

x

Align

Main axis

			
			.container {
			    justify-content:flex-start; /* by default */
			                    center;
			                    flex-end;
			    }

×

Another way:

			
			.container {
			    justify-content:space-between;
			                    space-around;
			    }

×

Cross Axis

			
			.container {
			    align-items:flex-start; /* by default */
			                flex-end;
			                center;
			    }

×

Personal

			
			.container .item:nth-child(1) {
			    align-self:flex-start;
			    }
			.container .item:nth-child(4) {
			    align-self:flex-end;
			    }

×

Flex

×

Grow

			.container .item {
			    flex-grow:1;
			    }

×

Personal

			.container div {
			    flex-grow:1;
			    }
			.container .item:nth-child(1) {
			    flex-grow:4;
			    }

×

Shrink

			
			.container .item:nth-child(1) {
			    flex-shrink:4;
			    }

×

Basis

			.container .item {
			    flex-grow:1;
			    }
			.container .item:nth-child(1) {
			    flex-basis:250px;
			    }

×

Order

first

second

third

last.

Change order:

			
			.container .item:nth-child(2) {
			    order:1;
			    }

first

second

third

last.

Again

			
			.container .item:nth-child(1) { order:2 }
			.container .item:nth-child(2) { order:1 }
			.container div:nth-child(3) { order:4 }
			.container .item:nth-child(4) { order:3 }

first

second

third

last.

Multiline Flexbox

first

second

third

bender

smth

anything

google

музыка скачать

купить авто

Rolling Scopes

Facebook

presentation

pink

last.

first

second

third

bender

smth

anything

google

музыка скачать

купить авто

Rolling Scopes

Facebook

presentation

pink

last.

Wrap

			.container {
			    display:flex;
			    flex-wrap:nowrap; /* by default */
			             :wrap;
			    }

first

second

third

bender

smth

anything

google

музыка скачать

купить авто

Rolling Scopes

Facebook

presentation

pink

last.

Reverse

			
			.container {
			    display:flex;
			    flex-wrap:wrap-reverse;
			    }

first

second

third

bender

smth

anything

google

музыка скачать

купить авто

Rolling Scopes

Facebook

presentation

pink

last.

first

second

third

bender

smth

anything

google

музыка скачать

купить авто

Rolling Scopes

Facebook

presentation

pink

last.

Content align

			.container {
			    display:flex;
			    align-content:stretch; /* by default */
			                 :center;
			    }

only for multiline!

first

second

third

bender

smth

anything

google

музыка скачать

купить авто

Rolling Scopes

Facebook

presentation

pink

last.

Cross Axis

Content align

			.container {
			    display:flex;
			    align-content:flex-start;
			                 :flex-end;
			                 :flex-between;
			                 :flex-around;
			    }

first

second

third

bender

smth

anything

google

музыка скачать

купить авто

Rolling Scopes

Facebook

presentation

pink

last.

first

second

third

bender

smth

anything

google

музыка скачать

купить авто

Rolling Scopes

Facebook

presentation

pink

last.

first

second

third

bender

smth

anything

google

музыка скачать

купить авто

Rolling Scopes

Facebook

presentation

pink

last.

first

second

third

bender

smth

anything

google

музыка скачать

купить авто

Rolling Scopes

Facebook

presentation

pink

last.

94.82%

09 ‣ 11 ‣ 12

Flexbox.On()

		
			E {	
			    display: -webkit-box;
			    display: -moz-box;
			    display: -ms-flexbox;
			    display: -webkit-flex;
			    display: flex;
			    }

Flexbox.Reverse()

		
			E {	
			        -webkit-box-orient:vertical;
			     -webkit-box-direction:reverse;
			           -moz-box-orient:vertical;
			        -moz-box-direction:reverse;
			        -ms-flex-direction:column-reverse;
			    -webkit-flex-direction:column-reverse;
			            flex-direction:column-reverse;
			    }

BackToBasic.Native()

		
			E {	
			    display: table;
			    }

		
			E .item {	
			    display: table-cell;
			    width: 50%;
			    }

Smth to read?

caniuse.com
css-tricks.com
Guide from Mozilla
Guide from Microsoft
Why Flexboxes Aren't Good for Page Layout
Google me

Responsive Web Design

What does it mean - Responsive?

Responsive vs Adaptive

Responsive vs Adaptive

Three Core Techniques

Who is using RDW now?

Is it safe enough?

http://mediaqueri.es

Ethan Marcotte

Hello World RWD?

A long time ago in a galaxy far, far away....

In a period of civil war.

Lives a little fixed web....

Rebel spaceships,

striking from a hidden base

have won their first victory against

the evil Galactic Empire

It was a dark time for the Rebellion....

But that's another story...

Flexibility is new norm

What we need to be Flexible?

Going from fixed to fluid

RWD Grid Systems

RWD Layout Patterns

Source Order Stacking

Off Canvas: Beyond The Limit

Typography

Typography

Typography

Flexible images

Flexible images

Image Problem(s)

Image: Content

Image: Bandwidth

Image: Pixel density

Wat You Have

What You Want

Image Solution(s)

SVG (Scalable Vector Graphics)

WebP (Google proposal)

Using Fonts for Icons…

Using SVG is even better…

Pixel Density Media Queries

soon

Image Solution(s)

<picture>

Picturefill

Media Queries

Breakpoints

Breakpoints

Question Media Queries Of:

Large Resolutions First

Small Resolutions First

Pixel Density Media Queries On

Breakpoints

Alternatives

Still problems

CSS3 layout modules

What is layout?

Table "Layout" module

Float

CSS Real Layout Modules

Flexbox

HTML

Turn On

Axes

Main axis

Cross axis

Row

Column

Align

Main axis

Another way:

Cross Axis

Personal

Flex

Grow

Personal

Shrink

Basis

A long time ago
in a galaxy far, far away....