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, I’ve been reciting the lyrics to Reading Rainbow to myself all morning because I couldn’t be more excited that Andy Lechlak and Greg Jenkins are here to talk to us about the Toledo Public Library. Andy, Greg, thank you so much for joining us.

Andy:

Thanks for having us.

Greg:

Thank you.

Karen:

But before we get on with it, I’d like to welcome back our sponsor, Gather Content. I’m thrilled that they’ll be sponsoring this podcast for the rest of the year. I recommend Gather Content to my own clients who are going through a website redesign. Gather Content provides some much needed structure and editorial workflow to help manage a large-scale content creation process. Because Gather Content works with so many organizations going through a website redesign, they have unique insight into how content fits into a web project. And because they are such great people, they wrote down their advice for you! They’ve put together a 41-page guide to Content Strategy for Website Projects. Head on over to gathercontent.com/RWD to read their advice or download a PDF to share with your team. Thanks, Gather Content!

Ethan:

So before we dive in, maybe the two of you could just take a few minutes to introduce yourselves, maybe tell us a little bit about the library, and specifically your role on the redesign. Andy, do you want to go first?

Andy:

Sure. At the Toledo Public Library, I’m the digital strategist and I’m in charge of the digital strategy that overlays our strategic plan. That means being involved with the website and the redesign, but it also involves other technology and the users that engage with that. That pretty much sums it up.

Ethan:

That sounds great, Andy, thank you. And Greg, how about you?

Greg:

So I’m one of the developers here at Madhouse in Toledo, two or three blocks away from where Andy is sitting at the library, which is convenient for meetings. And yeah, I’ve been here for five or six years now, working on websites and everything that that entails. So, we’re a little unique here at Madhouse, we don’t break projects up into these discrete phases and pass them off to each other. So I was involved with this library redesign from day one until we launched the site, so everything from design, ideation around wireframes, information architecture, all the way through the buildout of the content management system, and even still today, tweaking things, helping them out when anything comes up.

Ethan:

That sounds great. Maybe we could back up a little bit and go back to the first days of the project. I should say for our listeners, ToledoLibrary.org is one of the finest looking responsive sites I’ve seen in awhile and it’s definitely one of the best looking library sites I’ve seen in some time. Maybe you all could tell me a little bit about what the decision was behind going responsive for this redesign, and specifically I’d love to hear if any stakeholders at the library had any concerns or questions about going responsive as a methodology.

Andy:

Sure. We get about 3.4 million visits per year, and normally those users are on our desktop because we have about 800 PCs in our building. So before we actually made that responsive jump, we had about seventy-eight percent using desktop and then about twenty-two percent on the mobile or tablet interface, and so we knew that there was an audience already for responsive design. And our previous revision was sort of responsive, it was in the beginning stages of being made responsive when we thought of maybe rebranding our whole library look and feel. We had a logo that was about thirty years old, so we needed to catch up with the times, something that was a little more modern and didn’t make us look so archaic, because we’re more than just books.

So we decided to do it all at once, and it took about nine months total. We had a lot of great support from the administration. Since we were already in the process of being responsive, there wasn’t too much that we actually had to convince about going in that direction.

Karen:

One of the things that I’m curious about is how do you see the difference between what a mobile user and a desktop user might need from the library website? I think there’s this sense that for organizations that actually have a physical presence, that they might need to deliver different services to people on a mobile device. Is that something you considered?

Andy:

When we started this, we knew that they needed access to those same functions and the same data. The objective for eighty-seven or eighty-eight percent of our users is to go to the catalog to find the materials that they’re looking for or to do something with their account, so we knew that was critical. We knew that they needed the same information, they needed access to the same types of functionality, so we knew that, going in, we would need a truly responsive site that was able to offer that. And we went with the approach of design-driven content, so we knew that with the design we could have minimalistic content, and so we started to cater to our audience around that, so that no matter where they were coming from, the information was quick, snappy, and minimal, because we know that people are coming to the library with an objective in mind, they’re not coming to just browse.

Greg:

Yeah, and from the design side of that conversation, I think there has been a shift, especially our team at Madhouse and the way that we think about mobile vs. desktop, the shift being maybe four or five years ago upfront, trying to figure out the unique tasks that each one would try to accomplish and then making sure that the responsive look and feel for that specific device matched that set of tasks. You can probably see where I’m going with this: nowadays, not so much. Pretty much the guiding principle is make sure that everyone can do everything, even the person that you would never think would do XYZ on their watch.

