Sara Wachter-Boettcher on the Biggest Mistake in Responsive Design

This week we asked Sara Wachter-Boettcher—one of the instructors at our Responsive Design Studio (Mountain View, October 15-16)—to discuss a huge responsive design screw-up:

Rosenfeld Media: What’s one huge mistake organizations make when they embark on responsive design?

Sara Wachter-Boettcher: They think that it’s all about front-end development. Slap on some media queries and fit things to a flexible grid and you’re done, right?

But really, effective responsive design starts much earlier: at the strategy phase. As you design for devices of any size and shape, it becomes more important than ever to have a crystal-clear idea of what you’re trying to communicate and what your users need. You can’t design the look and feel and then figure out what you need to communicate later; there’s no space for that on small screens.

Instead, you have to make every single design decision align with the purpose of your site and the information you need to communicate—because that’s the only way you can be sure your point is going to get across as screen sizes shift and devices change.

To do this, you have to start with strategy, focus on content and messaging, and get everyone—designers, developers, writers, CMS specialists, everyone—on the same page early in the process. This is a challenge for many organizations that are used to working in silos or strict waterfall processes, but it’s only when we get more collaborative early in the process that we can get everyone working toward a shared vision. This is, of course far preferable to building an experience that is viewable on a small screen but is disjointed, difficult to understand, or fails to meet business and user goals.

Rosenfeld Media: Thanks Sara!

See you in Mountain View next month at the Responsive Design Studio?

Aaron Gustafson on the Biggest Responsive Design Mistake

This October 15-16, we’re hosting a Responsive Design Studio in Mountain View, CA! Come work with experts Sara Wachter-Boettcher, Aaron Gustafson and Jason CranfordTeague in this two-day, in-depth studio that weaves together content strategy, design, and development to form a complete look at what it takes to plan, write, design, and code for responsive and adaptive experiences.

In preparation for the studio, we asked expert Aaron Gustafson about one huge mistake that people keep making in Responsive Design and how to avoid it.

Aaron Gustafson: Tackling a site build that will work as well on smaller, mobile screens and larger, stationary ones is a lot more involved than rearranging content on a page. In addition to the visual design implications, a web team needs to consider page rendering performance, interface responsiveness, and what the continuum of experience should be for users as they move from a smaller, less powerful device on a mobile network up to a large (or perhaps giant) display with a faster processor that is hard-wired to the network or connected via wifi.

These considerations should factor into the strategy and system design process and should be part and parcel of all UX deliverables. Having integrated teams—UX, visual design, front-end, and back-end folks all working together—that can deliver this sort of documentation is crucial for the success of these types of projects.

Rosenfeld Media: Thanks Aaron!

Register for the Responsive Design Studio by 9/20 to get the Early Bird Discount!

Mobile Design Strategy: Don’t Make This Mistake

On September 12, our next event, The Mobile UX Summit, is coming to your virtual office! We’ve asked Josh Clark, Brad Frost, Theresa Neil, Greg Nudelman, Jason CranfordTeague, and Mike Fisher for 27 tips and 2 case studies on designing mobile experiences. You’ll walk away with new mobile UX insight and skills, get some questions answered—and the session recordings are included with your registration.

This week we talked to Greg Nudelman about an important mistake to avoid in mobile design strategy:

Greg Nudelman: I think one huge mistake people make is to assume that by using a simple app porting service they can turn an iOS app into an Android app. While this may work for some games (well… sometimes… and sort of), the same assumption FAILS for any content or search-driven apps in most other categories. The truth is there are about one million apps in each of the app stores (Android and Apple) so the competition is fierce in every category.

There is simply no substitute for knowing the OS conventions and using some of the basics as the anchor to start your mobile design. And OS formats are changing rapidly—witness nothing less than fundamental changes in both leading mobile platforms from Android 2.x to 4.x and Apple iOS 6 to iOS 7. And if you do decide to break the app conventions, it helps to know them first—that’s where design pattern books can be of help; books like Theresa Neil’s Mobile Design Patterns Gallery (O’Reilly Media, 2012) and my own Android Design Patterns (Wiley, 2013) are great resources. So to succeed with your mobile app, you will need to:

1. Understand the conventions of the OS you are building for
2. Start with a simple paper or sticky notes prototype to allow yourself to explore various design directions, fail quickly and cheaply and iterate rapidly
3. Test early and test often to make sure the app uses the appropriate patterns and meets your customers’ needs and does so in an original, intuitive and delightful way

Good luck and see you at the Summit!

Sign up now to reserve your virtual seat at our Mobile UX Summit on September 12!

Designing Media Queries: A Few Great Resources

On September 12, our next event, The Mobile UX Summit, is coming to your virtual office! We’ve asked Josh Clark, Brad Frost, Theresa Neil, Greg Nudelman, Jason CranfordTeague, and Mike Fisher for 27 tips and 2 case studies on designing mobile experiences. You’ll walk away with new mobile UX insight and skills, get some questions answered—and the session recordings are included with your registration.

This week we picked Brad Frost’s brain about media queries in Mobile Design.

Brad Frost: Here are some of my favorite resources in regard to designing media queries properly:

Determining Breakpoints in Responsive Design – Tim Kadlec’s book Implementing Responsive Design provides a treasure trove of helpful tips and information for wandering down the responsive road. He discusses how to determine breakpoints in responsive sites not by popular device widths, but rather by your content and design.

The EMs have it: Proportional Media Queries FTW! – Lyza Gardner exaplains why using relative units instead of pixels for media queries results in more accessible, future-friendly experiences.

There Is No Breakpoint – Ben Callahan explains why “What breakpoints should I use?” is a foolish question to ask.

Essential considerations for crafting quality media queries – Zoe Gillenwater provides a massive list of techniques, pros, and cons for many media query techniques.

Tweakpoints – Jeremy Keith explains how the crucial difference between major breakpoints and minor breakpoints.

Rosenfeld Media: Thanks Brad!

Sign up now to reserve your virtual seat at our Mobile UX Summit on September 12!

Mobile First Design: Don’t Make This Mistake

On September 12, our next event, The Mobile UX Summit, is coming to your virtual office! We’ve askedJosh Clark, Brad Frost, Theresa Neil, Greg Nudelman, Jason CranfordTeague, and Mike Fisher for 27 tips and 2 case studies on designing mobile experiences. You’ll walk away with new mobile UX insight and skills, get some questions answered—and the session recordings are included with your registration.

This week we asked Theresa Neil about the most important mistake to avoid in mobile design strategy:

Theresa Neil: There is actually a clinical term for a harmful practice I see occurring in the mobile space; it’s called the Hipster Designer Disorder. This affliction is characterized by an intense need to create novel designs just to be different.

It can be addressed by familiarizing oneself with existing design patterns and usability best practices.

All joking aside, this problem costs companies time and money in creating custom controls and interfaces that are frequently confusing to their users.

Sign up now to reserve your virtual seat at our Mobile UX Summit on September 12!

Mobile Typography: Don’t Make This Mistake

On September 12, we’re putting on our next event (a virtual one)—The Mobile UX Summit. We’ve hit up Josh Clark, Brad Frost, Theresa Neil, Greg Nudelman, Jason CranfordTeague, and Mike Fisher for 27 tips and 2 case studies on designing mobile experiences. You’ll walk away with new mobile UX insight and skills, get some questions answered—and the session recordings are included with your registration.

This week we asked Jason CranfordTeague about the most important mistake to avoid with mobile typography:

Don’t think that you can simply squeeze the desktop/laptop screen type into a smaller area. Working with responsive typography is more than just proportionally scaling text up or down for the screen; you’ve also got to consider its context.

For example, it’s common to use HTML links for navigation to articles (e.g., “Read More”). In most cases these need to be scaled up or converted into more finger friendly buttons for a mobile device. It’s so frustrating, though, when even some “responsive” web sites make me keep stabbing my finger at a tiny navigation link until I finally hit its contact area.

