Episode Transcript

Ethan:

Hi, this is a responsive web design podcast, where we interview the people who make responsive designs happen. I’m your host, Ethan Marcotte.

Karen:

And I’m your other host, Karen McGrane.

Ethan:

And this week, well, Karen and I are basically high-fiving ourselves out of excitement because we are here today with Jason Smith and Marcus Taylor to talk to us about the Fontsmith responsive redesign. Jason, Marcus, thanks so much for joining us.

Marcus:

Thanks for having us on the show.

Jason:

Hi. Thank you.

Ethan:

So I have to say, Fontsmith.com is a beautiful piece of responsive work and I was wonderingi f you guys could maybe start off today by introducing yourselves and telling us a little bit about your role in the redesign.

Jason:

Okay, well I guess I’ll kick off. I’m Jason Smith and I setup my typeface design company a good twenty years ago, and I’ve seen lots of changes in the industry in font design and part of that has obviously been the advent of the internet and e-commerce, and as time has gone on, it’s become a much more important tool for us to engage with clients and customers all over the world. The website has been a huge success for us certainly in its latest iteration, especially because of the responsive nature of it.

We met with Marcus Taylor and Taylor/Thomas to help us formulate, put together a strategic plan and a design for the new site, which launched last year. So, I’ll hand it over to Marcus.

Marcus:

Yeah, hi. I’m Marcus Taylor. I’m one half of Taylor/Thomas. We’ve been going since 2008, so not quite twenty years… We are a small agency and we kind of pride ourselves on being a genuine hybrid of design and technology. Both the directors are designers and both of us opened up text editors back in the ‘90s, so we’re pretty familiar with HTML and CSS, but now we tend to have a team who are specialists doing that. We’ve been working with Jason actually for a number of years now and this is the third iteration of the website. And yeah, that’s the foundation and the beginnings of the project. Jason actually spoke to us probably a couple of years ago now about the project and there were a number of drivers behind that. One was Jason’s new licensing format, the requirement to move the website along with the advent of tablet and mobile. And also the engine underneath it—the previous website, the CMS was non proprietary software, so there was a need to move on from there, as well.

Our ultimate aim is to reach as many people, show our shop window effectively, to as many clients and customers around the globe, and that’s how I’ve always looked at our website.

Jason:

I should probably mention here as well actually what Fontsmith does. We not only design new typefaces to sell to the design community and beyond, but also a huge part of our business is creating fonts for brands; big, big global brands. So, obviously we need to reach as many people in terms of reputation and in terms of showing a portfolio of our work and our capabilities, as well as the actual fonts themselves. There’s a lot to the business in terms of licensing, that’s basically where we make our real money, it’s the real core of our business. It’s very like the music industry: you can create a track, spend lots of time creating a lovely piece of music, but if nobody gets to know about it, nobody’s ever going to buy it or license it for a movie or something. So, it’s the same with fonts.

Our ultimate aim is to reach as many people, show our shop window effectively, to as many clients and customers around the globe, and that’s how I’ve always looked at our website. It’s a shop window that people discover and go, “Wow!” It doesn’t matter that there’s only eight of us here. We’re a small company but the quality of our work and the people that we work for and the brands we work with are big. It’s a little boutique business; I wanted to create a website that was not only professional but also engaging creatively, had lots of information. And that’s why Taylor/Thomas were perfect for it, not only because they understand our business inside and out because of the relationship we have shared as studios in the past, but technically, creatively, everything—they sort of tick the box, really.

There’s nothing more annoying to me personally than looking at a type or a font website and the type is really small and the images you have to use your finger to blow up the screen and all that.

Ethan:

That’s great. I love that image of the shop window, and I’d be interested to hear, when you’re trying to create this compelling and beautiful online experience, in the first days of the project when you were looking at all these different devices you were going to be designing for—mobile, tablet, desktop—how did the decision come about to actually go responsive? And were there any concerns or difficult discussions around responsive design as a methodology?

Jason:

Well from my point of view, it was very important—we’re based in London and pretty much everybody commutes into London. And what do we do on the train? We get our mobile phones out and we start reading our emails and email newsletters and blogs and having a little browse through sites. So, there’s nothing more annoying to me personally than looking at a type or a font website and the type is really small and the images you have to use your finger to blow up the screen and all that. So, it was quite important to me to have a website that worked across mobile and desktop, and then it was Marcus that… you designed three, didn’t you? Three breakpoints, or maybe four, I don’t know. I was quite taken aback by that. I was like, “Oh wow, you’ve really gone to town on this,” and it works beautifully. My favorite iteration of the site incidentally is the tablet one. I mean, they all work beautifully but the tablet breakpoint I think works particularly well.