So you have to plan if you want the site to be something that the library can stand on a year from now, two years from now, three years from now—which is a long time in the world of web development—what devices are going to be out that we haven’t thought of yet. What ways of interacting are going to come up that we haven’t maybe planned for? And so, essentially the guiding principle of everyone should be able to do everything. Now, the search experience might be a little richer on a desktop because you’ve got more resources available, but in essence everything is available, and you scale back maybe some of the fancy UI or interaction to make it more appropriate for the level of processor and battery and all that stuff, but the information is there.

Ethan:

Greg, that might make for an interesting segue into something you touched on in your intro about how Madhouse structures its projects. Specifically, I’d love to hear a little bit more about how you actually scoped this responsive redesign. When you’re moving away from that more phase-driven approach into something that’s a little bit more iterative and collaborative, was responsive design a factor for that?

Greg:

Honestly, again, there’s been this shift over the last several years. We don’t spend a lot of time having to sell our clients on the value of responsive design, which I think is a testament to what you guys are doing and just that voice of responsive is crucial, it’s almost—I hate to say it, it’s almost an afterthought for us now. We used to say, “Here’s what it would take for us to build you a website, and here’s what it would take for us to build you a website that’s responsive.” We don’t really do any of that anymore because we assume that if we’re going to build it, we want it to work really well, and we know what that means, and that means responsive. And yeah, to be honest, we haven’t had a lot of clients say, “Whoa, what is that? Is it worth it to do that?” That’s huge. That means it’s a big win for people like you that are evangelizing this idea of responsive, that it matters, and have been doing it for half a decade, or maybe a decade now. So yeah, absolutely, that is the way that things are going and I think there’s been a shift, a sea change as far as it’s not some buzz word, it’s not something that you necessarily have to explain upfront. It’s like, “Hey, we’re gonna do a website, and it’s obviously gonna be responsive, right?” and then the client is like, “Right, of course. It has to be, because right now it’s not.”

Karen:

Let me follow up on something that you said a bit earlier about thinking through the content or taking a content-first approach. Can you talk about how you, as part of a responsive redesign process, perhaps evaluated what sort of content you needed to deliver or what people wanted from the site?

Greg:

I think with this site in particular, there’s this iceberg thing going on where there’s something on the surface—that’s the front-facing website—but behind the scenes was just a ton of the work and design. And by “design,” I don’t mean necessarily mean visual design, but just the process. We felt like, at Madhouse, our team did our job if when we pass this site on to the library and their stellar marketing team, they could build pages that we didn’t really imagine or think were necessary, or just they hadn’t come up yet within the organization’s goals. That’s our target. Like, “In six months from now, what if we want to make a page for kids. Okay, well, do we have the pieces in place where you guys could actually already have the tools to do that, it’s just a matter of doing it?”

The content management piece of this was huge and we learned a lot, and we took this really modular approach. Any time we found ourselves making what you’d call a page template—so let’s say, oh, the “About” page template. We would back up and say, okay, well what are the discrete parts of this? Can we break them out and can we actually refactor the code so that there’s no such thing as an ‘About’ page template, there’s just a page template, and this one happens to be an ‘About’ page because of the different ingredients and components that the library put into place.

So, content was a funny thing with this project because we really put all the pieces in place and let the library loose. We let them into the content management system pretty early so they could kick the tires, they could start building stuff, they could come back to say hey, there’s some pieces of this missing, we need a component that does this, we need a module that does this. And by the end of it, there’s tons of pages on that site that I’ve never seen before, which I think is actually a really good thing, right? It means that they’re using the tools we built for them and they’re building stuff that we didn’t necessarily imagine during the scoping of the project. So instead of, “Oh yeah, Madhouse can give you ten templates,” it became, “Here’s all these components that we’re going to build out and then you guys can remix and reimagine those to your heart’s content, and hopefully in two years from now that means you’re making pages that line up with your new goals and your new directions and your new strategies and we don’t necessarily have to be holding your hand and creating new pages and doing all that along the way.” So that’s what success looked like for us from a content perspective.

Andy:

