An Event Apart: Designing for the Responsive, Retina-Friendly Web

by May 20, 2013

In her presentation at An Event Apart in San Diego California 2013 Sarah Parmenter talked about the changes responsive Web design requires of Web designers. Here's my notes from her talk on Responsive Design Workflow:

  • Any change is accompanied by drawbacks and discomforts. We're going through this transition right now. Responsive design is new and can be hard.
  • We're used to a fixed canvas when we design but the multi-device Web is filled with many canvases of varying size and shape.
  • We have to think in terms of designing a puzzle vs. designing a single fixed canvas. We need to work in terms of proportions.
  • Globally, mobile will continue to grow at a rate of 66% year on year. This forces many designers to adapt. There's no turning back. We can't go back to fixed canvas designs.
  • We all like order and structure in our lives that's why today feels so overwhelming for many of us.

Experience

  • Experience: defining, crafting, and honing. To craft the experience, you have to think in terms of emotions: what do you want to convey and to whom?
  • When your product or service gets an emotional reaction or buy-in, half the battle has been won.
  • WuFoo, for example, sent hand written notes to customers thanking them for using their service.
  • Digitally, we can create experiences through white space and aspirational imagery.
  • There are three questions that can help you define your experience.
  • What is the single reason someone is coming to my site/store/app? Make sure that experience is great.
  • What is causing the most friction with my clients/users/visitors?
  • What is already authentic about your product or service? What makes you unique?
  • How do you want people to feel when they use your product or service? Accomplishment, empowerment, not just happiness should be up for consideration.
  • If you define the expectations for experience first, you'll have a way to discuss and decide other choices as you move forward.
  • What causes the least amount of friction for my users and application? Likely web vs. native discussions will come up. 8 out of 10 times it comes down to budget.

Content

  • How do we define content structure? Start with content hierarchy: what is most important information in your product? You can learn this through direct observations, click tracking, server logs or more.
  • You can design with complete content, but not without an understanding of the content structure.
  • Even if you get content in advance, it may need to be re-written or adjusted for the Web. As a quick fix, consider using a traffic light system: red (remove), yellow (for large screens only?), green (all devices).
  • If you rewrite content, leave comments on why it was modified.

Aesthetics

  • When did Photoshop become a dirty word? All of the sudden no one wants to talk about using Photoshop to design but not everyone can design in the browser.
  • Visual design tools still have their place.
  • UI pattern sites can help you explore ideas for the design of user interface elements. They catalog various solutions for common design patterns.
  • 44x44px is Apple's guidelines for minimum touch target sizes. To make designs work with touch interfaces.
  • Cage is a tool that allows you to get approvals from clients more easily.
  • Getting sign-off on components is also possible. Especially if you treat design as a set of puzzle pieces vs. a single fixed canvas.
  • A transparent layer of touch target sizes can be overlaid on a comp to make sure all the touch targets are sized appropriately.

Build

  • For native applications, you need to crop UI elements to be stretchable, which maybe be different than the way you create assets for the Web.
  • Creating multiple assets for different screen resolutions can be challenging. A scratch file of the UI elements in an interface can isolate all the assets you need to give developers into a single file.
  • Slicy is a Photoshop supporting application that allows you to name layers or groups with asset names (png, gif, etc) and export all the required assets for a project at once. It’s great with scratch files.
  • Slicy can automatically export assets when your Photoshop file changes. This can be a big time savings for designers.
  • Android designs may require more assets for drawable-hdpi drawable-idpi drawable-mdpi and drawable-xhdpi formats.
  • When making assets for Android, 15% of your 2x image size allows you to create android xhdpi artwork. The nine-patch re-sizer tool can then create the other assets you need.
  • The iOS app icon template can help you assemble all the image assets you need for iOS icons.
  • WhatFont is a tool (bookmarklet) for finding what fonts a Web site is using.
  • CSS Hat is a Photoshop plug-in that shows you the CSS code you need for
  • Sprite Cow is a free tool from managing CSS sprite images.
  • Retina.js automatically looks for retina versions and uses those when they are available.
  • When working with CSS, make sure you use the original size of an image in your code to resize it, not the original code.

There is no science to creativity. It’s about having the right people in place to make the right choices.