Craft-y Sites

Lea Alcantara: This episode is sponsored by Visual Chefs: web development focusing on content management system integration and custom web application development. Visit visualchefs.com to find out more.

Emily Lewis: CTRL+CLICK would also like to thank Pixel & Tonic for being our major sponsor of the year. [Music ends] Hi Lea, how are you doing?

Lea Alcantara: Pretty good. I have my sister in Seattle this week, so it’s been kind of like a mix of busyness, personal busyness and professional busyness.

Emily Lewis: Yeah, well, you’re trying to get a lot of stuff done before you head out of town this weekend, right?

Lea Alcantara: Yeah.

Emily Lewis: You’re going to Portland for EECI?

Lea Alcantara: Yeah, the ExpressionEngine Conference this, what, Monday, I think?

Emily Lewis: [Agrees]

Lea Alcantara: Yeah, yeah. I’m excited to see the gang. [Laughs]

Emily Lewis: Yeah, I think that will be a nice trip for you, and you’re staying an extra day in Portland to give a presentation yourself?

Lea Alcantara: Yes, I’ll be giving a presentation at Refresh Portland on — let me check the calendar — the 16th which is the Wednesday evening. So just before we get this podcast out, I’d have already done it, but…

Emily Lewis: Yeah, but…

Lea Alcantara: Yeah, I’m excited about that because I’ll be talking about the topic that I pretty talk about all the time which is personal or self branding, but I’m hoping that it’s a little bit more interactive this time, a little bit more discussion based…

Emily Lewis: More intimate…

Lea Alcantara: Yeah, yeah, because when you do the same kind of presentation all the time, I think it’s useful, but you kind of get bored of presenting. [Laughs] So you’re always thinking, “Well, what’s the best way to convey similar ideas but maybe more intimately or more interactively?” And I am trying to move away from talking at people versus let’s see what they have to say, then let me react to that response.

Emily Lewis: Yeah, that’s one of those things that I see myself evolving in the presentations I’ve been giving because I’ve been trying to give the same presentation this year with the hopes that it would just get easier each time.

Lea Alcantara: Sure.

Emily Lewis: And to a degree it does. I haven’t reached that sort of “boredom” thing.

Lea Alcantara: [Laughs]

Emily Lewis: But I do find that when you speak more regularly, and especially if you’re doing the same talk, I find myself getting more focused on how can I mold this talk to this particular audience, and like a Refresh group, that’s going to be a little different than what you are dealing with that Converge earlier this year, and so it makes total sense to sort of evolve it just a little bit for the audience.

Lea Alcantara: Yeah, because especially like in Converge, the venue itself really affects how you talk too because in Converge, it was a theater-style room. Actually, it was literally a theater. It was a movie theater converted.

Emily Lewis: Yeah.

Lea Alcantara: And so in that case, you really are doing “presentation” and even though you try to get the audience to stuff or whatever, it doesn’t feel as interactive especially because there are more people to deal with than when you’ve got perhaps a smaller group then there are more stuff that you can do, and you can talk directly at people without seeming like you’re just randomly choosing someone from the audience.

Emily Lewis: Yeah. I wish I could be there. I mean, it would be nice to go to the ExpressionEngine Conference, but I’d really like to go to the Refresh Portland Meetup.

Lea Alcantara: [Agrees]

Emily Lewis: Matthew Oliphant who puts it together is definitely one of my favorite people so it should be a good event. I’m jealous. [Laughs]

Lea Alcantara: [Laughs]

Emily Lewis: So before we get to today’s episode, let’s talk about some news. So Arcustech who we have our own CTRL+CLICK CAST running off of is now officially live and taking orders, and we’ve been really happy with the service so good luck to them.

Lea Alcantara: Yeah, it’s been really fast with the website.

Emily Lewis: [Agrees]

Lea Alcantara: And I’m excited to see how our clients like it too.

Emily Lewis: I know I’m going to set up one of our clients with them next week.

Lea Alcantara: Yeah, fun times.

Emily Lewis: So we also have just some news for our listeners. We have one sponsorship available on the site. We’re pretty much filled up through January 2014 with all of our other sponsorships, but we do have 125 by 125 site sponsorship ad available. If anyone is interested, they can contact us at ctrlclickcast.com/contact.

Lea Alcantara: And we’ll talk about this more with Brandon, but in the CMS news world, Craft has been really busy with updates.

Emily Lewis: [Agrees]

Lea Alcantara: Even from our last episode, they’ve released a few more build updates including some enhancements to a pagination which I actually bugged Brandon about that we are really loving with our current project. They even created a help article that essentially shows you step by step how to implement that new feature.

Emily Lewis: Cool. Yeah, I’ll ask Brandon about it, but I’m just sort of amazed at the rate in which they are updating.

Lea Alcantara: [Agrees]

Emily Lewis: So it’s unfamiliar to me at least. Also, Perch CMS, they’ve always offered an API from the earliest days of release, but they’re seeking more add-on developers. They’re seeking ideas and feedback from PHP developers interested in helping extend Perch via add-ons, and so we’ll have some links in our show notes if anyone is interested. In addition to that Perch news, and I’m not even sure if this is news or just new to me, but I’m getting ready to build my first Statamic site.

Lea Alcantara: [Agrees]

Emily Lewis: So I noticed that there’s a cheat sheet, and I thought that was pretty awesome because I’m just a huge fan of documentation in several different kinds of formats because everyone learns differently, and I find that I learn some things in one way and other things in other way, so we’ll have a link to that cheat sheet in our show notes, and the last bit of CMS news is an ExpressionEngine release, the security and stability release with 2.7.2 yesterday so we’ll have a link to that so you can see the change log in our show notes.

Lea Alcantara: I mean, that sounds like EE really is keeping up with their updates, rapid update schedule I guess.

Emily Lewis: Yeah.

Lea Alcantara: And ramping up for the conference.

Emily Lewis: Oh, yeah. [Laughs]

Lea Alcantara: Yeah. [Laughs]

Emily Lewis: That makes a lot of sense. [Laughs]

Lea Alcantara: Sure.

