+ All Categories
Home > Technology > What has responsive web design done for us, so far.

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

Date post: 31-Oct-2014
Category:
Upload: wilfred-nas
View: 373 times
Download: 1 times
Share this document with a friend
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.
Popular Tags:
83
Wilfred Nas - front end developer / @wnas / wnas.nl 1 / 83
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


Recommended