Responsive Mindset (UXcamp Europe 2015)

Responsive web design—Ethan Marcotte coined the term in his article on A List Apart in 2010. Yet the idea dates back to 2000: ‘A Dao of Web Design’, wherein John Allsopp calls designers to let go of control they know in the print medium, to design for the flexibility of the Web, to “accept the ebb and flow of things.”
This became more relevant now that the Web is not accessed only on desktop computers, but on a growing variety of devices. Web sites not only do not need to look exactly the same in every browser, they _must not_ look the same in every browser on every device.
We cannot build a responsive web site based on Photoshop mockups—“you damn liar”, as Josh Brewer sang(!) at beyond tellerrand 2013. Mockups can only show particular views of a web page, not those in between.
We cannot build a responsive web site in a waterfall process—we need a _responsive workflow_. A workflow that does not separate design from development. A workflow that allows for iteration cycles.
Developers tend to think that with Scrum or Kanban, they are doing agile development. But on a larger view, they are still stuck in a wireframes–visual design–development waterfall process. You are not agile unless developers, designers, project managers and other stakeholders sit on the same table and work together, not sequently.
To implement a responsive workflow in our company, we need to rewire some people’s brains. We need a _responsive mindset_. But how do we get there?

Transcript

1. @g16n #uxce15
2. • • • • • • • • • • • • • • • • • • • • • • • • • Dec Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec 2014 2015 ▼
3. • • • • • • • • • • • • • • • • • • • • • • • • • Dec Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec 2014 2015 ▼ ▼
4. • • • • • • • • • • • • • • • • • • • • • • • • • • Dec Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec 2010 2011 2 ▼ ▼
5. • • • • • • • • • • • • • • • • • • • • • • • • • • ul Aug Sep Oct Nov Dec Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec Jan Feb Mar Apr May Jun Jul A 2000 2001 ▼
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”
11. Using Photoshop/Fireworks for responsive design is like bringing a knife to a gunfight —Andy Clarke
12. Project mgmt Wire frames Design HTML CSS Backend development QA Done To do In progress Done
13. Project mgmt Wire frames Design HTML CSS Backend development QA Done To do In progress Done
14. Pon Kattera, Design Process in the Responsive Age
15. Project mgmt Wire frames Design HTML CSS Backend development QA Done To do In progress Done “AGILE”
16. Project mgmt Wire frames Design HTML CSS Backend development QA Done To do In progress Done “AGILE” “AGILE”
17. Project mgmt Wire frames Design Development QA Done To do In progress Done “AGILE” “AGILE”
18. Project mgmt Wire frames Design Development QA Done AGILE
19. Project mgmt Wire frames Design Development QA Done AGILE
20. Pon Kattera, Design Process in the Responsive Age
21. Instead of making websites responsive we have to make sure to keep them responsive. —Jeremy Keith
22. Remaining on ‘m dot’ is not what responsive is about. —Andy Hume
23. Responsive web design or as I call it: web design —John Allsopp