Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Responsive Mindset (UXcamp Europe 2015)

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?

Gunnar Bittersmann

June 20, 2015
Tweet

More Decks by Gunnar Bittersmann

Other Decks in Design

Transcript

  1. @g16n #uxce15

    View full-size slide

  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

    View full-size slide

  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


    View full-size slide

  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


    View full-size slide

  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

    View full-size 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”

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  10. Pon Kattera, Design Process in the Responsive Age

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  14. Project
    mgmt
    Wire
    frames
    Design Development QA Done
    AGILE

    View full-size slide

  15. Project
    mgmt
    Wire
    frames
    Design Development QA Done
    AGILE

    View full-size slide

  16. Pon Kattera, Design Process in the Responsive Age

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide