Presented by Brandon Gray.

The shift from responsive is akin to the shift from table-based layout to semantic markup and CSS for layout.

The World As We Know It

  • The waterfall practice was born from print design.
  • We still use print design vocabulary to talk about the Web: pages, lock-up, “the fold”
  • We’ve tried very hard to maintain the level of control we had in print design.

We’ve all been willing participants in a consensual hallucination. — Jeremy Keith

  • Control’s not something we’ve been given. It’s not the nature of the Web.

The Web is not a prisoner to a single device anymore.

A Whole New World

Be formless. Be shapeless. Like water. — Bruce Lee

Starting with Content

  • Can’t really design without an understanding of the content structure and hierarchy.

Design in the absence of content is not design, it’s decoration. — Jeffrey Zeldman

Thinking in Systems

  • Get focused. Think modularly about the components that make up that system.
  • Brad Frost’s Atomic Design methodology

Beyond the Box

  • 1366x768 and 1920x1080 are the two most popular screen resolutions as of November, 2013.
  • Those resolutions are native resolutions of high definition televisions (720p and 1080p).

“The most popular size is every size.” — Jeffrey Zeldman

Separating Layout from Atmosphere

  • Sketching is a great way to do UX, but don’t focus too much on the fidelity of the sketch. Spend no more than 10-15 minutes per sketch.
  • Everyone on the team can participate! Anyone can sketch and everyone should.
  • Create wireframes in the browser. There’s no substitute for the environment our work will live in.
  • How do we present our aesthetic if we’re not designing pages? Style Tiles and similar tools can convey aesthetic without having to do full page comps.
  • Mood boards are typically chaotic and unfocused. Style Tiles are ordered and focused.
  • Style guides and pattern libraries follow style tiles.
  • Style guides can be created in design software or the browser. Pattern libraries can only be created in the browser since it should demonstrate behavior and interaction.

Separating Content from Context

  • Don’t believe the “Mobile Myths” like: “Users won’t want to do this on a mobile device.”
  • A user can be on any device at any time with any network connection under any circumstances.
  • Do not limit the content! 85% of people expect a mobile experience to be at least as good as its desktop counterpart.

Enhancing for Feature Sets

  • Experience doesn’t have to be the same across every device.
  • Hierarchy can change. Tools can change.
  • Mobile devices have all kinds of features that desktop computers don’t: touch capability, light and motion sensors, geolocation, etc.

Progressive Enhancement

  • Design for a basic HTML document then layer on capabilities depending on the device.
  • A website should work for all users regardless of their browser’s capabilities.
  • We should reward browsers for their capabilities rather than trying to bootstrap old, dated browsers.


  • The more that everyone on the team knows about the project and understands one another’s roles, the better the project and process will go.
  • Everyone should be aware of what everyone else on the team is working on. We work together toward a common goal.
  • Iterate!
  • No team member should ever be on their own in a silo doing their work.
  • This is like Agile, but for the entire process.
  • The process needs generalists that can contribute to every part of the process. You don’t have to be a rockstar in every aspect of the process, but a fundamental competency in each aspect (design, development, user experience, etc.).


  • Take screenshots of builtout layouts if clients want “static” comps.
  • Clients will love interactive wireframes!
  • We can provide links to our built out style guide, to static style tile mockups, etc.
  • We can (and should!) provide to the clients links to in-progress work. Include the client/stakeholders in as much of the process as possible.

The Web Grows Up

  • It’s time we outgrow static mockups.
  • Abandon your silos and collaborate!
  • Let go of obsessive demand for pixel-perfection.

Our “Age of Anxiety” is, in great part, the result of trying to do today’s job with yesterday’s tools—with yesterday’s concepts. — Marshal McLuhan