Responsive Web Design Pricing

Transcript from the "Pricing" Lesson

[00:00:00]
>> [MUSIC]

[00:00:04]
>> Ben Callahan: I wanna walk you guys through a few things that I feel like [COUGH], some mistakes that I've made, and a little bit of, I don't know, a bit of experience that I've had that I feel like I need to kind of be sharing with people as I talk about some of these things.

[00:00:20] I get asked all the time, how do you price this work? What does a responsive website cost? And the answer to that is as ambiguous as what does a website cost, right? I mean, it depends on how much time it takes [LAUGH] in my world. And so what I've tried to do is, we're very diligent about tracking our effort on projects.

[00:00:44] We track every hour that we spend on a project. And so what I've been able to do is kind of look back at those numbers, compare those to similar projects that were not responsive projects, and start to see what kinds of increases we're seeing or decreases are we seeing.

[00:01:00] And these numbers are always changing. I'm not gonna give you dollar figures, I'm gonna give you a percentage increases, okay? The other thing that's important about some of this is you need to make sure that you're comparing apples to apples. So your process, you can't take a process where you don't have content discovery and you don't do any of those kinds of planning deliverables like we talked about, and then do all of those things and compare them to that dissimilar process.

[00:01:25] So you need to make sure that you're kind of thinking about what have you added on top of what your standard process was. We've seen our first couple sites as much as double in terms of the amount of effort it took for us. But this was us kind of reaching blindly in the dark [LAUGH], not really understanding what was going on, trying to figure these things out.

[00:01:47] And then, quickly thereafter, we got down to just 50% more. And we're starting to kind of settle at around 25% more time is about what it takes us to do this. Now, interestingly enough, sorry, go ahead.
>> Speaker 2: I just wanna know, when you say soon after, how long do you think it takes?

[00:02:04]
>> Ben Callahan: After a couple sites, a couple sites, so two or three sites in, we saw that 100% drop significantly. It's like we just figured a couple things out [LAUGH] that we didn't have to go back and rework, and go back and rework as much. So that was very quick, the 25% more was sort of a longer period.

[00:02:23] I mean, you can imagine what this chart looks like, it's that long tail. And I don't know that we'll ever get to what it was before, but I am seeing now that the changes, the small changes, we're making in our process, things like doing a style prototype first instead of a full comp in Photoshop.

[00:02:41] Things like that are having impact on the amount of time that it takes us to do this stuff. And we're getting closer and closer to the same amount of time it used to take us. I don't know if it'll ever be less. I can't see that happening, but we're getting it down.

[00:02:55] We're starting to figure some of these things out. And it's important, too, to note that content driven sites where a lot of these patterns have kind of emerged and we're starting to see some really good solutions, are a bit different than working on an app. More complex interactions that you have to make work and rethink components at smaller resolutions.

[00:03:17] You could spend lots of time, lots more time, trying to think through some of those things.
>> Speaker 3: Did you find that your sites end up being simpler?
>> Ben Callahan: Do you mean because we're doing responsive?
>> Speaker 3: Yeah.
>> Ben Callahan: I've found that we ask a lot of those questions up front.

[00:03:33] Some are sort of this mobile first mentality saying, hey, you're telling me that you don't think that functionality is needed at small screens? Well, why is it needed on larger screens? We're not afraid to have those conversations, but, no, we try not to dumb them down, if that's what you mean.

[00:03:50] We try to still have a site that's very usable and that meets sort of what people would expect to see in top tier web design at high resolutions, as well. And just trying to take those things and shift the interaction models enough to work well on touch at smaller resolutions.

[00:04:08] Yeah.
>> Speaker 4: Do you think the maintenance going forward becomes more or less with a responsive website?
>> Ben Callahan: Well, there's more CSS, so there's more maintenance costs there. Now, is it exponentially more? I don't think so. At Sparkbox we try to also offer training when we do this stuff.

[00:04:29] I don't know how you guys have done this, we've always done this with our websites. But what we do now is we offer a level of sort of responsive training to their dev team if they're gonna maintain it. So we'll come in and do a little bit of consulting, help them prototype it, build and write some production code.

[00:04:45] And then come behind with a little bit of a training where we can sit down with their primary designers and developers and talk through some of these process changes and some of the techniques we used to do this stuff. Those kinds of things go a long way in helping maintain.

[00:05:01] And a lot of times it's like teaching them how to use SAS. They've never used some of those tools before, but they do go a long way. The kinds of things that are increasing this are things like project management costs. It's more PM time to do this. I feel that I'm constantly sort of interacting with my client to make sure they're coming alongside this different process.

[00:05:25] [COUGH] There's fewer patterns out there. We've built websites for a long time, but we've only been doing this stuff for a couple years. There isn't the same volume of solutions, ready to use solutions, out there like there are for other kinds of web design. It's more code, so it takes more time coding.