And that was a huge piece for us, to be able to get in so early and figure out what pieces we actually needed to build those pages. Because getting away from the template feel was key for our marketing department, to be able to dive in, use their creativity and talent in a very efficient way. As librarians, they have the stigma of liking to write a lot, and whether that’s true or not, about three years ago we actually had a website with 2,000 pages. Then we did a website redesign, we ended up cutting that down to like 250. And then with this one, we have just under 100 pages, because a lot of times we have seasonal pages that come and go, whether it’s voting or tax season, or maybe it’s something during the holidays. Being able to have those tools that allow us to be creative and create new pages without having to say, “Aw, I wish we had this,” or, “I wish we could do this with this functionality,” we’re just able to do it and go in. And it’s way faster to prototype a new page that way than if we were to have to create new templates.

Ethan:

I’d love to hear a little bit more about the design process, especially early on in the project. Did this more modular approach to responsive design change how you started talking about the site’s aesthetics and layout?

Greg:

Yeah, absolutely. So, this design happened in tandem with a new visual identity for the library. So while we’re working on a brand and some colors and some style guide stuff, we’re also putting together what this could look like on the web in a really high-level way, just to kind of, “What does this brand feel like digitally? What does it look like on a t-shirt?” All of the mockups-type stuff that you do. As we started to home in on a direction and get a significant amount of buy-in on one of the logo’s directions—which really didn’t take a lot of time; it was kind of amazing, it was like the first time ever a client’s been like, “We like number two!” “Okay, done.” From there, it was like let’s work on some colors, let’s flesh this out a little bit, and the web design really fell out of that. We had colors, we had typography, we had these essential building blocks.

I would say a big part of the character of the website and what hopefully makes you pause and just take it in is that big search bar gives it a lot of personality, it’s something that maybe is a little bit different or unexpected for a site like this one. So that came out really early; we had shopped that idea to countless clients before, because we just love the idea of a big search bar, “Here’s where you go, anything you type in here is going to give you something if it’s an event, if it’s a book… Type it in here and we’ll take care of it.” We love that idea. We had actually shopped that around, maybe made some mockups or wireframes for some higher education sites and some other retail-type sites. At the end of the day, with a lot of websites it was like, “That’s really cute, that’s really cool, but what if they need to go here? What if they need to do this?” Think of a higher education website. How many tens of thousands of pages end up being on a .edu? So, it was like, “Cool idea but we probably needed something more traditional.” We were just thrilled that when we put that design up, it was like, “Yeah, we want that. We don’t want the slider with the four dots at the bottom and the events. That’s what we are. ‘Come search what you’re looking for.’” It really reflects the brand and the personality of the library.

I think once we had that piece in place, it became how do we design all these components in a way that’s A) responsive so that they can stack them up any way they want on any page and it’s going to work on any device and B) how can we give them freedom to make the content what they needed it to be but also not break this brand that we’re just launching for them? To roll out a brand with a new website means that the branding has to be really strong within the website. So there was this balancing act of we want to give the marketing department the ability to just create pages to their heart’s content, but we also want those pages to all really solidly look designed. So we did things where we locked down certain colors and palettes, some checks and balances in place to make sure that they can make what they want to make, but at the end of the day it’s going to look something like this. You could always upload whatever photo you want, the photo could be bad, but we trust them, they’re uploading awesome content.

So yeah, the design, once we got that home page, that big search bar, and some of the main navigation stuff, it’s funny because the rest of it they’re almost designing when they make a new page. They’re designing it with the components that we built that are designed, but they could go into the home page and take out what we call the “Spotify playlist” of books. They could just drop that if they wanted to and add something else because they want to focus on the upcoming election and so they want to do a big feature about “Make sure you’re registered to vote.” So, they’ve got options and it’s all very fluid within this structure, so it’s a little bit of a balance of both.

Andy:

And one of those really key takeaways from the design was we contract with a ton of outside services for our content, and so it was finding a way to integrate those services into this nice search and into this nice overlay. Because a lot of those third-party services don’t have a responsive web design interface, and they don’t have a road map for those, so that’s really concerning. So being able to grab those APIs, or being able to dump that data from those sources and integrate it into the search box gives that Google-esque look and feel to our website so that you come to one place, you do that search, and you find exactly what you’re looking for without having to search through twelve different third-party services just to find the right eBook, or the right audiobook, or the right magazine.

Karen:

