responsive web design - or just web design?

Responsive web design

Mobile matters

Global traffic share from mobile devices

0 %

6 %

12 %

18 %

2008 Q4 2010 Q1 2011 Q2 2012 Q3 2013 Q3

gs.statcounter.com

pureawesomeness.com

pureawesomeness.comm.

77% of mobile Google searches take place at home or work

Google/Nielsen Life360 Mobile Search Moments Q4 2012

Whether you like it or not, if you're a web designer, you're also a mobile web designer.

Brad Frost

web designResponsive

web designAdaptive

web designBest practice

Web design

UX of the modern web

Learning by doing

Introducing multiple content types further down the page requires users to go on a scavenger hunt to find them.

Brad Frost

Retrofitting

Mobile first

Your website is this wide

Less is never less enough

Where am I and where can I go?

What can I do on this page?

What will I get if I scroll?

Where am I and where can I go?

What can I do on this page?

What will I get if I scroll?

Where am I and where can I go?

What can I do on this page?

What will I get if I scroll?

Lists Back in time Immersion

Performance by design

If your website is 15MB it’s not HTML5, it’s stupid.

Christian Heilmann

WiFi

3G

Building the damn thing

UX designer Visual designer Developer

UX designer

Visual designer

Developer

HTML + CSS

Click

Tap

44px

delay: 300ms

fastclick.js

Images

PNG

JPEG

Retina

Low

Hi

325x225 px

650x450 px

29 kBQuality 80

Quality 3027 kB

PNG

SVG

Scalable Vector Graphics

Kittyshop

PNG

SVG

Kittyshop

PNG

SVG

3 kB

1 kB

Tables

Tables are a hack

body {font-size: 16px;

}

I think there is a profound and enduring beauty in simplicity. In clarity. In efficiency. True simplicity is derived from so much more than just the absence of clutter and ornamentation. It’s about bringing order to complexity.

Flat is better

.nifty-box {border-radius: 1em;box-shadow: 0 0 1em black;background: url(‘pattern.png’);

}

Click me

Click me

Edge Relflow

320px

568px

768px

1280px

Deviceagnostic

Start with the small screen first, then expand until it looks like shit. Time for a breakpoint!

Stephen Hay

Your content defines your breakpoints

Test on real devices

Test on really old devices

Edge Inspect

Respect the browser Don’t do stupid shit

Email

claus.stadel@gmail.com

Email

Email

Mobile firstPerformance by designBye bye Photoshop. Hello HTML + CSS.44x44 px links with fastclick.jsReplace PNGs with JPEGs and SVGsContent based breakpointsTest on real devices

Have fun and make something cool

@clausstadel

clausstadel.com

claus.stadel@gmail.com