[00:05:47] And testing, we spend a lot of time testing. I mean, you can imagine [LAUGH]. No longer are we sort of limited to a handful of desktop browsers. Now we're trying to build something that works on all those browsers at any viewport width, and on all of these devices that have multiple browsers on them.

[00:06:07] So this just exponentially increases the testing. We're gonna talk about testing as well. The other thing to keep in mind when you're comparing pricing is if I tell you that it's gonna cost, say, 50% more to build a responsive site than a fixed width site, you've got to understand is the value you're getting for that is significantly greater, too.

[00:06:31] The real comparison would be build me a fixed width site and a mobile specific site and compare that price to a responsive site, right. When clients start asking those kinds of questions, that's a good conversation to have, say, well, you have to have a solution for mobile, right.

[00:06:47] I mean, we've seen this growth chart, you've got to do something. You're rebuilding or redesigning now, you need to be thinking about mobile. How do you want to approach it? Mobile specific, responsive? And when you start to look at those numbers, the percentages are not higher, they're lower.

[00:07:01] At least that's what we're seeing. Plus maintenance, now I'm maintaining a single code line. So there's some real robust selling points, I guess, is what you might call them. Questions on pricing? Those of you who said you had built sites, are you seeing that same kind of range or are you seeing anything different?

[00:07:21]
>> Speaker 5: My experience is having each page as its own responsive kind of solution. Each page has a different set of solutions. So the designer delivered a mobile comp, and a desktop comp, and there's not the same type of grids. So it's kind of like looking, well, coming up with an intuitive way to make this responsive and fill in the gaps.

[00:07:59] And then each page ends up becoming its own solution where there's different ways that you have to switch images. I found that to be the most taxing, and I'd say as much as double to triple the amount of work.
>> Ben Callahan: Okay.
>> Speaker 5: Because each page was coming up with its own solution versus how do you take the mobile version and fill in all the gaps, tablet and all these different sizes of tablets all the way to desktop, and make it look really good for all these different screen sizes.

[00:08:39] To me it felt like way, way more work. But, I mean, yeah, I'm getting a lot better at it now, and so it's less and less. As it gets Integrated into your process ahead of time and your psyche and you're just kind of used a flexible model, it gets a lot easier because you're asking the hard questions upfront.

[00:09:05] But I would say the first few sites it was like double or triple because each page warranted its own set of midi queries. It wasn't like there was a common template across lots of different settings.
>> Ben Callahan: Yeah, I mean when we started doing sites, we picked our own site first so we made a lot of mistakes on ourselves, which I'm okay with.

[00:09:31] And so we did that and it took us forever. And then we did a site for a client, they didn't even ask for responsive. We just said, you know what, we believe in this enough, we think it's going to change the industry enough, that we're just going to do it.

[00:09:45] And we still met all of the needs that they had at their larger resolutions, we just delivered a lot more than that. The pricing was about 125% of what I would have charged them. And we probably spent 175% of the time, so we lost a little bit on the job.

[00:10:01] But that was a no-brainer for me. My team is learning a new skill set, of course we're gonna lose a little bit on the first few. And I think that's kind of what it takes. You kind of gotta step out a little bit and you've gotta do it.

[00:10:16] If you're internal in a company somewhere, I'm not telling you to ask for forgiveness as opposed to permission. But, I mean, start to use percentages and components, and then fix the width of the container. Just get a little bit of practice thinking about that flexibility. And then later when your manager says hey, you know what, I read about responsive web design, we should be doing that, you can say, yeah, check this out.

[00:10:42] Boom, one little change, and all of a sudden things are flexing. I mean, those are the kinds of things that I think we need to be doing. We never fix widths of things anymore. Even if it's a fixed width element in some weird way that we're building, it's percentage based with a wrapper that locks it down, so that in the future we can open that up, we can set it free [LAUGH].

[00:11:01]
>> Speaker 5: And then you mentioned patterns, that you showed responsive to Brad Frost.
>> Ben Callahan: Yeah, I haven't shown that. Brad has a huge repository just full of all kinds of different patterns. I can't remember the URL, but you just search for Brad Frost patterns. And he's Brad_Frost on Twitter, tons and tons and tons of great content.

[00:11:26] This guy is just incredibly prolific. He's in Pittsburgh, he works for RGA, really nice guy. And BradFrostWeb.com is his site. Just always generating content about this stuff, a really forward thinker.
>> Speaker 5: And stuff like that, the pattern library and also migrating to mobile first, I feel like has really reduced the cost, so it's getting closer.

[00:11:52]
>> Ben Callahan: Yes.
>> Speaker 5: But, I mean, like you said on your own first site it was probably three times.
>> Ben Callahan: Yes.
>> Speaker 5: So, I agree with that, you kinda have to go through that.
>> Ben Callahan: Yeah.
>> Speaker 5: Those growing pains.
>> Ben Callahan: Yeah, you definitely do. Other questions or thoughts on this?

[00:12:12]
>> Ben Callahan: Okay.