Play Pause
Trent Walton

By Trent Walton

In this interview, Trent Walton explains the impact responsive web design has had on his design process. We talk about breakpoints, grids and fluid type. He also reveals the importance of side projects and producing good work. This episode is brought to you by InVision.

Need a good design for your product? Use DesignCrowd to get the perfect custom design. SAVE up to $100 on Custom Design. 100% satisfaction.

“Browser-centric workflows are the future. The key is to not get frustrated if the process gets sloppy. While projects may take longer at first, the effort put forth to ensure that teams are headed in the right direction will pay off exponentially.”

Tweet quote
Trent Walton is co-founder and one third of Paravel, a small web shop based out of Texas Hill Country. Along with Dave Rupert, Reagan Ray, Trent has been building for the web since 2002. Past clients include Microsoft and Do Lectures. Paravel are most known for creating Lettering.js, Fitvids.js, and Fittext
Co-founder of Paravel
Horseshoe Bay
Stephen F. Austin
Shape of Design
Willie Nelson
Trent Walton is co-founder and one third of Paravel, a small web shop based out of Texas Hill Country. Along with Dave Rupert, Reagan Ray, Trent has been building for the web since 2002. Past clients include Microsoft and Do Lectures. Paravel are most known for creating Lettering.js, Fitvids.js, and Fittext

Trent Walton - Understanding Responsive Web Design

Trent Walton
In this interview, Trent Walton explains the impact responsive web design has had on his design process. We talk about breakpoints, grids and fluid type. He also reveals the importance of side projects and producing good work. This episode is brought to you by InVision.

N.B This is the unedited transcript of the interview.

Can you introduce yourself.

Sure. My name's Trent Walton. I work with two of my best friends that I've known since high school, Dave Rupert and Reagan Ray at a very small team, maybe you could call it a company, Paravel. We build websites, pretty much as simple and cut and dry as that. Love typography, responsible web design, have been doing this informally, maybe on the side, since 2000, 2001.

Paravel became a full time endeavor 2006-2007 and we really have changed very little from the day to day except for the kind of technologies and things that we use. We still argue a lot and have a lot of fun building for the web.

You're very forward thinking in regards to responsive. This is something that you said, "To think about the web responsively is to think in proportion, not pixels".

Because before that I said the opposite and I was a jackass about it. This was a great example. The first time Ethan's article came out on A List Apart I sort of had this fearful knee jerk reaction about responsive web design. It didn't have anything to do with it’s merits or whether I thought it would be useful to clients or to users or whatever, I just didn't like what it meant for my life, that things were going to be harder.

Things were going to change.

Yeah. Everything was going to change. If you think about it from a work flow perspective, Photoshop was our prescriptive tool. The way that we communicated with clients to the way that we communicated with each other and what kind of process and sign off, how that all worked together was all around Photoshop. I have a bit of insecurity about design and I like to control things with grids and math. That's my default when I'm not really sure I'm making good decisions. There is a saying where I could wrestle with that and fight those demons in Photoshop.

Once you got there and everything was what you expected and what you wanted and the clients agreed and hierarchy was set, you were fine. Code was about execution, responsive threw all that away. The idea of any kind of a comp, whether it’s Photoshop or it’s done in the browser or whatever, the idea of that being a flexible fluid thing that can re-stack, reshape, re-change across any device blows all that out of the water. The browser is what we rally around and there's nothing that we can rely upon on a consistent basis now.

That realization for me was a little bit after the fact of responsive coming out. That's what got me to embracing it as a practice, embracing the changes that we would have to make at Paravel from the way we talk to each other, the way we talk to clients, the way we structure contracts, the way we pass things off back and forth amongst each other and all these sorts of things. There's talk that design is about relationships. Josh Brewer says that a lot. They center around the product and it’s relationship to it’s users and the relationships that it fosters.

It’s funny because I think that obviously design is about elements inside of something and the relationships they have between each other. responsive really makes that part of our job more difficult, but also more exciting and engaging. Can hierarchy maintained if something gets smaller or squishes? It adds more dimensions to what we do, but I've found that it’s made work fun again. I think another thing I wrote once was it’s restored my sense of wonder for building for the web.