We had to think of other ways of displaying the content, and that did mean creating lots of different graphics for different breakpoints.

Marcus:

Interesting that Jason likes the tablet version the most. I’m a fan of the mobile as well as the desktop. Just to kind of follow on from what Jason was saying about the four breakpoints, from a process perspective we’re not a mobile-first agency or a desktop-down agency. The project, the client and the budget all kind of dictate the process that we enter. So, when Jason said, “This needs to be responsive,” we were like, “Well, yeah, it has to be.” When you’re building a website of this scale and a client is making an investment then, especially nowadays, you don’t need to even ask that question, but it’s kind of future-proofing it as well.

The reason why we fired up Photoshop and designed across the breakpoints is because of some of the challenges that we met. So, for example, the exchange that we had on Twitter—that was a pure outcome of one of the design challenges that we had to overcome, and that was the character sets. So when displaying a character set, if you can imagine a long line length from desktop and you were going to scale that down in a mobile, then that would make the typeface illegible because you’re scaling the size of it, so we had to think of other ways of displaying the content, and that did mean creating lots of different graphics for different breakpoints.

So, those are the kind of hurdles that we had to overcome and the design process that we went through revealed those. But like I said, those are the kind of challenges that we navigated our way through on this project.

We don’t think the audience are different people. They are the same audience, it’s just a different context.

Karen:

What do you guys think are the differences between what a mobile user and a desktop user needs? One of the things that we have encountered in talking with retailers is that conversion rates on smartphones tend to hover around one percent, that people may be browsing information on smartphones but they tend to transact on larger-sized screens. Is that something that you found? Did that factor into any of your design process?

Marcus:

I think, first and foremost, we don’t think the audience are different people. They are the same audience, it’s just a different context. So, like Jason was saying in his particular example, their audiences are designers, brand managers, creative directors. So a designer, for example, would be looking at Twitter or a blog or whatever and be inspired by the product, in this case Jason’s fonts, but the purchasing decision would lie with someone further up the chain. Ultimately, Jason’s fonts are bits of software and they need to be installed on a desktop environment. So, it’s a tricky question to answer in the broad context, but for him that’s kind of where we feel the difference lies between desktop and mobile.

All that stuff had to integrate and cross-link with each other really well and feel that it was the same site, whether you’re looking at it on a mobile, or whether you’re looking at it on a tablet, or a desktop.

Jason:

Yeah, ultimately you’re buying a piece of software to install on your desktop machine, so pretty much everyone—well, I would say literally everybody—is purchasing from the desktop site, unless they’re en route to a meeting somewhere, to download it later.

The key point here is for us it’s about planting a seed with people, getting them to see a new typeface that we’ve designed, to see a new piece of information, to see a new blog post, to reference content in the website to enable them to sell… We’re working with creative directors who are working with big brands, global brands, so they need to also sell a font to their client, the brand, so they need to have information about why this typeface was chosen, why this font was chosen. We’ve always described as fonts as people or places, and given them character and personality and used words to give an overview. Quite often, those words are the same words that brands use, so it could be charismatic, or warm and friendly, sensitive, vibrant, dependable—those kind of keywords that we use to describe our fonts are the same keywords that brands use to describe their positioning. So, we wanted to make sure that we had that information available to lift off the site, the creative directors could use to write in their presentations. That was main factor.

The purchasing of fonts through the site is probably about a third of our business. A lot of our licensing comes offline and then another third is probably special commissions. So, the site does a lot of work, it’s not just a retail site selling software. It’s a site where people go to get information, both technical, inspirational, and monetary as well; to try stuff out, to get pricing, and to understand licensing. So, it’s a real mixed bag. It had to do a lot of things. But key: all that stuff had to integrate and cross-link with each other really well and feel that it was the same site, whether you’re looking at it on a mobile, or whether you’re looking at it on a tablet, or a desktop.

We had to really work hard to establish a content framework first. So, we did wireframing first.

Ethan:

