EE Client User Experience

[Music]

Lea Alcantara: You are listening to the unofficial ExpressionEngine Podcast, episode 91. Today we’re talking about the client’s user experience in EE. I’m your host, Lea Alcantara, and I’m joined by my fab co-host…

Emily Lewis: Emily Lewis.

Lea Alcantara: This episode is sponsored by the Responsive Web Design Summit. Check it out at rwdsummit.com. Use the discount code EEPODCAST for a 20% off your ticket, and go beyond Google searches and those incomplete, out-of-date online tutorials. Bring the experts to your desktop with the Responsive Web Design Summit, rwdsummit.com.

Emily Lewis: The ExpressionEngine Podcast would also like to thank Pixel & Tonic for being our major sponsor of the year.

[Music ends]

Emily Lewis: Hi Lea, happy April Fools!

Lea Alcantara: Happy April, my gosh.

Emily Lewis: [Laughs]

Lea Alcantara: Time just keeps moving by.

Emily Lewis: I know. So we’re recording this today on April Fools’ Day, and it really did cross my mind that we could do something really crazy with the podcast. But since it’s going to go live on another day, I think it would end up confusing our listeners far too much. [Laughs]

Lea Alcantara: [Laughs] Yeah, exactly.

Emily Lewis: Did you have any prank so far today, or have you seen anything good online that was a good April Fool?

Lea Alcantara: Hmm, the only one that I liked, and it actually happened before April Fools’ Day, there was this YouTube, the YouTube video thing, over like how they’re shutting down YouTube because years and years ago when YouTube launched, they launched with a contest over like what’s the best video, and so ten years later, they’re like, “Great, we’re going to choose a winner, and now we’re going to shut down YouTube after we’ve chosen the winner.”

Emily Lewis: [Laughs]

Lea Alcantara: And they got all these like YouTube stars to come along, and what was the coolest part was they got YouTube stars when they were babes, like some of them were baby videos and they were hilarious, and then they had the kids when they were older talk about the video.

Emily Lewis: [Laughs]

Lea Alcantara: And including the kid that got, after his dentist appointment, Davis…

Emily Lewis: Oh, David After Dentist. [Laughs]

Lea Alcantara: Yes. So the kid talked about how his experience or something. It was just really, really funny. Yeah, now that was my fav…

Emily Lewis: I have to check that out.

Lea Alcantara: Of the pranks.

Emily Lewis: I haven’t actually been online. This is my first time online this morning talking to you.

Lea Alcantara: [Laughs]

Emily Lewis: [Laughs] So I haven’t seen anything yet. But this is not an April Fools’ joke, but parse order is back in the news again. [Laughs]

Lea Alcantara: Yeah. It is a bit confusing like April Fools though.

Emily Lewis: [Laughs]

Lea Alcantara: It feels like an April Fools’ joke sometimes. I know that John D. Wells wrote this article about how you can get plugin variables into the channel entries parameters because that didn’t use to work, and he kind of showed this kind of secret feature that was using the plugin as a parameter. But here’s the caution though, it’s kind of a hidden feature on purpose. Paul Burdick when he used to work at EllisLab actually wrote a note saying that, “This is not ready for primetime, but the feature exists right now.”

But even if that’s the case, John goes through an example of how to use it if you wanted to use plugin variables or advanced conditionals within the parameters of a channel entries tag, but again, the caution came by when Low wrote this comment right after it saying that, “Remember, it is a hidden feature, and that it can be pulled by EllisLab at anytime, so be careful.”

Emily Lewis: Yeah, and I think John’s approach is a very clever solution using Mark Croxton’s IfElse plugin, but what occurred to me upon reading, and I didn’t try any of this out myself in any templates to see how it will work, but when I need to use a plugin for a parameter value for my channel entries tag, I’ve often turned to Stash. I use Stash and then I’ll have Stash create that variable that I insert. So I don’t know if that would apply in this particular situation, but that’s another way of getting around the parse order for that.

Lea Alcantara: Yeah, I just feel like sometimes it’s just so complicated.

Emily Lewis: It is.

Lea Alcantara: What goes first, when does this happen, why isn’t this working, and then in the end it’s often because of the parse order situation, whether that’s working or not, but I try to always use simple conditionals when I can rather than any type of advanced conditionals if possible.

So it’s always interesting to see how the community is still pushing all these interesting ways you can get around creating your templates and variables and stuff like that. So I’m always excited to read things like that, but be careful because you have to think about the future of the site as well, like if you upgrade ExpressionEngine and used this technique in your templates and the feature no longer exist, then does that break your entire site?

Emily Lewis: Yeah, exactly, and I think it’s just also worth reminding our listeners that Low has a great PDF that breaks down parse order. We’ll make sure to link to it in our show notes. So we have a lot to cover today so we should get to it.

It’s been awhile, but today it’s just you and me. So [laughs] what we’re going to talk about is the user experience in EE, the client user experience, something I know both of us make a huge priority for our projects.

Lea Alcantara: Yeah. Sometimes we think a lot about how the templates work and how to get the site up and running as fast as possible, and we’ve been talking a lot about its efficiency and all that fun stuff, but at the end of the day, you and I aren’t the one using ExpressionEngine day to day, it’s our client, so we need to really think about how we also build the client user experience in the control panel that’s basically who is the content author and what do they expect when they’re trying to change or add information to their site.

Emily Lewis: Right, and things we can do to meet those expectations, and I know my client have said they’ve almost jaw dropping experiences in terms of how they’re managing content. ExpressionEngine is so flexible there’s a lot you can do to really customize it so that the client feels comfortable from the moment you begin training.

Lea Alcantara: And I think the very, very first step is really managing those client expectations.

Emily Lewis: Yes

Lea Alcantara: Right?

Emily Lewis: Yes.

Lea Alcantara: Because there are a lot of things that we can assume that you can or cannot do, so you need to have a long discussion with your client over who the content authors are, what’s their technical proficiency, and how often they’re going to need to edit these items, is there some sort of workflow needed, and then basically you have to tell them whether it’s possible or not, right?