It got from this factory ready Photoshop build process to something that's really uncharted that requires a lot of collaboration with clients and with the people that you work with.

It’s changed your work flow. What are you doing differently now? Have you abandoned Photoshop? What role does Photoshop play now and what's the work flow now?

I don't think we use it any less, but what it means to us now is something completely different. It’s an idea. It’s a place where, for at least myself and for Reagan, we find that's the place you can have happy accidents and get into things. You're not really thinking critically about code or how things are going to lay out. One of the things I always think about when I'm coding is if there's going to be any hurt later down the road when we get into browser or device testing. Photoshop is this place to paint and goof off and get your ideas out.

When does the grids come into place?

Grids at this point, now more than ever, and this is maybe something that responsive has done to help us get to this, because I think this is good no matter what, grids are the finishing point. We know we'll need this many columns and this is the spacing that we'll want, the widths we'll want generally. No typesetting or no really hardcore formal grid setting up in Photoshop anymore and absolutely no breakpoint selection. You could call it a sketching tool because that's what it is.

It’s Photoshop rendered, so it’s not pencil and pen, but it’s very casual. I don't think we've ever had a client complain about that. They don't look particularly sloppy but you can absolutely tell that they're not the final finished piece. You want to spend all of your effort and time and billable hours in the browser because that's the end game anyway.

What's the situation now with contracts and clients?

responsive web design is one of these things where the main thing that we try to predict or we try to communicate during our engagement process with clients is what they need to get by. How do they handle approval? Who's in charge and what are they going to need to see to get things past? There's a lot of great articles that I totally agree with about it's better to do Photoshop casually and then get really serious in the browser. Some clients we've even taken screen shots of the actual site in code in browser. They pass them around like Photoshop documents just because that's what they do.

The main thing that changes is how much are we going to be able to get done in a certain amount of time with a client is really that. How does approval need to happen and if we're going to have to make three or four different designs in Photoshop to match each breakpoint and then not even be sure those breakpoints make sense because we're only doing that in Photoshop. It’s a very unnatural flow. It’s this process of hoping that they can make a little bit of change and meet us in the middle.

I think it’s important for me to say I spend a little bit of time talking about how hard a time I had embracing responsive web design. It'd be terrible for me to show up a client who's interested in hiring us saying, "Guess what, you have to do things my way overnight even though it took me three months to pull my head out". It’s not even a gripe, it’s about working with clients where they are and what they're realistic needs are and hoping you can nudge them closer to something more efficient. That's really how contracting goes. How does feedback and how does the process look?

For those listening and they want to land a big client like Microsoft, what advice do you have?

The only thing that I could say that I think for us made the biggest difference is make friends and do a good job. It’s as simple as that. At the end of the day, if you're going to do anything, don't do a bad job on anything. Everything you do has to be at least in your mind good. I'm sure people could argue that some of the stuff we've launched they think they could do better. Of course, whatever. The things that we put out we've been confident in, if anyone sees any one thing we think is pretty cool or worth something you do those and you just keep doing them. You stay consistent.

My dad was an industrial contractor. He had an industrial contracting business. He's retired now. He did this for over 30 years and that was the model that was set forth for me to watch him. Keep doing exactly what you're doing. Be consistent and everything else will take care of it’self. It worked for him very well and I think it’s paying off for us. We haven't changed anything except the way we build for the web so that we're current since we've started and we're going to keep doing that.

What do you mean by stay consistent?

We had a lot of pressure early on. I'm definitely not giving this as advice, but this is the fact of what we did. We wouldn't get paid so much for jobs in 2006. I'm sure that we have improved over the years, but we had this idea of the standard of stuff that we wanted to put out, some that we'd put in a lot of free time. I'm not saying that's the way to move forward, but that was our deal. We needed stuff that we were proud of that we could do that.

The whole model for us was do the work that you want to be doing. You're not going to get hired to do something that you haven't already done most likely. No one is going to look at you and see this potential energy or brilliance that you could maybe one day do something different. If you hate e-commerce sites, I like doing them, but if you hate e-commerce sites and you keep doing e-commerce sites because somebody's paying you to, but you really want to do this other thing, you're never going to get hired to do that. You're known for this.