Emily Lewis: All right, so enough about news. Oh, I do want to say one thing. I’m really stoked right now because I’m recording this with my new Rode Podcaster mic.

Lea Alcantara: Ooooo!

Emily Lewis: I know.

Lea Alcantara: [Laughs]

Emily Lewis: You’ve had one from the beginning and I ended buying a Blue Snowball microphone when we first started out.

Lea Alcantara: [Agrees]

Emily Lewis: And it’s small, but I can totally hear a difference in the audio quality between our voices.

Lea Alcantara: Yeah.

Emily Lewis: And so I finally decided to make the investment, and it’s big. [Laughs]

Lea Alcantara: Yeah, it’s heavy.

Emily Lewis: It’s big and heavy.

Lea Alcantara: Right?

Emily Lewis: [Agrees]

Lea Alcantara: You can kill someone with this thing. [Laughs]

Emily Lewis: You really could. I could just walk around with my purse with this and whack them over the head. It’s like a stick, it’s crazy, but I can hear the sound difference.

Lea Alcantara: Yeah, it’s just clearer tone, I think.

Emily Lewis: It’s definitely worth it so far at least.

Lea Alcantara: [Agrees]

Emily Lewis: So anyway, today we’re talking about the Craft CMS with our guest, Brandon Kelly. Brandon is the owner of Pixel & Tonic, the makers of Craft and some fantastic ExpressionEngine add-ons. Pixel & Tonic also provides front-end and back-end consulting as well as user interface consulting. I’ve known Brandon for a few years now. In addition to being a really great developer and business owner, he’s an incredibly nice guy who is more helpful than it makes humanly sense.

Lea Alcantara: [Laughs]

Emily Lewis: Well, welcome to the show, Brandon. We’re so happy to have you.

Brandon Kelly: Hey guys, I’m happy to be here.

Lea Alcantara: Awesome. So Brandon, can you tell our listeners a little bit more about yourself?

Brandon Kelly: Yeah, absolutely. I live in the Bay Area. I’ve lived here my whole life. I married a couple of years ago and we’ve got a two-year-old daughter, and we’ve got another one on the way.

Lea Alcantara: Oh, congrats.

Brandon Kelly: Thank you, and we’re actually already on our second house down here in Morgan Hill.

Emily Lewis: I’m just curious, you mentioned you’re in your second house. Do you work from your house?

Brandon Kelly: Yeah, I do. We just moved into our new house and it’s got three bedrooms and we only need two right now, so I’ve got one to myself for my office, and once the new kid comes, then I’ll probably find something local that I can walk to.

Emily Lewis: Has it been hard working from home with a toddler?

Brandon Kelly: No, that’s not so bad. She’s out of the house most of the time. My wife takes her on play dates and stuff like that, so most of the day it’s quiet, and the only time I ever actually hear her is when she’s screaming her head off before her nap time.

Lea Alcantara: [Laughs] Nice.

Brandon Kelly: But outside of that, no, it’s perfectly quiet.

Emily Lewis: Cool, so let’s talk about the work that you do from your home office. Let’s get to the point, you started out with Pixel & Tonic. One of the things you guys did was building some really fantastic add-ons for ExpressionEngine, Matrix, Playa, Wygwam, and then, what, a year ago you decided to release a CMS of your own called Craft. So why did you decide to move from add-ons to an actual full CMS?

Brandon Kelly: That was a big decision.

Lea Alcantara: [Agrees]

Brandon Kelly: When that happened, we officially decided to do that almost three years ago now.

Lea Alcantara: Oh!

Brandon Kelly: It was January of — I want to say — 2011 I guess.

Lea Alcantara: Yeah.

Brandon Kelly: There was a number of reasons to do that. I don’t think that any of them were remotely rational.

Lea Alcantara: [Laughs]

Emily Lewis: [Laughs]

Brandon Kelly: Looking back, I mean, this has been such a huge job and it’s been so much work and it’s taken so much time, and it has had such an impact on our lives, every aspect of our lives. I don’t think that there was a possible rational decision that could have been made that ended up making the CMS. So ultimately, it’s just something that I’ve wanted to do for a very long time. I’ve actually had thoughts about making a CMS since before I even knew about ExpressionEngine. It’s something that both Brad (Bell) and I have had a lot of experience in ExpressionEngine and outside of it. Yeah, and for whatever reason, it just seemed like the right decision. It seemed like the right next step for Pixel & Tonic.

Emily Lewis: [Agrees]

Brandon Kelly: And ultimately, it comes down to it was something we just really wanted to do.

Lea Alcantara: [Agrees]

Timestamp: 00:09:59

Emily Lewis: Like as a developer, you wanted to sort of stretch your skills, or was it something like you wanted to see and have another option for your clients or something else, all of the above?

Brandon Kelly: Yeah, in a way you could say it was kind of based on a decision for offering something better for our clients. However, keep in mind, we’re not a client services company, or at least we’re not primarily. So when I say that, I’m really thinking clients as like our customers as people that are buying our products.

Emily Lewis: [Agrees]

Brandon Kelly: A lot of the specific features that have ended up in Craft have been solutions to very common challenges that we were facing both in trying to write add-ons and trying to solve people’s problems. So if you look at it from that perspective, then yeah, it was kind of a decision on behalf of our clients, I guess. But part of it, it was a really fun challenge. It’s sounded like a really fun challenge, and it ended up being much more fun than we even could have anticipated, and that’s really the only thing that has kept us going, it’s just that it’s so much fun.

Emily Lewis: [Agrees]

Brandon Kelly: It’s a lot of fun to work on, and it’s a lot of fun now that it’s out there to actually help people out with it and all that kind of stuff. So the whole time, there’s just been a lot of kind of morale support and stuff like that that’s kept pushing us.

Lea Alcantara: That’s awesome. So I’m sure a lot of our listeners are curious then. Are you still committed to ExpressionEngine add-on development? I mean, you still obviously sell a lot of add-ons through Pixel & Tonic.

