Preview: Once you get it in there, you get all your stuff in there, you should still have room to build on top of it, and the beauty of that, I think is like you have an inherent consistency that you can go crazy anywhere and you’re still kind of be able to have that feel to it. It’s surprising how little you actually need to maintain a thread of consistency through a whole piece, I think, and I think we have so much opportunity to expand around that.
[Music]
Lea Alcantara: From Bright Umbrella, this is CTRL+CLICK CAST! We inspect the web for you! Today, Travis Gertz returns to the show this time to discuss how to creatively and flexibly apply editorial design with Craft CMS. I’m your host, Lea Alcantara, and I’m joined by my fab co-host:
Emily Lewis: Emily Lewis!
Lea Alcantara: Today’s episode is sponsored by Foster Made, a digital design and development agency committed to creating thoughtful solutions to your technology challenges. From smart user experiences to strategic programming, Foster Made employs technology as a medium for advancing your business and making human connections. Visit fostermade.co to learn more.
[Music ends]
Emily Lewis: Today we are diving into editorial design and how to creatively apply those design decisions using Craft CMS. Our guest is a longtime friend of the show, Travis Gertz, who we had on one of our first episodes back in the EE Podcast days as well as back in 2015 when we talked about front-end wireframing, and I can’t believe that was three years ago. [Laughs]
Lea Alcantara: Wow.
Emily Lewis: Travis is a designer, developer and partner at Louder Than Ten. He went to school to design magazines, ended up designing websites, and now does everything he can to bring those things together. Welcome back to the show, Travis.
Travis Gertz: Hey, nice to be back. [Laughs]
Emily Lewis: [Laughs]
Lea Alcantara: [Laughs]
Travis Gertz: How are you two doing?
Emily Lewis: Good.
Lea Alcantara: Good. So for those who don’t know you, can you tell our listeners a bit more about yourself?
Travis Gertz: Okay, well, I grew up in the prairies of Alberta.
Lea Alcantara: Woot!
Travis Gertz: Yeah. Born at Edmonton, grew up in Calgary. I lived there for ten years. I ended up on learning about graphic design and all of that. Basically, all I wanted to do was make magazines as I was growing up. I was obsessed with them. I wouldn’t read book, I would just read dozens and dozens of magazines, cover to cover, about everything, and so I just wanted to be sort of a part of that. It was like the way I could see myself being involved in like the skateboarding industry as I got older without having to skateboard.
Emily Lewis: [Agrees]
Lea Alcantara: [Laughs]
Emily Lewis: [Laughs]
Travis Gertz: Besides I never had that talent. So that’s kind of where it started, and then ever since I’ve been not involved in skateboarding at all, but very much in love with sort of that editorial creative side of design and seeing where that bring this on the web.
Emily Lewis: And speaking of, when did you get into the web? When did that sort of enter the picture where it went digital?
Travis Gertz: It’s funny, actually the week before I went to school for design, my friend down the street, he was like, “Hey, check out this thing called Geocities. You can make your own website.” [Laughs]
Emily Lewis: [Agrees]
Lea Alcantara: [Laughs]
Travis Gertz: And so I was like, “Oh, this is kind of fun,” and so I learned to code like basic HTML pages about one week before I started design school, and then ever since, that sort of had the context of bringing those together.
Emily Lewis: [Agrees]
Travis Gertz: So while I was learning how magazines work at school, I was tinkering around with HTML the whole time, and so naturally I’ve always sort of brought those two things together, and here we are today.
Emily Lewis: So as I mentioned in your intro, it’s been nearly three years since you were last on the show, and we actually talked with Rachel, she’s one of our earlier episodes this year about digital project management, and I’m just curious, how has that business shift been for you, especially as a designer and developer?
Travis Gertz: Oh, for me, it’s been really exciting. I’ve always been very much a generalist in terms of design, and so being able to think in terms of digital and in print and in everything else has been something I’ve always wanted to do, and now being able to focus on the company alone, we’ve been able to build things like our own website or marketing site is really fun, but we’ve also built an LMS for our students, and then I get to do a lot of print work as well for our marketing materials.
Emily Lewis: [Agrees]
Travis Gertz: Also, we built a little app for that. So I get to do a lot more varied stuff than I used to doing client work oddly enough.
Emily Lewis: [Agrees]
Lea Alcantara: [Agrees]
Travis Gertz: But it’s nice because it’s all unified under our own brand, and then also being able to sort of design on the business side, too, like the business model, being very strategic and how that works has been actually a lot more fulfilling for the last few years, it’s been really fun.
Emily Lewis: That sounds fun. You know, I love client work, but I also really love building the business, so I could see how that would be really appealing to be able to do that, just like a 100%.
Travis Gertz: Yeah, it’s been fun, and then also being able to like it’s not the isolated thing that I think some other startups feel, maybe you’d like being able to only having to work on one brand. For us, because we have Coax, like our digital magazine we have. We’re working with different LMSs and things like that. It actually puts a lot of variety into it, so it’s a nice mix.
Emily Lewis: [Agrees]
Travis Gertz: Yeah.
Lea Alcantara: Well, I think that leads well into our topic and I think part of it is because of the uniqueness of taking an editorial look at designs on the web. You know, you’re talking about variety, and I think that’s something that designers really crave, but there has been a trend in the few years where design on the web has become a little bit sterile for good and for bad, for a variety of reasons, because of standardization and the web maturing, et cetera and so forth. But in the effort to standardize, it seems like customization of designs have fallen by the wayside. But before we talk into the nuances of that, let’s define what editorial design or direction even is, so what is it, Travis?
Travis Gertz: [Laughs] Yeah, it’s interesting. For me, like I include myself in this, but I think in terms of like editorial design, it is a bit of a – I guess I don’t know if it’s a lazy way, but it’s not really exactly what we do.
Lea Alcantara: [Agrees]
Travis Gertz: I feel like true editorial design is working on editorial projects like magazines and things like that.
Emily Lewis: Sure.
Travis Gertz: I think although we do do that, I think that it’s really about making content a little more communicative, like making it more human.
Emily Lewis: [Agrees]
Lea Alcantara: Right.
Travis Gertz: You know, every time we put words on a page, we are making decisions about how that is being expressed. Whether it’s intentional or not, like choosing a typeface even is a message about what that content means in a certain way.
Lea Alcantara: Yeah.
Travis Gertz: And I think editorial design or more art-directed, more expressive design maybe is the way to put it. It’s just adding more elements to that to bring out a little more expression to maybe carry your message further to emphasize certain things. You have the ability to maybe add a little more humanity to it, more of an opinion. So I think it could just take the words that you have, which is the most important part, but they just add that extra meaning on top of it. That’s how I view it, I guess.
Lea Alcantara: I think that’s a great way to view it. Even a small decision, like we always make fun of font choices and Comic Sans, that if you’re going to have a serious headline, you wouldn’t set it in Comic Sans, right?
Travis Gertz: Yeah.
Lea Alcantara: So even that kind of decision communicates a message before you even dive into the article.
Travis Gertz: Yeah, definitely. You know, you mentioned sort of the sterility of web design, and I think we definitely lean on some standards there, and so in a sense, it’s good that everything is clear, but also it’s sort of a little bit monotone.
Emily Lewis: [Agrees]
Lea Alcantara: [Agrees]
Travis Gertz: Yeah, I think it would be great to break out of that. The world isn’t actually monotone at all, and I think being able to add that expressiveness, especially if it’s rooted in maybe ideas or perspectives that aren’t your own all the time, I think that can only make it stronger and more diverse.
Emily Lewis: I feel like it’s something that it’s possible. We even talked with you a little bit about this once upon a time, maybe it was just when we’re not on the show, but it’s one of those things that you had written about in your article, something about machines. What is it, Design Machines?
Travis Gertz: Design Machines, yeah.
Emily Lewis: Yeah, and just sort of, like you said, the monotone of it all, and my perspective is I understand there’s always going to be a business reason to invest your money, especially if you have limited resources, and that resource could just be time, in something templatized to get something up and running, but when you start having goals that require you to go beyond that way of thinking business goals, then it feels like breaking out of that sameness as a part of helping you reach those goals, of helping you and your message stand out online amongst all those other machines out there.
Travis Gertz: Yeah, we’re in an interesting period on the web in that a lot of what we see gets delivered to us through social media, things like that, and that has a really normalizing effect on everything. It does make it harder to stand out, and I think the publishing industry in particular is sort of hitting its own challenges now, like how do we bring people back to our sites and properties, or how do you become a trusted source when everything is normalized, whether it’s fake news, real news or whatever it is on there.
Emily Lewis: [Agrees]
Timestamp: 00:10:15
Travis Gertz: So there is like a case for that, and I think even in business too, like if every site looks like Stripe’s website, then it’s hard to remember that service not being Stripe.
Lea Alcantara: [Agrees]
Travis Gertz: So yeah, I think it helps differentiate for sure for business and without business, like it’s weird, but at the time I really didn’t appreciate it, but now I kind of miss the old MySpace days in some ways, you know. [Laughs]
Emily Lewis: [Laughs]
Lea Alcantara: [Laughs]
Travis Gertz: Like we have these crazy, crazy profiles and accounts in there, but it was really a lot of people’s first introduction to using any kind of code on the web at a really mainstream thing.
Emily Lewis: [Agrees]
Travis Gertz: And there’s a lot of things that happened, but a lot of expressions, you could not deny that it was accessible for people to create things that we just don’t really have that as much anymore.
Emily Lewis: [Agrees]
Lea Alcantara: I think the interesting thing that I read on Twitter recently when people were talking about how do we entice more diverse people into the design field or more women, et cetera, and when we look back and you’re talking about the MySpace era or even the Geocities’ era, we learned code not because we wanted to learn code. It was because we were trying to share so sort of message or reach out and be social or share something that you are really passionate about.
Emily Lewis: [Agrees]
Lea Alcantara: And so in some ways, I feel like the web has kind of lost its way in that. Like technology at the end of the day is just a means to an end.
Travis Gertz: [Agrees]
Lea Alcantara: It’s not the end in and of itself.
Emily Lewis: [Agrees]
Lea Alcantara: And I think sometimes the current culture of tech right now is just more like tech is the end goal as opposed to the starting point, and I think for me, my nostalgia about it is my first website was a Sailor Moon site on Tokyo Ginza Geocities.
Travis Gertz: [Laughs]
Emily Lewis: [Laughs]
Lea Alcantara: Right?
Travis Gertz: In that case, yeah.
Lea Alcantara: Yeah. And all I wanted to do was because I was just passionate about the show and I just wanted to share my thoughts and creativity and find some sort of outlet, and it wasn’t because I was passionate about HTML, I was passionate about the show, right?
Travis Gertz: Yeah.
Lea Alcantara: So it’s interesting how technology has overtaken that. There’s got to be some sort of balance, and I feel like if we try to spread our direction in that concept and I think maybe emphasize as not as hard as people think it is.
Emily Lewis: [Agrees]
Lea Alcantara: And I think that’s why we wanted you to be on the show because I saw Travis at the Dot All Conference in Portland and he did a demo of editorial design, and it was a flexible way to show how you can approach design on the web, but again, like before we dive into that, I want to know like do you find it is different approaching art direction and editorial design on the web versus print?
Travis Gertz: Yeah, it is in terms of like the technical aspects, of course, like we have a much more fluid medium we have to work with with different types of constraints. On print, it’s really refreshing sometimes to have just like, “Here is the collection of rectangles and you have to fill them and you can fill them in any way you want.”
Emily Lewis: [Agrees]
Lea Alcantara: The final…
Travis Gertz: And you know that that’s what it’s going to look like. On the other hand, you have to check it like a dozen times to make sure there are no typos or any other issue before it goes to print because that’s a very expensive mistake.
Emily Lewis: [Agrees]
Travis Gertz: On the web, at least you can experiment more and you can play and it’s more fluid, and you have interactivity, which is really nice. But apart from that, I think this is maybe the biggest thing I feel is maybe missing from the web, and this is the same brain part that comes with editorial design whether it’s print or online or anything, I think it’s more the conceptual thinking, right?
Emily Lewis: [Agrees]
Travis Gertz: It’s like the stepping back from the medium and thinking about ideas and how to combine ideas and to take images and words and what are different ways we can use those to communicate rather than the simple just like, “Let’s lay out, take our Heading 1 straight from our design system and plug it in and then take an image and put it underneath or behind or some like very basic arrangement like that.” How do we break out of that and make room for something that’s a little more conceptual?
Emily Lewis: [Agrees]
Travis Gertz: Like in a magazine, there’s a lot more sort of Photoshop work where you’re combining a pair of shoes with a head or something really weird, you know? [Laughs]
Emily Lewis: [Laughs]
Travis Gertz: And we just don’t have that type of photo illustration, or even illustrations tend to follow a very strict trend online. Right now, it’s people with wobbly legs, [laughs] and so it’s interesting, yeah.
Emily Lewis: You know, what I love about what you just said is that, and Lea, I don’t know if this came to you, but it really reminded me of something that Jeremy Keith said when we had a discussion about JavaScript of all things, and so this idea of that the effort or the challenge isn’t so much like how we do it, like what technology we use to achieve it or what type decisions, it’s rather taking the time before then to explore what we can do, what we should do. It’s that investment of thought to think about your goals and the users and stuff, and that that applies everywhere. It’s design, it’s development, it’s all parts of what we’re producing.
Travis Gertz: I think this is a general thing with our sort of modern Western society in general is that we are really victims of the grinder right now, like every single minute of our time is taken up like we have no time to think, and so like a lot of shops focus on utilization, for example, for a time and everything like that.
Emily Lewis: [Agrees]
Travis Gertz: And so every hour of a designer’s time has got to be accounted for on productive work and we really don’t leave in a lot of time for that exploration and like going out for a walk or go to the museum or at library and like bring in different types of medium.
Emily Lewis: [Agrees]
Travis Gertz: And I think we need that space back in our lives, like even just leisure space outside of work I think is just incredibly important, but we’re drawn in so much.
Emily Lewis: Yeah.
Lea Alcantara: Yeah, I think it’s because, I mean, part of it is the nature of the web. I mean, there are like literal constraints with the technology, and as you mentioned, the constraints in time, and then so when you have that combination of the two and then you add client and financial pressure, then what you have is what we have online. But the thing that I want to challenge people, and I think that this is something that you want to tell the people too, Travis, is about breaking away from that mold doesn’t mean throwing everything out.
Travis Gertz: [Agrees]
Lea Alcantara: I think that sometimes when we have these types of discussions with design systems, it’s that you need to follow the design system to the like absolute Nth level and then there’s no room for variation.
Travis Gertz: Right.
Lea Alcantara: But our episode with Sarah Federman who works for Adobe, she said her pet peeve actually was that people in her opinion misconstrued the term “consistency,” like consistency doesn’t mean rigid adherence to some sort of like design rule. [Laughs]
Travis Gertz: [Laughs]
Lea Alcantara: It just means that when you look at a whole system or you look at design decisions that you understand it’s part of the same family at the end of the day, and then when you take that kind of approach, then you know where to break the rules and you know where that look and feel can flex, and so consistency doesn’t necessarily mean that everything needs to have like a header or a sidebar and a middle, you know, [laughs] middle section per se.
Travis Gertz: [Laughs]
Lea Alcantara: Grids are important, but I feel like the print world, because it’s been around for several centuries, has understood that, yes, first understand the grid, but you can break it if you have a reason to, like if there is a need, but you first have to understand the rules. So I’m not, again, discounting systems with the web and the rules are there for a reason, but art direction is making design decisions in context of the brand as well as the content that you’re trying to design.
Travis Gertz: Yeah. I think that’s a great point, like I feel like design systems are used to get to a certain point. It’s good for communicating a baseline standard to everybody on the team and making that easy to go plan out, but there still needs to be something on top of that, like this is one thing I learned really years early from magazine designing days is that it’s very similar in that you have to have a system for a magazine. You’re pumping a brand new one out every single month, sometimes every week.
Emily Lewis: [Agrees]
Travis Gertz: And you have to have all sorts of content fit in there in all kinds of crazy ways, so in order to do that, you do have to have like that solid system that underlies the entire thing.
Lea Alcantara: [Agrees]
Travis Gertz: However, once you get it in there, you get all your stuff in there, you should still have room to build on top of it, and the beauty of that I think is like you have an area of consistency that you can go crazy anywhere and you’re still going to be able to have that feel to it. It’s surprising how little you actually need to maintain a thread of consistency through a whole piece, I think, and I think we have so much opportunity to expand around that, even if your body typeface is like the same and the same size throughout, you can basically change every other thing on it, or if it’s just a color scheme that’s the same and even your body typeface is changed, that can be totally fine, too, but it’s something that we don’t really explore a whole lot right now, so I’d like to see that.
Timestamp: 00:20:22
Emily Lewis: You know, as the non-designer in this conversation, are there any examples that either of you have seen online that sort of convey this idea of consistency with that something on top with that flexing it to its boundaries to kind of stand out, anything that you’ve seen that you know? I’m kind of putting you on the spot, Travis, because we didn’t even think to ask this question in advance [laughs], but I’m curious what this might look like.
Travis Gertz: Yeah. I think it’s becoming more popular in some of actually the bigger publications, which is fantastic to see.
Lea Alcantara: [Agrees]
Travis Gertz: I think ProPublica, they started doing more deep editorial pieces. And even New York Times, they have got their big digital features. And if you look at them, there’s not a lot that they hold onto from their regular sites. Even their typefaces are a different size when you’re reading through them or they use like a totally different navigation scheme on it or something like that, but it just feels like those publications still.
Emily Lewis: [Agrees]
Travis Gertz: And you really don’t need that furniture all around it necessarily.
Emily Lewis: [Agrees]
Travis Gertz: It really depends what you want to do with it, but yeah, for me, that’s one area that’s kind of cool. I’d like to see how even experimenting internally with even applying some of that to applications and things like that, like how can you make something that’s an app and has to be consistent, but give people a little more flexibility in sort of making it their own or having some expressions within it.
Emily Lewis: [Agrees]
Travis Gertz: So yeah, I don’t know, but it’s fun to experiment, I guess.
Sponsored by
Lea Alcantara: Yeah, and I just wanted to note, too, that ProPublica is run through Craft CMS as well, so I’m sure part of the flexibility is due to that.
Emily Lewis: [Agrees]
Lea Alcantara: The other example I can think of as well is also a publication of Vox or vox.com.
Emily Lewis: [Agrees]
Travis Gertz: Yeah.
Lea Alcantara: I think they do a really, really great job when they do their like giant exposes and editorial pieces. The majority of their articles tend to look the same as a lot of regular articles do, but once in a while, they do like one of those like investigative journalist pieces, and for those it’s almost like a micro site kind of approach with the way that they present the design of that particular article.
Emily Lewis: [Agrees]
Lea Alcantara: And it’s definitely a lot more art directed, but it still feels like it’s part of the Vox website.
Emily Lewis: And I just have to ask, it seems like an obvious question, perhaps you, but maybe as a designer, like so why would they make that choice in the first place? Is it because they really want that piece to stand out because it’s special investigation? Is it more brand building because they know it’s going to get a lot more exposures so they really want to showcase themselves as well as the content? Like what are the kind of business decisions that you think you would speculate to support that choice?
Travis Gertz: That’s a good question. I think if I were to guess, and I’m not them, I hadn’t talked to them, but if I were to guess I would say it’s probably just like you said, like maybe it’s a piece that they’ve invested a lot of time into. But sometimes, some pieces of writing, they lend themselves to more of an art-supported piece like if there’s a lot of data or journalism involved with it, or if it’s very visual piece.
Emily Lewis: [Agrees]
Travis Gertz: Maybe it’s looking back on a natural disaster, for example, and there’s a lot of photos that they want to show and they want to maybe get opinions from people who were on the scene, right?
Lea Alcantara: [Agrees]
Travis Gertz: It just has so much more of an impact, and so you have maybe a pull quote, even just something simple like a pull quote isolated and without any like ad clutter around it or anything like that, rather than it would be maybe in a normal piece.
Emily Lewis: [Agrees]
Travis Gertz: So you can maybe extract a little more empathy for that person. There’s just so much more you can do with it, but I think it is probably, I would guess in those pieces that, like you said, either they’ve invested a lot into or they want to get some attention on, I would guess.
Emily Lewis: [Agrees]
Travis Gertz: Yeah.
Lea Alcantara: Yeah. I think when I look at some of the more custom pieces, the investigative journalism pieces, it tends to be really long.
Emily Lewis: Long format.
Lea Alcantara: Yeah, yeah.
Travis Gertz: [Agrees]
Lea Alcantara: So when it’s a long format kind of thing, it’s really hard to read when it’s just that one column left hand side and then filled with ads on the right hand side.
Emily Lewis: [Agrees]
Lea Alcantara: So like there is goal of trying to make sure that people actually understand the information and so that means like different design decisions to isolate. So I’m just scrolling through Vox’s website right now, for example, on their feature articles, not their just like regular articles, have no ads on any of the sidebars.
Emily Lewis: [Agrees]
Lea Alcantara: It’s all center aligned in a giant image. They have like a couple of ads in the middle.
Emily Lewis: [Agrees]
Lea Alcantara: But basically, if you’re just scrolling through it, like it’s so much clearer and cleaner.
Emily Lewis: [Agrees]
Lea Alcantara: And I think, especially, if you’re going to be doing, say, like political analysis, there’s going to be a lot of infographics and like timelines and things like that, and that’s just difficult to do in a left hand column context kind of situation. So sometimes if the information really dictates it, then just shoving it in what is a traditional left hand side kind of column kind of thing, then that information is just not given its proper due.
Emily Lewis: We have less distractions.
Lea Alcantara: Right, right, exactly.
Travis Gertz: Yeah, sometimes you want like a full edge-to-edge canvas to be able to present something. I know from even working on Coax, too, like some pieces of writing just have a particular…
Emily Lewis: [Agrees]
Travis Gertz: You can just see how they might come alive, different in summer, real slog, and then I guess this brings it to maybe another point is that it doesn’t even always have to be like this over the top presentation where everything is completely different and you have like wide open, very colorful things.
Emily Lewis: Yeah.
Travis Gertz: Sometimes, it’s just a simple as adding a little bit more variation to the normal pieces in your page and thinking differently about maybe instead of a standard CSS style for your quote, you may be having three or four different types depending on the length of it or who you’re quoting. Is it a testimonial versus an internal? What are some different ways that interact with maybe other things on your page? If it’s near an image, does it float beside? Does it sit on top? So it’s just thinking a little bit differently instead of like linear flow of text block, text block.
Emily Lewis: [Agrees]
Travis Gertz: How do you shape that up can be, you know. A lightweight version I think is kind of fun too.
Lea Alcantara: Right. And I would say like another like business consideration, right?
Travis Gertz: Yeah.
Lea Alcantara: It’s that everyone wants to go viral these days. [Laughs]
Emily Lewis: [Laughs]
Lea Alcantara: And if you want something really shareable, a big differentiating factor besides the story itself is design elements, right?
Emily Lewis: [Agrees]
Lea Alcantara: Is there something shareable like an infographic in this article that’s interesting? Is the page design itself interactive more so than a regular article? Those types of things make it a lot more viral and shareable.
Emily Lewis: [Agrees]
Travis Gertz: Yeah. I think even beyond editorial, like editorial pieces, it’s cool to see. The type design community I feel like is doing an particularly good job of exploring this type of thing for essentially at retail site, right?
Lea Alcantara: [Agrees]
Travis Gertz: So I think Lost Type Collective does a really good job. Our buddy, Kenneth Ormandy, designs a lot of that work there, but not only are those micro-sites where the typeface is extremely expressive, they’re also very interactive.
Emily Lewis: [Agrees]
Travis Gertz: So I know Kenneth does a great job of making sure that basically all of the texts in the site is editable in your browser, so you can go to the micro-site for Tofino, which is one of their fonts, and aside from being a beautiful site, you can go in and you could essentially write your own content, do the whole thing if you want just to test out the font. You see it in the context, but it’s very easy to get lost in something like that for like half an hour or something like that. [Laughs]
Emily Lewis: [Agrees]
Lea Alcantara: [Laughs]
Travis Gertz: So yeah, I think I love to see how other sites can sort of maybe incorporate that type of thing in beyond just editorial.
Emily Lewis: Oh, yeah. I love this.
Lea Alcantara: Yeah, I’m looking at it right now, too.
Emily Lewis: I’m a bit of – like an understatement – a bit of a type freak, and this is just beautiful. With this, I would be totally get lost in all this. [Laughs]
Lea Alcantara: [Laughs]
Travis Gertz: Yeah. [Laughs]
Lea Alcantara: Well, and again, like the emphasis that you mentioned that some design decisions doesn’t have to be this huge layout change or colorful craziness, just changing the headline typeface or the body copy to something a little bit more expressive can give you a feel of whatever the content is.
Travis Gertz: Yeah.
Lea Alcantara: Because design is communication.
Travis Gertz: Yeah. I think the native CSS variables now actually open a lot more than we could do with Sass variables. This is getting a little technical, but like it allows us to change colors in real time without having to recompile a lot of things. So for example, one way we use that internally is on our website. All our authors and apprentices have their own personal profile, and this is just the tiniest thing, but they can change the background of their profile to wild and different, totally wild different colors.
Lea Alcantara: [Laughs]
Timestamp: 00:30:12
Travis Gertz: And it doesn’t seem like a big thing. It’s just that page background, but it gives each one just like a completely different feel.
Emily Lewis: [Agrees]
Travis Gertz: Just a simple, simple change is the easiest thing to code. It takes no time to integrate in the CMS or anything like that. So yeah, it’s just those little things I think can go such a long way and I think we can gloss over those things.
Emily Lewis: [Agrees]
Travis Gertz: It could be, like you said, maybe changing a headline typeface, upper case/lower case, changing a background color, those kinds of things go such a long way with almost no technical consequence to them.
Emily Lewis: I feel like that sort of brings up what I’ve always perceived to be a challenge of this sort of approach is my general fear of giving the client that kind of control. The same reason limits the buttons they get in their WYSIWYG interface just so that the brand or the page doesn’t break. So it sounds like those kind of challenges can be resolved, that it is a lot simpler and you don’t have to make that kind of leap of faith that they’re not going to break something.
Travis Gertz: Yeah. I think there are. Some elements are easier than others to control, I think, because we’re the ones that we actually chose them, I think, in design, and I think that’s like part of a natural transition of the tools we built, like starting with the earliest blogging tools and like how we’ve evolved by starting with Photoshop comps way back in the day and slicing those up, we were really limited into what we could do, but things like giving image, like photos and images to clients to control, that’s actually far more sketchy and injurious in my mind than giving them like a color palette to work with. [Laughs]
Emily Lewis: [Laughs]
Lea Alcantara: [Laughs]
Travis Gertz: Or giving them like a couple of typefaces to swap out. In image, you can embed words in there. [Laughs]
Emily Lewis: [Agrees]
Travis Gertz: You can get really bad photography.
Lea Alcantara: [Agrees]
Travis Gertz: And you could do things like that and it can really mess things up, but if you can have so much more control doing kind of easier things, and easier things that you know are not going to break the site or make it slower or things like that.
Emily Lewis: [Agrees]
Travis Gertz: So yeah, it’s interesting.
Emily Lewis: I like that. It’s a different perspective, but definitely, you’re right, things have evolved to really let us think that way.
Travis Gertz: Yeah. It would be nice to, again, like step back I think a little bit from how we currently think of what we deliver and what we do make flexible and editable and how can we rethink some of that for today’s sort of web.
Emily Lewis: [Agrees]
Lea Alcantara: So I think we’ve been talking a little bit about why it’s important, too, to step back in like a little bit of design theory, and you kind of hinted about how it might not be that difficult to make these particular changes, but it hasn’t happened yet because people do feel like it’s really difficult technically, I think. So let’s dive into the hows, especially in regards to Craft CMS.
Travis Gertz: Sure.
Lea Alcantara: Like how did it evolve? Like how did you start thinking like, “Hey, I really need to design custom stuff for these articles, it’s fulfilling, but it’s so time consuming”? Like what was your thought process, and then how did you execute something that is actually practical.
Travis Gertz: Well, I think it goes way back for me. I think even to my first websites and things like that, I’ve always tried to think about like, “How can I inject at least a little bit of something that’s easy to customize in here and to make it my own?” And like even from when I started my career, I always fantasize about being able to have the freedom that I have in design on the web somehow, you know?
Emily Lewis: [Agrees]
Lea Alcantara: [Agrees]
Travis Gertz: How do I make like a 2-page or what’s the equivalent of a 2-page spread online? And so that’s always sort of in my mindset for a way to go, and I think Craft was the first time, I guess, well, even ExpressionEngine was maybe like the very first time I started kind of flirting with these ideas of like, “Okay, how can we make this as easy as possible to add variation from page to page?” And back then when I first started doing it, it was writing CSS file for each and every unique article, that kind of thing.
Lea Alcantara: [Agrees]
Travis Gertz: And then having just a big open space to put the HTML, and so it was still a lot of manual labor back then trying to figure out like, “Okay.”
Lea Alcantara: Yeah.
Travis Gertz: And it was a real pain, so I had tried something on my personal site, and then it would sit there for three months and then I’d try something else, and it was fun, and I needed that to kind of keep it going, but then eventually, a few things happened in the web. So, a few people started putting together Utility-class CSS libraries.
Lea Alcantara: [Agrees]
Travis Gertz: So like Tachyons CSS, I think. What is it called? Basscss I think it was, and now there’s also Tailwind, which is really cool, and it really rethinks how CSS is written, and for me, the most interesting part is that because, so for Utility CSS library, basically, you just like almost as a one to one for every CSS property out there, so you would have a class called line-height-1.5 or something and that would equal to just one CSS property that was line height of 1.5 or I don’t know what, but you’d have a class called Bold, and that would be bold, and so that kind of goes against like a lot of like the traditional stuff we used to think about in CSS like being very semantic and everything.
Lea Alcantara: [Agrees]
Travis Gertz: But what it allowed us to do was make really machine-readable CSS in a sense, or at least CSS readable CS… CMS-readable… [Laughs]
Emily Lewis: [Laughs]
Lea Alcantara: [Laughs]
Travis Gertz: CMS-readable CSS. So that was kind of the breakthrough for me in that with Craft, you have all these really flexible fields and with this CSS library, you can kind of tell the CMS to do whatever you want just based on a few dropdown fields or even if you add just a blank text field that you can type in some utility classes into, you’re always having a lot of power over what gets presented without a ton of work on the back end.
So that’s sort of how it started, and then over time we’ve kind of built out a more complex sort of system using a few different third party field and stuff to just make our own, just to kind of meet our own needs and make things really robust. Eventually, we came out with something where you can basically prototype using Craft CMS with, like column layouts and colors and fonts and everything like that. So I guess it was just a long evolution of like this constant desire for easy to do, easy art-directed freedom on the web with technology slowly getting better and catching up. Does that make sense? It’s a long, long timeline.
Lea Alcantara: No, I mean, that makes sense. I mean, correct me if I’m wrong. It seems like you started with front end first, like you had to figure out how you were going to manipulate HTML and CSS first before you even tackled the CMS part.
Travis Gertz: Yeah. The biggest thing I wanted to avoid was having to make a whole bunch of micro-sites.
Lea Alcantara: Yeah.
Travis Gertz: Or having to build a whole new CSS file for everything.
Lea Alcantara: [Agrees]
Travis Gertz: I still write a little bit of custom CSS with every page we make, but usually it’s nothing more than like a couple lines if I just want to do something special or if there is a special component on the page that I’ll never use anywhere else. It’s kind of handy to have just a little bit, but overall, most of our stuff is all driven by a series of fields.
Lea Alcantara: So what kind of fields are those for those that are listening that might want to play around with this?
Travis Gertz: They say it’s the tricky part right now. So currently, for our own site, we rely very heavily on a field called Neo for Craft, which works for Craft 2, but it has not been ported to Craft 3 yet.
Emily Lewis: [Agrees]
Travis Gertz: And I don’t know if that’s going to happen. I think the developers started working at Facebook recently so I’m not super optimistic about that coming back.
Emily Lewis: Oh.
Travis Gertz: But there are other fields that you can go pretty far with. You can go to with the Matrix. With Super Table I think in combination with Matrix, that’s to kind of get the way we like to build is we’ll build basically a block for a page section and then within that block, we will have text components or image components, video components, and then we could rearrange them within that. So usually, we have like a two-level Matrix basically going on there. In addition to that, we use things like color pickers. We use Button Box to help with things like text alignment and aligning elements on the page using page layouts. We’ll use simple dropdowns even to make grid-based classes.
Emily Lewis: [Agrees]
Lea Alcantara: [Agrees]
Travis Gertz: So using the grid utilities in some of those Utility CSS libraries to sort of be able to actually position things on the page. So yeah, it’s amazing what you can do with just like some actually pretty basic stuff on there.
Emily Lewis: I’m curious about, but have you handed something like this over to a client?
Travis Gertz: Yes, we have. However, we usually strip it down quite a bit, depending on their level of comfort.
Lea Alcantara: [Agrees]
Travis Gertz: So we would do some training sessions with them, but you know, sometimes the only thing we’ll leave in for them is like the little Matrix buildup top where they can choose a few parameters for the page, like what’s the background going to be. They can maybe choose between two or three of their typefaces for the main headline, for example.
Timestamp: 00:40:09
Emily Lewis: [Agrees]
Travis Gertz: Just try to strip it back to things where we know they won’t get into trouble.
Emily Lewis: [Agrees]
Lea Alcantara: [Laughs]
Travis Gertz: I think other times if you have a very savvy client, which a lot of clients I get do have savvy design teams now, so you can give them a little more flexibility and power in it. So it just really depends on who’s using it.
Emily Lewis: You know, Lea, I feel like, well, editorial design, I don’t think was at play with the project we completed last year that had a lot of that Craft client, giving the client control over a lot more than we normally had. I feel like that you faced similar challenges like knowing how much to open it up to them to give them control.
Lea Alcantara: Right.
Emily Lewis: But also it created its own challenges because we couldn’t give them complete control due to WCAG requirements for the site.
Travis Gertz: [Agrees]
Emily Lewis: But also performance realities in terms of what it takes to put together a site that has all of these customizations. Could you talk about that a little bit?
Lea Alcantara: Yeah. So we’re talking a lot about the amazingness of flexibility, but the reality of technically implementing it, even if it’s say “simple” for us or we figured out the framework and all those things, it’s still important to ask why does the client need this much flexibility, how much flexibility should you have, because there are performance issues. I think, for example, this one particular client ended up being like a hundred queries for the home page.
Emily Lewis: Eeek!
Travis Gertz: [Laughs]
Lea Alcantara: Because literally, they really wanted to have an option to just, for example, like a Link Matrix. They wanted to be able to copy paste an external link, but then they also wanted to use just essentially kind of a WYSIWYG or press this button and I’ll be able to select a Craft entry and then attach it to that, but then they had multiple Matrix blocks that had to do that, so it didn’t seem that bad after like if it was one or two links.
Travis Gertz: [Agrees]
Lea Alcantara: But then that they have to customize fifty links and it’s just for like this header widget to navigate through the site. For example, in that one particular section, there were so many different types of queries. Now, we still did that for the client. This particular site is cached to the gills. [Laughs]
Travis Gertz: Yeah. [Laughs]
Lea Alcantara: And then there’s a protocol about clearing the cache and all that fun stuff, but like you always have to figure out does this make sense to be able to do, and then in the design section with the WCAG thing, we also used Button Box to just give them easy dropdown of maximum eight colors, I believe, to choose from.
Emily Lewis: That you had already tested to make sure the contrasts work.
Lea Alcantara: Yeah.
Emily Lewis: Yeah.
Lea Alcantara: Yeah, exactly.
Travis Gertz: Right, yeah.
Lea Alcantara: But they specifically asked for an extra field so they can just put in an RGB or hex code whatever they did.
Travis Gertz: Yeah, yeah.
Lea Alcantara: And then so, of course, there’s that, and that, again, implementing that is not a big deal. I can add a field to anything, right?
Travis Gertz: [Agrees]
Lea Alcantara: But then when you add that conditional and then that conditional happens on every single link or every single header or every single background element, and that’s basically what they asked for. This particular client, they can customize the background of headers, the header color itself, every single link color… [Laughs]
Travis Gertz: [Laughs]
Lea Alcantara: And then we also had to, of course, have fallbacks over like if they chose nothing, then it defaults to like their default brand colors, but all of that has a performance hit.
Travis Gertz: Totally, yeah.
Lea Alcantara: Yeah.
Emily Lewis: I think it’s worth to continue in that thought, Lea, because you just recently talked with that client.
Lea Alcantara: Yeah.
Emily Lewis: And I think it’s been really key that they understood that their request for this level of flexibility and modularity meant that there were going to be the extra work to support the cache, like we had buy in from them essentially on this challenge.
Lea Alcantara: Yeah. So again, there is a lot of design decisions that might be great and the flexibility might be great, but then there’s the reality of like executing it. We can’t just think about the user experience over like, “Yeah, we can have these dropdowns, yeah, all of this stuff, and yeah, look how flexible this is.”
Travis Gertz: [Agrees]
Lea Alcantara: But then suddenly, all the conditional home page and all the variability means you’re purposely adding several queries to that particular template, and that adds up, especially when there’s like a ton of traffic. So it might not be too much “big deal” if it’s just one article on a giant website.
Emily Lewis: [Agrees]
Lea Alcantara: But when this is, say, the home page or several elements on the site, like let’s say they really wanted to have so much flexibility in the footer, which are on every single page, that just adds up, and then so you have to build in performance and just even like workflow with the client in order to make this a successful execution.
Travis Gertz: Yeah, definitely, I think part of the design process, too, is just like any project, you do have to. Everything we do, every feature we build, it’s going to have some certain consequences, whether it’s to your timeline and your budget, on the project management side, to more of the technical things what they have to do after the fact.
Emily Lewis: [Agrees]
Lea Alcantara: Yeah.
Travis Gertz: You know, it’s great that they know they have to go through a serious caching process to accommodate something like that, and like for our site, we definitely have to do that kind of thing, too, it’s cache like crazy.
Lea Alcantara: [Laughs]
Travis Gertz: And every time we make a change, we have to make sure we clear it properly and all that kind of stuff. So there are definitely things to weigh out, and I think, again, yeah, it kind of comes back to those conversations of setting expectations of tradeoffs.
Emily Lewis: [Agrees]
Travis Gertz: Every decision you make has some sort of consequence in performance somehow, whatever else, and so it’s a conversation I guess for each team for sure. Until we can have tools and products that do this stuff like efficiently and we don’t have to go through all those things, that it’s definitely something that we have to continue, too.
Emily Lewis: All right, Travis. So what are your top resources that you could recommend for designers or even someone like me, a front-end developer or even CMS developer, better understand art direction or editorial design?
Travis Gertz: One of my favorite resources that I share so much with everybody is free online book called Practical Typography by Matthew Butterick.
Emily Lewis: [Agrees]
Lea Alcantara: [Agrees]
Travis Gertz: And it just gives you some very basics for the layman. You should send this to all your clients, like it will just give you some basics about type. I think beyond that, I’ve got some really great art direction books that I can highly recommend. One that I recently picked up, it’s older, I think it’s from the 70’s, but some of the examples are slightly problematic for its time. [Laughs]
Emily Lewis: [Laughs]
Lea Alcantara: [Laughs]
Travis Gertz: But as far as art direction, it’s called Graphic Idea Notebook. You can find it on Amazon Used for like – I think I found my copy for like $7 or something like that, but it’s got some amazing ideas for combining art work, things like that. Another book that I find really interesting, it’s called Designing News from Francesco Franchi. I can’t, that is now how you pronounce his name. [Laughs]
Emily Lewis: [Laughs]
Travis Gertz: But it’s really good. It just takes a more modern look at art direction and print and the relationship between digital and iPads or things like that. Online resources, this is a tough one. I look at a lot of more visual inspiration. I try to break out of a lot of web stuff. I’m trying to find more digital resources like good articles and things like that. I forget what the publication is called. It’s like UX Mag. It’s with the polar bear look, if you remember it. But they recently did a break-down of all the content that’s related to design across the web, and they did some really great infographics for it. I will find the link for the show notes, but it has a really interesting break-down of the types of content, the shallowness versus the deepness.
Emily Lewis: [Agrees]
Lea Alcantara: [Agrees]
Travis Gertz: And unfortunately, our industry is notorious for writing shallow, very like click bait, very technical-related articles, but very light on sort of more creative in-depth like how would this design look like in the social context of our world.
Lea Alcantara: [Agrees]
Travis Gertz: That’s the kind of stuff that I’m really interested right now. Oh, one more book that’s really good, it’s called – hang on, I have my bookshelf here, the Politics of Design.
Emily Lewis: [Agrees]
Travis Gertz: it is probably my favorite primer about the role of design in our world in general, and it’s not about print or digital specifically, but it is about how design affects politics, how it affects the media. I think a lot of us, it’s really easy to say design doesn’t change the world or maybe people will say it does change the world in certain ways, but I think it has a profound effect on the information that we consume.
Emily Lewis: [Agrees]
Travis Gertz: And I think it’s really important for designers to sort of understand what that impact is when they’re making things. It’s also very beautifully designed, too.
Lea Alcantara: It sounds good. How about Craft resources for those who are inspired by this podcast and they’re like, “Yeah, I want to try to apply this.”
Timestamp: 00:49:57
Travis Gertz: We built a little Craft resource after the Dot All Conference. If you go to louderthanten.com/craft, it has my talk on there, but it also has some links to the plugins we used, some good articles about how to make this stuff work. I also would highly suggest Mijingo has some great tutorials on building out like modular templates and things like that with Twig.
Lea Alcantara: [Agrees]
Travis Gertz: But I think that stuff is really, really critical to making this stuff work and making it repeatable because it’s very helpful.
Emily Lewis: Awesome. Do you have any final advice for applying a design system without being constrained by tech?
Travis Gertz: Yeah. I think the final advice is to really just put some thought into this, really try to question what you are making flexible and try and figure out ways that you can apply just a little bit of customization for you or your client without having to have a lot of technical compromise.
Emily Lewis: [Agrees]
Travis Gertz: You know, just change one thing. Give them the option to choose between two typefaces on a headline or give them the option to change the background color of the header and that’s it, or just one little thing on a site and that just gives that person just a little bit more expression. It makes our web a little more colorful.
Emily Lewis: [Agrees]
Travis Gertz: That’s what I would love to see.
Lea Alcantara: Awesome. Well, thank you for joining us, but that’s all the time we have for today, but before we finish up, we’ve got our rapid fire ten questions so our listeners can get to know you a bit better.
Travis Gertz: Okay, let’s go.
Lea Alcantara: Are you ready?
Travis Gertz: Yeah.
Emily Lewis: [Laughs]
Lea Alcantara: Okay, first question, what’s your go-to karaoke song?
Travis Gertz: Oh. Hello by Lionel Richie.
Emily Lewis: Oh, nice.
Lea Alcantara: A good one.
Emily Lewis: What advice would you give your younger self?
Travis Gertz: Oh, that’s a hard one. Don’t worry. [Laughs]
Emily Lewis: [Laughs]
Lea Alcantara: [Laughs]
Travis Gertz: You’ll figure it out. [Laughs] I feel like that’s a really cliché one, but that’s totally what I would say, just keep doing what you’re doing. [Laughs]
Emily Lewis: [Laughs]
Travis Gertz: Yeah.
Lea Alcantara: What’s your favorite PG-rated curse word?
Travis Gertz: Oh, PG-related curse word? Holy shit. [Laughs]
Emily Lewis: [Laughs]
Lea Alcantara: [Laughs]
Travis Gertz: I have a non-PG-rated curse word. [Laughs]
Lea Alcantara: [Laughs]
Emily Lewis: [Laughs]
Lea Alcantara: That’s not quite PG.
Travis Gertz: Oh, shenanigans. Yeah, that would be it. [Laughs]
Emily Lewis: [Laughs]
Lea Alcantara: [Laughs]
Emily Lewis: Who is your favorite superhero?
Travis Gertz: Those are hard ones. I have to say Batman, yeah.
Lea Alcantara: What is your favorite time of the year?
Travis Gertz: Fall.
Emily Lewis: If you could change one thing about the web, what would it be?
Travis Gertz: More decentralized or less centralized companies.
Lea Alcantara: What are three words that describe you?
Travis Gertz: Oh, robot voice. [Laughs]
Emily Lewis: [Laughs]
Lea Alcantara: [Laughs]
Travis Gertz: Abstract and idealist. [Laughs]
Emily Lewis: How about three words that describe your work?
Travis Gertz: Oh, these are very aspirational, but expressive, messy and considered.
Lea Alcantara: What’s your favorite meal of the day?
Travis Gertz: Dinner.
Emily Lewis: And last question, coffee or tea?
Travis Gertz: Coffee.
Lea Alcantara: Awesome. So thank you, that’s all the time we have for today. Thanks for joining the show.
Travis Gertz: Thank you. It was fun as always.
Emily Lewis: In case our listeners want to follow up with you, where can they find you online?
Travis Gertz: They can find me on Twitter @travisgertz. They can also find our company at louderthanten.com and we’ve got some new workshops for you all, and also I just started on Mastodon, so if you hit me up at louderthanten.net/@trav, you and find me there along with the other thirty people that follow me on there. [Laughs]
Emily Lewis: [Laughs]
Lea Alcantara: [Laughs]
Travis Gertz: That’s where I’m hanging out.
[Music starts]
Emily Lewis: Thanks again for joining us, Travis. It’s always great to talk with you.
Travis Gertz: Yeah, great talking to you, too. Thank you.
Lea Alcantara: CTRL+CLICK is produced by Bright Umbrella, a web services agency invested in education and social good. Today’s podcast would not be possible without the support of this episode’s sponsor! Many thanks to Foster Made!
Emily Lewis: We’d also like to thank our hosting partner: Arcustech.
Lea Alcantara: And thanks to our listeners for tuning in! If you want to know more about CTRL+CLICK, make sure you follow us on Twitter @ctrlclickcast or visit our website ctrlclickcast.com. And if you liked this episode, consider donating to the show — then give us a review on Stitcher or Apple Podcasts or both! Links are in our show notes and on our site!
Emily Lewis: Don’t forget to tune in to our next episode when we get to the topic of business growth this time focusing on hiring with our guest Ross Nover. Be sure to check out ctrlclickcast.com/schedule for more upcoming topics.
Lea Alcantara: This is Lea Alcantara …
Emily Lewis: And Emily Lewis …
Lea Alcantara: Signing off for CTRL+CLICK CAST. See you next time!
Emily Lewis: Cheers!
[Music stops]
Timestamp: 00:44:56
