Responsive by Design! - Successfull by Chance?

intuio.at

Responsive by Design! Successful by Chance?

16.02.2015

Thomas Piribauer / Björn Ganslandt

intuio.at

#ixdahh #rwd

intuio.at

Mensch Maschine Kommunikation

intuio.at

Wien

HafenKneipe

intuio.at

intuio.at

intuio.at

intuio.at

1

intuio.at

2

intuio.at

intuio.at

intuio.at

intuio.at

?

intuio.at

intuio.at

intuio.at

intuio.at

Mobile = Desktop

intuio.at

Gleichzeitig First!” — intuio @ IxDAHH 15

intuio.at

Mobile Desktop

intuio.at

Wireframes do not work anymore.”

— Mark Boulton @ Fronteers 12

intuio.at

Warum denn nicht?

T Z (B+1)SS: Anzahl der insgesamt zu designenden Screens

T: Anzahl der Web Page Templates

Z: Anzahl der unterschiedlichen Zustände je Template

B: Anzahl der Breakpoints für verschiedene Displaygrößen

intuio.at

Und das bedeutet?Breakpoints

Templates

Zustände

Mobile Tablet Desktop

T1

T2

= 2= 3

= 20

20S 180x 3 ( 2 + 1 )x

intuio.at

♥ Your

friend

intuio.at

intuio.at

♥

intuio.at

E1

Z (B+1)1

Do the math

E: Effizienzgewinn durch Designing im Browser gegenüber statischen Screens in %

Z: Anzahl der unterschiedlichen Zustände je Web Page Template

B: Anzahl der Breakpoints für verschiedene Displaygrößen

intuio.at

Und das bedeutet?Breakpoints

Templates

Zustände

Mobile Tablet Desktop

T1

T2

= 2= 3

= 20

3 ( 2 + 1 )xE

11

intuio.at

89%

intuio.at

intuio.at

intuio.at

intuio.at

http://intu.io/ixdahh

Happy Coding

intuio.at

Treat Performance as Design.”

— Brad Frost, 2013

intuio.at

15.776px

intuio.at

2012

15.776px

2015

17.292px

intuio.at

intuio.at

∅ Website Größe

Quelle: http://www.webperformancetoday.com/2015/01/14/mobile-page-growth/

intuio.at

∅ Website Größe

Quelle: http://www.webperformancetoday.com/2015/01/14/mobile-page-growth/

intuio.at Quelle: https://twitter.com/scottjehl/statuses/332871134934626306

intuio.at

intuio.at

intuio.at

Responsive Images

intuio.at

Skeletons

intuio.at

Critical Path

intuio.at

Cutting the Mustard

intuio.at

Offline First