Smashing Conf: Responsive Web Design is Easy/Hard

by September 9, 2013

In his talk at Smashing Conf in Freiburg Germany 2013 Dan Mall walked through how his Web design process is changing in a multi-device Web. Here's my notes from his talk Responsive Web Design is Easy/Hard:

  • A typical waterfall process consists of a few isolated parts: you finish one and move on to the next. Today the design process is more iterative because we have to support multiple devices/screens.
  • The internet is about more than just desktop machines. The way people use the Web has changed so the way we make Web sites needs to change as well.
  • A typical approach to Web design involves showing people what their site will look like on different devices. Rather than showing what your site will look like, rephrase it to here's what your site will "feel like". This is more flexible.
  • A visual inventory allows you to really understand what a site could feel like. Take some screenshots of other sites and write up a quick overview of the technique being used. Ask if it could apply to the site you are working on.
  • Solve your own problems by using the success and failures of others. Having a conversation up front means your first design won't be a surprise.
  • There's no one comp to rule them all anymore. We can still use Photoshop but not exclusively to represent what a site design will be.
  • Too much abstraction and lack of context can lead to misdirection. We need to provide the right balance between design direction and fidelity.
  • Turn powerful phrases in visual hooks through collages, style tiles, or other visual ways to kick off discussions about what a site should feel like. Should it be bold, bright, saturated, etc.? These are the right conversations to have at this point.
  • Clients need to imagine how these style explorations could be a Website. This is what we want them doing.
  • If an element collage feels too much like a Web site, try laying things out horizontally so clients can make the distinction. Create deliverables that allow you to reveal parts of the design process to clients.
  • Be honest: code gives you a more honest view of how a design will work. You can cheat in Photoshop, less so in code.
  • Real Content: when you prototype, use real content not lorem ipsum text.
  • Slow Down: when you want to focus, go back to Photoshop. Code can make you work too fast.
  • Start with Type: always start with the typography. On small screens, many of your other visual elements will go away so type is a critical part of the design.
  • Use Photoshop as a way to think. Photoshop allows you to be expressive in different ways than code.
  • If you find yourself fighting with your tools, you may be using the wrong tool at the wrong time.
  • So much of creation is about discovery, you need to see what you are making. That's what designing in the browser is all about.
  • It's ok to go back and forth between the browser and Photoshop.
  • The design process starts in the sales process. You can't implement a new process if you are selling the old way.
  • Let's keep talking, sharing, and learning. This is a new way of doing design.