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

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

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 of What has responsive web design done for us, so far.

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