Emily Lewis: And this is before you sign a contract. This is the fact finding to get you to that contract, and to scope out the project.

Lea Alcantara: Yeah, and oftentimes that does become a sales tactic as well because just letting them know that, yeah, we can move this stuff around or you can edit it this way, or whatever is often something that clients do look for. I just mentioned what’s the technical proficiency of clients. I know for mine, they’re not that proficient, so there is a little bit of hand holding to be done and the easier the explanations are and how you’ve set it up, the better it is for the client experience.

Emily Lewis: Exactly, and then even beyond understanding what the expectations are for the content and through your maintenance process, the author’s perspective. I’m often told at the beginning part of talking to a prospect that, “We want video on our site. We want to integrate video.” They’re always throwing the term “integration” around, [laughs] and that’s a simple thing, and you can accommodate it and I can think of, right off the top of my head, like five different ways in ExpressionEngine.

And so you have to ask the client additional questions, how do they want video? Do they want to host their own and use ExpressionEngine to manage the information associated with the video? Do they want to pull from a third-party service like YouTube or Vimeo? Maybe also do they want to embed media via a WYSIWYG interface, or do they want to actually manage video records in a database? I mean, all of those questions will determine what you develop, and you’ve got to figure that out before you’ve agreed to deliver something.

Lea Alcantara: Yeah, because clearly there’s different time and difficulty involved depending on what they want, and having those conversations too also helps manage what is possible within a particular budget, because that’s also a reality as well. I think sometimes the double-edged sword about ExpressionEngine is that we can do whatever we want, but there is the reality of people’s budgets.

So yeah, we can get an add-on and do all these things where they can search through YouTube and then they could manage all this blah, blah, blah, and maybe they’re like getting super excited about that, but then if their budget can’t accommodate the time to implement that, then maybe you need to teach them the workflow of saving the embed, [laughs] instead and copy-pasting it into a text field, which is not the best user experience, but…

Emily Lewis: It meets their budget needs.

Lea Alcantara: Exactly, and it still does the same thing that they need, and I think we always have to think about our own thing too, because I know that a lot of us are, or not a lot of us, we are concerned over add-on prices every time we are creating and budgeting our projects and things.

And I know for me sometimes it’s frustrating knowing like, “Oh my gosh, if they only have the budget for this add-on, it would be so much better for them.” But at the end of the day, if they don’t have the budget, it’s not the add-on developer’s fault. Do you know what I mean?

I sometimes feel like there’s this idea where it’s like, “Oh, I hate the fact that it cost this much. I just want to give it to my client, and it’s just…” Well, there’s a reason why there are five different ways to do video for ExpressionEngine. There’s a reason because different budgets accommodate different types of functionality, and if they want the bells and whistles, that’s something we need to learn as businesspeople. If they want bells and whistles, they need to pay for the bells and whistles.

Timestamp: 00:10:16

Emily Lewis: Well, and not even just having the budget to buy the add-on, but on our end, putting the add-on in place may take additional time, which sort of makes me want to mention that not only do we need to manage client expectations within their budget constraints, but we need to know what our constraints as a developer are.

For example, if you’ve never used a given add-on, but you heard about it and everyone says it’s great, you may not want to use it right away for a project that maybe has a short timeline because you’re learning curve could be such that you push yourself out of delivering on time, and that doesn’t serve the client or yourself either, so know what you can do, what you’ve been able to do and how long it might take you to do something.

Lea Alcantara: Yeah, absolutely, because I know for sure that the add-on community has exploded, and then there are so many add-ons I’d love to test, but sometimes I just go straight back to the old faithful stuff that I’ve used simply because I know it can deliver and deliver on time because I already know it, like I don’t have to always refer back to the documentation. I don’t always have to find my way around the user interface because I’m used to it, and then let’s say that the other alternatives are less expensive. Actually, it’s more expensive due to time. You always have to balance those types of things as well.

Emily Lewis: So once you’ve established those expectations with the client and sort of determined the scope, before even thinking about add-ons, there are a number of things you can do with EE right out of the box to create a better user experience.

Lea Alcantara: Absolutely. Some of the things that people need to take a look at natively for EE is, for example, custom fields. Just making sure that you add good labels and instructions to each field can really enhance the user experience.

And let’s remind everyone, you can use HTML in the custom field description. I think some people forget that you can do that. So if you wanted to put yellow background or something new, add emphasis, or make the text much larger, or even add an icon, you can do so because it does take HTML.

Emily Lewis: Right, and then that makes the instruction stand out a little bit more. It’s something that I know I commonly do whenever there’s an image upload field, even if I have image manipulations happening with the native file manager or a plugin or whatever, that automatically generate different sizes, I still put information in there reminding the content author what happens when they upload it, what’s generated, what the recommended resolution should be. Things like that, because they’re not there all the time. They’re not in the system every day.

Lea Alcantara: Yeah, absolutely. Always at the very least for image files put in the proposed dimensions. And generally speaking, I always like to say, if you can resize it before you upload, do any image manipulations, just do it outside of the system because then that eliminates a lot of error points as well. And then at that point, all they’re just doing is uploading, so that’s also something to think about with user experience where just because ExpressionEngine can do something doesn’t mean that’s what you should train your client to do, or it’s the best way to do it.

Emily Lewis: Right, and speaking of the custom fields that you set up, make sure you’re assigning the right field to collect the data. Just because you could use a WYSIWYG, should you? For example, maybe you have a summary field that gets displayed on the home page and on a sidebar, and then it’s combined with full text like maybe a blog post. Maybe the summary field doesn’t need to accept any HTML, so it could be a plain textarea. So make sure you’re choosing the right fields that are available for you that make the most sense for the content entry.