For us it was we want to make the best front end experience we possibly can because we want to get hired to do that. That's what we did over and over. The consistency thing comes in. Decide what you want to do and how well you want to do it and just do it over and over and over and over and over.

In those early days, in establishing yourself, were side projects your full focus or did you have client work as well? I'm trying to think of where you balanced the time.

Oh no. We'd have client work and there's three of us. The nature of the way we work together, especially back then before responsive, there were more hand off type stuff. We could have a design heavy week and the next week would be a code heavy week or something like that. There was a way to slide these silly little things in. There were definitely evenings. I didn't have kids at the time. I've got two boys now. That was something that I would do at night too.

It wasn't this misery staying up until four in the morning and then getting up for work. The honest truth was we weren't fully booked. We were turning jobs down that we didn't want to be doing anymore. That was a big deal. It was where we need somebody to go to back end and do all this other stuff and we'd say we'll do this piece, we have some friends that do this other piece. We'd leave some money on the table for somebody else.

You absolutely should be doing that if you want to specialize in anything. We didn't want to do those pieces and we had friends who were becoming more and more talented at those elements. We'd collaborate and then with the time we got back we'd work on these side projects.

How important is it to specialize or carve a niche for yourself?

I think you should follow the momentum. If you're interested in something and you care about learning about something, there's going to be a lot less friction there and it’s going to feel like a lot less work. I don't know if we specialized. We build websites. We can do every single thing. I never really thought about it for us from a business strategy, it was just what made us happy and what we thought we were best at.

So Trent, let's talk about fluid type and why you think that's important today.

The way I look at it is that you're building a responsive site and you have fluid width containers, what are you going to do with the type that's in it. I think you can make a really good case for fixing some of those widths if you were solely focused on type. The main reason there would be the characters per line reasoning. These are guidelines, not rules, of course and I think they depend on the situation and the typefaces and everything at play when things are being thrown together.

Have that 45 to 75 characters per line including spaces guideline. It would make sense to find what you think, as a designer, is the right character count and if font size were to change and the container width were to change you could make a jump in and out. A lot of sites are more than just text. There's media, there's images, there's videos, and widgets, and all that stuff. What do you do? What does text do? What's the best thing to do with text?

One of the first things that we ran into with our work and I had seen on the web that irked me was you have a really beautiful site and you spread it out over on a larger laptop or desktop sized screen and then you have this line of text that's hundreds of characters long and it becomes impossible to read and track from one line to the next. I think with anything else that responsive web design brings to the table it adds another dimension to the things that we have to think about outside of any one specific viewpoint or view that you see.

The way I saw it is there's two levers you can pull to maintain comfortable reading and one is obviously if you have a container and the width of it grows and you want to keep a certain number of characters on a single line you can make the font size bigger. Another thing you can do is change the width of the container in it. Tweaking those things to make sure that at any view you're within that general span of 45 to 75 characters per line.

I think there are situations where you break that. On a mobile phone it’s going to be less than 45 most likely unless you want an 8-pixel font, that's probably not that good. Then you can maybe go over. If it’s just a caption under a photo and there is only one line it’s like here's the thing we've got to pay attention to. If there's any one thing that I were doing on a responsive fluid layout, that's the first thing I'd look for.

What makes good type? Is it the readability?

Yeah, I think at the end of the day, is it comfortable to read. You can get into things like are the font choices appropriate for the situation. At the end of the day just read it, look at it, and if you're comfortable reading it and if it’s okay to you. If you're not sure about it ask some other people. I think there are some guidelines like that 45 to 70 characters per line rule. If a column is more narrow the line height it shrinks and compacts up a little bit. I think if it’s comfortable that's how you judge it.

What's for you on the horizon? I was reading an interview and products seems to be where you want to go.

Well I don't know. We have a lot of fun working with clients and doing the things that we're doing. I can say that right now we're still full steam ahead at the same stuff that we've always been doing. We have product ideas that come and go and none of them have been...

Compelling enough?