Instead of just resizing text, remember to consider how the text will actually be read or used. Links should be easily clickable, and headers may need to scale down more than body copy to prevent very short lines of text. I’ll give you some tips on how to do this at The Mobile UX Summit.

Sign up now to reserve your virtual seat at our Mobile UX Summit on September 12!

Why We Fail: now on sale

Why did Twitter succeed while Pownce plotzed? Why has “to Plaxo” become a verb? And Zune: great product, but are you using one right now?

More and more, products succeed because not because they provide better designs or functionality, but because their overall experiences are superior to their competitors’. Victor Lombardi’s book, Why We Fail: Learning from Experience Design Failures, which debuted just hours ago, is your field guide to failure. It’s packed with case studies and lessons that will help you, as Don Norman suggests in his foreword, “embrace failure to learn from failure” and “learn from failure to avoid failure”.

Pick up your copy of Why We Fail direct from Rosenfeld Media today—in paperback and three DRM-free digital formats (PDF, MOBI, and ePUB). It’s also available from Amazon and O’Reilly.

UX events for September and October

We’re continuing two great trends that we started back in the spring*.

First, we had such a fantastic time putting on a one-day virtual conference that we’re doing it again: on September 12, we’ve lined up Josh Clark, Brad Frost, Theresa Neil, Greg Nudelman, Jason CranfordTeague, and Mike Fisher to share their practical tips and case studies at our Mobile UX Summit. Co-produced with our friends at Environments for Humans, it’s a great way for individuals and teams to boost their mobile UX skills without traveling—and the recordings are included in the ticket price!

And if you’re in or near Mountain View on October 15 and 16, we’re reprising our Responsive Design Studio. This two-day deep dive is co-taught by a dream team of author/experts: content strategist Sara Wachter-Boettcher, designer Jason CranfordTeague, and developer Aaron Gustafson. Interdisciplinary by design, it’s ideal for teams; early registration deadline is September 21. Please register now; space is limited to 50 attendees.

* Northern Hemisphere spring, to be precise.

Now on sale: The User Experience Team of One

For years, Leah Buley has been guiding and inspiring people new to user experience at conferences around the world with her “UX Team of One” workshop. Her content and approach are so compelling that many have agitated to have it available as a book.

Well, today it is!

We’re grateful to have had the opportunity to work with Leah on publishing The User Experience Team of One: A Research and Design Survival Guide. It offers a comprehensive and incredibly useful overview of the field that will obviously be a boon to solo practitioners. But even experienced practitioners and teams will find the book’s broad framing of the field a great help.

And like all our books, The User Experience Team of One is available in paperback and three DRM-free ebook formats (PDF, ePUB, and MOBI).

Enjoy!

Get 50% off Mental Models by Indi Young today only!

Get Indi Young‘s ebook, Mental Models, for 50% off! Use discount code WACKY to get your digital copy in our store today. The sale ends at midnight ET tonight so act fast!

We interviewed Indi recently to find out what she learned from writing Mental Models. Here’s what she had to say:

RM: What’s one thing you wish you knew about mental models before you started writing about it?

Indi Young: I wish I knew not to refer to the bits I get from the interviews as “tasks”. “Tasks” is a word with way too much history. People trying the method, having read only that word and not all my explanation, go off down the path of capturing the process, rather than the inner thoughts and reactions. I am so sorry I used “tasks”. I often have to back teams out of this path. They have captured how, not why. Yes, it’s true that the models contain things that people do, but those are not laid out as discrete steps in a process so much as lumped together with the reasons why they are doing them, the inner frustration they might be feeling, the underlying motivations for saying something a certain way, the pride they have over an accomplishment or team, the fears that guide how they decide what to do, the workarounds they have concocted to make the best of the situation, etc.

RM: Thanks, Indi!

There’s still time to get your 50% off digital copy of Indi’s book, Mental Models. Enter discount code “WACKY” at checkout before midnight ET tonight!