Brandon Kelly: Yeah, absolutely. As soon as we decided that this was going to be a serious thing, and it went from just being a little pet project to like let’s actually do this, that’s the point when we hired Andris (Ševčenko), and the entire reason that we were looking for someone is we knew that we needed someone that could be pretty much dedicated to our ExpressionEngine add-ons.

Emily Lewis: [Agrees]

Brandon Kelly: Not just to support because we all support them, but to keep them moving forward. At the time that we made the decision, that was leading up to and kind of like right after Assets 1.0 came out, and within like a week or two of 1.0, we already had this mile-long list of things that we wanted to do to it, and it quickly became apparent that like we’ve to pretty much completely gut it and all the stuff that we wanted to do would end up happening to be a 2.0 thing, and the only way that we could possibly manage that huge list, which ended up being like twice as much work as Assets 1.0, the only way we can possibly do all that and work on the CMS at the same time was to hire someone to do it to help us out with it anyway.

So we hired Andris and he’s been pretty much full time doing ExpressionEngine development ever since he was hired, and you could look back, like we’ve been working on this for almost three years now, at least two and a half for sure, no one would have known that just from looking at our ExpressionEngine add-on release notes. We’ve kept up the pace on all of our add-ons. We’ve kept introducing new stuff. I mean, just yesterday we released Assets 2.2, and that was like a really huge update.

So yeah, we’re definitely committed, and we’re still considering ideas for new add-ons, but that’s never really been our thing. We’re never really looking for something new to write. It’s a big decision to make any new product, whether it’s an add-on or the CMS so we’re not necessarily like looking for stuff, but we’re definitely considering new opportunities as they come up.

Emily Lewis: So I’m curious, your site I would guess is buildwithcraft.com, is run on Craft?

Brandon Kelly: Yeah.

Emily Lewis: So would you use any other CMSes for a personal or even a client project, or you’re pretty much kind of committed to Craft for your content management solutions?

Brandon Kelly: If I was doing a lot of client work, then absolutely. I’m a big believer that you’ve got to find the right tool for the job, and also, just from the standpoint of the fact that I’m working on Craft, I’m not opposed to getting in a position where I have to like learn someone else’s CMS.

Emily Lewis: [Agrees]

Brandon Kelly: Because everyone out there is doing things that are interesting, and so I mean, part of me would look at it as an opportunity to get an idea of like what’s so great about Perch, what’s so great about Statamic, what’s so great about WordPress, and all that.

Emily Lewis: Well, that brings me up to the question, what’s so great about Craft? What makes it stand out and unique?

Brandon Kelly: [Laughs] There is a lot of things that I could point to, but I think the biggest thing is under the hood, which is that we’ve kind of architected this thing to be what we considered to be like the next generation of what a content management system should be. So under the hood, there’s just a lot of consistency in the way that everything works, everything is managed together, and I really think that we’ve done, and it’s not sexy to say this, but what we’ve done is we built what I think is the first true content management platform where it’s going to be really easy going forward for people to build on top of this and add new types of content to be managed where entries and users and assets and tags and all the stuff that’s already in there, those are all just features on top of this existing platform.

So ultimately like to me, that’s the big thing. The big thing is the possibilities that people are going to come up with on top of this. But all that underlying work has manifested itself in our ability to create really, really cool features like the Live Preview feature in entries, like our live Asset transform functionality, like all these different things that we’ve done.

I don’t know if there’s any single thing I could point to that’s something that you could see just from looking at it and say, “This is the killer for Craft.” I think that right now it’s mostly just everywhere you look within it, everything is just better. Everything is just nicer and all these different pain points that you’re used to are not there, and yeah, the whole thing is very client friendly and all that kind of stuff.

Lea Alcantara: Well, it sounds though that a lot of the benefits are very developer focused, and Emily and I are coming from more of a front-end developer and designer perspective. This leads me to the question like, is Craft really targeted mostly to a developer that understands programming, or what’s the target market?

Brandon Kelly: I would say that it’s not quite as designer focused as ExpressionEngine, for example, in that the templating definitely has a steep learning curve in some respects, and that has proven to be a little bit of a roadblock for people that refused to learn any sort of programming concepts.

Lea Alcantara: [Agrees]

Brandon Kelly: Although it is very focused on people that want, and I used the word designer in like people that do Photoshop and people that maybe do HTML but would never touch JavaScript and stuff like that.

Lea Alcantara: Sure, sure.

Brandon Kelly: Like I’m talking pure designer.

Lea Alcantara: [Agrees]

Brandon Kelly: It is very focused on people that want to control HTML and want to come up with a very custom experience for their clients.

Lea Alcantara: [Agrees]

Brandon Kelly: And usually if you’re a designer and you don’t know that and don’t want to deal with any kind of code, usually you are paired with someone that does and it’s probably still going to be a good fit for you. All of the back-end stuff, the PHP-facing stuff, I’m very proud of that. That’s what I’m mostly working with.

Lea Alcantara: [Agrees]

Brandon Kelly: But we definitely focused on trying to make it approachable. Maybe not to people that are like 100% against doing any sort of coding, but definitely to people that are okay with getting their feet wet a little bit if it’s for the sake of coming up with something really cool.

Emily Lewis: Lea, this makes me think that maybe we should ask you, you just finished doing the Craft CMS for one of our clients.

Lea Alcantara: [Agrees]

Emily Lewis: I gave you the HTML and CSS and then you turned it into templates.

Lea Alcantara: Yeah.

Emily Lewis: So what was your experience? What was the learning curve like for you?

Lea Alcantara: Well, I would say definitely it was a steeper learning curve than, say, ExpressionEngine.

Emily Lewis: Even compared to like your very first ExpressionEngine site?

Lea Alcantara: Yes, because it’s like learning a language really like English or Spanish or French or something like that. You can understand the concepts, you can understand sentence structure, and you can try to say the same thing, but you kind of struggle a bit when you’re trying to say the same thing in Spanish versus French versus English, and of course, I’m fluent in English so it doesn’t take any brainpower for me to say a sentence.

Emily Lewis: [Agrees]

Lea Alcantara: And so the same thing happened with me with Twig. Twig is the language parser. I don’t know what the proper terminology would be.

Brandon Kelly: It’s a little bit of both.

