Episode Transcript

Karen:

Hi, this is a Responsive Web Design Podcast, where we interview the people who make responsive designs happen. I’m your host, Karen McGrane.

Ethan:

And I’m your other host, Ethan Marcotte.

Karen:

And this week, I am genuinely thrilled to have Pabini Gabriel-Petit from UXmatters here. Welcome!

Pabini:

Hello.

Karen:

But first! Some exciting news from our sponsor, Gather Content. On Thursday March 23rd between 4pm and 6pm GMT (UK time) or 11am to 1pm ET, they’re offering their amazing masterclass called Content Strategy and Delivery for Website Projects. Pulling off a responsive redesign means wrangling lots of content and stakeholders. The editorial and migration process can be one of the most difficult parts of going responsive. Managing the editorial processes in a responsive redesign is difficult enough, so make your team’s life easier, by learning from the experts in this masterclass from GatherContent. Go to gathercontent.com/masterclass to learn more and sign up. Thanks, Gather Content!

Karen:

I am so thrilled that you were able to join us. I certainly, being a long time UX person, I’m a big fan of UXmatters. So before we get started with the nuts and bolts of all of this, perhaps you would just introduce yourself, tell us a little bit about you, your background, your work with UXmatters.

Pabini:

Sure. Since the early nineties when I started my career as a UX designer, I’ve been a really passionate advocate for the field of user experience. I was at Apple when Don Norman joined the company and introduced the term “user experience” there, and I’ve used that term to describe what I do ever since. I was a founder of the Interaction Design Association and served on its board for two years. I was involved with UXnet, whose goal was to create unity in the UX community, and I founded UXmatters. Since I joined WebEx in 2000, my work has focused mainly on design strategy, UX strategy, and UX leadership, and over the years I’ve alternated between working in-house and consulting. I’ll be launching another responsive site for my new consultancy, Strategic UX, soon.

Karen:

Oh, well that’s great to hear! Especially from other guests we’ve talked to on this show, one of the things that I know is a particularly difficult challenge is doing a redesign of a publication that’s aimed at designers. Can you talk a little bit about the decision to go responsive? Did you have any questions or concerns? Did responsive seem like it was going to be the right approach for you?

Pabini:

Absolutely. I’ve been doing responsive design at work for a number of years and we’ve been wanting to redesign the site for a long time. We were hoping to get volunteers to help us to do that, but since that wasn’t transpiring, we decided we just had to bite the bullet and pay to have it rebuilt. The design was easy since I’m a designer, but getting it rebuilt was another matter. I wish there was more cross pollination between the UX community and the front-end web development community, especially more in the workplace. But we didn’t have people that were that engaged with UXmatters who were able to do that for us as a volunteer. I’ve been doing responsive design at work for quite awhile, and when we built the original site, it was a three-column layout, that was the thing then, but those didn’t fare well at all on large screens or mobile devices, so we really saw the need to have a solution that was going to serve the mobile community as well as people working at their desktop. So, that was the motivation behind doing responsive.

Ethan:

Pabini, as a UX design veteran, I’d love to hear a little bit more about how you think about these words, “mobile” and “desktop.” Specifically, when you were starting to redesign UXmatters, how did you actually figure out what people needed on different devices? We talk to some publications who feel that everybody kind of needs the same thing on any size screen, whereas some others feel that maybe certain features or content is more appropriate for certain contexts. Can you tell me a little bit, broadly, about how you think about those things?

Pabini:

Well, we took a mobile-first approach. So, on pages where there was content we could trim back, and that’s not our article pages, we trimmed back the content somewhat to make them more mobile-friendly. But in terms of reading, we’re a long-term publication, so reading is pretty much reading wherever you’re doing it, so we just tried to make sure that the reading experience was good on mobile as well as on the desktop. I don’t think people really engage with our site, at this point, to do anything but read, so I don’t think there’s a great deal of difference between mobile and desktop users when it comes to reading. There are the obvious things like they’re closer to the screen, but those were just things we took care of in the CSS for mobile versus desktop.

