Live Wires

Lea Alcantara: This episode is brought to you by Craft. Craft is a flexible and easy to use CMS that cares as much about your content as you do. Do you want to check it out? Just head over to demo.buildwithcraft.com, and you can get your own personalized demo site to fool around with in minutes.

[Music ends]

Emily Lewis: So before I introduce our guest today, I want to give our listeners a bit of a back story. So I think it was right around the time, Lea, that you joined my company and you gave me this resource for web-based wireframes.

Lea Alcantara: Right.

Emily Lewis: I bookmarked it and really didn’t think much anything about it, but when we got our first client together I decided I wanted to try a different approach to wireframes, so I pulled that bookmark out and spent an afternoon. And as it turned out, it was Live Wires. And the long story short is that they ultimately completely changed our workflow.

Lea Alcantara: [Agrees]

Emily Lewis: They’ve changed what we deliver to clients, kind of how we think of wireframes in our process.

Lea Alcantara: Right.

Emily Lewis: And were really a big part of us realizing we needed to develop our own internal framework that you and I have been going to conferences and speaking about the past two years. [Laughs]

Lea Alcantara: Yeah, totally. [Laughs]

Emily Lewis: So I’m super geekcited about today’s episode. I actually was talking to Jason about it all morning. I’m like, “I cannot wait to talk to Travis and pick his brain about Live Wires.”

Lea Alcantara: Right.

Emily Lewis: So let’s go ahead and introduce Travis. He is the creator of Live Wires. He is a designer and co-owner of Louder Than Ten, and for our old EE Podcast listeners, Travis was among one of our very first guests from one of our first episodes called EE Gypsies where we talked about developers who are working from the road. So welcome back to the show, Travis!

Travis Gertz: Thanks, guys! It’s good to be back.

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs] Awesome.

Travis Gertz: [Laughs]

Lea Alcantara: So Travis, can you tell our listeners a bit more about yourself?

Travis Gertz: Oh yeah. So I’m a total generalist, design generalist, living in Vancouver. I started with code and design, magazine design actually, like in 2001, and I have been sort of combining those things ever since. And so I live in Vancouver with my wife and we run a little company out of a shared office, and yeah, we build crazy stuff for the Internet.

Emily Lewis: [Laughs]

Lea Alcantara: Awesome.

Emily Lewis: So when I mentioned in the intro that we had you on the EE Gypsies episode, if I recall correctly, you’d just come off a kind of RV traveling trip to the US and Canada and you were en route to Vancouver, and at the time you were mostly doing client services work. But when I was checking out your company site in preparation for our call today, you’re doing so much more than production work. Can you describe how your focus has evolved over the past few years?

Travis Gertz: Yeah, definitely. I think when we last spoke it was literally the day before we moved to Vancouver.

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs] Nice.

Travis Gertz: So we’ve been here ever since, and at the time we were working for a lot of other agencies, just subcontracting. I was doing a lot of design and development. Rachel [Gertz] was doing a lot of project management and content strategy, things like that. And so we kind of have evolved. We started building our own direct clients over that time and doing more and more of our own projects, and about a year and a half ago, we kind of got to the point where we’re becoming our own thing. And we just took a step back and we’re like, “Okay, now is the time to make the company we really want to make.”

And that’s not just web design, that’s not just development and straight-up client services. Rachel is naturally a teacher, she has an Education degree. So we wanted to kind of figure out a way to combine those things, and so we started working towards the school for project management; helping other design agencies, freelancers, project managers figure out this crazy, evolving world of web design and how to work with wireframing and new design processes … especially since like our old waterfall workflows didn’t really work anymore. So we just ran into a lot of clients and other agencies that were having trouble with their projects, and so just started going down the path of consulting and training and building courses on top of it, and we still do client services now. I still love a lot of that, and it helps keep us sharpened in the game. So yeah, it’s kind of half and half right now.

Emily Lewis: Wow, that’s pretty cool. I think that you just basically described Lea’s like dream. [Laughs]

Lea Alcantara: [Laughs]

Travis Gertz: [Laughs]

Emily Lewis: She’s always talking about how we can introduce education and training into the business because it’s one of her passions.

Lea Alcantara: Absolutely.

Travis Gertz: That’s awesome, yeah.

Lea Alcantara: I mean, I feel like that’s a natural thing for a lot of web folks, though, in general because we’re curious people. We dove into this thing where it was all brand new and we know that it’s ever evolving and we’re trying to make sure that everyone rises to a certain professional level. It means you kind of have to tell people how to do that and teach people how to do that, so that was where my focus is.

Travis Gertz: Yeah. I was just going to say I think the web in general — especially in early 2000s or mid-2000s, we all kind of had to learn it from each other and figuring it out.

Emily Lewis: [Agrees]

Lea Alcantara: Right.