Yeah absolutely, that hasn't pulled us away from enjoying client services so much. Honestly, anything that we have thought of wouldn't be something that we would sell. That could totally change tomorrow if we think of something, but we're not banging our heads against the wall trying to come up with something.

What's the components that need to be in place to get your interest?

I think it’s something that we would like to build would solve some problem that we think is important. We've gotten close to a few things. One thing that I was interested in was we are members of a CSA and that's Community Supported Agriculture. My wife, my family, my kids and I basically pay for a subscription to a farm and we get a box of food. For a while I was talking to the farmers and asking if there was anything we could build from a technology standpoint that would make life easier.

There was already something in place that I thought we could do better, but I didn't think it was something we could have done any cheaper. You get these practical roadblocks. We just stopped it. It didn't make any sense to continue. Their problem was adequately being solved.

You could interview me in a year and be like you totally contradicted yourself. You did exactly the opposite of what you said. I'm not interested in solving my own problems. I think we've got tons of people in our industry solving problems for each other. We all have really good tools. We could have better tools but there's lots of people who have zero tools. There's nothing that they have that will help them do their job better so maybe that's where to look.

100% agree with what you said.

We've gone to the Brooklyn Beta every year for the past three years and that's a theme there too. That’s maybe what inspired that. There's a lot of problems that need to be solved. Look around you and maybe you'll find one.

Let's go back to your work flow process.


I know we've touched on this earlier, but what's wrong with doing wide frames, fleshing it out on Photoshop and then handing it over? What's wrong with that?

You can't really speak about somebody else's work flow, but I can speak about mine. The difference to me that would impact everybody, I think you can evaluate a site that is built to be responsive and work in multiple devices out of those devices. We have designed things in the browser and been extremely confident. We've designed things in Photoshop and we've been very confident this looks perfect. I feel like we're done.

You spend the next week coding it and you evaluate it. You're squishing it and you pull it up on a phone and this feels terrible. This is not right. It’s out of whack, the proportions are all wrong, and you start adding breakpoints and realizing those are all wrong. I might actually even write a little bit about this. There's this miserable but creative happy place I go to where we've coded the site initially and we've thought about a narrow and a wide version of that and we threw something out and the code is there.

The thing squishes or whatever. For weeks it looks like shit. There's no other way to say it. What you are doing is averaging out and trying to smooth these edges like is this column too big, is this too small, is the hierarchy off, how can we present this better, this is way too blown out on mobile or this is way too compact and lopsided on a wide view.

Then it gets even deeper. You're trying to average out type sizes, how big things are, and how those connect to each other. You're thinking also about when the breakpoints should hit. That's one of the things that we always try to do. I wouldn't be a fan of doing a site where there's just a breakpoint whenever you need it for every single component. You try to consolidate those into two or three.

You're trying to keep all of those in your head and make sure you're making the best decisions for all of these problems that you're trying to solve at once. Then as you're fiddling and futzing with this it goes even deeper. I'm realizing now that on this width the presentation of this and the way that these links are stacked is all wrong so we need to dramatically change. With CSS, the way this is being presented, maybe we need big full width buttons or something or the promotions need to change, whatever it is, and so you go even deeper.

I think for me this angst ridden, frustrating, grind out situation in the browser, I haven't found a better way to do good work. Dave, Reagan and I, we all kind of do this, go away for a day or two and somehow internalize all of these things. Sometimes I'll try to track these things. I don't really know how but you keep going. People make fun of responsive web designers if you squish the browser. No one does that but you, but the whole idea here is that somebody is going to load it at that width. How do you know? You don't, you can't predict how big the browser is going to be if they go to your site.

You want to make sure that all of them are as good as you can get them. You just sit there with that forever. If you're in Photoshop all of that time you could spend perfecting this layout and this grid and this typographic set up and whatever, all of those things. If you're in Photoshop all day you're never going to get that. You're going to get 1/1,000th of that. You're going to get one specific view, one specific lock up, and then you'll get it responsive and you'll be miserable because you'll have to start over.

I think for us that's the big deal is all of the blood, sweat, and tears we want to happen in the browser because that's forward momentum. Users don't see Photoshop comps, they can care less.

