1 of 18

Slide Notes

DownloadGo Live

Responsive Design

Published on Dec 13, 2015

No Description

View Outline

MORE DECKS TO EXPLORE

7 Strategies to Write a Speech with Ease

84692 views

10 ways

45205 views

TXLA Wrap-up 2015

9451 views

Techno Teaching

26966 views

How to make a portfolio

17016 views

What is Creativity

67882 views

PRESENTATION OUTLINE

1.

Responsive Design

inspired by Vitaly Friedman
Photo by Leshaines123
2.

Is a Hack!!!

Break Points (@media queries)
Photo by PeterThoeny
3.

Work Together

Designer/Front-End/Back-End
Photo by ralphbijker
4.

Styleguide

Atomic Design
Photo by [ henning ]
5.

Design

Photo by 3rd foundation
6.

Content Choreography

Source Order
Photo by [ henning ]
7.

Resolution Independence

SVG/IconFonts
Photo by Stuck in Customs
8.

Protection Aspect Ratios

max-width: 100%; height: auto;
Photo by keneden
9.

Compressive Images

300x200px (80%) = 21Kb; 600x400 (0%) = 7Kb
Photo by antwerpenR
10.

Responsive Images

4k monitors and 320px mobile devices
Photo by kelpenhagen
11.

Responsive Typography

rem, em
Photo by Leo Reynolds
12.

Performance Strategy

Mobile Is Slow By Default
Photo by 7D-Kenny
13.

Font Loading, Critical CSS, JS

base64 and localstorage
Photo by jenny downing
14.

Responsive Newsletters

Photo by ataferner
15.

Untitled Slide

Photo by aresauburn™
16.

TheGuardian

Best Example
Photo by mac steve
17.

SmashingMagazine

http://www.smashingmagazine.com/2014/09/08/improving-smashing-magazine-perf...
Photo by antxoa
18.

Untitled Slide

Photo by woodleywonderworks

Artem Deykun

deykun.com