What is responsive?

1 site fits all

Same content, displayed differently

As always, it's about

content

content

accessibility

Let's not annoy people who want to give us their moneys.

content

findability

UX is more than just nice animations.

Yeah, okay..

Developers (and semantic code) have a lot to do with this, but excellence means being interested.

The good ol' times

How we currently designs websites

Tools of the trade

• Photoshop
• Illustrator
• Fireworks
• Flash
• Dreamweaver

Different Sites

• Desktop
• Mobi

Target browsers

• 7+ Desktop

• 3+ Smart Phones + Tablets

• 500+ Mobi

We design with ATL constraints

Print and marketing CI Guidelines

Fixed width boxes like posters and billboards

Why?

New school

Challenge is the heart of learning

Before we go on..

Let's have another look at the tools, quick quick

Tools of the trade

• Photoshop + Illustrator + Fireworks
• Flash
• Dreamweaver
• ...and?

Wait. What?

Now we have one screen to test everything on.

Dev Tools

Chrome & Safari: "Dev Tools"

Firefox: "Firebug"

Internet Explorer: "F12 Dev Tools"

We can now design in the browser

In fact, that's how developers do most of their front-end work nowadays.

Inspect → Change → Copy & Paste

It's also useful for stealing things.

For instance..

Design for your dad

Short attention spans means

usability is everything these days

It also shows a level of excellence in craftsmanship, and that designers have thought about the how they want to showcase their work in the best way on different devices.

Some examples

Something we built

Okay responsive design

Good responsive design

Awesome responsive design