I’d be interested to follow up on something: Jason, I think you mentioned earlier that you were shown three breakpoints for the design. Marcus, maybe you could describe to me a little bit more about your design process either for Fontsmith specifically or for other responsive sites that you’ve worked on. Is that a fairly common starting point for you?

Marcus:

To be honest, it varies. The project and the client and the budget kind of really dictates the process. Some smaller projects may not require, say, wireframing upfront, and the client has never done a design project before so you have to do a lot of handholding and explain things like a breakpoint, what happens in desktop, tablet, and mobile. But in the instance of Fontsmith, because we engaged to work on the new website a couple of years ago, we went straight into wireframing first because there were key content considerations to make, and those were the new licensing model and also because of the landscape Fontsmith operate in; there’s increased competition, increased pressure from free typefaces—so, Google web fonts.

So, bringing value to Fontsmith typeface is really important—those are kind of content messages, so we had to really work hard to establish a content framework first. So, we did wireframing first. Then we, if memory serves me, dove into design in the desktop viewport because that was a way for Jason to see his typefaces, see the content and the kind of user journeys without over-complicating it and for him to grasp the decisions. Because the tablet and mobile—those are other decisions. Mock-ups are an abstract to start with, and so you have to explain “what happens here when a user clicks here,” and what kind of transition happens and so there’s already a kind of comprehension barrier or a hurdle to get over there. But in terms of our process, we’ve been doing this a few years now, we’ve read about this guy, Ethan Marcotte’s manifesto for responsive web design…

We’re not pinning our flag to the mast when we engage with new clients and say, “This is the process we’re going to march you down” because everyone is different.

Ethan:

[laughs]

Marcus:

…So we’re kind of getting a handle on the process now. And, you know, like for everyone, it’s been a learning curve. We’re not pinning our flag to the mast when we engage with new clients and say, “This is the process we’re going to march you down,” because like I said earlier, everyone is different. So for example, we’re working on a small microsite. It’s a complex proposition—and this is not for Fontsmith but for another client—and we’re at the content creation phase at the moment, so it’s really important that we create engaging and succinct content. So, rather than show desktop design, we showed mobile because it was a catalyst or a tool for them to understand, “Right, we need to create succinct, engaging content here because it’s got to fit on a small device.”

Like I said earlier, we don’t channel our clients down this one process. We kind of weigh up what the project is; has the client got experience with designers, and do we start with wireframing, do we start with content creation. A larger project that has complex interactions, we would go, “Well okay, we need to prototype.” But that’s not suitable for smaller brochure websites or smaller propositions. So, that’s the kind of way we approach. Everyone’s different. We just let the project dictate.

Whenever you go smaller and you go to resize the smaller formats, those sections of the site work really well in the way they scroll.

Karen:

Let me follow up on your point about the content and how you might approach creating succinct and engaging content for something that is more of a storefront or a brochure. How did that change with a responsive project?

Marcus:

I don’t know if it necessarily changed with it being a responsive design. The content was really important for the project, because what we needed to do was bring value to the fonts. The way the design evolved, responsive had a definite bearing on the framework and the way that we delivered those messages.

Jason:

I think what’s quite interesting is about the site is whenever you go smaller and you go to resize the smaller formats, where we’re talking about our services or showing examples of case studies or the blog or some of our licensing or even support, those sections of the site work really well in the way they scroll; it’s really easy, everything’s there and it’s just click and scroll, click and scroll the whole way down. And then you can click into a case study and read more. It all just works seamlessly. And swiping images, all of that…

Whereas on a desktop, there’s a lot more information. There’s a menu at the top, so there’s more to navigate on the desktop site and you’re very much in a very definite area: font services, licensing, Brandfont, about, blog, or support. It’s the same content but I kind of felt that the font section is where people would be purchasing on the desktop. Everything else was information, and most of that information will be read on the move, I would think, by pretty much everybody—create directors on their bikes, on their way navigating the buses through London. [laughs]

That’s becoming our number one consideration now, is performance. It’s getting more and more complex—not easier.

Ethan:

One thing that I noticed poking around the site a bit, especially for a site that’s as image heavy and as type heavy as Fontsmith is, is it’s actually fairly lightweight from a speed standpoint. So when you’re talking about viewing the site on the go, it felt like performance might have been a bit of a consideration.

Marcus:

Definitely.

Jason:

Didn’t you create different-sized images…?

Marcus:

Yeah. So, that’s becoming our number one consideration now, is performance. There’s a couple of things at play. First and foremost, the way we built the website, this project made us reevaluate the way we code and work together as a team. We’re going back about eighteen months now—we were doing a lot of research about Object Oriented CSS, using the BEM model. I mean, we actually ended up sort of hybridizing the Block Element Modifier model out there because we knew it was a huge build; it’s Jason’s storefront, so it’s never going to stay still, so we needed to be able to dive into the code a year, two years later and understand what was going on without breaking anything.

And also, because it’s a mobile website, then yeah, assets are really important, that we get them down as small as possible. So we did a lot of image optimization and we also serve up assets over cloudfront. Jason has global brands and has global clients, so content delivery has to be swift. That means keeping the load on the server down and the assets get distributed via cloudfront. So, like I say, that’s becoming more and more important, especially with Google updating its algorithms on mobile performance. So, it’s getting more and more complex—not easier.

The advice I would give is really think about what it is that you want your website to do. Plan the business and then plan the website and it will all fit in.

Karen:

Well given the perspective that you both have on all of these complexities, I’d love to know if you have any advice for other organizations that might be embarking on a responsive redesign? What would you tell them to do? What would you do differently?

Marcus:

That’s a good question.

Jason:

I don’t think I would do anything differently because it was so well-thought-out in the beginning. There’s a few tweaks here and there, as the business develops, that I want to change. But because we planned it so well and stuck to that—that business plan, that business model—everything fit into place. So, the advice I would give is really think about what it is that you want your website to do. Plan the business and then plan the website and it will all fit in, and then get Taylor/Thomas to build your site for you. [laughs]

We always insist with our other clients that the best result comes through collaboration. But also trust as well; that’s quite important to let us get on with our jobs.

Marcus:

[laughs] Well, there you go. I can’t add any more to that. From our perspective, sitting on the other side of the fence, being the designer and the developer and the supplier, I think collaboration with the client is key, I think that yields good results. I don’t know if your listeners caught on earlier, but we do share studio space. So that, for us, regardless of the relationship with Jason—we always insist with our other clients that the best result comes through collaboration. But also trust as well; that’s quite important to let us get on with our jobs because that’s what we’re here to do. And then also getting under the skin of the business, understanding—I know that falls outside of the remit of responsive web design, but those are the key drivers, is “What are you trying to get out of a website redesign?” We want our customers to think of this as an investment rather than a cost, so we need to meet those business objectives.

Because you’re not talking to a human or talking to the owner of the business, you’re interfacing with a website, and all those little details make up a pleasant user experience.

Jason:

I would add one more thing as well. It’s relatively simple, and lots of people are making websites, but there’s very few people designing websites to this degree and putting this much care into it. So, design is key throughout everything that we do. It’s worth the investment.

Marcus:

I also think, just to follow on Jason, that because of your audience being designers and art directors, that every single touchpoint on the website has to be amazing. You can’t drop anything or cut corners. So, things like the Google reCAPTCHA form we’ve used on the support form we re-skinned because we just didn’t like what Google reCAPTCHA was spitting out. The 404 page has a sense of humor. All the icons were developed and designed to appear uniform. It’s those kind of details that delight the user, so that’s really important when you’re engaging a customer when they’re coming into your shop, to carry on Jason’s analogy, that they are delighted at every step of the way. Because you’re not talking to a human or talking to the owner of the business, you’re interfacing with a website, and all those little details make up a pleasant user experience.

Ethan:

Well, that was beautifully said.

Marcus:

[laughs]

Ethan:

No, I couldn’t say it better than that.

Marcus:

Thank you.

Ethan:

Well Marcus, Jason, thank you so much for your time today. I mean, Fontsmith.com really is a stunning piece of responsive work and I am very excited to see where it goes next.

Marcus:

Thank you very much.

Jason:

Thank you, Ethan.

Karen:

Thanks to everyone for listening to this episode of a responsive web design podcast.

Ethan:

If your company wants to go responsive but you need help getting started, we offer a two-day onsite workshop to help you make it happen. We’re also planning to offer these workshops to the public, so please go to responsivewebdesign.com and let us know that you’re interested.

Karen:

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.

Ethan:

Thanks again to our sponsor, Campaign Monitor, and we’ll be back next week.