Travis Gertz: There were not schools for it, or the schools that were there were not very good. I went to one. [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: Right, right.

Travis Gertz: So yeah, I think it’s just such an educationally-bred or self-educationally-bred industry. [Laughs]

Emily Lewis: [Agrees]

Lea Alcantara: Yeah, yeah.

Travis Gertz: Yeah.

Lea Alcantara: Yeah, totally, and speaking of where you started from, let’s take a step back. Your bio mentioned that you went to school to design magazines. That’s what you did at the beginning. How did you make the shift to digital, to websites?

Travis Gertz: Oh, I sort of fell into it accidentally. I actually made my first website I think the week before I went to design school. And it was for my parent’s company in their garage, and I just had to figure out HTML, and that was it. It was just a total side-interest thing, and then I just kept with it throughout school and just thought of different ways you could apply both. And kind of closer to the end of it — I guess about after I graduated from college in 2005 — and at that time we had sort of gone through and we were bouncing back from a web bubble and print was a little bit in question, and I just thought, “Well, this seems like a good combination of things. I could get way more web design work right now.” So I just kind of went down that path and I have been looking at it through sort of an editorial lens ever since.

Emily Lewis: So why did you start your own company versus working for someone else? Like I know you said that you would be doing like subcontracting work for agencies and stuff, but you were still running your own business and deciding who you would work with and such.

Travis Gertz: Yeah, I don’t know what it is. I grew up in a very entrepreneurial household. My dad has a sheet metal company and we have like a family sign-making business out of our garage when I was in college, and so I did that to help pay the bills and everything like that during that time, which got me into design a little bit there.

Emily Lewis: [Agrees]

Travis Gertz: And then afterwards, like through high school, all I wanted to do was run a business like my dad. Totally naive, I actually applied to go to business school before I went to design.

Emily Lewis: [Laughs]

Travis Gertz: But my grades weren’t good enough for that, [laughs] and then it’s just been bugging me ever since. I worked for several companies after school because I didn’t know what the hell I was doing.

Emily Lewis: [Agrees]

Travis Gertz: And none of those jobs actually lasted more than like a year or year and a half. I would just get itchy feet after eight or nine months and be like, “Oh, I just want to do it myself.”

Emily Lewis: [Agrees]

Lea Alcantara: [Laughs]

Travis Gertz: And so finally in 2008 when we left on our trip, that’s really the first time we took it seriously and we’ve been doing it ever since, and I love it. It’s hard, but I love it.

Emily Lewis: Yeah, I echo you there. So let’s get to today’s main topic, wireframes. Before we talk about Live Wires, can you talk about your approach to wireframing, i.e., your process just in general before going web-based? Like did you have hand sketches, Photoshop, some other tools…?

Travis Gertz: Yeah, I know it’s sort of a common approach, everyone says that you’ve got to sketch everything out. I’ve always tried to sketch everything out a lot on paper before, and I still do occasionally. I don’t know if it’s because I’ve been in HTML and CSS for so long, but I find that I can sketch easily in the browser, so that’s partly where that comes from, but wireframing in general, I try to keep it really loose. I want to figure it out. Especially now the interaction is so much more important than the placement of items on the page. I feel like a lot of times wireframes, especially traditionally, they’re very prescriptive upfront and then they lock the actual UI design into a corner. And so I like to avoid that as much as possible and just focus on flow and hierarchy on a very loose level really early. Does that answer your question?

Emily Lewis: Yeah, it does. So if you were doing wireframes in the browser yourself because you’re comfortable in the code — and I totally get that, sometimes I feel like I could just do it faster that way — but it never would have occurred to me to use that as something I showed a client. Did you always show a client web-based wireframes, or did they get, I don’t know, saved as a PDF? Or did you ever have to kind of revert it from being in the web to be something that you could show a client they could relate to?

Timestamp: 00:10:03

Travis Gertz: Oh, you know what, no. With this, it sort of grew out of frustration actually because I would work with other designers and we had put together like a Balsamiq wireframe or something like that.

Emily Lewis: [Agrees]

Travis Gertz: And it had every little detail in it, all the buttons, all the labels, it was placed everywhere, and we found that it was too much detail, and when we would show the clients that, they would get really confused and wonder, “Hey, is this the design?” Well, Balsamiq is hideous… [Laughs]

Lea Alcantara: Right, right. [Laughs]

Emily Lewis: [Laughs]

Travis Gertz: And the time, it would just create all kinds of more questions.

Emily Lewis: Right.

Travis Gertz: And it was really hard to update, especially with responsive stuff at the time, it just a pain. And so I said, “Screw it. I can do this in the browser. All I need is just a very generic set of CSS. It doesn’t have to be ugly. It just has to be simple and plain. We can hide the text so no one is getting too hung up on it, but we can still design with real content.” And I don’t know, yeah, it kind of evolved purely out of frustration, and for ourselves, we’re just like, “We just needed a quick little bit of CSS to convey our ideas really quickly so we can just move on.”

And then as far as dealing or like communicating that with the clients, we actually find it much easier because they can actually click through. They’re a lot more engaged in the wireframes, whereas before they would sort of just look at the picture of the wireframe and be like, “Yeah. That looks good. That’s fine. I don’t know what I’m looking at. I guess this will work.” But now if you can show them a site that they can click through a little bit, they understand the process a little more. Everything being blanked out, they understand that it’s not a final product. And so we just try and be very clear that it is at the beginning and help with that educational process. But we actually rarely have any troubles with Live Wire wireframes these days.

Emily Lewis: So I think it’s something that’s worth going into a little more detail about for our listeners, and it’s hard to talk about something that you kind of interact with verbally, you know? [Laughs] But I think one of the things that stood out for me about the Live Wires is that it was abstracted from the content. For us, there was something … I think it was we had an episode with Ben Callahan and he talked about getting something that’s web-based in front of the client sooner in the process so that they’re interacting sooner, especially in responsive environments.

When I saw Live Wires, I love that it gave us that focus. Instead of them focusing on what the content that it’s going to be in this block here, they’re instead looking at that block and seeing that it resizes and this is what happens to this column when it goes down into another view. So can you talk a little bit, Travis, about how you put together that abstraction? Like it’s pretty simple once you look at the code, but it’s pretty cool that it’s kind of like old-school magazine — or I was on the yearbook staff, so yearbook design — where you just drew a block and it had a squiggle and that indicated it was copy. And in Live wires, it’s just sort of like lines that suggest copy might be somewhere.

Travis Gertz: Yeah, a big part of that was inspired also way back in I think around 2007 or something. Jason Santa Maria had this blog post where he talks about grey-box wireframes, right?

Lea Alcantara: Yes, I remember reading that, yeah.

Travis Gertz: Yeah, and it was fantastic. It just keeps everything very loose and simple and makes you just focus on a very simple piece of content. It could be anything within it. It has a lot of flexibility, and for me, I really liked that. Coming from magazine design, like you mentioned with the yearbook, that’s exactly how you would lay out magazine sections. You understand that there’s going to be variation in those pieces, and you kind of want to abstract the content out of that part at that stage, I feel like, and at the same time, you still want some content to work with, especially for the design process. So you know, “Okay, how big should we make our blog post excerpts?” for example. You still need to work with something, but you don’t necessarily want to show it off at that point, and so all we did was we added some simple classes at first that hid the text and replaced it with a background image of grey bars just to hide the texts.

It’s hidden from clients, but we can actually still edit copy. Rachel, my partner there, she’s a content strategist and writer, but she knows HTML, just basic HTML, so she can actually go into the files and start writing copy really early, which is very helpful for us, but it still leaves that separation for us that allows variation. Later on as we’ve evolved, we’ve actually changed that technique. It’s still available in Live Wires, but we’ve just installed a font called Neue BLOKK, I think, and all it does is it’s just a font made of rectangles basically.

Lea Alcantara: Oh, interesting.

Travis Gertz: Yeah. It’s fantastic, so you don’t even have to apply that technique. I just include a Live Wires style sheet that changes all the content texts to this font and it’s great, and it actually reflows way more accurately even than the old way.

Lea Alcantara: So are you saying that there’s actual like content? As if like you guys are set in the content strategy process, it’s a real paragraph in the HTML, but then this font in the browser looks like blocks so they aren’t distracted by the content yet?

Travis Gertz: Yeah, exactly.

Lea Alcantara: Oh, it’s brilliant.

Travis Gertz: Oh yeah, thanks.

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Travis Gertz: Yeah, I think we came up, like obviously, we found this font. This font existed, I think it came out about two years ago, and I saw it and I was like, “Oh yeah, that’s perfect.” It was designed exactly for that intent, and we just applied it into Live Wires and it was great. I forgot who designed it, but they were brilliant the ones who came up with that idea.

Lea Alcantara: Yeah, it’s interesting because I feel like in retrospect here, “Well, duh,” right?

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Travis Gertz: Yeah, yeah.

Lea Alcantara: But at the end of the day though, the more — especially when we had Steph Hay talking about how important content first design is — you actually do have the content first, but you still want to not distract the client with the words itself so they can’t sort of nitpick copy when it isn’t even the point yet. Just hiding it by the mere font is kind of brilliant to me. [Laughs]

Emily Lewis: [Agrees]

Travis Gertz: Yeah, it’s nice for us because we can just switch the style sheet over if we need to review it. Actually, most of our work, we’ll write our content in a Markdown editor because usually when we put it in the CMS, it ends up in Markdown. That’s just the way we do it, and so we’ll put it in. There’s a great web app called Draft that we’ll use or we’ll just use like iA Writer and export it out as HTML and we’ll paste that into our Live Wires. I think there are ways to automate that now actually where you can like hook up Draft to Firebase or something and then it will make a JSON file that you could pull into. It’s like you can automate that part even, so if someone is editing straight in the text file and then bringing it into it and it just automatically updates in Live Wires, but we haven’t figured that out yet. That’s sort of the next thing that I’m working on for it.

Emily Lewis: Yeah, I feel it’s interesting because these are really nice features and I’m glad we’re going over it because I haven’t seen the updates that you’ve released because when we got this, some of this stuff wasn’t even available like…

Lea Alcantara: Oh, totally.

Emily Lewis: Yeah, and I’m like, “Okay, now I got to go back and update…” [Laughs]

Lea Alcantara: [Laughs]

Travis Gertz: [Laughs]

Emily Lewis: Awesome. [Laughs]

Lea Alcantara: [Laughs]

Travis Gertz: [Laughs]

Emily Lewis: But, I mean, it’s good. I thought what’s amazing about when I first encountered Live Wires was really it was just the wireframes.

Lea Alcantara: Right.

Emily Lewis: And I have internally done the same thing you guys have done to upgrade your Live Wires, which sort of confirmed to me I was approaching it the right way … is that I was working with the Live Wires, which at the time I wasn’t thinking about style guides or typography or how this might move into my actual CMS templates. I was just focusing on the Live Wires, and then over time I was like, “Wow, I am investing this time to Live Wires, I’d like that code to serve the next thing.”

It’s not just the Live Wires. It actually becomes the base of my template, which then creates the style guide. And that’s exactly what you guys now have in the current version of Live Wires. You’ve got a style guide built in. You’ve got what you were describing with the font replacing with blocks, that’s so cool because I was using the old image replacement technique that you had. There’s like an image swap like a little gray image that was pulled in to replace the text that you just set or something like that.

Travis Gertz: Right, right.

Emily Lewis: So no, this sort of confirms that I was thinking of it the right way. [Laughs]

Lea Alcantara: [Laughs]

Emily Lewis: But that’s how it is, you kind of have to work with something like this and see how it fits for yourself and evolve it, which you’ve done. But I also did, kind of separate, with the way I like to work, and that’s the other thing I love about Live Wires.

Lea Alcantara: Right.

Emily Lewis: It was so not telling me what to do.

Lea Alcantara: Yeah.

Emily Lewis: It was just like, “Here’s a way you could show a concept.” [Laughs]

Lea Alcantara: Yeah. [Laughs]

Emily Lewis: And it wasn’t all these, “You have to use these styles, and this is your markup pattern and all this other stuff.” I could really just focus on the concept and having it work for me in the way I like to code.

Timestamp: 00:19:51

Lea Alcantara: Yeah, because I think as we’re talking about like evolving our own process and adding new features to Live Wires and stuff, I don’t think that would be as easy if Live Wires was bloated. And that was another reason why we decided to start working with Live Wires was it was really stripped down. Other frameworks basically tell you, “This is how it’s going to be,” and it had way more styles and classes and divs that were irrelevant. And some people would say typically they just try to strip down everything once they’re ready to production or they start a separate production, which just wastes so much time, but if you have something that’s already stripped down that you can add to, then that’s I feel like a way more efficient way to deal with templating.

Travis Gertz: Yeah, you guys hit it right on the head, like that’s exactly what we designed it for is two points there. First is, yeah, like the frameworks out there, this is our answer to those frameworks. We just found that they just dictated so many, not only design decisions, but markup decisions and everything else, so we don’t want to do that at all. We just want to put in definitely more of the philosophy, the approach behind it, and that’s really what we’re driving at, and so that’s the one part of it.

And the other, really we want you to create your own Bootstrap or your own Foundation using this, and so you have full freedom to do whatever you want. If there are things you don’t like, we made it easy to ignore it, but it’s there if you need it, and the other point that you guys touched on was evolving it. That’s really where we wanted it. That’s how we’ve used it the most over the years. And so we think of it as like it’s a statue, and we’re working with the big piece of granite, and we start off with this really rough, really loose wireframe that we can click through, but we don’t want to throw that away.

Like traditional wireframes, you draw it in an app and then it goes away, and then you maybe mock it up in Photoshop or something that goes away. And then you have to redo all that work in HTML and CSS. And for us, yeah, it was, “Okay, let’s make our wireframe here and all of a sudden we have a great basis for markup. We have our basic template.” And then where the style guide came in for us was, “Okay, well, we can start styling many of the general things like the typography, the buttons, the forms, all the little tiny components that we’re going to need and let’s connect the CSS so just see what happens there.” So we built our guide and all these placeholder CSS files that we knew we are going to use. Most of them are empty, but it’s just the file structure mostly, and so I usually work on typography first and then I put in some color variables.

And then all of a sudden as you’re sort of filling out these style details and guide using your CSS, it automatically starts to shape the wireframe and so your Live Wires’ wireframe all of a sudden has your brand colors in it. It has the right typography applied to it, all the buttons look the same, and so it still looks really rough at that point, but you’re getting closer. You’re shaping it down and it’s all using the same code. It’s building on top of itself, and then sort of that last stage, usually after that point, that’s when we start maybe jumping back and forth between an image editor or something just to kind of explore some ideas and get creative a little bit. But then we’ll dive right into the CSS again to refine it and make it tight. But for us, it really works well. Yeah, we love it because the progressiveness of it feels great. It’s a nice evolution. You can still show clients an evolution of it, which is really nice.

That’s where a lot of people struggle with, I think, is what do you show the client, when do you show them, and in what way, and so that’s been a bit of it. We’ve got a few good ways of doing that over the years, but yeah, that’s definitely always a challenge for sure.

Lea Alcantara: So I’m curious about that then, how do you decide what to show?

Travis Gertz: For us, it depends on the project and how savvy the client is. If they are really on board, they understand. Like these days we work with a lot of startups and things like that, so they understand the code really well. They understand the process, and so we’ll just show them the progressive nature of it. A lot of times we work with them on it, so every two weeks, we’ll be like, “Hey, this is what we’re working on.” And we’ll keep it going at a very kind of Agile process, which works nice, and so we’ll just show them everything as we go, and they understand and then see it come together through the whole process, and that’s really great.

For other more traditional clients that might be used to seeing mockups and things like that, sometimes we’ll just take screenshots at different sizes and then we’ll just deliver the screenshots. And then they won’t get hung up on things like browser issues that might still be happening. And typically the first things we show them is the Live Wires wireframe in the process, and then we’ll often show them the style guide as it’s styled up to give them a sense of what everything is going to look like. It’s kind of like showing like Style Tiles or like a color swatch thing and then we’ll decide. Usually, we’ll just take screenshots of the templates that we’ve made and then build it up from there.

Lea Alcantara: It’s funny you mentioned that because when we first started using Live Wires, we were fortunate that we had a pretty much tech-savvy client that like got it essentially right away, like they weren’t confused over what this was. They knew that they could look at it in the browser, et cetera and so forth. But recently, we did try to show some wireframes to a less tech-savvy client, and that was at that point, we’re like, “Maybe we need to do screenshots with annotations on top of just sending them the Live Wires.” Because we had to like almost over-explain in comparison to our past clients, because like we can’t assume everybody knows what we know or have that intuitive understanding of what wireframes even are. So it’s funny that you mentioned like, “Yeah, for the traditional clients, we just end up doing the screenshots.” [Laughs]

Travis Gertz: [Laughs] Yeah.

Lea Alcantara: Which is ironic, right? [Laughs]

Travis Gertz: [Laughs] Yeah, it totally is, but yeah, it works great. I mean, it’s quick. The other thing is sometimes we’ll even use screenshots for design purposes ourselves, like I use an app called PageLayers, and I don’t know if I use it now as much when I work. I use Sketch more often now. I like it a little better than Photoshop. But with PageLayers, you can take a screenshot and it will go through all the HTML elements and texts and put them on separate layers in a Photoshop so you actually have like a fleshed-out Photoshop document based on a screenshot basically, and it makes manipulating that in Photoshop really easy and fun. And so you can actually take your HTML template, take a screenshot of it in there and then just start moving things around and editing and hiding things. It’s a really nice workflow for experimenting with we find, but they just need to add Sketch now. [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: Cool, cool.

Emily Lewis: So this was an internal thing I imagine you built yourself, but then you put it out to the public. What did you expect by releasing it?

Travis Gertz: I don’t know. For me, it’s always been very much our tool. I felt like that the thing that we use to build style guides and our sites for our clients, I just always imagine that it would be useful for other people, and I thought, “Well, you know, it’s on GitHub anyway, let’s make it public and maybe other people will get some use out of it.”

Emily Lewis: [Agrees]

Lea Alcantara: Sure.

Travis Gertz: And it hasn’t gotten a ton of attention or anything like that, but we know a few agencies that use it kind of similar to you guys, and almost everybody takes it and makes it their own, which is amazing to me.

Emily Lewis: [Agrees]

Lea Alcantara: Sure.

Travis Gertz: That’s exactly in the spirit of Live Wires in my mind. It’s like every shop and every designer and every developer, they kind of have their own nuances to their process, and we don’t want to take that away.

Emily Lewis: [Agrees]

Travis Gertz: I think a lot of the details in that really help dictate the final product. It’s kind of like your signature when you’re building that.

Emily Lewis: [Agrees]

Lea Alcantara: Right.

Travis Gertz: And so I think the problem with Bootstrap or Foundation where it is very opinionated in those ways, you have that Bootstrap signature all over it. You can almost tell when a site has been built with Bootstrap fairly easily, even if it has been manipulated a lot, and so I just wanted to not have the Louder Than Ten signature on it, but just make it very generic and loose for everybody.

Emily Lewis: Yeah, I think that’s the best thing about it, and it was really the first time I’ve encountered anything framework-like that I didn’t feel…

Lea Alcantara: That’s telling you what to do? [Laughs]

Emily Lewis: Yeah, I mean, really, that’s always my biggest challenge as a developer because I’m so opinionated so I don’t want someone else telling me what to do. I want to come to my own decisions and I want to understand the reasons why I got to a decision, not just take a framework and implement and say, “Oh, it does that,” and not knowing why it does that, or what in the cascade is leading to that. I want to be aware of what’s going on, and this was the first time I really felt like I could make it my own. So I think that’s one of the strongest benefits of Live Wires, I mean, other than giving your client a web-based experience earlier on in the process. But what do you think might be the challenges of using Live Wires, Travis?

Travis Gertz: I think the biggest challenge, and this is one I still haven’t figured out, is that a lot of people, because it is so loose and un-opinionated, people don’t get it right away.

Emily Lewis: [Agrees]

Lea Alcantara: Sure.

Travis Gertz: Like it’s really hard to explain how to use it, and what to use it for. [Laughs]

Emily Lewis: Right.

Travis Gertz: You guys have got it down pat.

Lea Alcantara: [Laughs]

Travis Gertz: And that makes me ridiculously happy. [Laughs]

Timestamp: 00:30:01

Emily Lewis: [Laughs]

Lea Alcantara: I’m glad. [Laughs]

Travis Gertz: And there are other people that once they used, they tend to really like it. They make it their own, and there have been people that have applied Angular onto it, or have done whatever with it, and that’s great. But I think that the big challenge for me is showing how to use it, and then when they get into it, I think there are some pieces like “grid framework” in there which is all it is just a set of variables that are just percentages.

Emily Lewis: [Agrees]

Travis Gertz: And that’s only basic with a couple of other little pieces in there, but it’s very simple grid that for myself, that’s all I use most of the time, but I think it’s too simple a lot of times and it doesn’t have a lot of structure to it. There are no classes that define it. There are just a few things to help you make your own grid, I guess, and I think that people get hung up on that a little bit and don’t really know how to use it. So I’ve got to basically improve the documentation. [Laughs]

Lea Alcantara: [Laughs]

Emily Lewis: You know though, I think that’s a fair point, but I would respond based on my own experience that — especially when I started getting into trying to do responsive — the grid really threw me off because it changes. And writing the CSS to make it happen and having things fall nicely and retain the grid even as it shift sizes or the number of elements per row or whatever, the fact that it wasn’t too specific forced me I have to learn how to do it right myself. Do you know what I mean?

Lea Alcantara: Right.

Emily Lewis: Like I think that’s one of those things that even though I’ve been doing this for — I don’t even know the math anymore — it’s almost 20 years, and I still don’t have everything perfect.

Lea Alcantara: Sure.

Emily Lewis: And for me, I need to be put in a situation where I need to solve a problem. And I saw the grid in Live Wires and it didn’t connect with me and I didn’t quite get it, so it forced me to come up with my own solution. And now I have a grid that I’m comfortable working with and I feel is reflective of my process in how we build sites, and it’s one of those things where if you’re given something like Bootstrap, you may never answer that question: how is this grid actually happening? Do you know what I mean? How is this actually falling here? And those things may seem simple if you just look at the code, but if you’re not even looking at the code and just throwing some classes that a framework tells you to put on, then you don’t know.

Travis Gertz: Yeah, yeah, that’s totally true.

Lea Alcantara: I do feel like it’s a bit of a mindset shift that reminds me a little bit of our CMS world too. Like if you’re used to working on WordPress sites, you kind of start off with someone’s template and their prescriptive behavior, and the moment you start moving towards something like Craft or ExpressionEngine or Statamic or those kinds of things — where you create your own templates first — there is that weird, uncomfortableness where you’re like, “What, I have to decide now?”

Emily Lewis: [Agrees]

Lea Alcantara: [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: And you notice that, especially with inherited sites, you’re like, “Oh, this person used to be WordPress developer.” You know? [Laughs]

Travis Gertz: [Laughs]

Lea Alcantara: Like you can just tell because they’re trying to fit something that was prescriptive before instead of starting from scratch and using and applying their own knowledge onto this system. And I feel like in some ways, that’s kind of Live Wires where you kind of have to have that shift where, “Okay, it’s not Bootstrap or Foundation where it tells you that X-3 is three columns or something like that. Like you kind of have to figure out how you want to work this thing and how you want to style it yourself from scratch. [Laughs]

Emily Lewis: And the best part, if I can just add on, is that it’s yourself from scratch that you then use over and over and over again and evolve over time.

Lea Alcantara: Sure, yeah, right..

Emily Lewis: So that it’s not like you do it from scratch to each time.

Lea Alcantara: Yeah, and you’re not set on the schedules of another developer.

Emily Lewis: [Agrees]

Lea Alcantara: Like you’re not waiting for the latest update for Bootstrap or Foundation. Or if you do customize those other things, that there’s a conflict with what you customize if you download, you know?

Travis Gertz: Yeah.

Lea Alcantara: It just becomes this like giant mess of like, “What was my code and what was their code?” You know?

Travis Gertz: Oh yeah. That’s funny, you hit on something else. I think a lot of people, they think of it as, “Oh, what happens when Live Wires has an update? And do I have to override stuff?” The thing I try to get people to do when they use it is don’t override anything.

Emily Lewis: Right.

Travis Gertz: Just go in there and gut it and make it your own, and yeah, use your own grid system that you’ve developed and add your own nuances and your own patterns and make your own framework out of it that you can use from client to client to client, and it will evolve on its own, like ours has. Like I rarely apply anything to Live Wires just because I think other people would use it or anything like that.

Lea Alcantara: Right.

Travis Gertz: I do it because we’re working on our own project and if there is something that we keep running into, and I’m like, “Oh, I got to throw this into the framework because this is super useful for us.”

Emily Lewis: [Agrees]

Lea Alcantara: Right, right, right.

Travis Gertz: And so there is a bit of, I guess, Louder Than Ten thing on it for sure. [Laughs]

Lea Alcantara: Sure, sure.

Travis Gertz: But yeah, I think you hit it on the head though, like with the grid system stuff, making your own. Even if you’re used to another grid framework like Susy or something like that, it’s really easy to just put it on there instead, and yeah, I think it’s great to just build your own team’s tool set that — I don’t know — it’s kind of like you brand it in some ways and it goes right down to the code. It’s not just a visual thing.

Emily Lewis: Yeah, I know I said it at the beginning, but I feel like Live Wires was sort of the impetus for us to go down that path for ourselves, and that we’re still going down our framework. For our internal framework, we call it Starter Files, and it’s in constant evolution. Now that I’ve seen the updates you released to Live Wires, I’m going to go through it and see what I can bring in. And I feel like it’s the way for Lea and I to share not only a common system that both of us can work in, with her as the designer and me as the developer, but both of us together as the experts helping the client. She knows what I’m doing. She knows the patterns that I use.

Lea Alcantara: Right.

Emily Lewis: And so if she knows that she wants to show something to the client, she can just take my pattern. She knows what it is because we created a framework and there’s a module for her to drop in some buttons somewhere.

Lea Alcantara: Right.

Emily Lewis: And it makes things more efficient and more collaborative and it feels less like, “I’m starting a new project by copying the last project,” and more like, “I’m starting a new project with a proven set of assets.”

Lea Alcantara: Yeah.

Travis Gertz: Yeah, that’s awesome. Oh, you guys, you’re making my day. [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Travis Gertz: This is music to my ears to see it. That’s why we made it.

Emily Lewis: Right.

Travis Gertz: It’s so you can make it your own, and oh, that’s amazing. [Laughs]

Lea Alcantara: So let’s talk a little bit about that efficiency. I mean, Emily and I have our own story regarding that. Like have you measured how much better communication is or how much faster processes have gone? Is it faster for your team?

Travis Gertz: Oh, it is definitely. I would say it’s faster for certain parts of it. It changes the timeline. I guess it changes the proportions of what you’re doing. So upfront, obviously, there is a little more code involved, but then it saves a whole lot of code later on. I don’t know any hard numbers because every project is so different, I think, but what I do know anecdotally is like we don’t use it on everything. We usually use at least one component for it on every project, but coming back and forth to other things.

Like right now, I’m working with a great client. It’s on a product and I’m actually wireframing using Sketch and InVision because we just decided early on that, “Look, I’m not going to be coding any of this.” I’m not going to be in the HTML or CSS. I don’t even want to impose Live Wires markup in there, and it’s using like a JavaScript front-end. It’s using Angular or something like that, and I don’t know anything about Angular, and I don’t know how much Live Wires is going to screw that up.

And so we just decided really early that I’m just going to wireframe using an image editor and InVision, but use kind of the same principles, keep it really loose. We’re only doing it in mobile. Everyone on the project understands the process of it, but then at the same time, we are using the style guide part of Live Wires to define it. I use it just to figure out and see the typography in a browser to make sure the fonts look good and test it on a device, that kind of stuff, and so that’s really helpful for me as a design tool, and we’re documenting the design at the same time. So it gives the developer some stuff to work with. He could pull in my CSS. Where he needs it, I can adjust it and so on, and so I guess that experience truthfully working in an image editor in wireframes makes me miss Live Wires for doing that, [laughs] but on my end, it definitely speeds things up.

Like I don’t know, I found it was really weird going back to that because on one hand, it was really quick to draw things out, but then I started noticing the weaknesses of image-based wireframes and prototypes when I had to change things especially. And especially if I did have to do a desktop wireframe for whatever reason, I have to duplicate that work on the mobile version and then I’d have to text update it. I’d have to change it on these states. Especially if it’s more interactive, there is just so much more work whereas in HTML, you just change a couple of lines to CSS and then it fixes it globally. So I definitely notice for iterative stuff, for revisions, I find personally CSS and HTML kind of quicker. I don’t know, it’s easier for me, but I understand that it’s not that easy for all designers, but for me, it’s definitely the way to go.

Timestamp: 00:40:06

Emily Lewis: Yeah, I think like you said a couple of times, every project is going to have its own requirements, what’s going to work best for that project, and you have to be flexible if you’re going to be successful with your client. But I also feel like that Live Wires has improved our efficiency, if only because we now use … the Live Wires becomes the foundation of the production code, so we’re saving time there. And I feel like it gets us talking to the client about interaction a little sooner than we ever had before, and so we work out those things sooner. It always felt like that stuff showed up at the end, “Oh, I don’t like what happens when I do this on the browser,” and we’re two weeks out from launch, so we’re getting input on this stuff sooner rather than later. So I feel like it helps with that.

I can’t say it like it saves a ton of time. It really depends on how adept … I’m not adept at old-school wireframing. Like I’m not fast with OmniGraffle or Cacoo or whatever you might use. I’m not fast with those, but I’m fast in code, so I think it comes down to who’s creating it. But Lea and I always start with hand sketches regardless of what we do.

Lea Alcantara: Right, but I’m not like precious about it either though, like I don’t have like fancy grid notebook with perfect units and everything like that. It’s always a 100% loose just to get the ideas out of my brain, and then essentially like after that’s cleaned up, like it’s sketch for us cleaned up just so that the other person can interpret the chicken scratch. And then once that interpretation is just solid, then we get into Live Wires because at that point, then you can start playing around with making things more precise. To me personally, like I don’t understand people being precious about their sketches or wireframes. I guess, maybe if they’re really trying to show that to their client, like the fixed stuff as the deliverable. But it wastes so much time because by the time you’re in the browser, you notice all these micro-interactions and behaviors that are even irrelevant that you didn’t catch in the traditional wireframe situation, which is what I love about working in something like Live Wires.

Travis Gertz: [Laughs]

Lea Alcantara: Because like the proportions and even how things flow, it’s so, so different once you actually get it into the browser, and no matter how pixel perfect you’re trying to get your static comp, there’s always going to be something where it’s just like, “Oh, there’s one little like orphan word that’s like ruining the layout.” And you don’t get that until you actually put things into a browser context.

Travis Gertz: Yeah, that’s so true. I mean, the other thing that you brought out is forgetting all the little pieces. I find getting it in the browser — and that’s how the style guide actually started too — you always forget things as a designer like error states or even like a sign-out process or forget password, like all of these little templates that add up that it’s so easy to skip over when you’re not actually able to use it. And so for us, it’s almost like a checklist and you’re forced to go through the motions and it’s so much easier to pretend you’re an actual visitor using the product and you can just trip up all you want, and I find you catch so many more things in it at the end. Especially if you’re working with another developer and they’re like, “Oh, do you have error state styles for your forums or anything like that?” And you realize, “Oh no, can you just squeeze this little error under the field here.” So yeah, that’s a big thing. [Laughs]

Lea Alcantara: Yeah, and I just want to add too in terms of even sending stuff for a client deliverable, sending them something that’s already in the context of the final product, like in the browser, helps them understand your choices so much better because clients will do things that you never would even think about when you give them something. [Laughs]

Emily Lewis: [Laughs]

Travis Gertz: [Laughs]

Lea Alcantara: So for example, in our regular traditional wireframe, we’d normally send them something like a PDF, but the thing about PDFs is that you can zoom in, zoom out, all those kinds of things.

Emily Lewis: [Laughs]

Travis Gertz: Yeah.

Lea Alcantara: And we have these useless conversations that waste so much time basically saying, “Are you seeing it a 100%?”

Travis Gertz: [Laughs]

Lea Alcantara: “No the typeface is not going to be that large.” You know?

Travis Gertz: [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: And then this is even if it was grey box, it’s just like they just focus on like, “Wow, this website looks huge.”

Emily Lewis: [Laughs]

Lea Alcantara: Or, “Wow, this website looks so small, I can’t read anything.” I’m like, “Well, because you’re looking at it at 50%.” You know?

Travis Gertz: Yeah. [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: You’re looking at the PDF at 50% because your browser is like shrunken and it just automatically is at 50%. And so you just have these like huge conversations of just trying to get them to look at it in actual size, but if it’s in the browser, that’s the actual size, unless they’ve messed with the zooms of their browser, which 99% of clients have not, because they’re not web developers like us. [Laughs]

Travis Gertz: Yeah. [Laughs]

Lea Alcantara: They’re actually seeing what the proportion of the content is.

Travis Gertz: Well, I mean, even then, even if you do, and you have the ability to intentionally zoom in and out and if it behaves exactly how it should, you kind of have those ideas.

Lea Alcantara: Right.

Emily Lewis: Right.

Lea Alcantara: Right.

Travis Gertz: So yeah, that’s such a good point. I’ve never even thought about that with the PDFs zooming in and out. [Laughs]

Lea Alcantara: Oh my god.

Emily Lewis: It just happened weeks ago. [Laughs]

Lea Alcantara: Yeah, exactly. It’s like, “Can you zoom in? Can you give me screenshot of what you’re looking at?” And then you see it’s like, “Oh, they’re looking at it at 50%. No wonder they think it’s like the smallest website in the world.” You know? [Laughs]

Travis Gertz: Right, yeah, yeah.

Lea Alcantara: Yeah, clients surprise you. [Laughs]

Emily Lewis: Yeah. [Laughs]

Travis Gertz: Yeah. [Laughs]

Emily Lewis: So Travis, do you use any other “frameworks” in your design and development processes? And when I say frameworks, I’m using it in the most broad term, more like some assets from some other provider, I guess. Like for example, this isn’t a framework, but we use it in all of our systems these days as we use Font Awesome for our icon fonts.

Travis Gertz: [Agrees]

Emily Lewis: And Lea designs around that, I develop with that, and that’s part of all of our things moving forward. It’s not a framework, but it’s like an asset. Do you use anything like that regularly?

Travis Gertz: Yes and no. I have a few fallbacks. Live Wires I include Font Awesome by default these days because it’s a huge library and it’s easy. I don’t always use those in a final product once I get into designing them. Sometimes I search for other icon sets or things like that, but usually changes quite a bit. There are a few JavaScript like jQuery things that I use if I need to with things like that. Most of the frameworks, I don’t have a huge need to find or to use other frameworks a lot of the time. I mean, it depends, so that’s really on the front end and in design at that part.

On the back-end stuff like these days, I always use Craft when I can. It’s awesome, but also occasionally I have some older clients who liked using ExpressionEngine or things like that, so they’re the CMSs I guess that I use. There are some great tools for deployment that I use. One is called Surge, surge.sh, and our officemates here built it. And it’s just an amazing little instance CDN that you can just, through the command line, you enter two commands and basically you’ve deployed your site to just a temporary host if you want, or you can make it permanent. You can throw a domain on it, but that’s amazing, they let you do the basic stuff for free, and it’s fast. I use that for a lot of things. Recently, they just launched it. Other than that, I don’t know, I’m pretty open. I’m not really a fundamentalist when it comes to that other than maybe Live Wires itself.

Lea Alcantara: Sure.

Travis Gertz: But I like trying different things out for sure and I will play around.

Lea Alcantara: How about your top IA resources, like do you have any specific wireframing resources besides obviously Live Wires, but are there articles or websites or tools where you think it’s going to improve your process?

Travis Gertz: Oh, there’s nothing. I don’t keep up on a lot of that end of stuff these days. I find that we’ve got such a dialed-in process for ourselves that we sort of came to it from a bunch of things before it, but we really focus on just content, writing content, getting that into our things really quickly, and I think one of the big things that we try to do is not test our own designs. We test them or have them tested, but I try not to be the one that test them.

Lea Alcantara: Oh, interesting.

Travis Gertz: Yeah, yeah, it just puts a different layer in between, like I just don’t trust my own confirmation bias on my work. [Laughs]

Lea Alcantara: Right.

Travis Gertz: Ideally, we’d like to work with someone who’s specifically like a UX researcher in an ideal sense, or someone who’s got some research experience, scientific literacy that I don’t have where they can put together user tests and things like that, because I have no illusions that what I’m designing could be totally wrong, and so we just like to try to separate that from the actual design process a little bit.

Timestamp: 00:50:04

Emily Lewis: Are you able to do that with every project, or is that really something that there’s got to be a budget for it?

Travis Gertz: It depends. Typically, we find the need for that is directly proportional to the budget usually.

Emily Lewis: [Agrees]

Lea Alcantara: Right.

Travis Gertz: Like if it’s a small marketing site, we’re not going to worry too much about it. We will test it with a client and maybe get a couple of people to look at it, and we might make some changes that way. The bigger it is, like if it’s a full app or something like that, then usually we’ll have a budget and we can work with that and we try and build that into it and make it part of the process for sure. So yeah, it kind of naturally works out, I guess.

Emily Lewis: Yeah. So I’ve got a particular point about having someone else test your work. It’s one of the things you listed in this. Would you call like a manifesto that you wrote about…

Lea Alcantara: [Laughs]

Emily Lewis: [Laughs] Like it’s…

Travis Gertz: [Laughs]

Emily Lewis: And I don’t mean that in a negative way. I don’t know if that word has a negative connotation. It doesn’t to me, but it’s kind of like it’s aspirational and it’s, “Here’s what might be wrong and here’s where we could do better,” and that’s one of the things you talked about is having someone else test your systems … but can you talk a little bit about why you’ve felt you wanted to write about how everything is starting to look the same and we’re kind of designing like machines?

Lea Alcantara: And especially since you wrote a framework.

Travis Gertz: [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: Yeah. [Laughs]

Travis Gertz: Yeah, totally.

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Travis Gertz: It’s really weird, like I don’t consider it a manifesto at all. It actually started as a talk for a local typography meet-up, and it’s been kind of boiling in my head and it’s been in there ever since I started building Live Wires really. So one of the reasons I built Live Wires is because of those other frameworks lock you into that box, and I wanted to design something that allowed much more variation, and so I think with the Design Machines article, the big point — and this probably is something that I should have made more clear in it — is that I think designing systems is fine and using a system is great.

Like that print design has always relied on systems to bring it up to kind of that minimum standard. We still have general templates for types of content or there is always going to be a table of contents, there is running heads, there is meta information on all the pages, and every magazine is different, but they all kind of have this standard, and you have a grid system. All of these systems come into play, but I think on the web, because of our approaches to frameworks and CMSs, like especially like you mentioned WordPress, that’s almost built into WordPress. I don’t know how you build outside of it without a few good plugins.

Emily Lewis: [Laughs]

Travis Gertz: It’s that you kind of have to build a templated system and there’s not really much room for variation beyond, and so I think because of this approach, we’ve sort of hit a lot of sameness on the web. We use a lot of the same patterns and things like that, and it’s not that the patterns themselves are bad, but it’s just that they get overused out there. They’re use in a lot of the same templates. They’re used in a lot of the same frameworks, and so I think the call is to kind of look at those and start building systems that allow you to build on top of it, build variations into the process.

Emily Lewis: [Agrees]

Travis Gertz: And we understand that you can’t necessarily do that with every project, but you can build in little pieces on every project usually. But I mean, that’s why we use things like Craft. It’s a CMS, so it allows us to right now we have basically one template that runs the entire site and like two fields, but because those fields are so powerful, we can design crazy pages with our direction and we could go nuts on it. I don’t even think we’ve come close to hitting the full potential of what we can do in that, but for us it’s a lot of freedom without a lot of work, and I think there’s a lot of potential out there that just we aren’t quite reaching with the current tools and approaches.

Emily Lewis: Yeah, I felt while I was reading this that the sweet spot you just described, like a tremendous amount of flexibility to be creative and get an experience out there, but also having the system in place that lets you do it efficiently so you still are profitable in the business and your client is happy, and I was just reading this, and your last question is like, “How are you going to be different from the machines?” And I was like, “I don’t know.”

Lea Alcantara: [Laughs]

Travis Gertz: [Laughs]

Emily Lewis: It is because I feel like I am not at that sweet spot yet. I feel like we could push ourselves further, but right now we’re sort of focused on building that internal system that will let us push ourselves forward once the system sort of stable.

Travis Gertz: I think for like some good starting points — and this is something I didn’t really get into, but I think it might be worth another article or whatever — but it’s how to start bringing in things in small steps. It’s not like going crazy and building really rich interfaces that require a designer to be on every single blog post or every single page. You can start small with it, like Craft has … for instance, Craft has its wonderful Matrix fields.

Lea Alcantara: Yeah.

Travis Gertz: So maybe it’s setting up your content blocks and so instead of just having one giant field for content, you can have like here’s an opportunity as a client where you can put a pre-sized image on the left and a piece of text that runs beside it, and then in the next section, maybe it’s just a straight column of text.

Emily Lewis: [Agrees]

Travis Gertz: And adding some opportunities for very controlled variations can go a long way.

Emily Lewis: [Agrees]

Travis Gertz: Even things that simple. If you’re going to have like maybe you have a big banner up top, on the top of the page, maybe you’re just giving the client an option of more brand colors to change between, or just switch between the typefaces that you allow them to in the top just to give it a little different flavor and get them thinking of how the content can speak just a little bit differently from everything else on the page while keeping within some really strict guidelines. So those are some things we try to think about, especially for clients because we don’t want to give them the full control of everything and let them go haywire.

Emily Lewis: Right. [Laughs]

Lea Alcantara: Sure.

Travis Gertz: But we like to just introduce little bits and pieces here and there, and I think that can go a long way for just a relatively little amount of work and low risk for them screwing things up.

Emily Lewis: [Agrees]

Lea Alcantara: And I mean, personally as a designer, I have hope because the web … we tend to forget because we work on it every day, it’s still super, super, super young. Print has had centuries to play around with grid systems and layouts and the constraints regarding that, so people have had time to figure out how to push the boundaries and establishing things like that, and I just feel like right now in the design phase that our industry is in, we’re just trying to like raise it to a minimum level, because remember, less than five years ago, we only had to design with Georgia, Times New Roman, Arial and Verdana.

Emily Lewis: [Agrees]

Lea Alcantara: That was less than five years ago, and it’s only been recently that we’re even allowed to play with more than that. So it’s just like a matter of I feel like the sameness with frameworks and design, all those kinds of things, it’s just getting to that point where people are just comfortable with what we have, so there’s like a minimum standard. And then eventually people are going to be pushing for more because at some point, just like with any business, if you’re all the same, then why would someone choose your site, your design, your service, your product if it looks exactly like the other one?

Travis Gertz: Yeah, exactly. I agree with you. I think that we are just at a point where we’re getting used to all these crazy things, people are still figuring out how to work with devices properly.

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Travis Gertz: And even things on the process level, how to present things to clients and how to work with each other. Like the other part of our business, the project management side, we work with this every day. We work with agencies all the time that have no idea how to approach this stuff, and the only way you can learn because there are so few resources just to sort of do what’s working for somebody else a lot of times. And so a big part of that side of our business too is helping them build processes that can let them be more flexible, to sort of carve their own path and differentiate a little bit in those ways too and how to do that efficiently. And so yeah, it’s a big challenge, but I think you’re right. I’m pretty optimistic about it. I think we’ll be forced to improve as always, as we always have trundled along. [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Travis Gertz: And gotten better over the years.

Lea Alcantara: Oh, for sure.

Emily Lewis: Yeah, on some days, it feels like a double-edged sword. I love the aspect about the career I’m in where I’m always learning, but there are some days where I’m like, “Oh god, I would just like everything to be the same for a period of months that I can just have some knowns to work with.” [Laughs]

Travis Gertz: Oh my god. I feel that in some ways. I feel that with front-end development these days. I can’t keep up.

Emily Lewis: Yeah, me either.

Travis Gertz: Like to be really on top of it, especially with JavaScript frameworks and things like that … you have like React and Ember and all these things, they are just tearing up the mix. And they’re even influencing how CSS is written and HTML is written, and so it’s crazy. Yeah, I’m getting to the point where either I need to keep following that or else kind of just accept that I know my vanilla stuff, and just keep on that for the design part. [Laughs]

Emily Lewis: [Laughs]

Travis Gertz: Yeah, I can’t be as versatile as I once was maybe. [Laughs]

Timestamp: 01:00:04

Emily Lewis: Yeah, it is almost too much to keep up with.

Travis Gertz: Oh…

Lea Alcantara: I mean, and that’s why we have frameworks. [Laughs]

Travis Gertz: Yeah. [Laughs]

Emily Lewis: [Laughs] Like I hate frameworks, but wouldn’t it be nice if I could just count on one thing. [Laughs]

Travis Gertz: Yeah. [Laughs]

Lea Alcantara: Right, right, totally. Oh my gosh, Travis, this is a fantastic conversation, but we are running out of time. So 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 do this.

Lea Alcantara: Are you ready?

Travis Gertz: Yeah.

Lea Alcantara: Okay, question one, Android or iOS?

Travis Gertz: It’s iOS.

Emily Lewis: If you’re stranded on a desert island and can only bring three things, what would you bring?

Travis Gertz: My glasses. [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Travis Gertz: My iPad and my wife. [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Travis Gertz: Reverse the order of that though. Rachel comes first.

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Travis Gertz: [Laughs]

Lea Alcantara: You saved the best for last.

Travis Gertz: Yes.

Lea Alcantara: What’s your favorite TV show?

Travis Gertz: Just right now, Mr. Robot.

Emily Lewis: What’s your favorite dessert?

Travis Gertz: Espresso ice cream.

Emily Lewis: [Agrees]

Lea Alcantara: What profession other than your own would you like to attempt?

Travis Gertz: Oh, that’s really hard. I really like what we do. [Laughs]

Emily Lewis: [Laughs]

Travis Gertz: Drummer in a band.

Emily Lewis: All right, what profession would you not like to try?

Travis Gertz: Oh, this is a hard one. [Laughs]

Emily Lewis: [Laughs]

Travis Gertz: Everything. Sears Portrait Studio, a photographer.

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Travis Gertz: I actually did that once, and I never want to do that again. [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: What’s the latest article or blog post you’ve read?

Travis Gertz: Oh, it’s called Apprenticeships, Do We Need Them in Design? That’s not the exact title, but it’s about apprenticeships. I should know what it’s called because we just posted it in our magazine last night. [Laughs]

Emily Lewis: [Laughs]

Travis Gertz: Which you can find at louderthanten.com/coax. [Laughs]

Emily Lewis: [Laughs] Good plug. So if you could have a super power, what would it be?

Travis Gertz: I would fly.

Lea Alcantara: What music do you like to work to?

Travis Gertz: Really, angry music and fast music, so a lot of punk and indie and metal and things like that.

Emily Lewis: All right, last question, cats or dogs?

Travis Gertz: Cats.

Emily Lewis: [Laughs]

Lea Alcantara: Nice.

Travis Gertz: Definitely cats.

Lea Alcantara: That’s all the time we have for today. Thanks for joining us, Travis.

Travis Gertz: Thank you.

Emily Lewis: In case our listeners want to follow up with you, where can they find you online?

Travis Gertz: On Twitter @travisgertz and on our website, louderthanten.com.

[Music starts]

Emily Lewis: Awesome. Thanks again, Travis!

Travis Gertz: Thank you!

Lea Alcantara: CTRL+CLICK is produced by Bright Umbrella, a web services agency obsessed with happy clients. Today’s podcast would not be possible without the support of this episode’s sponsor: Thank you, Craft!

Emily Lewis: We’d also like to thank our partners: Arcustech, Devot:ee and EE Insider.

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, please give us a review on iTunes, Stitcher or both!

Emily Lewis: Don’t forget to tune in to our next episode when we will talk about designer-developer collaboration and workflows with Megan Zlock and Owen Shifflett. Be sure to check out our schedule on our site, 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: 01:03:17