Lea Alcantara: Yeah, absolutely, because again just because you can add that feature doesn’t mean you should, and for the user experience, having a mix of, say, WYSIWYG and non-WYSIWYG items can eliminate errors and you can also have more control over how the design looks, so they’re not deleting some HTML tag they shouldn’t have deleted, or something like that. So if it doesn’t change, just make sure that it’s just a plain old textarea.

Emily Lewis: Another thing that it’s so simple, but it makes a big difference, I think, for the client are those main menu buttons along the top. You can customize them using the little add link.

What I often do is before I do client handover/training, I go in logged in as that client, and you do have to do this on a per member record basis, which is a bit of a pain in the butt, but I do think it’s worth it because if there is an add-on that is used frequently, like maybe Freeform or even Structure or something like that, you want to give the client quick access to those things.

Rather than the instructions being, “Go to Add-ons, select Module, then scroll to the bottom and select that one,” give them a shortcut right to that add-on, or a shortcut right to managing some specific channel or something like that, whatever makes the most sense for your client.

Lea Alcantara: Yeah. Customizing the main menu buttons is I think one of the most important things that you can do, and yes, that’s available natively. However, it is a little limited because you can just add to it, but you can’t change the labels of the one that currently exist. You can’t move certain other things around, but if all you really need to do is eliminate access to add-ons or whatever and you just want to give them access to publish and edit and whatever, then it’s pretty easy to eliminate those things. But what if you want more customization? At that point, you do have to go to an add-on, and I think we’ll talk about that a little later on.

Emily Lewis: Okay. You said about also, not eliminating, but kind of hiding from certain member group view those main menu buttons. You can do that in the member group preferences where you can customize the control panel access.

And this comes into play for me recently for a client who had publishing workflow where certain member groups could only do certain things, like certain member groups couldn’t create content, they could only edit content, and so by hiding some of those menu options from the top through the member group preferences, that’s sort of in addition to maybe adding a different menu option button.

Lea Alcantara: Yeah, absolutely. Eliminating is just as important as adding, and speaking of that, Publish Layouts.

Emily Lewis: Yeah. I know some people hate them because they had been problematic. If I recall correctly, the issue was that if you had established a Publish Layout and then maybe added another custom field to that channel, that sometimes the Publish Layout will just break and you get PHP errors on the publish form.

Lea Alcantara: Yeah, like there were various scenarios where the PHP errors would show up. It’s either adding a new field, or if you’ve installed an add-on that’s supposed to add a new tab. Anyway, it’s basically whenever you start adding to it, it just went wonky. [Laughs]

Emily Lewis: Right. Now, I’ve been fortunate, this has not happened to me yet. I think one reason is that I saw everyone else’s pain and so I’ve made it a point that Publish Layouts is the second-to-last step I do before I begin client training. I don’t do it while in development. I don’t even do it, necessarily, if I have a person with a client who is like more a SuperAdmin person and is helping me with the testing process before we deliver it to other content authors.

I usually save that for the last step so I’ve hopefully avoided that. Maybe that’s why I have avoided that problem. But I love Publish Layouts because it’s how you customize that publish form on a member group basis. So like I was saying, I often work with clients who have different member groups that do different things, and you can hide tabs for certain member groups. You can hide certain fields for certain member group, if it’s not relevant to that content author. It’s awesome.

Lea Alcantara: [Agrees] I know. I love it too, especially because there are certain projects that I have that requires a category, and by default, the Publish Layout category is on another tab. But for me, to eliminate them forgetting to associate a category, just put it on the front! [laughs] Right beside the title, so they really can’t miss it because it’s right beside the title field, and those are some of the little minor things that just helps eliminate mistakes down the road simply because instead of it being hidden in a tab or something like that, if it’s all in one published view, then it just makes it so easy.

And there are also other things too like I tend to hide the URL title for my clients. I like to see them in my admin view, obviously, if I need to edit other stuff like that, but for my clients, if they don’t need to touch it, instead of telling them don’t touch it, just hide it.

Emily Lewis: Yeah, just hide it.

Lea Alcantara: Yeah.

Emily Lewis: It really helps I think eliminate some of the user error that happens, especially in the beginning when they’re still getting used to a system.

All right, so I guess those are four of the main things I do with ExpressionEngine out-of-the-box. The good custom fields with labels and instructions, the main menu buttons, the Publish Layouts. And I pretty much do those for every client. None of them are hugely time consuming for me, so it’s just worth doing, and the payoff is just too good to pass up when you’re eliminating the chance of confusing someone. But there are a number of things that I want to do beyond what native ExpressionEngine offers.

Timestamp: 0019:55

So the first thing I wanted to mention was they introduced the Rich Text Editor. I’ve used it on a handful of clients. The nice thing about it is that it comes with ExpressionEngine, and so you don’t have to buy another add-on. It has some level of customization in the sense that you can say that only a certain number of HTML tags are available for the person to select from. So maybe you don’t want them to be able to add an H1 in a field so you can remove that as an option, so it’s good, and if the budget is tight, that’s what they get.

If a client really needs something beyond that, then I do have to talk to them about additional cost for an add-on, and when that time comes, I typically pick Wygwam, and the reason I like Wygwam is because I can have, I guess, an infinite number of editor configurations with different options of what the user sees on the published form. Not every field that needs a WYSIWYG editor, needs to be able to embed media or needs to be able to add styles or whatever, so it’s hugely customizable which is why I like it.

Lea Alcantara: Yeah, I tend to go to Wygwam as well, and that’s mostly because, first of all, it’s reliable. It’s also one of the original WYSIWYG editors or third-party WYSIWYG editor, but I just want to mention that there are other options out there just depending on your budget.

For example, Ben Croker from PutYourLightsOn has a $10 add-on called Expresso, so if that works for you, that works as well, and DevDemon also has this editor. It’s actually called Editor, available on sale for $20 as well, and they’ve all use a slightly different WYSIWYG library, I believe.

Like DevDemon uses, I think the Redactor, jQuery thingamaboby. I’m not sure what Expresso uses, but there are so many different types of WYSIWYG editor options out there too, and it really depends on the customization you want to deal with.