I’d like to ask about how you evaluate the success of this website. So, how do you know if it’s working? What sort of metrics or data or analytics do you look at to evaluate what’s working, what’s not, and what might need to change?

Andy:

So, there’s a couple things that we do. We use some tools like Google Analytics and Google Tag Manager so that we can track events. And then we also use Hotjar. We primarily use Hotjar to test those new pages that we’ve built to see if there’s a trend in what our users are doing, and then we look at the hard data. For our marketing department that’s very visually based, those heatmaps tend to work really well in at least drawing their eye to see, “Oh, they’re spending a lot of time on this, we shouldn’t be doing that. Our users are clicking on images and our images don’t link anywhere, how can we fix that? People are tapping on certain things and that’s not going to where they’re expecting it to go…” So we go through that weekly and then we report on that monthly, and we also have a running historical interface of all the changes that we’ve made and why we’ve made those changes for both internal staff and external public, just so that we’re keeping it open so that we don’t have those secrets from the general public.

As far as actually measuring the success of the responsive web design, the public’s not quiet. They let you know what’s working and what’s not working, which is really good because that’s how we can get better. But qualitatively, we use those tools and we set up smart goals—something that’s specific, measurable, aspirational, relevant, and time-bound—so that we can ensure we’re hitting those internal marks as well.

Ethan:

Well Andy, Greg, I’ve gotta ask, let’s say we’ve got somebody in our audience who’s about to start their own responsive redesign. What’s one thing that you’ve learned working on the new Toledo Public Library website that you’d like to share with them?

Greg:

I would say a big takeaway from this design was something that Andy just touched on, and that was those third-party integrations. I feel like more and more web design is becoming this endeavor of curating a lot of different online properties for an organization, giving it a nice front facade or maybe a front porch to come and meet this organization for the first time, see everything you need to see, and then maybe go from there to something else they’re doing elsewhere online. The more and more that becomes the case, the more and more it is important to be able to bring in data from different sources and make it responsive. Like Andy alluded to, I think we’ve got six or seven APIs that drive various parts of this website. So the library itself has a Red Box-esque service, physical DVD or media vending machines outside of their branches, and we want to bring in “What movies are in the branch downtown tonight?” or things like that, and any other number of featured lists, reading lists, newsletters, obviously the catalog and being able to search that.

So, it’s a little counterintuitive because it doesn’t feel like it’s that much related to design or even front-end design, but right when you want to start bringing that third-party-rich content onto your site, you have to make a decision, are we going to drop their little embedded widget iFrame thing into the sidebar and kind of break this beautiful responsive design that we’re building, or are we going to actually be able to integrate, connect with their data in a way that’s easy for the content managers to use? Okay, how do I pull a reading list onto a page from this service? Can we build that into the content management, and then can we display it in a way that’s responsive even if that service doesn’t really offer anything responsive? So that was huge, that was a little different, and that was kind of an exciting part of this website for our team.

Andy:

Yeah, other than all of the magic that Madhouse did in pulling in those APIs, I’d say that was the biggest thing. But probably second was being in early on that design side. So, getting those pieces and those content blocks to build those pages was really important. And if you can find a company like Madhouse that’s really good at what they do, put your trust in them, have faith, don’t be hung up on what content management system you’re going to be working in. Put that faith in them, know that they’re going to deliver the best product that you can get, and just trust them fully. Because when they’re more comfortable in their environment, doing what they do every day, and you’re not forcing them into necessarily what your previous experience is, you can be surprised at how effective it is.

We went from two or three different content management systems on ancillary sites to what we now work with, which is Craft, and I can’t imagine working with something different—unless Madhouse came to me and said, “Hey, come check this out. This might actually work even better.”

Greg:

Yeah, a huge amen to that as far as Craft goes. Craft is the content management system behind this whole site and a lot of the sites we’ve been building. It’s incredible, it’s flexible, and it sets you up to be able to build something responsive, so I’ve gotta give a big shoutout to the guys over at Craft.

Ethan:

Well, that’s fantastic. Let me just say one more time: Andy, Greg, the new Toledo Library site is just stunning, and I know personally I’m really thankful that you could spend some time talking with us about it, and I can’t wait to see where it goes next. So, thanks for your time.

Andy:

Thank you.

Greg:

Thank you so much for having us today.

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.