Lea Alcantara: Yeah. Twig is what you use to template with Craft, and for me, I think the biggest struggle really was figuring out the vocabulary so I can find exactly what I needed to do. So for example, we kind of hinted at it with the pagination, and for me, my idea of pagination was slightly different than what Craft’s idea of pagination was because I had a different expanded idea of what it was.

Emily Lewis: [Agrees]

Lea Alcantara: So after talking with Brandon a little bit when I struggled with one section of our client site, he was like, “Well, you’re not really paginating, you’re just trying to go to the next entry.” But when you’re coming from a different CMS where they’re using the term “pagination” to do that functionality, right?

Emily Lewis: [Agrees]

Lea Alcantara: So they’re using the term in their context for that, then that’s where I’m coming from. So part of the struggle was really like, “Okay, I’m trying to do this, how does Craft explain what this is?” Right?

Emily Lewis: [Agrees]

Lea Alcantara: So I mean, that was half the struggle of like I know what I wanted to do, what’s the phrase?

Emily Lewis: [Agrees]

Lea Alcantara: What’s the phrase that explains what this is? So that was the majority of it, otherwise, it’s just like little syntax things, and that the syntax things actually wasn’t really that hard. It’s like “Okay, I’m going to use double curly quotes and percentage signs.” That part wasn’t a big deal. It was mostly just trying to figure out how do I translate my phrase to Craft phrase so then I can figure out the functionality.

Brandon Kelly: Yeah.

Timestamp: 00:19:56

Emily Lewis: Now, Brandon, is that kind of common in terms of what you’re seeing with new users coming to Craft, especially they’ll be coming from some other kind of CMS?

Brandon Kelly: Yeah, I think definitely with the templating, there’s an element of unlearning what you already know and trying to come at it with a clean slate, and part of it, I think honestly what we’re seeing mostly regarding just general fear of people before they’ve actually try to dive in is more of just the simple syntax stuff that Lea was touching on that she found ended up not being that big of a deal.

Lea Alcantara: [Agrees]

Brandon Kelly: So people look at Twig and they see a lot of stuff that they’re not used. I think of it kind of like if we’re going to go with ExpressionEngine or similar templating languages, those templating systems have specific features and like very specific things that you can do. You can loop through an entry or group of entries like this, this is how you do it, and this is the only way to do it. Twig kind of takes a step back and says, “Okay, well, let’s find some commonalities between different things you might want to do in templates. For example, looping through anything rather than specifically entries or anything else. If you ever want to loop through something, some sort of array, let’s create a tag just for that and then you can pass in what you want to actually loop through.”

So like from our perspective, it’s a little harder to document all these different features of what you can do because it literally makes what you can do limitless.

Emily Lewis: [Agrees]

Brandon Kelly: You can do whatever you want. So we’re trying to do our best to start documenting like specific examples for common things that you might want.

Emily Lewis: [Agrees]

Brandon Kelly: But I think in general like the fear that people have before they’ve dived in is that they see this templating language that it seems like an actual programming language and they just kind of get intimidated and take a while for it to sink in that it’s really not that bad.

Emily Lewis: [Agrees]

Brandon Kelly: Once they’ve actually done that, then yeah, Lea’s experience is pretty common whereas it’s just there’s a matter of like, “Okay, I’m trying it. This is how I would do it in my other CMS. What terminology should I use to get it this in Craft?” And we’ve done our best to try and find words that are familiar and don’t come with a lot of baggage or if they do, that we’re aligning our feature with that baggage, but there are some cases where it’s just not technically the same and we need to find a new word, and you know?

Emily Lewis: [Agrees]

Brandon Kelly: There’s a lot of CMSes out there so nothing we can think of has not been used before.

Lea Alcantara: Right.

Emily Lewis: Yeah, I mean, learning anything new has an intimidation factor, at least that’s been my own experience. For example, with something that is as simple as a CSS preprocessing language, it took me awhile to get comfortable with the idea of doing something different than what I’ve been doing for a 15-some odd years. Especially now that Lea and I are working together, I think we’re both seeing the value of each of us getting outside of our comfort levels, not only in terms of how am I’m going to write this CSS, but what CMS we may choose to use for a given project instead of always doing the default of what we’ve done because what we know, and I think our clients are appreciating that. I know I’m certainly appreciating the experience of learning more. There’s always learning involved in our jobs.

Lea Alcantara: [Agrees]

Emily Lewis: It’s just the nature of it, but in the past few months, there has been a lot of stuff we’re learning. [Laughs]

Lea Alcantara: [Laughs] Yeah.

Emily Lewis: But it’s worth it. For me it’s worth it. I like staying challenged at my jobs. So Brandon, you mentioned documentation, I just wanted to ask or point out first, you did a really nice introductory video tutorial with Mijingo. Both Lea and I did it, and you have a lot of documentation on your buildwithcraft.com site, but you also have Google+ Group, and I’m just curious why you have so much information on the Google+ Group. It’s almost like a support or a forum.

Brandon Kelly: Yeah.

Emily Lewis: Why do you choose that medium?

Brandon Kelly: Well, we needed some sort of forum/community/place to hang out, and we experimented with a product called Discourse which was made by the same guys that make Stack Exchange, which was pretty much fresh into what they called beta at the time when we were launching our Craft public beta.

Lea Alcantara: [Agrees]

Brandon Kelly: So we checked that out, but beta was being generous, it was really slow and lacking a lot of features so we ended up canning that and Google+ was kind of an 11th hour decision, but it has actually worked out really, really well for us just as like the way to connect with the community or let the community connect with each other, there is some support, but for whatever reason, because it’s out in the open and because it’s like in this environment that’s meant to be very community oriented, it just doesn’t feel like support there.

Emily Lewis: [Agrees]

Brandon Kelly: It feels like it’s fun, and after working on this thing for over two years before we actually got to release it in a public manner, it was just exciting to be helping people use it, you know?

Emily Lewis: [Agrees]