Like, for example, your choice of WYSIWYG editor is also dependent on other add-ons you might want to use for user experience as well. For example, if you’re using Low Variables and you want to give a WYSIWYG experience in Low Variables, you need to double check to see if that works, or if that works using Matrix or something like that. So you have to double and triple check to see that those editors can be accommodated for additional add-ons.

Emily Lewis: Right, and I think I can’t speak to some of the other add-ons you mentioned because I don’t know where they are customizable, but whenever you are offering something like that to a client like a WYSIWYG editor, I totally think it is worth it not to just give them the default for any place it exists. I think it’s really important, just like we were discussing about hiding certain fields with Publish Layouts, if you don’t want them creating a table in the field where they’re entering a description, get rid of the table button. Because if it’s there, then someone might click and be like, “Oh, I can make columns.” [Laughs] And that may not be what you want, especially if you want to protect the integrity of the design.

Lea Alcantara: Yeah, absolutely. I generally always hide the font choices and the color choices, and if I needed to give them options for headlines or whatever, I just make a custom style sheet then they choose the drop down for like Headline 1, Headline 2 or whatever, but I tend to always avoid like the extra colors, unless they asked for it, because usually if you don’t put it on there, they just get used to what you teach them.

Once in a while they ask for a feature or whatever, but then I always mention the caveat of, “We want to make sure that your site looks consistent and blah, blah, blah.” But at the end of the day, it’s your client, if they really want to be able to change colors away from their brand, then…

Emily Lewis: More power to them. [Laughs]

Lea Alcantara: Yeah, exactly. [Laughs] Exactly.

Emily Lewis: So we talked earlier about having good custom fields, and I mentioned choosing the right field type. One of my favorite add-ons is called VZ Address, and what it does is it gives you a new field type that collects the address information.

You can collect an organization name, the street address 1 and 2, zip code, city, even country, and it’s in one field type, so when you are setting up your custom fields, it generates all the different parts of an address in the published form. My clients like it. It’s so much nicer than just a textarea field where they just hand type the information. The other thing that’s pretty nice about it is that if you choose to, it will spit out microformatted markup so you can have a dynamic vCard on your page.

Lea Alcantara: Yeah, that’s cool, and I mean, the thing is VZ Address is free, right?

Emily Lewis: Yes.

Lea Alcantara: So save yourself some time instead of making 1, 2, 3, 4, 5, 6, 7 separate fields.

Emily Lewis: Or just a textarea. [Laughs]

Lea Alcantara: Yeah, exactly. It’s just, well, why don’t you have a nicely created address field that is consolidated for you. The country dropdown is created, et cetera and so forth.

Emily Lewis: Even if you are working with a client that has a lot of addresses for some reasons, maybe there is like – I don’t know – some sort of directory or something. It will let you, once you’ve created an address, you can allow that address to be available for selection in the future, so it sort of creates like a repository of already entered addresses and you could enable that. Also worth mentioning, Low Variables supports it, so it’s one of my favorites.

Lea Alcantara: But speaking of multiple field entries, so we are talking about how you can have a whole bunch of things in VZ Address. Well, what if you’ve got data that’s not necessarily an address, but you want to put it in some sort of table? The one that I always go to if that’s the case is Pixel & Tonic’s Matrix where you can add more than one row of content to a field and you can group fields together, and I just think it’s fantastic.

Emily Lewis: Yeah, I adore Matrix. It’s definitely at the top of my list. The amount of time it actually saves me in development, especially if I have, for lack of a better word, complex content, it’s worth the money even if it’s not something that I had to get client approval on or anything like this, I would save so many hours in my development that it’s cheaper for me to just invest in Matrix and utilize it.

Lea Alcantara: Yeah, and I mean, it can be used for like really, really simple things as well. So one of the things that I use Matrix for is that I have a client who wants to keep all these sports stat, it’s a high school, and so they’ve got all these stats for their sports team, and instead of creating a new channel and having all of those stats in their own different fields, the numbers, the actual stat item or whatever.

I knew that they weren’t going to have like hundreds of entries, so it would be totally impractical to have a totally new channel, and it would be also a bit of a database hog and all those things. It would be just easier to have a Matrix field on Low Variables and then just have the three columns for image, the number the name, and then if there are only 12 entries, then that’s so much easier for a client to also fill in.

Emily Lewis: Yeah, and I also think, particularly in the situation you’re describing, the client entering content by adding a row, he has all of those previous rows above him in his eye view. If you’re doing it by creating entries within a channel, each entry’s view is … you’re independent of the others. So sometimes it’s also useful if from that perspective, they are seeing what the data was before as they are entering so they can have some consistency.

Lea Alcantara: Absolutely.

Emily Lewis: Continuing on the Pixel & Tonic list, another add-on I really like … now I don’t mind ExpressionEngine’s native relationships. I haven’t yet encountered a situation that’s been too complicated that I couldn’t utilize it. But because Playa integrates so well with Low Variables and Matrix that it’s what I tend to use when I want to relay channel content. I end up using Low Variables so frequently that Playa is just what I think of now when I do know that I need to establish relationship just so I know that I have that support there.

Lea Alcantara: You know though I do believe that Low Variables does have kind of … not using the native EE relationships, but it’s got kind of a drag-and-drop interface now as well for relationships. It has its own fields, so that’s something to also to think about. Yeah, yeah, I think it’s kind of like this new select thing, or I think it was like a select entries thing.

Emily Lewis: Oh, where you create multiple things and it gives you a dropdown?

Lea Alcantara: No, not even a dropdown. It’s not exactly like Playa, but you can drag and drop from one column to another to say that…

Emily Lewis: Oh, I see what you’re saying.

Lea Alcantara: Yeah, yeah, or you can also choose a dropdown situation or whatever. It’s just up to you to decide what interface works best, and I know for one of my clients, that’s what I recently did, because all they needed to do was associate one entry and I was using Low Variables and this was the best interface to do it.

