Responsive Mindset

Slide 1

Responsive ~~Design~~ ~~Workflow~~ Mindset @g16n #uxce15

Slide 2

now: June 2015: UXcamp Europe

Slide 3

December 2014: book “Responsive Web Design” by Ethan Marcotte (2nd edition)

Slide 4

June 2011 book “Responsive Web Design” by Ethan Marcotte May 2010: article “Responsive Web Design” by Ethan Marcotte on A List Apart

Slide 5

April 2000: May 2010: article “A Dao of Web Design” by John Allsopp on A List Apart

Slide 6

The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must “accept the ebb and flow of things.” —John Allsopp, “A Dao of Web Design”

Slide 7

(a desktop computer) “This is not the Web.” —Brad Frost

Slide 8

(various devices: desktop computers, laptops, tablets, mobile phones, feature phones) “This is the Web.” —Brad Frost

Slide 9

(various devices as in the previous slide, additionally smart watch, printer, refridgerator, car, and many question marks) “This will be the Web.” —Brad Frost

Slide 10

Do websites need to look exactly the same in every browser? No!

Slide 11

Using Photoshop/Fireworks for responsive design is like bringing a knife to a gunfight —Andy Clarke

Slide 12

Project Wire HTML Design mgmt frames CSS Backend development To do In progress Done QA Done

Slide 13

Project Wire HTML Design mgmt frames CSS Backend development To do In progress Done QA Done

Slide 14

Pon Kattera, Design Process in the Responsive Age

Slide 15

Project Wire HTML Design mgmt frames CSS Backend development To do In progress Done “AGILE” QA Done

Slide 16

Project Wire HTML Design mgmt frames CSS To do Backend development In progress Done “AGILE” “AGILE” QA Done

Slide 17

Project Wire Design mgmt frames Development To do In progress QA Done “AGILE” “AGILE” Done

Slide 18

Project Wire Design mgmt frames Development AGILE QA Done

Slide 19

Project Wire Design mgmt frames Development AGILE QA Done

Slide 20

Pon Kattera, Design Process in the Responsive Age

Slide 21

Instead of making websites responsive we have to make sure to keep them responsive. —Jeremy Keith

Slide 22

Remaining on ‘m dot’ is not what responsive is about. —Andy Hume

Slide 23

Responsive web design or as I call it: web design —John Allsopp

Slide 24

The journey begins by letting go of control, and becoming flexible. —John Allsopp, “A Dao of Web Design”