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

84512 views

10 ways

45093 views

TXLA Wrap-up 2015

9443 views

Techno Teaching

26896 views

How to make a portfolio

16988 views

What is Creativity

67771 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

MORE DECKS BY THIS AUTHOR

Styles and Markup

23 views

Untitled Haiku Deck

0 views

Time Mangement

33 views

JavaScript

22 views

optim sass

58 views