However, like if I needed to have multiple entries and more complicated items, I always end up using Playa simply because even if I am trying to be budget conscious personally, sometimes I end up spending so much time making it work natively or I just start realizing and thinking that the user experience for the client is going to be painful, because if it’s painful for me, it’s going to be painful for them. I ended up forking the money for that, but generally speaking, this is why it’s always good to really think about what the client’s needs are so you can budget for that and tell them, “Here’s the budget for this functionality.”

Timestamp: 00:29:32

Emily Lewis: Yeah, just one more thing about Playa I think is worth mentioning in terms of why I think it’s also pretty powerful, is if you’re dealing with different types of member groups who, maybe not member groups, but maybe the relationships you want to create, you need them to be filtered really narrowly.

So it’s not that you just want to associate one channel entry with an entry in another channel, but entries that are assigned category X and/or have a certain status or whatever, you can narrowly filter it so that what the content author sees isn’t everything in the channel, but what’s actually relevant for the relationship.

So we talked about Low Variables a lot, so hopefully our listeners are figuring out that we’re quite big fans of it. One of the reasons I started using Low Variables was that, one, I liked the idea that you can create a variable and set it to early parsing so that you can subvert the parse order a little bit. But what I really liked was that sometimes I don’t always want to create a whole channel to collect data for something like global information, like the VZ Address, the address information.

I mean, do I want to create a channel just to hold a couple lines of information for an address, and so that’s where Low Variables come in. You just create a variable. In this particular example, you would create a field type of VZ Address and it would just be a single field that the user has to update. It’s not tied to a channel, and to me, it just seems so simple and easy to start moving some of that sort of global content that doesn’t have to have multiple entries like a channel would to Low Variables.

Lea Alcantara: But even if you needed to have, say, multiple variables for a particular section or something like that, let’s say, you wanted to have sidebar widgets, you can actually create a sidebar group.

So that’s another thing that I love about Low Variables is I generally have an admin group where I just put like all the header and footer HTML and stuff that I hide from my clients that they don’t get to look at, but then they have editable content where it might be called sidebar and then they have all their separate fields in one place just the sidebar, and then if you group another bunch of variables for, say, home page, because generally speaking, they want to customize the feature of the day for their slideshow or something like that, and then you can have a home page group where you’ve got the slideshow field or something, and then you can have another like intro field that changes, depending on what they want to do, and I love the fact that you can group the items and fields so there is more organization because as you use Low Variables…

Emily Lewis: You start creating a lot more variables. [Laughs]

Lea Alcantara: Yeah. [Laughs] Exactly.

Emily Lewis: Yeah, another scenario, it just started. It occurred to me for the latest project I was working on for Low Variables is that the client had hired an “SEO expert,” and so basically they had AdWords tracking, Google Analytics. They also had some tracking that showed up only after a conversion happened and things like that, and so I created a Low Variables group and then a variable for the AdWords, a variable for the Google Analytics, and that way the client could have access to those things without also having to go into maybe the whole footer that I might have had in Low Variables that I want to hide from them. Low Variables literally changed my development life last year when I started using it.

Lea Alcantara: Yeah. I think that’s true for a lot of people.

Emily Lewis: So we still have a lot to cover, so I’m just going to quickly mention another one. When I was describing why I like the Low Variable, I described the situation of not wanting to create a whole channel when it really only needed one entry like for an address field or something.

There is an add-on called Single Entry. It’s $5, and totally worth $5, and what it does is you do create a channel, but you restrict it to a single entry, so that the user isn’t creating multiple entries in that channel. They’re just always editing the same one.

Lea Alcantara: Yeah, and the example there like in About Us, like generalization one. I know for sure I’d use it for Terms of Use and Privacy Policy.

Emily Lewis: Oh yeah.

Lea Alcantara: So those are like typical things that I think you would need just a single entry. So using the Single Entry add-on would be really good for that, but you can also use Low Variables too.

Emily Lewis: [Agrees] You see, there are like 20 different ways to do things. [Laughs]

Lea Alcantara: Oh yeah.

Emily Lewis: Speaking of multiple ways to do things, how do you handle navigation?

Lea Alcantara: Oh, now that is like a Pandora’s box [laughs] for ExpressionEngine, and I’ve used a whole bunch of different ways. I always try to see what I can do natively first. So what that really means is, can I use a combination of category and channel entries to autogenerate the navigation? And then I’ve done that, and for a specific client. What this is really great for is I remember talking at the EE help chat about navigation, about this, and a lot of people actually do this.

They do a mixture of categories and channel entries, and this works really well if the structure of the site really fits that, and the client doesn’t want you to change that structure or anything like that very much so it’s still confined to that navigation. It’s great because it’s using native channel entries and categories and you just output it into a variable or a snippet or whatever, and it just works just fine.

If a client needs to reorder it, what I’ve done is I use Low Reorder and it’s hooked up to category listing and then they can reorder the entries per category for the navigation, so that’s what I’ve done.

Emily Lewis: So the workflow you’re describing, is it the categories … Do they serve as like the primary navigation basically?

Lea Alcantara: Yeah. So the categories are the primary navigation, and the entries are the sub-navigation of that category.

Emily Lewis: Okay, this maybe common, but I’ve never tried this approach, but that seems to make sense.

Lea Alcantara: Really?

Emily Lewis: Yeah, especially since you mentioned Low Reorder, so I haven’t tried that one.

Lea Alcantara: That’s the one that I try to tend to do because it’s pretty native.

Emily Lewis: Straightforward.

Lea Alcantara: Yeah, exactly, and then I could just do category entries list essentially, but of course, the caveat is if the client wants something a little bit more robust or custom, their dropdowns are a little bit different or something like that, as long as it’s straightforward, that works. If it doesn’t, then I end up doing a lot of custom stuff. [Laughs] So what do you use?

