April 23rd, 2013 Responsive Web Design NYC: Mobile UX and Responsive Web Design


OLC attended Responsive Web Design NYC’s event, Mobile UX and Responsive Web Design on Tuesday, April 23, 2013. The event was held at Booker and presented by Rosenfeld Media. Josh Clark, a renowned mobile UX expert shared his views on user experience and web designed and two virtual panelists—Aaron Gustafson, author of Adaptive Web Design; and Sara Wachter-Boettcher, author of Content Everywhere: Strategy and Structure for Future-Ready Content). The topics discussed ranged from Mobile and Responsive Web Design to the best practices in Mobile UX and the Mobile UX process. This meetup was touted as just “a taste of what’s to come,” referring to a three-day conference regarding Mobile UX and Responsive Web Design.


Josh Clark took the podium to talk about Designing for Touch. He wanted to talk about science—the science of design. He claimed that with web standards, developers realized that there needed to be a separation of presentation. “We realized that there was no one true output in the web,” Clark said. This is when developers realized that there’s no one true input for the web. “This one truth as been staring at us in the face for a long, long time. Speech is about to be a big input for the web. The big input design transition today, though, is touch. Right now, hands and fingers are coming to life. We’ve been working with touch—31 percent of adults own tablets in the United States. The iPad is the fastest growing product in the history of products.” Clark outlined the topics he was going to talk about. He planned to talk about designing for touch for mobile and the desktop.

Clark thanked Windows 8 for making touch a “big thing” for the desktop. “I think all desktop designs have to be optimized for touch,” he said.

Regarding the basics, Clark said that they thought about visual design as a pursuit of the visual. “We thought about pixels, but with touch, it’s about how pixels feel in our hand. It’s not visual anymore. It’s industrial design. When you’re designing for touch, ergonomics come into play because this interface is explored by hands. You need to take into account the movement of hands and ask yourself questions like ‘How does this feel in your hand?’ Studies tell us that over 75 percent of interactions are with thumbs for mobile devices. So phones have a comfort zone with in regards to where the thumbs can go.” Clark explained that dominant hands didn’t matter, as hands are fluid. He did, however, take special care to note the placement of system controls. “When we talk about Top vs. Bottom, iOS puts all of their controls on the bottom. That’s the opposite of a desktop. Ergonomic comfort is one thing, but placing controls at the bottom without obscuring it is industrial design, and so is content on top and control on bottom. The Android puts system control on the bottom, but it stacks app controls. That’s a mistake because it makes for tapping errors. Separating app controls on top and system controls on bottom is good, but the thumb ends up obscuring content, which is not good.” In regards to web, Clark suggested that developers use “positive fixed,” but claimed that it’s hard for browsers to detect—“if at all,” he added. “To make it work, it gets pretty buggy. It’s a technical challenge and you end up choking out content. Not all browsers have room for content anymore. Environment matters. A lot of sites for mobile now shows what it looks like on overlay, but it’s actually an anchor link. Remember that on mobile you lead with your content and keep the navigation at the bottom. It turns out, though, that people view main content first,” he said.

Clark reiterated guidelines for mobile. For iOS devices, controls are placed at the bottom of the screen. For Android devices, they are placed at the top of the screen. For the web, they are at the bottom of the page.

He stopped for a moment to ask about where the iPad fit in. “There’s no conventional grip with tablets,” Clark said. “There’s tons of ways to grip it. After all, it all depends of your posture. We hold tablets often with two hands and they’re usually medium to bottom holds. Putting controls at the bottom is not a good idea [for tablet devices]. It’s bigger than phones, so controls should be placed at top. Don’t put your controls on the bottom or the top center. Go for the sides and corners and use the bottom to see effect in canvas,” he said.

Clark moved to “the greatest horror the screen has ever seen,” referring to touchscreen ultrabooks. He wondered how long it was going to be until laptops started becoming touchscreens. “I’m starting to see less and less mouse and trackpad use with the ultrabooks. People want to use touch. There’s something irresistible about touching the screen. Users end up resting their hands at the sides of the screens. Frequent users use thumbs on the inner screen, which makes it ideal for frequent controls. A common area is on the sides—so it becomes an important area for using thumbs,” he said.

Clark noted that websites optimized for desktops are unfriendly to touchscreen devices. “Screen sizes are a lousy way to detect a touchscreen. CSS4 is working on reporting if devices are touchscreen or not, but I think we have to start to assume that devices are touch, so that would mean that all desktop devices have to be touch friendly,” Clark said.

“We need to do some mind transfers and get rid of hover events. Have thumb controls on the left side. We need to put frequent controls that people actually use on the left side of the application. Think about what people actually use. The size of the target that touch needs to be is about 7mm. For most devices that render pixels, that ends up being about 44 pixels,” Clark said.

He conceded, however, that sometimes, the best touch interface is sometimes no touch at all. “It might be a combination of gesture and speech,” Clark said. “As these get more common, the combinations will get more interesting and fascinating. Gesture and speech mean magic. Designing for sensors. That’s where we’re headed. We can move interaction off the screen and move it into the real world. As digital spaces become more physical, the physical becomes more digital. There is no one single input,” Clark concluded.

From here, the floor opened to questions for the panelists present over Skype.

An audience member asked if financial services would require Responsive Web Design.

“My take is that they might not be No. 1 in the priorities list. It’s not the best idea to say that Responsive Web Design is the answer to everything, either. But, to make things responsive is always a plus. Financial services don’t work with small screens anyway, so it might be a waste of resources,” Sara Wachter-Boettcher said.

“It all depends on what data you’re working with. I don’t know if someone would want to update their spreadsheet with their mobile. But Responsive Web Design does give them an option to view it in a comfortable manner. It’s about removing the obstacles and making it easy for people to read content,” Aaron Gustafson said.

Josh Clark asked a follow-up question. “When is Responsive Web Design a bad idea?” he asked.

“We’re very influenced by Responsive Web Design, so we’re always for it. Most of our work is based around Responsive Web Designs, so it makes sense, but when a client requests a web app on Chrome, maybe Responsive Web Design won’t be a good design. Take a step back and ask if Responsive Web Design will make more friction for the user,” Gustafson suggested.

“You can also look at foundational services. You might also need additional things you need to use. At least having adaptive, relational options might be the foundation you’re looking for,” Wachter-Boettcher said.

“We’re at an interesting place in native and web. It’s harder to do things web only,” Gustafson added.

Another member asked how one would be able to prepare content for the screen size.

“I’d start with saying that 75 percent of content is garbage. It’s just noise. One of the challenges is that people have been publishing with reckless abandon. The solution is to figure out what we’re trying to accomplish and publish just that. Get your content cleaned up and separate them into nicely sized chunks so that it reads well,” Wachter-Boettcher said.

“If devices could identify themselves, what are the aspects that should be content- friendly?” an audience member asked.

“A lot of it is basic stuff. To understand screen size, screen quality is helpful. I think that device APIs that are coming out now is not focusing on the basics. They’re not thinking simple,” Wachter-Boettcher said.

“The thing people don’t think about is content and think about that semantically and ask if it’s flexible. We’ve moved toward a more declarative API, but it’s about focusing on the content. It’s not about having hard and fast rules. We need to be conscious of how much content, how much information we’re pushing to users. Not all users have unlimited data plans, and we need to take that into consideration,” Gustafson said.