Karen:

Let me follow up on that a little bit and just ask about how the content and perhaps your editorial direction, or even the content management system, might have also changed as part of this responsive redesign. Ethan and I have talked to a lot of publishers, and one of the things that sticks out to me is that some organizations use this as an opportunity to rethink their editorial direction, rethink the types of article formats or other ways that they support helping users find content or navigate to content, and other organizations say that, no, it doesn’t actually change the content itself, it’s really more about doing a front-end design. How do you think about that?

Pabini:

Well, because our site was so old, we really needed to take a “big bang” approach to the site redesign. We looked at it comprehensively, and you mentioned navigation, that was one of the things that we realized that we really needed to rethink, because we had over 1,100 articles on our site at that point and the navigation system that we had wasn’t scaling that well. Everything was very bloggy, very much determined by the features that Movable Type offered, which is the CMS that we use. Over time, they kind of stagnated in terms of progressing and adding new features. There were some features that were what I would call really bloggy, things like the listing of all the issues of the magazine by month, which really wasn’t scalable for a navigation system; and listing authors by their specialties, which wasn’t very useful. So, we just got rid of those pages and rethought our navigation to make sure that we had something that, even though it’s different on the desktop and on mobile, that the structure was more scalable. It’s a two-tier navigation system now when it comes to topics. We have a topics page that can lead into all of the topics, and then also on those pages we have a lot of specialized content that focuses on those specific topics. So, that was another real change in the navigation system.

We got rid of some features on pages also because of the new approach to Movable Type. I have a developer who’s a real wizard at Movable Type named Mihai Bocsaru, and he customized Movable Type for us to expand its capabilities so they’re more on par with what you’d find in WordPress or other solutions like that. So at this point, we’re able to do things like on the article page, at the bottom, include the profile of the author, which we couldn’t do in the old system, and things like links to other articles by that author, and other articles on the same topic—he enabled us to add all of those capabilities.

Ethan:

Pabini, tell me a little bit about your design process for thinking about a responsive site. Specifically, I’d love to hear about any applications or tools you might have used to start fleshing out the new layouts, the new look for UXmatters. Tell me a little bit about how you made this happen.

Pabini:

Well for a number of years and even a little bit before I got into responsive design, I’ve been prototyping in code, and as a consequence of that, I don’t use non-development tools a whole lot. The one that I’ve been using for quite a few years is Balsamiq. [laughs] When I say the name of that product, I don’t even use the whole name because I don’t think I would dignify the things I create with them as mock-ups, because they’re not hi-fi enough for that. So, I create what I call “sketches” in Balsamiq. I don’t use their widgets because they’re a little crude. I use the shapes, and that lets me create a sketch of a modern-looking interface, a flat interface. So, I created sketches of key pages first, like the home page and the article pages, because I wanted to get the developer working on stuff while I sketched the others. But I created sketches of all the pages, doing the sketches of the mobile pages first, and then where it was necessary I did an in-between the mobile and desktop for tablets, or phablets, but I mostly focused on doing mobile and desktop and worked out the other breakpoints in between once we’d gone to code. So, we went straight from those sketches to code. Since I do CSS myself, I had the developers do the structural CSS for the most part, but I did a lot of the styling of the text and the elements on the page in CSS myself, so that let me do most of the design there in code.

Ethan:

Let me follow-up a little bit on that, Pabini. It’s great to hear you doing a little bit more prototype-driven design. We’ve talked to some organizations that have actually found that when they rely on more traditional design tools, like Photoshop or Illustrator, sometimes that introduces surprises when they actually get something into a browser, into different devices, and they have to kind of rethink some of their design assumptions. Did you find that you still had to rework things like that navigation system, for example? Or did actually prototyping actually mitigate some of that?

Pabini:

I think prototyping really does mitigate that. You can’t really get an accurate rendering unless you’re in code. When I was doing design using Adobe tools, I mostly used Photoshop—sometimes Illustrator but mostly Photoshop—and it doesn’t render code and the texts that reliably, so that’s one of the reasons why I moved away from using it. But when you’re in code, you get the precise look, if a header is going to work or not, because will it fit in the actual font, in the actual context? Will it cause problems? The various layout elements, you’re able to do the spacing between elements more reliably because you can see on a tablet or on a phone, is that a large enough touch target? That’s why I think it’s important to do mobile-first because you have to simplify things enough for mobile. If you simply things enough for mobile, then it will also work well on desktop. So, those are the main factors that drove me to doing it that way.

Karen:

Let me ask about how you measure or evaluate whether the site’s working for you. What kind of analytics or data do you use to evaluate what’s working and what’s not? And might you change anything based on the feedback that you’re getting?

Pabini:

We use Google Analytics. That lets me know which articles are doing really well and which ones aren’t so much, and helps me make decisions about what to publish. In terms of measuring the benefits of having gone through the effort of doing responsive design to improve our mobile experience, our readership on mobile has increased about five percent so far since we made that switch. We’ve gotten good feedback from our readers about it, and we’re not getting any complaints anymore about not being mobile-friendly, which was something that we’d wanted to address. So, mainly Analytics. We’re a really small organization with limited resources, so we don’t have any plans on adopting any more robust tools; it would probably be costly to be able to do that. We have done more, though, and invested in tools to do more social sharing of our articles, which is also driving readership. So, that’s a way of getting feedback too, because if people share content then they’re also communicating that they found it really valuable.

Ethan:

Well Pabini, as we come to the end of our time, I would love to hear if you have any advice for our audience on any undertakings that they’re going to see in their next responsive redesign. So, what’s something that you’ve learned either in the course of UXmatters, or any other responsive work, that you’ve done that you’d like to share with our listeners and readers?

Pabini:

The key thing is that it’s really important, and I mentioned this in passing earlier, for UX and front-end development to work closely together. I’ve gone so far as to doing pair programming with developers. I think today we’re seeing more and more that front-end development is part of a UX team, and I think that’s a good approach. But there shouldn’t be gulfs between the key roles on a project, like UX and product management and development. That trio should really work in concert with one another and make decisions together throughout the process. So, I’m accustomed with product management in defining requirements and user stories, and then working with development throughout the development cycle and having them completely involved in the process of UX design. I find that I get valuable inputs from everybody on a core team—once you start working really closely and collaboratively together, you really increase the awareness and the savviness about one another’s professional focus areas, and that really helps to have a coherent team. I find when you have a really coherent team like that, you can do work that’s a lot more creative and a lot more innovative. So, I think for any development team doing anything, that’s a really key message.

Karen:

Pabini, I just think this has been a fantastic interview. I’ve always really enjoyed your publication, and I of course enjoy it even more now that I can read it on my phone. So, thank you so much for taking the time to come and talk to us this evening.

Pabini:

I’d like to invite the people who are listening to write for UXmatters, yourselves included. We’re trying to expand into having more content on the other areas I mentioned, front-end development and product management. We want to encourage people to write for UXmatters on those topics. So, we’re really glad to be able to speak to this broader audience.

Karen:

Well, I support that message. I think it’d be phenomenal to have more people writing for UXmatters, so thank you!

Pabini:

Thank you very much.

Karen:

Thanks to everyone for listening to this episode of a responsive web design podcast. Thanks also to our sponsor, GatherContent. Go to gathercontent.com and take control of your content production process.

If your company wants to go responsive but you need help getting started, Ethan and I offer a two-day onsite workshop to help you make it happen. Visit responsivewebdesign.com/workshop to find out more and let us know your company is interested.

If you want even more from us, you can sign up for our newsletter, subscribe to this podcast, and read full transcripts of every podcast episode at responsivewebdesign.com.

Thanks for listening, and we’ll be back next week.