That means that the designer now has to be really proficient in CSS.

Yeah the most important thing is to know how it works and what it does. You could say that I don't think everyone needs to be able to write production level CSS code. If I just boiled down you have to know Web Inspector. You need to know what the properties are so you can get in and add some new ones. I think it’s that, know the properties, know what's possible, know what you can do with CSS and whether or not you're writing Sass or compiling on your machine or you're just telling somebody else on GitHub issues or Basecamp or whatever. Just know the language. Know the tools that we're working with and that will get you there.

I'll say, though, for me I imagine people listening this and they're like this guy's a freaking psychopath, he just sit’s there and screams at the browser while he squishes it all day long. I like that amount of control. I need that. I don't think I would be very happy doing my job if I wasn't able to, by myself, sit and be like 3.25%, no, 3.26% or whatever. I think that's the thing. You don't have to know it, but if you're an idiot like me and you have to futz all day long and that's what makes you happy and that's where you feel you've done your best work for a client and for a layout you should know it.

Are you learning every day, deliberately taking time out to learn new things or is it just on the job?

Probably the latter. That's the thing, it’s never convenient. I don't have time, I've got two kids. You just do it. Again, and fortunately I have two co workers that we spend a lot of time together and I think we're very patient with each other. If one person learns something then the other two can learn a bit of an easier way. I believe there's an economy there. If somebody's been solving all of our problems and figuring everything out maybe it’s time for me to learn how to make an icon font or something like that.

Honestly at this point in my life it’s never convenient. That doesn't mean it’s not fun, but I could always be doing something else. You could probably argue from a productivity standpoint I should be doing something else, but that's not how we operate. Take the time to learn because if a client asks you about something or if you need to have an opinion on something it’s better to have struggled with it a little bit so you own your own belief or your own opinion on whether it’s good or bad or works or doesn't or would work for them or doesn't work for them.

Malcolm Gladwell has the 10,000 rule, but with things changing so rapidly when does one become a master or is that a never-ending thing for web designers?

I think you have to separate that a little bit from the technologies, maybe not. What I was thinking with that was back to what I was saying about learning the next thing. Let's talk about Chris Coyier then. If you're talking about front end, you could lump Dave in there too, you could lump plenty of people in there, Ethan, everybody at Filament. Chris, that guy knows everything. I would say he's a master. He's got mastery at front end web design, absolutely. Good luck arguing with that.

Why am I saying that though? I'm not saying it because he knows Flexbox, that's so amazing. I'm saying it because he always knows. It’s not what he knows right now, it’s Chris's tendency and inclination to learn out in the open and write about what he learns. When you write and speak about what you learn you have to have a higher level of mastery of that. While we're copying and pasting his CSS into our projects he absolutely knows how it works.

It’s committing to learning and understanding what all this stuff is. If it’s a specific of front-end code mastery that's totally it, but I think there's a lot of other, there's lots of aspects to this. I think if there's anything I would say I'm good at it’s all the really weird things that go into a project from beginning to end. I've said maybe we don't do e-commerce implementation. Most of the jobs are back end stuff. Most of the jobs we're involved in we are around. We're not like, "Here's the thing we're checking out, we don't really care if this gets finished or not." That's absolutely not us.

Being self taught or being on the hook for the whole deal I know what needs to happen to get things done well. There's pacing. Some people need to have a longer stride or a shorter stride or we need to have breaks or morale and all these things. Obviously it’s also all the practical things like the code, the strategy, the design, and the work flow and all that stuff. I think if there's anything that makes Paravel good from a day to day standpoint, it isn't just that we know how to write a CSS property, but it’s also that we heavily debate how to reply to a question from a client.

We want to have a good answer because that answer is going to shape all of the actions that we're going to take from then on. Maybe that's a type of mastery, I don't know. Every day I screw that up a little bit. Everyone has their own thing that they do every day and if you can continue to get better at it and try I don't know if you would achieve mastery. I think satisfaction's the deal for me. I feel like a do a good job and I feel like I'm getting better and what else is there at the end of the day. From the work perspective there's lots of better things, but if you're trying to get better at your job and you're trying to make a difference with your co workers and your clients, that's it.