Brandon Kelly: To see people’s reactions as they’re actually finally getting to play with this thing we’ve been working on for so long, and to see the aha moments and all that kind of stuff, so going forward, we definitely probably do want like an actual forum, but we think we’re going to keep Google+ just because it’s a social media outlet and I think that it just kind of make sense in the same way that it makes sense for us to have a Twitter account. It makes sense for us to have an official presence on Google+, and it’s been really great for the most part. There’s a couple of things that aren’t so great like if you actually get into trying to share code, that never goes over very well.

Emily Lewis: [Agrees]

Brandon Kelly: Even if you can get it formatted right, which is rare, Google adds like these like weird invisible characters for whatever reason, and like so often times you’ll copy that into the template and then your templates wouldn’t even render because it’s like Twig is hitting some characters that it freaks out on. So there’s that, but overall, Google has been pretty great.

Lea Alcantara: So I want to backtrack a little bit and talk about the Mijingo tutorials, and we were talking about how also that Twig might be a little bit of a harder learning curve and things like that, but as a designer, I found the control panel of Craft really, really intuitive. So like on the flipside where maybe as a developer templater, there is a little bit of a harder learning curve. With the control panel, I barely had to do any thinking. I just kind of went through, try to figure it out on my own, and that’s just how I learned too. I just tried to see how intuitive the control panel is by itself to see if it makes any sense to me, and there’s a lot of UX niceties in your control panel which I find very designer and client friendly.

Emily Lewis: [Agrees]

Lea Alcantara: So let’s talk about the control panel.

Brandon Kelly: [Laughs]

Lea Alcantara: How did you approach that?

Emily Lewis: It’s so clean and straightforward.

Lea Alcantara: Yes. I mean, it should be for every project that user experience is a priority, but how did you approach designing the Craft control panel, and was the focus of the control panel primarily for a content author like a client or for people like us, the CMS developer?

Brandon Kelly: Well, the control panel that you see is actually probably the 400th control panel that’s been designed.

Lea Alcantara: Oh, wow! [Laughs]

Emily Lewis: [Laughs]

Brandon Kelly: I can’t really take any credit for like having any kind of master vision there. It’s mostly been just designing every possible concept I could ever think of for like the first year of working on Craft, and throwing it all at the wall and just seeing what sticks and refining and refining and refining and refining. Honestly, like the first year I was working on Craft, I don’t think I even touched the PHP. It was just a bunch of static HTML mockups and stuff and diagramming all these different pages and trying to figure out how to make it all work and come together. So I’m really happy that you guys think that, and I’m very happy with it too at this point, but boy, that’s just been a project.

Part of me wants to do like a blog post at some point to just like literally let’s list out this gallery of like every single iteration that it’s gone through, and there’s some wacky stuff in there, and it’s gone in every direction.

Emily Lewis: [Laughs]

Brandon Kelly: As far as who it’s targeting, honestly, I mean, obviously, the content editing stuff is supposed to be as simple as possible in targeting content authors and the setting stuff, there’s a little bit more of a room for complexity or using terms that like maybe you wouldn’t expect the content authors to know in which we’re okay with people having to refer to the docs to get through some of those settings. In fact, we’ve actually added little help links to the docs in pretty much every page of the settings so that people can get more context on what they’re editing. But mostly, that kind of stuff, I don’t know if it comes naturally for me, but I think it’s more of like I just have an eye for what works and what doesn’t.

Emily Lewis: [Agrees]

Brandon Kelly: And it was just kind of a matter of redesigning and redesigning and refining and refining until I found what I was looking for. So it was designed for me. It was designed to be a simple and straightforward user interface no matter who’s using it.

Emily Lewis: One part of Craft that I find particularly interesting because it’s not something I have personally seen in a CMS before, but the drag and drop section layout interface. I’m just curious, where did that idea come from, and I mean, how did you scope that? How did you even build it out?

Brandon Kelly: Well, that idea came to me before we were even seriously considering doing a CMS as an idea for ExpressionEngine. So I don’t know if you remember there’s actually like big blog post that I wrote shortly after ExpressionEngine 2 came out and people started realizing that they were kind of screwed because they had installed Gypsy.

Lea Alcantara: [Laughs]

Timestamp: 00:29:43

Brandon Kelly: It was an add-on I had written for ExpressionEngine 1, but it made the upgrade path to EE 2 kind of difficult, but it was a really hacky extension and there wasn’t really a clean way to undo it or to port to ExpressionEngine 2, and even if there was, I was at that point really of the opinion that it was something that should be built into ExpressionEngine. So I wrote this like big blog post and I hang up this whole UI idea that was pretty similar to what you see in Craft today for how fields could be assigned to channels directly and field groups would be more of a convenience thing than anything else. Obviously, that never went anywhere, but when it came time to get to that point of working on Craft, it was just kind of the obvious thing to do so I built it.

Lea Alcantara: Another thing that I really like about the Craft’s CP, we’ve been talking a little bit about the layouts and how the interaction actually is, but another user experience thing that some people don’t really focus on, but I feel like Craft has is the actual copy of the labels. Brandon mentioned a little bit about how some of the labels might be purposely not as typical as what you may expect from other CMSes. For example, using the word table instead of matrix because it’s tabular data, or those kind of things. Brandon, how was your process in deciding over how to label the specific parts of your CMS?

Brandon Kelly: Well, it was mostly just trying it. Well, okay, originally with the naming, we were actually doing everything we could to find new names or names that like didn’t have too much baggage associated with them.

Lea Alcantara: [Agrees]

Brandon Kelly: And that was how it was for the original private beta at least in the beginning.

Lea Alcantara: [Agrees]

Brandon Kelly: And it was very clear right off the bat that that was a bad idea, that even though some words like might have a slightly different meaning in another CMS, if it was kind of the gist of the same thing, that the most natural thing and the most obvious thing and what would require the least explanation was just to go with that word. So with table versus matrix, table is what matrix should have been called.

Emily Lewis: [Agrees]

Brandon Kelly: The only reason matrix was called matrix is because of the history there, because it started off as, well, originally there was the Leevi Graham’s LG Data Matrix, and Matrix started off as FF Matrix which was based on like FieldFrame version of LG Data Matrix, and then we decided to separate it from FieldFrame when it was obvious that we needed to port it to EE 2 and FieldFrame wouldn’t be coming along, we just dropped the FF.