Emily Lewis: Well, if it’s a really simple site, I just use, not anything with categories, but if it’s just got a single level of navigation, I just use the template groups to sort of guide that and the channels.

When I need something more robust, there are two add-ons that I’ve tried for different scenarios. One is NavEE and the other is Structure. I think I can honestly say that I don’t know which one is my favorite, and with that said, I’m not sure either as a favorite. Like, they do their jobs.

Structure … I’ll choose Structure if the client explicitly wants to be able to have like a tree view of their content and a drag and drop interface to change their navigation. That’s what I think is really powerful with Structure, and it’s also powerful in terms of its generated content. Like it will generate bread crumbs for you and you can choose to only show parent-level or show child-level or whatever. So that stuff is pretty cool.

Also, I’ve used it about four times and each time I still struggle to get it to do exactly what I want. And on this project I worked on, I worked with another front end developer. I just did the ExpressionEngine dev. Her markup that she needed to do her jQuery and styling and everything, we couldn’t, I couldn’t get Structure to do it. I couldn’t get Structure to output the markup that she needed, so it was messy.

NavEE, it’s so much simpler than Structure in terms of what it can do. With this one, you’re actually manually creating what your navigation is. With Structure, you create children of parents and that navigation structures inherited through that, but with NavEE, you’re creating things and you’re indicating what level it is.

With NavEE, you can also create like a utility nav that isn’t tied at all to your primary levels of navigation, but it’s just, “Oh, go to our About Us page, or go to our Contact page, or donate here.” Just like a list of simple quick links, so you can do that. So it’s easy, but then again it doesn’t also have the same interface. It really depends on how much the client really wants to have control over their navigation in the future. That’s how I decide between those two.

Lea Alcantara: Yeah, it’s definitely interesting because for me, I do find that most clients, at least my clients, tend to not change their navigation that much, you know?

Emily Lewis: I agree.

Lea Alcantara: Especially the main navigation, like once that main navigation sat, it’s mostly if they want to generate a new page that it goes into right sub-navigation. That’s all they really care about.

Emily Lewis: Yeah, I think that’s true. I think the one or two exceptions may be those clients that are coming from a different CMS and then they couldn’t change their navigation, and it becomes like a top priority for them to have that. Like I’ve picked up a client that I moved from a WordPress site and that was one of their main pain points about their previous system. That was why we ended up picking Structure for them.

Lea Alcantara: Absolutely.

Emily Lewis: So the navigation, those are the only two ones that I can recommend. I think navigation … it’s a bit of a challenge across the board. You really do have to play around before knowing which one you want to go with, or if you want to go with like what you were describing a native workflow.

Lea Alcantara: Yeah. The one add-on that I used, that you haven’t mentioned yet, is Taxonomy by Iain. It’s sort of similar in the way NavEE sort of is, but not really. It’s just if you’re using the template group, URL title, that kind of things, it’s built from your entries and your pages module or whatever.

So again, a lot of your choices also for add-ons is like how did you build your site in the first place? How did you build your site, and then which add-on may be fits the way it’s been built? So then if it’s been built with a whole bunch of just the pages module, let’s say you decided against Structure and you just want to use the pages module, and then a whole bunch of those pages.

Timestamp: 00:40:07

Like Taxonomy pretty much is straightforward, and like the drag-and-drop interface reminds you a little bit of Structure too. Like if you’d go into there, you could go at add an entry, visit page, [laughs] those kinds of things, and then you can just drag and drop around and then it creates the navigation for you. So that’s also a potential.

Emily Lewis: Again, for our listeners, do research before you pick one. See if you can try one out on our personal site first too, and sometimes it can feel like going down a rabbit hole. I felt that way with Structure in trying to get certain things to work with the recent project, and I wasted far too much time, and I think if I had chosen differently for navigation, that maybe I might not have wasted so much time.

So the next thing I want to talk about with regard to the control panel experience is how you can sort of customize the control panel itself, and you had made note of two add-ons you’ve used. I’ve used neither of these. So do you want to talk about like what this scenario is when you’re customizing not just the published form, but the control panel itself?

Lea Alcantara: So the first one I was sort of hinting at it earlier in the episode, it’s called Zoo Flexible Admin. I love it. I absolutely love it.

So do you know how we can only kind of add or subtract navigation from the main tabs at the top? Well, and that’s how you do it natively, but well, Zoo Flexible Admin essentially allows you to do everyone at the top. You can rename the labels, so let’s say you don’t like the word publish and you like the word write, you can change the word write. You can reorder how the published content is, because right now, for example, if you create a whole bunch of channels, it just orders it by alphabetically, I believe. But what if you want to order it by priority, then you could do that with Zoo Flexible Admin. It’s really an easy drag-and-drop interface.

Emily Lewis: So is this by like individual records, like if you have to modify those menu buttons, you have to do it logged in as that member, or can you do this by group?

Lea Alcantara: No, it’s member group. It’s by member group, so for example, what I would do is I’ve got, of course, the super admin group, and then I have like the content editor group, and generally with the content editor group, I totally rename it … like Publish… and then I actually take out the Edit, which is normally default in the Publish and just have it separate side-by-side, so that they’ve got the Publish and Edit side-by-side instead of having it the Publish then Edit, which I find a little odd personally.

So they could deal with that too, or basically, there are just so many things you could do with this add to totally just do whatever you want and point to whatever you want to a particular page. You can point to a specific URL. You can point even to an external URL. You can point to as many levels as you want, and as long as, of course, everyone has got the proper permissions, of course, even because if you point to it and they don’t have the permission, then they can click on it and nothing happens. But I think the most important thing out of all of them besides, of course, clearly you can point to whatever you want is just the fact you can rename the links, you know?

Emily Lewis: Yeah. That would be great to be able to do that.

Lea Alcantara: Yeah, exactly. So for example, even if the channel was called news, and let’s say you wanted it to be called news article in the Publish dropdown just because it made more sense or something. Anything that can help your client understand what this is, really helps. You can also have custom breadcrumbs.

