How responsive effected web design

Why Photoshop is no longer the un protested king of the roost

About me

My name is Tyler Merry

follow the presentations tymerry.com/rwdSlides

follow the presenter @tyler_merry

a little more about me

I have worked for a couple companies...

What do you do in your free time?

About the talk!

This isn't a talk about RWD

It is about Designing for responsive web design...

sponsored by the

department of redundancy department

Traditional Design

Fire up Photoshop

Grids are go!

now what?

time to get "inspired"

Pixel perfect design

Incomes responsive web design!

Wait... what is responsive web design?

What made up the web pre-RWD?

What make up the web now?

What make up the web in the future?

What make up the web in the future?

so, why its good for designers?!

  • Does that mean things are more confusing?
  • Does that mean more work?
  • So why do we like this?
    • Greater Impact
    • On a whole less work

Ups and downs of responsive

How its disrupting our old workflows


"normal" size

"normal" pixel density

How the Internet community is responding

Does anyone actively do RWD?

What is your process?

the process

design → front-end → back-end

design → front-end → back-end

design → front-end → back-end

design → front-end → back-end

design → front-end → back-end

design → front-end → back-end


Wireframes on paper!

Get your mind moving

With concepts not with pixel perfect designs

600px by 600px

Mood boards


To the browser


Lets change designing in the browser to deciding in the browser.

- Dan Mall

Mobile first!

Responsive Frameworks!

Avoiding frameworks?

Let content rule!

Start mobile, add breaks when you think it feels right

design local

The code editor is your friend

  • Dreamweaver CS6
    • Fluid Grid Layout
  • Sublime Text 2
    • Emmet
    • Live Reload
  • Debugging
    • Color Trick

Things to consider for mobile



When is designing in the browser a good idea?

Small Teams

You have a Unicorn

When is this a crappy idea?

Your team is large enough to be specialized

When you don't want a front-end coder making these types of decisions


Mini question break

Who had the worse drive in?

Does anyone do have any other coold designing in the browser tools to recommend to the group?

Does anyone do responsive design in a different way?

When Designers still design

On a personal view

hard mode

From a managment point of view...

Look how rare it is!

(no excuse for designers, or front-end devs)

even if you can... mono-tasking FTW

Big projects require more polish!

Sharing is caring

  • Wireframes
  • Prototypes
  • Designs

Delegation of skills

If you can specialize roles why wouldn't you?


What if you want to go native?

why responsive web design not the future

sounds perfect

... well, not with photoshop

lets fire up photoshop!

  1. What size should the canvas be?
  2. Layers?
  3. How do we make changes?

Maybe photoshop isn't our tool of choice...




  • Get ideas down!
  • Rates items on page by importance!
    • Business needs
    • Viewer needs
  • Consider varying screen sizes

okay, enough with the pen and paper,

lets get to the computer

New players to the space


wait... indesign?! the thing for print right?

  • multiple pages
  • link to photoshop elements


So what is the go to tool?

There is NO tool that does everything out of the box


Speed Test

MobiTest by akamai

Responsive Plugins

Responsive calender by Codrops

Responsive Navigation

Additional Reading

Reading on responsive


Showing it off!!!

Responsive Testing by amiresponsive

Cool Screenshots by Breezi

Compare frameworks

Usablica framework comparison

cool infographics