Lea Alcantara: [Agrees]

Brandon Kelly: But in hindsight, like maybe what we should have just done was going straight to calling it table. Table just makes more sense. Yeah, but some of the other words like handle, I guess, would be an example, like handle versus ExpressionEngine calls them short name. I don’t know what else.

Lea Alcantara: [Agrees]

Brandon Kelly: Yeah, well, with slug, slug is the right word historically there.

Emily Lewis: [Agrees]

Lea Alcantara: Slug versus URL title?

Brandon Kelly: I don’t know what other context you would use the word URL title. URLs don’t have titles.

Lea Alcantara: [Agrees]

Brandon Kelly: So slug was just kind of the obvious choice there and handle was, after a couple of days of tossing around different ideas, then we realized that even if it wasn’t necessarily used in CMSes, handle was a very common word as like the version of the word username, but we’re not talking about users.

Lea Alcantara: [Agrees]

Brandon Kelly: So that’s in like kind of a generic thing that we could use to call things that needed to be referred to in the templates.

Lea Alcantara: So do you do any like A/B user testing in regards to these things? I know you had the beta, and of course, there are people who actually are using it at the system. Did you ever make any changes based on that feedback?

Brandon Kelly: Oh yeah. I don’t know. We haven’t done any A/B testing.

Lea Alcantara: Okay.

Brandon Kelly: We’ve done a lot of get people’s feedback on things that we’re thinking about making. I mean, like from the point of conception to the point that it hits the page, we’re getting as much feedback as we can and we’re juggling it and trying to figure out who’s got the right mindset and who doesn’t, who we agree with and who we don’t, and making decisions, and then by the point it hits the page, there already all these feedback that’s gone into it.

Lea Alcantara: [Agrees]

Brandon Kelly: But then the ultimate test is like, “Now, let’s get people to use it.” There has been a ton of cases where it’s apparent immediately or after a while that we made the wrong decision, and so we have to go back and redo it and refine it, so that’s how they’re numbered and tried. If you were to look at Craft like the day it hit the private beta just to the day it hit the public beta, it was a completely different system just based on all these different in-the-wild feedback we were getting.

Lea Alcantara: So in terms of the wild feedback you were getting, did that inform you for your decision to change sections into three different entry types? I think that’s one of the biggest changes that I’ve noticed thus far.

Brandon Kelly: Well, sections and entry types are two different things.

Lea Alcantara: Okay.

Brandon Kelly: So sections, what we did with Craft 1.2 was we took this word “section” and we said, “Well, yeah, we have sections and historically that’s kind of have been our version of channels or whatever.” But that concept of like a section or channel just doesn’t necessarily fit every single type of entry you might want. We realized there are times where you want a section that literally just has one entry, maybe for a home page or an about us page or whatever where you’ve got a page that has a unique content requirement, and deserves its own set of fields and all that kind of stuff but you still want to manage it alongside your other sections and stuff like that.

So what we did was we decided, “Okay, so now rather than just having one type of section and it’s roughly the same thing as a channel in ExpressionEngine, let’s have multiple section types.” And so we have three, we have channel, which is what everyone was used to. We have singles which are for one-off pages and then we also have structures, and structures are so sort of like channels in that they can have multiple entries, but they’re different in that there’s an inherent relationship between the entries, so whereas the channel is just kind of a stream of entries that never ends and you can order it however you want and all that. There’s no hierarchy and it’s just a big stream of stuff. A structure is where each entry has a specific position within the section and they might be nested inside each other and stuff like that.

The reason that we had to have two separate section types for channels versus structures is because the way that stuff is stored is completely different between the two. There is a lot of data that has to be stored to manage how an entry is positioned alongside its siblings and all that kind of stuff, and so it just didn’t make sense to have Craft go through all that trouble for every single entry if you only needed it on occasion inside a structured section.

So the other thing that Craft 1.2 added was entry types, which is separate from section types, and entry types basically mean within a single section you can have multiple types of entries. For example like when re-did our documentation, we did that as multiple structure sections. One structure section for the main docs and other structure section for the plugin documentation and stuff like that, and within those sections, there are heading entries. There are normal documentation entries, and there are also external link entries. So we can position all these different things. We can position the heading only stuff relative to the normal documentation and also relative to the external link entries and each one of those entries gets to choose which one of those three it is. That’s a use case for entry types.

So another might be like if you wanted to do a Daring Fireball-style blog where you just have a single stream of entries kind of like a channel, but each entry might be a different type of content. You might have some that are a full article. You might have some that are just a link to some other site, stuff like that. In that case, you’d have a channel with two separate entry types.

Emily Lewis: [Agrees]

Brandon Kelly: So that was kind of the idea there. So those were two kind of similar, but fundamentally different concepts that we just introduced in 1.2.

Lea Alcantara: Yeah, I have to say that when we started our Craft project, we didn’t have those different entry types and sections and things like that. So then when you introduced it, I really had to relook at how I set up my information fields and everything, but it really made a lot of sense specifically for this particular project to have something like structures and the two different entry types because for this particular project, our client, it’s mostly almost like a portfolio but it’s not really a design portfolio, he’s a sound editor and he wanted to have a section on his site that is his credits so we have a section that’s actually named Credits, but the credits needed to have two separate pieces of information, the network that he worked with and the show in that specific network that he worked with.

So I created two different entry types where it’s just the network name and the logo that’s related to that network while the show entry type had pretty much the show title, a picture of the show poster, as well as more description because he wanted to have that, and then with the structures, I was able to basically have a nice nested list to show you, “Here’s his entire network credits,” and then all the shows that are under each of those pieces of information, and I think explaining that to the client to be able to be like, “Okay, you put this show under this network and just reorder it.” It just makes more sense.

Brandon Kelly: Yeah, yeah, and also there’s a lot of sites, for better or for worse, people are coming from a non-ExpressionEngine CMS where they’re used to having all these pages and they’re used to kind of like having like the single hierarchy of their whole site.