Emily Lewis: Oh yeah.

Lea Alcantara: Yeah, exactly, exactly. I love that. [Laughs] I love it. I love it.

Emily Lewis: [Laughs] All right. Oh, it’s not too expensive. It’s $22. All right, I’m going to try this want.

Lea Alcantara: I definitely think that they should be… I mean… I know, this is like cliché. I wish this was native. [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: Yeah, like that’s how much I love it because it’s really, really good. The only caution that I have with this one is make sure that you’re using the latest version of EE, especially if you’re using MSM.

Emily Lewis: Okay.

Lea Alcantara: Multi-Site Manager.

Emily Lewis: Okay.

Lea Alcantara: Yeah, because it uses jQuery and JavaScript in order to generate some of the links, and if you’re switching through MSM sites in older versions of EE, they cache the JavaScript so therefore when you switch around, it doesn’t refresh the main menu navigation even though it’s customized. Unless you like hard refresh your browser, and that’s really annoying.

But in the latest version of EE, they no longer do that for the control panel or certain parts of the control panel so now MSM works and it dynamically changes based on MSM. Yeah, that’s another awesome thing. This is MSM-compatible, so you’ve got several different channel types or editing types or whatever, depending on what site it is, this really helps customize the navigation experience.

Emily Lewis: And you also mentioned Zenbu?

Lea Alcantara: While Zoo Flexible Admin changes how you actually interact within the control panel, Zenbu is to really supercharge your edit section. Now, for me, I only ever really used Zenbu for my clients with a lot of data or e-commerce clients or something like that. Otherwise, the default ExpressionEngine edit screen is pretty good, but default edit screen of EE, you can’t customize what fields are shown right when you enter that screen.

So for example, you just see the title, the edits, whether the status is open or closed, that kind of stuff. But what if you’ve got several other fields that you want to see at a glance, like if you’ve got an e-commerce site, if you wanted to have the success or failure fields show up, default EE doesn’t show that to you. You have to actually click on the entry and see it.

While, with Zenbu, you can customize exactly how your edit screen looks like totally, and member group specific too. So you could say that content editors get to see this amount of custom field as little or as much, and then in addition to that, like that was one of the best features too like, for example, let’s say another field that you want to see maybe at a glance, let’s say, you’ve a thumbnail image, you can’t see that in the default EE, but with Zenbu, you can.

If you want to see like at a glance at the edit screen and then in addition, you can save specific common searches and then you can also like be granular over your search items. So in the default EE, you can like, “Okay, I can check channel entries and the title and the date or something like that as the default.” But with Zenbu, you can check the category date, entry title, whether the author is this person, and what language it contains, what this custom field specifically contains. So at a glance, it’s really, really, really useful to see all the information.

You can also reorder the field order. So for example, in default ExpressionEngine, well, you can’t change the order. It is what it is. It’s going to be title, or is it entry ID, and the title and then let’s say you don’t want that. Let’s say you want date first, right?

Emily Lewis: That just make so much sense.

Lea Alcantara: Right. [Laughs] Because I’m just looking at our entries here. Like let’s say you want date before you wanted the entry ID for whatever reason. Well, you can reorder how it looks like left to right, or for example, even in our own ExpressionEngine Podcast type of thing, if you wanted to see the length of the podcast field. in our default one we cannot right now. But if we wanted to, we can see the length of each podcast at a glance, et cetera and so forth.

There are so many features with Zenbu, and it’s just makes the user experience to be able to see certain things at a glance so, so easy, and it’s compatible with a lot of add-ons. So if you wanted to see a Matrix field default, you can, and then of course stuff like CartThrob.

Like for example, CartThrob has this field where it’s like the multiple choices field where you can have quantity and the price and then the item, but because it’s not a real Matrix field, it’s a CartThrob field that looks like a Matrix field, default on the edit page right away, and there’s custom date formatting, blah, blah, blah. You can guys can visit the link when we link to it and you can see all the features, but you can customize the edit screen like crazy with this add-on.

Emily Lewis: I know you’ve mentioned it before. I’m going to have to try that. I actually think that I can get that into a current project right now, and I think the client would really appreciate it. It’s a situation where because the wonderful agency that designed the site, the way they designed their navigation, the creating entries … the title field sometimes would be what the navigation label was, but sometimes it wouldn’t, and so when you look at the edit screen, sometimes all of the titles are the same because that’s how they are entering the content, using a different field. And so it’s almost impossible to know which one to select to edit because they all look exactly the same other than the ID. This would be a fantastic way to subvert that problem.

Timestamp: 00:49:52

Lea Alcantara: Yeah, absolutely, and I do believe if you’re going even further with Zenbu, there’s a separate add-on you could buy that’s related to Zenbu. It’s called Hokoku. It’s made by Nicolas Bottari, and basically, do you know how sometimes we’re like, “Okay, can I just get a list of all the members with this particular field or this particular thing, or I want a list of all entries with all these custom search options.” Like let’s say you’ve got all that.

First of all, you can customize that search in Zenbu by default, but let’s say your client wants to have a monthly report, or wants a report or a list of those entries or a list of those members or whatever. If you buy Hokoku, you can export this search field entries like the actual results of all of that into a CSV, on a HTML table or JSON file. Pretty amazing if you need that functionality.

Emily Lewis: Yeah, well, it’s the kind of things where I’m like, “Now, why didn’t we have this topic three weeks ago because I have done this.” [Laughs]

Lea Alcantara: [Laughs] Yeah, exactly, like I mean, because Zenbu, you can do some crazy sort of options, and then it gives you a list of entries with all those crazy search option answers. The next thing that a client usually asks me is, “Can we export this so we can put it into an Excel spreadsheet or something?” I don’t know, like for whatever reason they need to have some data. Well, then you can, along with Hokoku, export the search.

Emily Lewis: All right, now I’m going to force us to be a little fast on this last little bit because [laughs] this is turning into probably our longest podcast ever.

What about when you want to avoid the EE control panel completely, like then you have some content authors or client that has a need so that their authors are not signing into the control panel and using that interface?

Lea Alcantara: Yeah, and that’s something that we really need to push sometimes that not everyone wants to or should go into the ExpressionEngine control panel, and then at the same time, even after all these add-ons that we talked about, there are some branding concerns, and then there are some security concerns, and also training concerns, et cetera and so forth.

Well, avoid the EE control panel altogether and create your own secure login-related front end way to view and edit entries. So what you could do, and I know a lot of people do this and this is by default, you can use a Stand-Alone Entry Form or Safecracker, so that’s native to EE. What you would do is you just have a template that is secure, that people can only see if they’re a particular member group and logged in, and if you got the Stand-Alone Entry Form there, then they can actually interface with the ExpressionEngine database and create entries, and you would just create a front end look and feel and that would be nice and consistent.

It’s as if they don’t even know that ExpressionEngine exists so they can be able to enter entries that way, and of course, clearly, that means you can totally customize the user experience because it’s up to you to design the template in the first place.

But if you want to have something more robust than that, the next thing that a lot of people want to have front-end access and definitely avoid logging into ExpressionEngine too are membership sites, and with membership site, the two options that you can use, the one that I use mostly is Solspace’s User Module. Basically, you’re able to edit member information using the User Module, and again, you have a front end way so they can change their password, so it’s something that could just be as simple as if they need to change their password and you want to not be able to do that yourself and don’t have to deal with the admin for that, and you want to give your users the power to do that, then you can use something like Solspace’s User Module to do that.

They can change their address and their names without ever looking at the ExpressionEngine front end, and the other one that is really popular too is Zoo Visitor, and it’s similar in concept as User except it actually doesn’t interface with… well, it does. It’s hooked to the member module, but the actual member fields or information is saved in the channel entries.

Emily Lewis: Oh okay, instead of with the member record itself.

Lea Alcantara: Yeah. I mean, it is hooked to the member record because the member record store your passwords and your username and your email. So that’s by default, but if you wanted to have several custom field information, if you wanted to use Matrix to store certain pieces of information or if you want to use another add-on like a gallery is related to this person or something. Then you could use Zoo Visitor for that, and administer everything using a channel entries and the Zoo Visitor tags. And so it’s also really, really powerful way to interface without having to go into the control panel, and you could of course customize the branding and look and feel as well.

Emily Lewis: All right, cool. I had to use Solspace’s User Module for one client project where they didn’t need to change their password, but I haven’t done it on anything else. That was my first and only thing that I’ve done to allow users to edit outside of the control panel, and at least from my experience it was really easy for a first time.

So the last thing I want to make sure we touch on before we finish up this episode is it’s kind of – I don’t know – maybe one of the most important things other than what you’ve done in terms of development for making a good user experience for your clients with ExpressionEngine.

And that’s the handover/training process. I know in my contracts, I always specify training, and it usually is based upon the fact-finding I did with the prospect in terms of what their expectations are, the technical proficiency of their content authors, if there are different member groups that need their own custom training that’s just specific to them, even so in as much as what kind of documentation do they want. Do they want screencast, or do they want like a shared Google Doc, or all of that stuff? And I always include it in the contract so it’s specified from the get-go, and there isn’t a surprise at the end of the project when I want to hand this over to the client and they’re like, “Oh, we wanted videos.”

So I think that that’s really important to figure out what they want from the beginning and then deliver on that, although the point you mentioned earlier about budget is equally relevant to this as it is to development. If the client is asking me for videos and documentation, they want me to train three different groups of members, all of which have different workflows, that’s not going to be a 2-hour training session. It’s going to be more and time is money, and even making videos is money, so all of those things need to be taken into account.

Lea Alcantara: Yeah, absolutely, absolutely, and I think by default for me with my client, I always do at least a one-hour training. That’s like just the default everyone gets, that little talk, but if there’s anything else crazy beyond, again, like you said, if there are multiple user groups, or I have to keep coming in, or definitely if they want to have the screencast because that’s time consuming to deal with as well. That’s definitely something to consider.

Emily Lewis: Yeah, so I do feel like training is hugely important. It’s usually my first opportunity to, as I’m showing the client how to use the system, to actually hear directly from them what their initial experiences are, and sometimes things come up that didn’t occur to me during development that I can then address before anything is live and finalized and the project is closed. So training is hugely important, I’ve included it in every contract. It’s just something I refuse to skip.

Lea Alcantara: Yeah, absolutely. So this has been like the most epic, long… [Laughs]

Emily Lewis: [Laughs] Well, we haven’t reached…

Lea Alcantara: ExpressionEngine podcast. [Laughs]

Emily Lewis: With not having a guest where we feel bad for keeping them too long, it’s probably a bad idea. [Laughs]

Lea Alcantara: Yeah, yeah. [Laughs] Maybe we should just wrap it up for today.

Emily Lewis: That sounds good.

Lea Alcantara: [Music starts] That’s all the time we have for today. Now, we’d like to thank our sponsors for this podcast, Responsive Web Design Summit and Pixel & Tonic.

Emily Lewis: We would also like to thank our partners, EngineHosting, Devot:ee and EE Insider.

Lea Alcantara: And thanks to our listeners for tuning in! If you want to know more about the podcast, make sure you follow us on Twitter @eepodcast or visit our website, ee-podcast.com.

Emily Lewis: Don’t forget to tune in to our next episode when Chad Crowell and Casey Reid from Clearfire will be joining us to talk about mergers and partnerships.. Be sure to check out our schedule on our site, ee-podcast.com/schedule for more upcoming topics.

Lea Alcantara: This is Lea Alcantara.

Emily Lewis: And Emily Lewis.

Lea Alcantara: Signing off for the unofficial ExpressionEngine Podcast. See you next time!

Emily Lewis: Cheers!

[Music stops]