what has responsive web design done for us, so far

83
Wilfred Nas - front end developer / @wnas / wnas.nl 1 / 83

Upload: wilfred-nas

Post on 31-Oct-2014

373 views

Category:

Technology


1 download

DESCRIPTION

Responsive web design is the next best thing since sliced bread, But what has it brought us so far. I will talk about the pittfals and some of the solutions we could be using. Most importantly, use real devices and test, test and test more.

TRANSCRIPT

Page 1: What has responsive web design done for us, so far

Wilfred Nas - front end developer / @wnas / wnas.nl

1 / 83

Page 2: What has responsive web design done for us, so far

What has responsive web design done for us, so far…

Page 3: What has responsive web design done for us, so far

It creates big pages

Page 4: What has responsive web design done for us, so far

With loads of css and javascript

Page 5: What has responsive web design done for us, so far

All to solve self inflicted problems

Page 6: What has responsive web design done for us, so far

Let’s just pick one

Page 7: What has responsive web design done for us, so far

ImagesWhat kind of image to serve

Page 8: What has responsive web design done for us, so far

Retina or non retina

Page 9: What has responsive web design done for us, so far

And how to serve it

Page 10: What has responsive web design done for us, so far

The <img> tag doesn't cut it

Page 11: What has responsive web design done for us, so far

In comes <picture>

Page 12: What has responsive web design done for us, so far

(again)

Page 13: What has responsive web design done for us, so far

DevicesTo what kind of device

Page 14: What has responsive web design done for us, so far

Mobile

Page 15: What has responsive web design done for us, so far

Tablet

Page 16: What has responsive web design done for us, so far

Phablet

Page 17: What has responsive web design done for us, so far

TV’s

Page 18: What has responsive web design done for us, so far

Consoles

Page 19: What has responsive web design done for us, so far

Fridges

Page 20: What has responsive web design done for us, so far

Desktop

Page 21: What has responsive web design done for us, so far

Desknot

Page 22: What has responsive web design done for us, so far

Touch

Page 23: What has responsive web design done for us, so far

Touch is mobile

Page 24: What has responsive web design done for us, so far

Or is touch desktop?

Page 25: What has responsive web design done for us, so far

Or no touch

Page 26: What has responsive web design done for us, so far

Size matters…

Page 27: What has responsive web design done for us, so far

320

Page 28: What has responsive web design done for us, so far

480

Page 29: What has responsive web design done for us, so far

800

Page 30: What has responsive web design done for us, so far

440

Page 31: What has responsive web design done for us, so far

768

Page 32: What has responsive web design done for us, so far

1024

Page 33: What has responsive web design done for us, so far

1280

Page 34: What has responsive web design done for us, so far

632

Page 35: What has responsive web design done for us, so far

1920

Page 36: What has responsive web design done for us, so far

2560

Page 37: What has responsive web design done for us, so far

240

Page 38: What has responsive web design done for us, so far

The web is text…

Page 39: What has responsive web design done for us, so far

So why do we do pixels?

Page 40: What has responsive web design done for us, so far

Use font sizes instead…

Page 41: What has responsive web design done for us, so far
Page 42: What has responsive web design done for us, so far

Media queries to the rescue

Page 43: What has responsive web design done for us, so far

Even for tables

Page 44: What has responsive web design done for us, so far

Data tables, that is

Page 45: What has responsive web design done for us, so far

Or do we use javascript for those?

Page 46: What has responsive web design done for us, so far

Or not?

Page 47: What has responsive web design done for us, so far

Breakpoints?

Page 48: What has responsive web design done for us, so far

We don’t need breakpoints…

Page 49: What has responsive web design done for us, so far

“It's what happens between the

breakpoints that matters the most”

–Wilfred Nas

Page 50: What has responsive web design done for us, so far

Tweakpoints

Page 51: What has responsive web design done for us, so far

Haypoint

Page 52: What has responsive web design done for us, so far

But

Page 53: What has responsive web design done for us, so far

But

Page 54: What has responsive web design done for us, so far

The web IS responsive

Page 55: What has responsive web design done for us, so far

At least

Page 56: What has responsive web design done for us, so far

Before we developers and designer killed it(as a developer I would love to put the sole blame on designers, but we have to take some of the blame)

Page 57: What has responsive web design done for us, so far

Designers

Page 58: What has responsive web design done for us, so far

Design schools still don't teach anything but print design

Page 59: What has responsive web design done for us, so far

Photoshop is NOT a design toolit's for sketching

Page 60: What has responsive web design done for us, so far

You should design in the browser

Page 61: What has responsive web design done for us, so far

and most importantly

Page 62: What has responsive web design done for us, so far

present in the browser

Page 63: What has responsive web design done for us, so far

Or better yet, present on different browsers

Page 64: What has responsive web design done for us, so far

And different devices

Page 65: What has responsive web design done for us, so far

And different browsers on those devices

Page 66: What has responsive web design done for us, so far
Page 67: What has responsive web design done for us, so far

Developers

Page 68: What has responsive web design done for us, so far

Test and develop on multiple devices

Page 69: What has responsive web design done for us, so far

And browsers of course

Page 70: What has responsive web design done for us, so far

But you already did that, right?

Page 71: What has responsive web design done for us, so far

Don't just resize your screen

Page 72: What has responsive web design done for us, so far

Get those screens filthy

Page 73: What has responsive web design done for us, so far

Use tools like ghost lab

Page 74: What has responsive web design done for us, so far

Really test on multiple devices

Page 75: What has responsive web design done for us, so far

Use standards

Page 76: What has responsive web design done for us, so far

Start with the information

Page 77: What has responsive web design done for us, so far

Never the presentation

Page 78: What has responsive web design done for us, so far

Mobile first lets you focus

Page 79: What has responsive web design done for us, so far

Never listen to marketeers,

everThat gets us only more carousels

Page 80: What has responsive web design done for us, so far

Only listen to

users

Page 81: What has responsive web design done for us, so far

Speed is the only thing that matters

Page 82: What has responsive web design done for us, so far

Thank you for listening to my rant

Page 83: What has responsive web design done for us, so far

Wilfred Nas - front end developer / @wnas / wnas.nl