Lea Alcantara: [Agrees]

Brandon Kelly: And while I personally don’t think maybe that’s the best way to organize the content on your site, that’s not a very strategical way to do it long term, but the reality is that there’s plenty of CMSes out there that are going to enable that, and so what we’ve also done with structures is basically made it possible to approach your site like that.

Emily Lewis: [Agrees]

Brandon Kelly: Which at least gets people in the door, and then hopefully once we’ve got them hooked, we can kind of start teaching them, “Well, here’s a more content strategy focused direction for your site.” But the reality is that a lot of people just want that like one single structure section and this is my whole site and I have these five different entry types that can be arranged however I want.

Timestamp: 00:39:59

Emily Lewis: So Brandon, in terms of the way images are handled in Craft, you have the ability to set up a transform, but the transforms don’t happen when you upload the image to the control panel instead, and correct me if I’m explaining it wrong, but they happen when you’re looking at the page and the server actually request the image.

Brandon Kelly: Yeah, that’s correct. Well, actually, that decision was kind of made based on knowing what a pain in the butt it can be to have transforms or image manipulations defined on like a per asset source basis, which is the approach that ExpressionEngine took, because at least with Craft, like Assets for ExpressionEngine, we’ve made it very easy to move files between sources and all that kind of stuff and we didn’t want to have to write the code again to constantly be updating all these transforms whenever you do a file move and stuff like that.

Emily Lewis: Oh okay.

Brandon Kelly: And so we figured, “Well, it would be a lot easier if we just one single list of all transforms that apply to any image no matter where they are, whether they’re on S3, whether they’re in local source #1 or local source #2, it doesn’t really matter, and then we’ll just generate the image when it’s actually needed, and if it’s ever needed, and then once it has been generated, then it loads instantly. Craft actually does a pretty good job of caching which transforms its created and which it hasn’t. So when you’re requesting an image transform, it’s checking its cache to see if it’s been created or not already. If it has, it just gives you the URL straight to the file that supposedly is going to be there, and if it hasn’t, it kind of queues up this transform to get generated after you loaded the page.

Emily Lewis: I’m curious, I mean it sounds like the reasoning for that helps with I guess moving from different environments or moving your files around, it makes it more maintainable, but does it have any effect on the performance once the site is loaded?

Brandon Kelly: Only when you’re first loading a brand new transform. I think that’s where the cache comes in. Once the transform has been loaded, Craft knows it’s been loaded and it can just give you the URL, which would be basically exactly the same as if it had been loaded like beforehand, like just from central or just right when you upload the image or something.

Emily Lewis: [Agrees]

Brandon Kelly: But yeah, the way we’ve done it, we’ve actually gone pretty out of our way to keep the initial page load quick. Even if it hasn’t been loaded yet, it will actually do the whole transform process over Ajax after the page is loaded and that way the initial page feed is really quick and you get this little loading spinner on all the images that haven’t been loaded.

Emily Lewis: Okay, cool. Well, before we wrap up this episode we do want to talk about some of the business perspective with Craft.

Brandon Kelly: Sure.

Lea Alcantara: So you kind of approached Craft with, I would say, a very unique way. A lot of other typical CMSes just have like, “Here’s one flat fee and here’s what you get for that,” or, “Here’s another fee if you’re an education licensed or nonprofit licensed or whatever.” With Craft, however, you have a free tier and then you also have packages. Why did you structure your pricing that way and can you explain a little bit more about the packages you do have?

Brandon Kelly: Sure. So when we set out to make Craft, we basically like decided we wanted to try and make the best CMS for the most possible use cases. That was kind of our ridiculous original goal.

Emily Lewis: [Laughs]

Brandon Kelly: There are all these really lightweight CMSes. There are some really kind of middle end CMSes, and there are the extremely high-level enterprise CMSes. While we haven’t gone anywhere close to that yet, we figured at least for like the small to medium sized sites and CMSes, we felt like it might be possible to create a CMS that literally like could be a great tool for any of those jobs. I said early I’m definitely a believer that you use the right tool for the job, but I’m also a realist, and the reality is that no one has time to learn every single tool out there and always be aware of what the best tool for the job is, and we know for a really long time that a lot of ExpressionEngine people were just so much in love with that and would use that for things that they totally didn’t need to use it for or that maybe it wouldn’t have been the best tool for the job, but it was the tool they knew and the best tool for the job on a more realistic approach would always be the one that you know and that one that you know that can handle it.

So we thought, “If Craft’s feature set was scalable, then all of a sudden it would be a really lightweight CMS for the really small sites and it would be a heavyweight CMS when you need those features.” The way that we approached that was what you described, we have a free core, which gives you all of the essential features for doing like a personal site, personal blog, personal portfolio, stuff like that, and then we’ve tried to identify areas that are opportunities to charge money for particular extra features on top of that.

So for example, if you’re not doing it just for yourself, if you’re building it for your client, or if you’re building it for a whole team of people, you’re going to want user permissions so that you can limit the amount of damage people can do and you’re going to want to be able to manage multiple users and you’re going to want to have user groups and all that kind of stuff, so for that we have a Users package.

If you want a personal blog, then you can probably pull that off with the single channel. Anything beyond that, if you want more than one channel or if you want to use the new structure section type or anything like that, we have a Publish Pro package and that also comes with entry versioning and with draft support and stuff like that. There’s also a couple of other things that don’t need quite so much explanation. There is one that enables you to be able to translate your content. There’s one that allows you to upload files to remote sources like Amazon S3 and Rackspace and Google Cloud. There’s another one that enables you to rebrand your control panel. So if you’re doing a site for a big client and you want to put their logo on the login screen, you can buy a package that enables that.

So those are the five packages and that’s kind of the approach we took, and it’s all just with this attempt to come up with a CMS that really could be the best tool for a wide variety of jobs.

Lea Alcantara: Awesome. So again, there’s still so much to talk about with regards to Craft, and since it is a very developer-focused system, I have to ask about third-party plugins and add-ons. What are your plans for third-party developers to develop for Craft? Is there any piece of advice do you have for them to help maximize developing for Craft without violating any terms?

