//

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

960px...

"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

THE NEW PROCESS!

Wireframes on paper!

Get your mind moving

With concepts not with pixel perfect designs

600px by 600px

Mood boards

tymerry.com/responsive

To the browser

quickly!

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

Performance

Feedback

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

IT'S HARD!!!!

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?

Expandable


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...

Solutions!!!

NEVER UNDERESTIMATE THE POWER OF PAPER!!


GOALS

  • 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

Indesign

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

  • multiple pages
  • link to photoshop elements

Illustrator

So what is the go to tool?

There is NO tool that does everything out of the box

BONUS STUFF?!

Speed Test

MobiTest by akamai

Responsive Plugins

Responsive calender by Codrops

Responsive Navigation

Additional Reading

Reading on responsive

Statistics

Showing it off!!!

Responsive Testing by amiresponsive

Cool Screenshots by Breezi

Compare frameworks

Usablica framework comparison

cool infographics

Infographics

THE END

questions?