You've already started watching Responsive Design and the Web Design Process - Ben Callahan
Ben Callahan, president of Sparkbox, sits down with Treehouse to discuss responsive design, the web design process, and the Build Responsively initiative.
-
0:00
[? Music ?]
-
0:03
[Treehouse Friends]
-
0:07
[? Music ?]
-
0:15
Hey guys, it's Allison Grayce here for another episode of Treehouse Friends.
-
0:19
I'm here in Orlando, Florida at the In Control Conference
-
0:23
with Ben Callahan, the president of Sparkbox.
-
0:26
Ben, thanks for being here today.
-
0:28
My pleasure.
-
0:30
So tell us a little bit about Sparkbox and also the Build Responsively workshops.
-
0:35
[Ben Callahan] [President, Sparkbox] Let's see, we started officially in 2009.
-
0:40
There were 4 of us at that time,
-
0:42
and we went by a different name at the time, Forge,
-
0:46
and that's actually still the company name, but we work as Sparkbox now.
-
0:50
We kind of reinvented ourselves in the beginning of 2011,
-
0:54
and we really started to feel like there was some space
-
0:59
available for us at least to specialize a bit more
-
1:02
on trying to build sites that worked at any resolution,
-
1:06
responsive web design in particular.
-
1:08
At that same time, we had purchased a domain called Build Responsively,
-
1:12
jokingly thinking about the idea of drinking responsibly,
-
1:15
and weren't quite sure what to do with it,
-
1:18
and we had been learning a ton the year previous about how to do this stuff,
-
1:22
and somebody had suggested that we start to share some of the things we were doing,
-
1:28
and so we started to do that on our blog The Foundry on our site.
-
1:33
And we just really got the itch for this idea of a culture of learning
-
1:37
in our office itself, and so we started to speak a bit more about it
-
1:43
and organize the whole workshop series that we did last year.
-
1:47
We mostly focused in the Midwest, but we did maybe 6 or 7 events,
-
1:51
and they were 2-day events, which took a lot of work.
-
1:55
This year we decided to try and attach to some bigger conferences,
-
1:59
like In Control, actually, and so that's worked out really well.
-
2:02
We've got at least half a dozen lined up for the year.
-
2:05
We're really excited.
-
2:07
We try to think about the techniques that are needed in responsive web design,
-
2:10
but we try to think about it from an approach of
-
2:13
looking for common problems that exist in the industry
-
2:16
and ways that we can solve those problems with these techniques.
-
2:20
That way we're able to bring multiple disciplines into the conversation
-
2:25
as opposed to just speaking to front-end developers
-
2:27
or people who write CSS.
-
2:29
I think the goal is to try and keep more people engaged.
-
2:31
We're trying to invite some of the rest of the disciplines into the process with us.
-
2:35
So how involved are you with putting on the workshops?
-
2:38
Is that something that you do by yourself, or do you have a team of people?
-
2:42
The first one we did was in Cincinnati.
-
2:45
We had every single person from my company speak.
-
2:49
At that time, I think there were 8 of us,
-
2:51
and it was an amazing time.
-
2:54
Most of my team hadn't spoken in public before,
-
2:59
so I was asking a lot of them to get up in front of people
-
3:01
and share what they'd learned, but everybody really did it.
-
3:05
I mean, it was really neat.
-
3:07
Since then, there are 2 or 3 of us who really enjoy presenting a lot more,
-
3:12
something that we're pretty passionate about--
-
3:14
there are actually 4 of us probably--
-
3:17
and so the 4 of us focus on doing most of the presenting,
-
3:20
but everybody helps with content development,
-
3:22
and we have 2 or 3 folks in the office who are really organized
-
3:25
and can help make sure things are running smoothly
-
3:29
and on schedule and getting the events planned and all that.
-
3:32
Well, while we're on the topic of speaking,
-
3:35
have you always been comfortable with speaking in front of people
-
3:37
and sharing your knowledge, and what advice can you give to people
-
3:40
who are thinking about maybe teaching or
-
3:43
starting their own workshops or starting a blog?
-
3:46
How do you find the confidence to start sharing what you know?
-
3:49
You know, it's funny.
-
3:51
For a long time--I actually haven't done much speaking, to be honest.
-
3:54
Let's see, I guess last year in January was the first time I ever spoke in public,
-
4:02
and that was at CodeMash up in Sandusky, Ohio,
-
4:04
which is a bunch of devs that get together and eat a ton of bacon, basically.
-
4:09
But it feels natural to me, so I don't know that I have anything to say
-
4:15
that's wisdom for how to do it.
-
4:17
It's just I guess at some point enough people told me
-
4:20
that we were smart, and so I don't really feel like
-
4:25
we're that far ahead of other people, but I do think that
-
4:29
we're just willing to share everything that we know.
-
4:31
The truth is as I've traveled around and met a bunch of people
-
4:34
who come to these workshops and other conferences,
-
4:37
everybody that I meet has something that I can pull from,
-
4:40
and so these engagements for us and what we're speaking
-
4:44
are more--we get just as much out of them from speaking
-
4:48
and learning from the people who attend as they do from us,
-
4:52
maybe even more, so encouragement, I would say
-
4:55
you have something that you're good at, and if you're good at it,
-
4:59
write about it to start with, just start documenting what you do.
-
5:02
It's good for you.
-
5:04
Even if nobody reads it, it's good for you to be able to go back and find that stuff,
-
5:06
but you'll see that you'll quickly get an audience,
-
5:08
because there are people hungry for this information.
-
5:10
Speaking of an audience too,
-
5:13
you're currently redesigning the Sparkbox website live
-
5:16
for everyone to see.
-
5:19
Tell us a little bit about why you decided to do that.
-
5:22
Most people don't invite people into their process like that,
-
5:25
so that's a really cool idea.
-
5:27
Why did we do it? Let's see.
-
5:29
There are probably a handful of reasons.
-
5:31
Like I said before, I feel like we're trying to build
-
5:34
a culture of learning, and so for us, it's not easy
-
5:39
to write all of the time, but we require everybody in the office to write,
-
5:43
and this gave us some really poignant subject matter,
-
5:47
I think, to cover, in terms of writing.
-
5:49
It's an opportunity to introduce the rest of the team
-
5:52
to writing more about the things, the problems that they're solving.
-
5:56
It's also a little bit of accountability for us.
-
5:59
If you're out there and you had to redesign your own site,
-
6:03
you know how hard that can be.
-
6:05
And putting it out there for the rest of our peers to see
-
6:09
and give feedback on has been an opportunity to say to us,
-
6:13
"Look, this is important to do."
-
6:15
"We have to make time for this."
-
6:17
We have to make sure that--we have obligations to clients obviously,
-
6:22
but this is just as important as that work too.
-
6:25
And for a year, we've been using our website
-
6:28
as an example of some things not to do in our workshops
-
6:32
because it's one of the first sites that we built with some of these techniques.
-
6:35
We've learned so much in a year or two,
-
6:37
and so it was time to do it.
-
6:41
Yeah, I bet that pressure too of letting everyone see your timeline
-
6:46
and opening it up for people to see really makes you stick to it and get it done.
-
6:51
Yeah, I mean, the holidays hit right in the middle,
-
6:53
so we've actually been a little quiet,
-
6:55
but later this week we're kicking it back up.
-
6:59
But to be honest, if you have the illusion
-
7:04
that what you're doing on the Web is private,
-
7:06
then you're probably mistaken, because all of our work is out there.
-
7:10
People can view source on pretty much anything we do,
-
7:13
so it's kind of the nature of the industry too.
-
7:16
You mentioned how your site was an example of what not to do.
-
7:19
What do you mean by that?
-
7:21
A perfect example.
-
7:23
If you go to the Sparkbox Foundry and go to any post,
-
7:26
and you're on, say, a small device,
-
7:29
what you will see will actually look more like a 404 page
-
7:32
than an article, and that's because we didn't think so much
-
7:35
about the usability of the site when we did it.
-
7:38
We were obsessed.
-
7:40
We got caught up in the 3 prime techniques of responsive web design.
-
7:45
What we ended up doing was taking a big site
-
7:47
and cramming it on to a small device, which is not how this should work.
-
7:52
There is a lot more to it than that,
-
7:54
and that work was primarily done by front-end developers,
-
7:59
and so one of the things that we talk a lot about in our workshop
-
8:02
is that you have to invite the rest of the team into the conversation,
-
8:08
and we speak about this idea of collaboration.
-
8:11
Obviously, everybody who has talked about this stuff and has done it
-
8:13
knows that you've got to have the right team members
-
8:16
in the room to make decisions.
-
8:18
We've actually found that we end up--
-
8:21
we do something--I don't even know if this is new or not,
-
8:24
but we call it natural decisions, because in a more linear process,
-
8:27
a more traditional process, what we've seen is one person
-
8:30
or one discipline feels like they need to finish their thing
-
8:33
and get to the deliverable and hand it to the next person.
-
8:36
They feel like they have to make all of the decisions
-
8:38
about that specific discipline early in the process.
-
8:41
What we try to do is delay decisions as long as we can.
-
8:45
We're waiting until it's the right time to make those decisions,
-
8:48
so I'm not forcing my UX people or whoever is doing wireframes or whatever
-
8:52
to have all of that done and figured out before we've gotten into the code.
-
8:55
That just doesn't make any sense. Things are too dynamic, too fluid.
-
9:00
I was talking to Samantha Warren last night,
-
9:03
and she said, "There is no responsive process."
-
9:05
"The process itself has to be responsive."
-
9:09
"It has to change for the project," and that's very true, very true.
-
9:14
So speaking of the process, there is all this about designing in the browser
-
9:20
and trying to figure out that process, because I think saying that
-
9:24
a process is responsive, bosses and clients don't like that, right?
-
9:28
So how do you think that's going to work moving forward?
-
9:33
Do you think that designers--there is less of a deliverable at the end for them?
-
9:38
Do you think that maybe--like how do you envision that process changing?
-
9:43
I said a little bit earlier that I feel like it's really more about collaboration.
-
9:46
For us, we end up putting front-end developers with designers.
-
9:52
If you know about pair programming, we do that with
-
9:55
content people and technical people.
-
9:57
We do that with every person, every discipline in our office
-
10:01
pairs with other disciplines, and we do that because
-
10:04
I want all of my team to broaden their knowledge
-
10:07
about the Web as a whole.
-
10:09
That gives them the ability to be informed at least
-
10:13
and help make better decisions when they're tasked
-
10:15
with doing something on their own.
-
10:17
But early in the process, I'll put my technical director
-
10:20
and my content director in the room, lock them in the conference room together
-
10:23
with a projector and let them figure out how to get a basis
-
10:27
for the site started.
-
10:29
Those are the 2 people that really need to be there at the beginning.
-
10:31
Somebody has to get the architecture of the thing,
-
10:33
something functional built, the technical director,
-
10:36
and somebody who understands the content early in the process.
-
10:39
Those are the 2 that have to figure out how this stuff is going to actually live together,
-
10:42
so we put them together early.
-
10:44
They get something built that we can actually use
-
10:47
during our dev process, and then we do something called style prototypes,
-
10:52
and we run that in parallel with something called a content priority prototype.
-
10:55
These are both deliverables that happen in the browser for us,
-
10:58
so it's HTML, and it's some CSS, and they're separate at this point.
-
11:02
We try to make sure that deliverables we offer
-
11:05
that aren't intended to focus on design
-
11:08
look as ugly as they can,
-
11:11
because I've been in too many meetings with beautiful wireframes
-
11:14
where my clients are commenting about colors
-
11:16
or layout or something, and it's like, "Okay, let's just cut this stuff out."
-
11:22
We show pretty much unstyled HTML
-
11:25
in what is like a prototype but with real content,
-
11:28
as much real content in it as we can very early,
-
11:30
and we do that in a linear way
-
11:32
so that they can see priority.
-
11:34
The linear nature forces us to prioritize things.
-
11:37
And then at the same time, we're working on a style prototype,
-
11:40
which is like an evolution of style tiles from Samantha,
-
11:43
but it happens in the browser.
-
11:45
Just a basic, basic HTML page, no real content at all,
-
11:49
and it's really about typography, color, texture,
-
11:51
some of the core design principles that we have.
-
11:55
Our designers build those on their own.
-
11:58
If they need a little help, they'll work with somebody who is a specialist in CSS,
-
12:01
but we're trying to get them to build these on their own,
-
12:04
because they need to know CSS.
-
12:08
I mean, there is a big conversation. I don't want to open up that can of worms.
-
12:11
But I actually believe that it's very true if you're going to design
-
12:15
for the Web, you need to learn some CSS.
-
12:17
I think this is true too.
-
12:19
If you're going to write content for the Web, you should probably learn some HTML.
-
12:21
That's semantics, right?
-
12:23
Yeah, because you used to be able to get a job as a web designer
-
12:27
knowing just a few CSS, a little bit of CSS, a little bit of HTML.
-
12:32
Now it seems like the expectations are so much higher
-
12:35
with having to know HTML5, CSS3, LESS and SASS
-
12:38
and all this stuff, so what do you think
-
12:41
a web designer needs just to get into the door these days?
-
12:44
A web designer?
-
12:47
What does that even mean? [laughs]
-
12:49
I mean, do you think there is a bigger gulf now between
-
12:51
a front-end designer and then maybe someone who is a front-end developer
-
12:55
than there used to be, or do you still think that someone should wear both hats?
-
12:58
My technical director is Rob Harr,
-
13:01
and he keeps saying this thing in the office
-
13:03
where he says that SASS--or LESS I think is one of the more popular
-
13:10
first preprocessors, but he says, "These preprocessors for CSS
-
13:15
were like a gateway drug for front-end devs."
-
13:18
What he's trying to say is that this whole front-end development thing
-
13:21
has gotten so complex.
-
13:24
I feel like front-end devs who lean technically,
-
13:27
technical in their nature are shifting towards all of this complex
-
13:31
local build process stuff with running node and grunt
-
13:35
and all this stuff to get a really cool, easy-to-use front-end development.
-
13:38
Well, easy to use if you're a technical person,
-
13:40
a front-end development tool, or environment running.
-
13:43
But then you have designers who started maybe branding in print
-
13:46
and are trying to move into this space, and they're going to learn CSS.
-
13:49
They're going to learn some HTML. That's great.
-
13:51
But they're going to shy away from even using something like SASS,
-
13:54
if they have to install Ruby or use the command line.
-
13:57
Andy Clark goes on about this.
-
13:59
"Why is this a command line?"
-
14:01
"Make this easy for me to do."
-
14:03
He's got a really valid point, which is at some point
-
14:06
the tooling that we use for doing this stuff
-
14:08
is going to settle a little bit I hope,
-
14:10
and we'll start to see there are some clear winners
-
14:12
in terms of what you should be doing.
-
14:14
And then I think the people who are less technical
-
14:17
will be able to come into that and embrace it a bit easier.
-
14:20
So there still is a place for them to co-exist.
-
14:23
It's not like-->>Oh, yeah, absolutely.
-
14:26
What is the biggest mistake you see web designers making
-
14:29
when designing responsive websites?
-
14:31
Designers like to control things,
-
14:35
and if you're going to design for the Web, you have to let go of that.
-
14:40
That's probably the biggest thing is I talk to people all the time about this,
-
14:44
and they say, "Well, when do you actually design the site?"
-
14:47
"When do you design the site?"
-
14:50
And we still do a lot in Photoshop,
-
14:54
but it's becoming more like a sketch pad for us.
-
14:57
And the implementation of that is happening in the browser,
-
15:00
and that's where it needs to happen.
-
15:02
We're trying to get away from making pictures of websites
-
15:06
as so many people are saying these days and actually building sites themselves.
-
15:10
I don't know if that answers the question.
-
15:12
So you think designers maybe get too fixated on perfection
-
15:16
of every single pixel and then the type,
-
15:19
and then they get uncomfortable when they see it actually live in its environment.
-
15:23
We used to--oh, gosh, we were so ridiculous about this stuff.
-
15:26
My creative director, Jeremy Lloyd, is obsessed with type, typography.
-
15:33
He loves it.
-
15:35
He comes from a branding background, and he cares about this stuff.
-
15:37
And I can remember times where the type in Photoshop
-
15:42
looked beautiful, but as soon as we would move it to the Web,
-
15:44
obviously it's going to look different,
-
15:47
and then the client, we were showing static comps
-
15:49
that were exported from Photoshop,
-
15:51
so clients get an expectation about type and color
-
15:53
and how these things are going to look, and I can remember times
-
15:57
when we would literally move this stuff into the browser,
-
15:59
get the Web font rendering, do a screen cap of the type
-
16:03
in the browser and bring it back into Photoshop
-
16:05
so that we could show accurate web type.
-
16:07
That's ridiculous.
-
16:10
Why don't we just put it in the browser?
-
16:12
I think it's really about letting go of control.
-
16:15
That's the biggest thing that I see, because we've wasted so much time
-
16:18
making things perfect in Photoshop
-
16:21
knowing that they're never actually going to look like that.
-
16:23
It's just not realistic.
-
16:25
So as far as responsive images go,
-
16:28
there are a few things out there, like picture fill
-
16:31
and some great options but nothing really solidified or set in stone.
-
16:34
What do you think is the best solution right now?
-
16:38
Well, things are getting solidified.
-
16:40
I think the first draft is out for both picture and source set,
-
16:45
if I recall, very recently.
-
16:47
Those things are happening.
-
16:49
There are lots of heated dialogue still happening about those things,
-
16:56
and I think that in the end, that's going to be what we really need.
-
16:59
There are tons of solutions for this stuff, though.
-
17:01
There is everything from proxy-based solutions
-
17:04
where you've got Resrc It, R-E-S-R-C dot I-T,
-
17:09
which I haven't actually tried yet, but I know that it's similar
-
17:12
to some of the stuff Sentia was doing.
-
17:16
And what that does is basically you can modify the URL of your image,
-
17:19
so it's easy to implement,
-
17:23
but it does come along with some other interesting implications.
-
17:27
What happens is you're modifying it by changing a server,
-
17:31
putting a new server basically on the front of the URL.
-
17:33
Someone else gets the request, a different server.
-
17:36
They parse out your image, which is still in the URL,
-
17:39
take it to their server.
-
17:41
Also, they inspect user/agent stuff, so they're doing some device classification,
-
17:45
scaling that image, sending it back to you.
-
17:51
Performance concerns obviously.
-
17:55
You're dependent on someone else to solve that problem for you.
-
17:58
Maybe you don't want it to be set to the size of the resolution of the device.
-
18:02
But a very easy to use kind of solution.
-
18:06
You can also do that same kind of thing on your own server
-
18:09
with a little bit of htaccess and basically grabbing
-
18:13
any image type and doing the exact same kind of thing
-
18:19
but doing it on your box.
-
18:21
Actually, picturefill is a really good solution.
-
18:24
Scott has done a fantastic job with that,
-
18:27
and if you're going to implement it, I would say do something
-
18:30
where you in your CMS give the ability
-
18:33
to at some point in the future generate the actual picture syntax
-
18:36
when it's ready.
-
18:38
But it's very well tested.
-
18:41
People are using it with great success,
-
18:43
so I think that's a very valid solution right now.
-
18:47
There are all kinds of other crazy things that people are trying,
-
18:51
but in the end, I think we need a little bit better HTML element.
-
18:55
Yeah, definitely. They're working on it, right?
-
18:57
What do you think will be the major improvements
-
19:00
to responsive web design this year?
-
19:02
Well, I feel like some bigger organizations are finally starting to get on board
-
19:05
with some of this stuff, so some of the requests that we're getting
-
19:09
for 3 or 4 ROI case studies we'll finally start to have some of that data available,
-
19:14
which I think will only encourage more to do so.
-
19:18
I think there is going to be that move from some bigger companies,
-
19:21
some big e-commerce type stuff that's going to be happening this year I know,
-
19:25
so that's really exciting.
-
19:27
I talk about this a little bit, and I wrote an article called
-
19:31
"The Responsive Dip," and it's based on the idea of how
-
19:34
humans learn things, and you move through these 4 stages of learning,
-
19:39
and I feel like we are at a stage where we
-
19:42
are finally starting to actually understand that
-
19:45
we're not really doing this quite right.
-
19:48
We have to rethink a lot more of what we've done.
-
19:51
Sometimes you actually get worse at doing something
-
19:53
before you get better, but that's kind of the idea.
-
19:55
I think for us as an industry that's part of what's happening here.
-
19:59
In Jakob Nielsen's study not too long ago
-
20:03
where there was so much--and Josh Clark responded--
-
20:05
so many people wrote back about--
-
20:07
Jakob said based on data of testing,
-
20:10
mobile-specific sites versus responsive sites,
-
20:14
he found that the usability of the responsive sites was much worse,
-
20:17
and his recommendations were to do something like
-
20:20
build a mobile site, cut content, cut features,
-
20:23
and give them a link to a full site.
-
20:25
Obviously, many people in the industry said, "Wait a second."
-
20:27
"What are you talking about? That's a bad idea."
-
20:30
"You're making a lot of assumptions about context and all these things,"
-
20:33
which I agree with.
-
20:35
But I understand how Jakob arrived at the conclusion that he did,
-
20:39
and that's because we've built very non-performance sites
-
20:42
with lousy user experiences.
-
20:45
We're learning.
-
20:48
I think in some respects we've gotten worse at doing web design
-
20:53
by trying to figure this stuff out.
-
20:56
But we're going to come out of that dip of learning,
-
20:59
and we're going to be, I think, in a much better place.
-
21:01
We're starting to see some sites come out that are demonstrating
-
21:05
that this stuff can really work, so I think this is going to be the year
-
21:09
where we start to see some really creative responsive type solutions,
-
21:14
and we start to see real organizational change,
-
21:18
which is required to invite this kind of process to happen,
-
21:23
at a bigger company in particular.
-
21:26
I think there is so much happening there,
-
21:28
and so for me, the future of this stuff, at least for the next year
-
21:32
of what I see, it's really more about the hardest stuff to figure out,
-
21:37
which is not the technical stuff.
-
21:39
It's the politics of the organization that has to adjust.
-
21:43
That's the hard stuff.
-
21:45
All the people who build sites, they see this stuff,
-
21:47
and it's obvious.
-
21:49
This makes sense. This is how it should be.
-
21:51
We're finally embracing the fluid nature of our medium.
-
21:55
But it's the people who aren't as technical
-
21:57
but who are making money decisions, financial decisions
-
22:01
in an organization and have to say, "Yes, it's okay
-
22:04
"for you all to sit together in the same room
-
22:07
"and for me to not know exactly how long this is going to take
-
22:10
the first couple times you do it."
-
22:12
That's a hard decision for a financial person to make,
-
22:16
business person.
-
22:18
Well, I think that's a great place to wrap it up,
-
22:20
with the future of responsive web.
-
22:23
Where can they keep up with your work and keep up with you?
-
22:26
The Sparkbox website, SeeSparkbox.com,
-
22:29
and on Twitter, just BenCallahan, all 1 word.
-
22:33
I have BenCallahan.com if you want to see
-
22:35
where I'm going to be speaking or what I'm writing about,
-
22:37
those kinds of things, and then the Build Responsively
-
22:41
workshop is coming around, so try to find one of those,
-
22:43
and we'd love to meet you guys there.
-
22:45
Cool. Well, thank you for joining us today.
-
22:47
My pleasure.>>Until next time.
-
22:50
Thanks for watching.
-
22:52
[Treehouse Friends]
You need to sign up for Treehouse in order to download course files.
Sign up