What do you think about figuring things out for yourself or if you've got your colleague right next to you, should you ask him?

I think that's where a big overlap in regular check ins and collaborative relationships within teams is important. I'm not going to make it hard for no reason unless I feel like it’s some random thing I need to learn this and the only way to learn it is build up on the knowledge and solve these problems myself. Usually I'll figure this thing out and I'll figure that thing out. We both had some brain hurt and we can trade answers at the end of the day. I don't think we think too much about that. Every morning we have a ton of shit to day and it’s like I'll do this piece is pretty much how you boil it down with us at least.

How is that working remotely?

At the very beginning I wondered. Some days we just need to get together to make sure we all still like each other and morale. Reagan and I both design and there were times. A good example is one of the third, fourth, fifth, sixth, something like that, sites we had done, our first year for sure, and I saw something in my head. I was new at all this and I was giving him critique based on what I wanted it to be and not really paying any attention to how good he was doing with his own take on it.

I was trying to dilute that into my vision. I mismanaged the hell out of that. We argued a lot about it and I think this happens a lot. Teams break up where people don't like working together because somebody Fs up and they have a fight. We have tons of fights all the time, but that's a level up. You have it, you make it through it, and that's an investment in each other and the future because we've stayed together.

There were times where very early on they would leave the office. We used to meet at an office. We don't even have office space anymore, but we used to do that every once in a while. They'd leave and I'd think maybe they're going to quit, maybe they're done with me, maybe we can't fix it. Those don't exist anymore and I think it’s because we always came back. It wasn't like I'm leaving or whatever, but we always checked in the next day and kept working on it and investing in each other.

That sticking together has paid off. That's one isolated funny example with Reagan, but there's nothing I like more than designing with Reagan. I feel like co-writers would feel. I need your ideas to make my ideas better. I feel totally fine by myself but I like it better when I have my two guys. We know each other really well and we can get through ideas really, really quickly because now all those arguments happen instantaneously by the way we look at each other. It’s like I know what you're thinking, don't even say it, fine, you win, these very quick things. We've done this over and over every day for years and we're going to keep doing it.

And it compounds as well, doesn't it?

Oh it absolutely does. You figure each other out and it’s like a marriage. It’s like a GPA. We have these arguments, we probably won't have them again because we've learned something new. Add that to the stack, add that to the stack, and we're pretty safe now. I have to really say some dumb stuff, knock on wood. I'm totally capable of doing that, but I think if there's anything I'm proud of, we've done cool sites, we've lucked out, and we've been into some pretty cool projects, but there's nothing that means more to me than the team, these two guys that I work with.

We all have families now. We're all married. Holy crap, I paid Dave $80 to build a website and I remember our first site we got $300 for a fraternity website. We were like how would we ever make a living doing this and we are and we have children. What else is there? To see all of us do this together and the core of that and the reason why we've been able to stay together is because we've invested in each other and we've been patient with each other. Like that advice my dad gave, find something that works and stick with it and be consistent and the rest will take care of it self and so far it has.

Coming to a close now. What's the message that you would like to leave with the audience?

Shit, beyond what I just said, I don't know. Let's see, I think that's it though. Whether you're working at a company or working with a team or anything, I think it really boils down to the people around you. You can learn from them. Those are all opportunities. You can get shuffled around a lot, but I think investing in people is where everything begins and ends. We work on the web, it’s a very impersonal place when all you see are avatars and you can get away with things that you would have no business doing to somebody's face in person. It’s important to remember that attached to all those things, whether they're co workers or people in the industry, those are attached to people with families and problems.

I think just cut everyone slack and invest in each other. I think that's the web that I'd like to be a part of and the web that I've benefited from significantly. That's where we share knowledge, we share tools, we share advice and all that stuff. Just work hard and be nice, there's nothing really else to it.


Welcome to Dorm Room Tycoon

Interviews that cut to the chase and extract wisdom. Learning from the most influential innovators. Hosted by William Channer.

A great learning resource.
Jason Fried

Join our world

Follow us on Twitter, subscribe on iTunes or SoundCloud and enter your email below to get new interviews.