Brandon Kelly: Well, not violating in terms, I mean, I assume you’re referring to the license agreement that says that plugins can’t step on Craft’s toes.

Lea Alcantara: Sure.

Brandon Kelly: That’s like you’ll know if you’re violating that. If you’re like writing a plugin that adds localization support, then you’re definitely violating that term.

Lea Alcantara: Yeah.

Brandon Kelly: Ultimately, the reason we did that was just to try and protect ourselves from someone that realizes hey, I’ve already got all these plumbing built in, to make a translation plugin for in like two hours of my time and I can do that and release it for $5 and all of a sudden everyone has got free translation or relatively free translation support. So we’re just trying to be a little defensive with that, but if your heart is in the right place where you’re actually trying to like create something new and cool, then you’re not going to have a trouble with the license agreement or with us. As far as general tips, we’ve really architected plugins to be like their own little micro Craft apps.

Lea Alcantara: [Agrees]

Brandon Kelly: So if you look at the plugin API and then you were to look at the Craft’s core code, you’ll see there’s a lot of parallels there. So if you’re looking for best practices, just look through the core code and there’s just a ton. Every file you open is going to be a good example for how you might want to structure things.

Lea Alcantara: [Agrees]

Brandon Kelly: And then just be active with the feedback because I think probably the biggest shortcoming right now we have as far as plugins go is poor documentation.

Lea Alcantara: [Agrees]

Brandon Kelly: And we’re doing our best to write the docs, but there are just so much and so most of our focus has been on non-plugin docs and so that if they’re trying to do something and you can’t find it in the docs, there’s a good chance you can, we just haven’t gotten around to it yet so hit us up and usually like a single email or post on Google+ is enough to inspire us to write that page with the docs and get that flushed out, so there’s that. Just help us identify areas that could use improvement.

Lea Alcantara: Perfect. So what’s on the radar for Craft?

Brandon Kelly: Boy, there’s a lot of cool stuff that’s currently on the pipeline.

Emily Lewis: Well, you guys update really regularly. Is that just how you approach work, or you’re just constantly seeing new things to improve?

Brandon Kelly: That’s what we wanted. Like if we fix a bug, even if it’s just like a single bug fix, we hate like holding on to that, so we want to get that into people’s hands as quickly as possible. So we put a lot of work.

In fact, the very first thing we did when we set out to make a CMS, the very first thing we did was we worked on this big deployment system for us and this whole one-click updating infrastructure for the CMS. So literally that was the first feature we ever actually added before we had any sort of content management like abilities. So the goal of that was like if we fixed a single bug and if we consider it like critical enough to bother everyone about it, then we should be able to release that single bug as its own little build, they’re bug fix, I guess I should say, and make it so that everyone can get that with a single click.

That enables us to develop and release how we wanted to, how we preferred to, and then as far as the regular feature updates, there’s this gigantic forest fire under our butts right now.

Emily Lewis: [Laughs]

Brandon Kelly: We’ve got people demanding and requesting things in every direction and a lot of our time is just going to try and to prioritize what actually is needed, what are the things that are preventing people from using it, that really seriously would be using Craft if only they have this one feature, and trying to cut away those and figure out what needs to be there. We want to get this thing out there. We want to get people using it. We want it to take off and a big part of that is just this really big uphill battle in trying to get all these must have features in place. So that’s been a big source of why we’ve been going so quickly. It’s just because it’s the difference between someone using it and not using it.

Timestamp: 00:50:02

Emily Lewis: [Agrees]

Brandon Kelly: And like after all the work we’ve put into it, that really hits home for us and we really want people to use so we’re doing everything we can to get this stuff out there as quickly as we can, and that’s kind of have been the reason behind this update schedule we’ve had.

Lea Alcantara: So is there anything on the radar for Pixel & Tonic in general?

Brandon Kelly: Pixel & Tonic in general?

Lea Alcantara: Yeah.

Brandon Kelly: Oh, I don’t know. It’s…

Lea Alcantara: [Laughs]

Emily Lewis: [Laughs]

Brandon Kelly: I mean, right now it’s all about not just continuing to maintain our add-ons and continue to bust our butts with Craft, and yeah, we really haven’t. Craft has been the big plan.

Lea Alcantara: [Agrees]

Brandon Kelly: And Craft has been the big focus for a long time, and so right now we’re just a 100% focused on that. We’re definitely going forward. We definitely are considering going more into the services business rather than being exclusively about having a CMS and having some add-ons and that’s it, and we’ve kind of started dipping our toe into that with the consulting side of things and it’s actually gone pretty well. We’ve had a lot of fun with that, and the big part of that is just it helps our software to get better because we like to be at the end where we’re actually using our stuff and getting…

Emily Lewis: [Agrees]

Brandon Kelly: That’s the most insightful way to find out about where your big problems are on usability and in feature end, so we want to continue ramping that up, and then there’s other, I guess, business opportunities that we might be able to create for ourselves around Craft once it starts picking up a little more steam. But right now we’ve got a Basecamp project that just has a million different ideas.

Lea Alcantara: [Laughs]

Emily Lewis: [Laughs]

Brandon Kelly: And I can’t really tell you any specific area that we’re going to start getting into, but there’s a lot of ideas floating around, most of them related to either services or new like possible — I don’t know — just different ideas that we have surrounding Craft.

Lea Alcantara: Very cool.

Emily Lewis: Awesome.

Lea Alcantara: Well, that’s all the time we have for today. Thanks for joining us, Brandon.

Brandon Kelly: Absolutely, thanks for having me. This is fun.

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

Brandon Kelly: Well, I’m @brandonkelly on Twitter, and that’s pretty much it. I’m not on blog anymore, so yeah, @brandonkelly on Twitter.

Lea Alcantara: Perfect. [Music starts] So now, we’d like to thank our sponsors for this podcast, Visual Chefs and Pixel & Tonic.

Emily Lewis: We also want 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.

Emily Lewis: Don’t forget to tune in to our next episode when special guest, Tracy Osborn, is joining us to talk about funding and maintaining startups. Please 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: 00:52:53