This episode of WPwatercooler is brought to you by ServerPress makers of DesktopServer they make local WordPress development yeas, check them out at ServerPress.com
EP361 – How to Client-Proof a WordPress Website
Jason Tucker 0:11
Hey, what’s up everyone? This is Jason Tucker and this is WPwatercooler episode number 361. How to client-proof a WordPress website. This episode is brought to you by ServerPress. makers DesktopServer they make local WordPress development easy check them out at serverpress.com
I’m Jason Tucker, you can find me over at @JasonTucker on Twitter. My website is JasonTucker.blog
Steve Zehngut 0:33
I’m Steve Zehngut. I’m the founder of Zeek interactive and I run the OC WordPress meetup.
Sé Reed 0:37
I’m Sé Reed I make WordPress teach WordPress at Sereedmedia on all the things
Russell Aaron 0:44
My name is Russell Aaron, I do things with WordPress in Las Vegas.
Jason Cosper 0:48
It’s Jason Cosper aka Fat Mullenweg
Jason Tucker 0:54
go help us out over on Patreon. Go to our website over at patreon.com/wpwatercooler and subscribe to us. You can also click on that bell. We’d appreciate it.
How’s it going, everybody?
I know right?
Steve Zehngut 1:11
We’re all we’re all grown up
Sé Reed 1:16
Ring my bell
Steve Zehngut 1:18
Ll Ring my
Sé Reed 1:21
[Singing Ring by bell]
Steve Zehngut 1:25
Pull your phone again Se pull your phone.
Sé Reed 1:29
I’m Se Reed. I’m Se Reed. I’m Se Reed?
Steve Zehngut 1:34
Is that a question mark at the end?
I’m Sé Reed maybe allegedly.
So I gotta I gotta tell you Jason, this normally our intros take like seven minutes, right? You’ve made it 30 seconds. It’s so efficient. What are we gonna do? What are we gonna do that extra seven minutes. We got we get six and a half minutes to fill now.
Sé Reed 2:00
Discuss the intro. Yeah, at least this time.
Jason Tucker 2:07
So yeah, we’re gonna talk about client proofing WordPress website. I know this is a topic that’s near and dear to our hearts because for part of it, I would imagine that it’s, it might be a revenue stream where, you know, the client breaks the website, now you’re gonna have to go and fix it for them. But then on the other side, you just fix you just built that website, and now they’re trying to break it. And so you kind of want to
Steve Zehngut 2:34
how dare they, how dare they Exactly.
Sé Reed 2:38
Jason Tucker 2:39
discuss a little bit about this.
Sé Reed 2:41
So for me, and I’m the one who brought this up not because of individual problems or that this is part of why I’ve never I don’t have a great portfolio because basically, I disown all the websites that I build shortly. And I’ve recently discovered a way around this but I basically am like nope, but So it’s not so much that they break it for me even, it’s just that they, they use it incorrectly. And you know, you can do a lot of training and documentation and I do all of those things and I still feel like people find a way to put images that are you know, to have text behind them that are like, why
Steve Zehngut 3:24
did you Why did you upload a TIFF
Jason Tucker 3:33
I mean, you can put you can put image size caps on and like instant compression and so we can talk about all those things that you can do to like kind of prevent that from happening because those are really important but you can’t help someone upload a picture that is a good picture like you know, that should go there, right like that. Hey, maybe text on text isn’t the best look for a banner.
Steve Zehngut 3:57
Jason Cosper 3:59
are you Or you can’t stop somebody from uploading a PNG when it should have been a JPEG? Well, I see that all the time.
Sé Reed 4:08
getting a little like even that, like if that was the problem, then I wouldn’t even you know it i’d be happy if that was our problem is right PNG or a JPEG right like that’s that’s another level of optimization that feels like a luxury.
Jason Tucker 4:24
Well let’s jump into that one. Let’s do client proofing images real quick and see what we can discuss about that part of it. So those fields can be set up so that they can only upload a JPEG if we want to. Or if you’re using advanced custom fields. using any of those things. You can say like this is the size This is the dimensions if you want it to, or I’m gonna force it to be a particular dimension. But there are some of those pieces that you can do. Have you guys explored any of that?
Sé Reed 4:52
We’ll see. So that’s the thing, right? That’s the word we’re talking about in terms of the level of customization to client proof, a site Like you can just have the basic features of ad media and use a featured image. But that doesn’t client prove it. So in order to actually successfully client prove it to make it Oh, this is the right size, this is the right type of image, whatever, you literally have to build custom stuff in order to do that. So they’re only using you know, these particular meta fields. Why not? Steve, you disagree? Judging by your face?
Steve Zehngut 5:23
No, no, no, I don’t I don’t disagree. What I wanted to take a step back and just just talking about him. The negative this term client proofing is right,
Sé Reed 5:32
but I guess, negative space when I thought no,
Steve Zehngut 5:34
no, no, no, it’s it’s fine. It’s totally linkbait It’s fine. We can get we can get there in the end. But you you can you can. So let’s there’s another there’s another problem that has to do with images. That’s why I cringe when you when you said what you said, right? And so you can put a lot of things in the background that sort of automates, automate things so that images are resized approach. appropriately, so that so that they’re put in the right spots, right, you can do a lot of that stuff sort of on the back end so that the client doesn’t have to think, right because even if you put all the instructions in the world on this is the file type you need, this is the size, this is the optimal size, right? You should compress this this way, they’re still going to do it wrong, right? In my experience, there’s they’re always going to do it wrong. So what you need to do on the on the other side of that is put some things in place to make sure you’ve got the right image sizes set up in WordPress so that WordPress is creating the right image image sizes for you. And so that that’s really what needs to happen is WordPress can can kind of take over the automation, a lot of this on a lot of this stuff so that you your clients can’t make that mistake.
Sé Reed 6:44
This is really the difference though between out of the box WordPress install and a custom developed site because it’s not even so much about the design of the site. I feel like at this point, it’s literally about creating In the custom workflow, and creating that, so that that part is smooth on a consistent basis.
Steve Zehngut 7:08
So let’s talk about what the real issue is. If someone if an image is no, no, no, no. If you know what, what happens, what’s the result of an image being the wrong size? Right? So most things, you’re gonna
Sé Reed 7:22
learn speed time. Yes. Right into it, were you leading with somewhere? No, that’s,
Steve Zehngut 7:27
that’s it, I mean, you the, the, the, the image itself is probably going to size appropriately within the theme. Most themes are able to sort of size the image, right, something’s, it just breaks the whole page. If you’ve got an image, it’s too big, but most things can kind of size the image. But if you’ve got an image that’s larger than the than the display size that you need, you’re taking up extra load time, extra bandwidth, and really causing a bad user experience. And Google’s gonna ding you for that.
Sé Reed 7:55
You can also put in images I know we always talk about images that are too big because everyone’s upload directly from their phone. But there’s also the problem of uploading images that are too small. And then if the theme is SIZING IT, it’s like oh no, this has to be 1080. But you know, whatever. And it’s this you know, 600 picture suddenly that you’re on pixelation, Doom land.
Steve Zehngut 8:16
Yeah. What is my image look like shit.
Sé Reed 8:21
Images that’s this was the
Jason Tucker 8:22
image upside down. I used to have a client that would upload images using an iPhone and the iPhone would upside down the image every single time and I had to come up with a way to fix that.
Steve Zehngut 8:35
I see more of them sideways, right that’s sideways right there. 90 degrees, 90 degrees off,
Jason Tucker 8:41
right or not.
Steve Zehngut 8:44
But but but the different. One of the things you would start to touch on saying I think this is important is an off the shelf theme. Right? Not all but but some are not going to take into consideration what we were just talking about, right? They’re just gonna let there’s a lot of things that are just going to Show them the original image of the full size image right no matter what you upload so that’s what gets displayed to the user and that is bad
Sé Reed 9:08
there’s also I mean you’re we’re also in this point with the images it turns into cropping if you have the wrong dimensions of an image or the wrong like you know maybe you can set up different plugins none of the literally none of the cropping plugins that I’ve tried to work with ever have worked properly. Have you guys ever found one that works properly?
Jason Tucker 9:27
No. And the cropping system within WordPress kind of sucks, too. It’s like, Well, the first thing you click or you click on Yeah.
Steve Zehngut 9:37
Sé Reed 9:39
You it’s already high. It’s already clicked. That’s what you have to remember. So yeah, it’s like pre ready, you’d like skips a step for you. So you’re ready to that right now.
Steve Zehngut 9:51
It’s really ready
Jason Tucker 9:54
was an Adobe product was called PreReady.
Sé Reed 9:59
Jason Tucker 10:00
Russ Russ mentioned responses in the chat just to bring it up real quick just is that is that the size of the image is something that can be taken care of, like, you can say, this, this area that you’re going to put this on this, this image in will be the size.
Sé Reed 10:15
Right? But are you using a pre sized version of that that word thing? Or is it taking the 1920 by whatever 800 image and trying to make it into a 300 thumbnail? And that’s a big difference. Yeah, it can show up right? But now you’re trying to like basically, you know, size something in size an elephant into the size of something. It’s a mouse and it’s loading an elephant. And that put me on
Jason Cosper 10:42
Steve Zehngut 10:43
That’s the tweet for today.
Jason Cosper 10:45
That’s it where I, where I see a lot of this happening is something that’s very popular with site owners is unsplash. They you know, guys, free you know, the images look However, they grab an image off of unsplash and then just throw it, upload it into their library. And you know, no resizing no anything else. And these images are renaming. No renaming. And these images are 3000 pixels, at least, sometimes 6000 or higher 300 DPI, like stuff that’s not web ready or anything else. And it’s, they’re just weighing down their page. And then they come to someone like me who worked in site performance and go, Why is my page slow? Well,
Sé Reed 11:37
so this just is us Bitching again, instead of talking about actually how to fix that we do this a lot. But what
Steve Zehngut 11:45
is that new?
Sé Reed 11:47
I think what you’re talking about Steve is really important in terms of making it so that WordPress is actually uploading and create like changing the actual pre created thumbnail sizes. small thumbnail medium large that WordPress makes when it uploads a picture so that it is the right size for what the site is using. Because then you can specify Oh, I want it to use a medium here. And it’s going to always be the right size, you’re not going to have to do, you have to do that a lot with a lot of themes anyway, because the medium is going to be 300 by 400, or whatever it is. And then the size of the picture in the theme is, you know, 500 by 600, or whatever it is,
Steve Zehngut 12:27
but a well designed theme will define those image sizes up front, right and use the appropriate image size in the proper place. WordPress has that built in, you can define custom image sizes in the back end, and it’ll it’ll do all the cropping and compression for you. So you don’t have to think but most off the shelf themes don’t do that.
Sé Reed 12:45
Yeah, the cropping is still a problem because if a client picks a picture that is, you know, heavy on the right hand side and you are cropping from the middle. There’s certain This is where I was also getting frustrated. There are certain points where you can’t Not proof the site, like you can only offer so much guidance, and then you just have to be like, Alright, well, I guess that’s your flyer that you’re putting up with text behind your text. And, you know, it’s the right size, and it’s loading properly. But it looks insane.
Jason Tucker 13:15
Let’s get into content real quick if we can, because we’re I wanted, I’d like to at least chop this up. So we talked about more than just
Sé Reed 13:21
Jason Tucker 13:22
I’m moving us along. So one of the things that the one of the things that Steve’s mentioned in past episodes is he doesn’t just use that content box as the only place where someone’s putting in content. You’ve talked a lot about using like custom fields and stuff of being places that you’re collecting the data that you need to be displayed onto the page at some point. And and can you talk a little bit about that, why you wouldn’t use just the content, you know, the main content box, and actually, yeah, and actually using custom fields.
Steve Zehngut 13:57
Well, where are we I think we’re, we’re using custom fields. And we’re talking specifically about ACF is, is if we’ve got specific content that needs to go into a specific place on the, within it within a template, right? Say for instance of video, you’ve got a video box that goes in a specific place in a template, you don’t actually want that video just floating around in your content, you want that in a specific place, we use advanced custom fields for that.
Sé Reed 14:22
custom fields for the fantastic because you can literally like I don’t know, at this point, I’m not sure I could make a set a good site without it because of this specific reason. Because you can feed that information, ask the client to put in the information that the page needs and put it in the spot that you want. All I know, I’m always getting sites that I’m fixing from pre pre builds, like this is like my, my, my bread and butter I guess basically people are like this site that someone built is terrible. I can’t use it. And yeah, they like it’s terrible. Because a lot of a lot of like, here’s a site They’ve had for years that they’ve got content on but they’re actually having to structure their content in the contact box with shortcodes or spaces or crazy, crazy stuff is going on. And I’m able to use advanced custom fields to create meta boxes for all of those things. So you know, the the subhead for a post goes where it says subhead, and you know, the the author bio goes where it says auto, auto buy author bio, bio,
Steve Zehngut 15:30
I would caution you and I’d be careful because advanced custom fields can get unwieldy, right. And so you want to pay attention to the user experience inside of the dashboard as much as on the front end, right. So your, your client has a particular workflow and user experience that they need to that you need. I think you’re responsible for simplifying as much as
Jason Tucker 15:49
you’re not telling me that obviously, you
Steve Zehngut 15:52
know, I’m telling the audience right here. And so one of the one of the nice things that advanced custom fields has built in is they’ve got conditional logic right and So all of the fields don’t need to be shown at all times, right? You can have different states of content. And so use that. That conditional logic as much as possible to simplify the user experience in the dashboard.
Sé Reed 16:14
Yeah, I think the easier you make it for the client to put the information in the clear it is where they’re like, oh, put this here, put this here, the better. Well, I guess it’s like the whole, you know, garbage in garbage out thing if you’re able to give them clear stuff to put in. So not garbage. What’s the opposite of garbage? quality content? I don’t know.
Jason Tucker 16:38
Garbage for years. I have no idea what it is.
Sé Reed 16:41
Good stuff in and then you get the good stuff out.
Jason Tucker 16:45
What it’s like mad libs. It’s like mad libs for WordPress. It’s
Steve Zehngut 16:50
one of the things you know, one of the things we like to do when we when we hand off a site is first of all, we do training and SES mentioned this a couple times, but we also do a couple sample pieces of content. Write and just leave them in draft mode, that way that your client can refer back to those, right? If they’re if they’re lost, or if they need to see a sample of something, right? Also, you can put in the plug in post duplicator, right. And so if you have sample pieces of content, have them not start from scratch, start from a sample, duplicate it and then use that as a starting place so that they’re not, they don’t have this free form area that gives them the ability to screw something up.
Sé Reed 17:28
That actually dovetails really nicely into the design component. Because when we’re talking about you have more to say,
Steve Zehngut 17:34
I want one more. One more comment about advanced custom fields. This This changed a lot I think when when blocks are introduced or Gutenberg was introduced, right and so advanced custom fields are still important. But Gutenberg changed this quite a bit because because you now have blocks within the content itself, and you’re not using shortcodes as much your content isn’t as messy as it used to be in the classic That’s all.
Sé Reed 18:01
Yeah, but if you’re still free forming the content, it now it’s almost so much that you have even more you need to structure because otherwise the client is like literally just throwing content anywhere. And, you know, you’re like, just make a column here. I mean, you can’t say that to people, like you can’t be like just use a column block or, you know, just use a heading block and make sure you set it at heading three. Like that’s, that’s literally not something that a lot of clients are capable of on this.
Jason Tucker 18:30
Jason Cosper 18:31
no, I was gonna say, Steve, you do some some pieces of content that you can use and duplicate. Do you ever go in and do phobe style guides like I do, or anything like that? Okay, say does
Sé Reed 18:46
and I rely heavily on documentation for this because then when I inevitably get emails about how to do a thing, I have something I can reference and then I also can update that document if they have a question that we haven’t answered yet. So that also helps for training new people so that when they bring new people in, I don’t have to do a whole nother training session, which I guess could be like, you know, a moneymaker at some point, but I just it just makes me tired. So I’m like, go reference, you know, they have the documentation there, to a degree, depending on how good you can make that documentation, it can really help. There’s also the idea that people don’t look at the documentation. But, you know, if they ask a question, you can at least refer them to a section in the documentation and, you know, make that a shorter, a shorter answer versus here. Let me explain how to do this again.
Jason Tucker 19:41
Yeah, use that instructions, field and advanced custom fields as a way of describing what it is I want them to put in there. And then making sure that the, that the the field type is set correctly, if it’s a URL that they have to put the URL in there, and if it’s text, they’re going to put text in there and if I use a text, you know, large Your text box. It’s like well, I want you to put, you know, more texts than just one lines worth of text in there.
Sé Reed 20:05
I just want to before we talk about design, even though that was a great segue before I do want to talk about now, Steve, just totally distracted.
Chat, I broke,
Steve Zehngut 20:19
I broke, I broke, Se
Sé Reed 20:21
Jason Cosper 20:26
Okay, since it’s broken
Jason Tucker 20:27
and Cosper, go
Jason Cosper 20:30
for it. Something something that I’ve used on a few sites that I’ve done lately is this plug in called pre published checklist. I’m not sure if either of you or any of you have used it before. But basically, it allows you to set up a simple checklist that you shows up in the little side column on the block editor that you can check off so I’ve set you know make sure that the slug is Is the slug that I want it to be on the site. Make sure that it doesn’t check that stuff for me, but it gives me It won’t let me publish. It says you haven’t checked off these things on the checklist. Like you should go back and do that. It’ll still wait publish, you can actually and you can set it to if these things aren’t checked off, do publish.
Jason Tucker 21:25
Sé Reed 21:26
I’ve never seen that plugin. I’m gonna check that out. Really great client proofing plugin, like Yeah, I think that’s it, it was built for. That’s awesome. I’ve remembered what I was gonna say before Steve over here in
that this is so you know, you can load in a site with a theme and have especially now with Gutenberg and the Gutenberg library, you can load up designs, you can get all that stuff done fairly quickly. Like you can assemble a site fairly quickly. And I just think That this is really what a lot of web developers, okay, a lot of web development in terms of custom coding and all that not what I’m talking about. But in terms of building websites, and building a website that works for a business. I think that this type of customization filling out the instructions fields, having that correspond to documentation, having a style guide, having a clear understanding of the workflow, when you are publishing that corresponds to what’s happening in the fields on the post page. This is really what makes a website, a good website, not some front end banner photo, because you can have the prettiest banner site in the world on Squarespace and still not, you know, struggle every day to like, put that content onto the page. And so more and more this component of what we’re talking about, like this workflow, using this process, figuring it out for the client, figuring out what they need, documenting it, this is This is what sets apart a good website from the
not so good.
Jason Tucker 23:05
Speaking of good websites, you got the design side of it as well, which I’d imagine we all break the design, or the customers break the design by moving things around or putting in too much text in the box that was only expecting so much extra fields and all sorts of fun stuff like that. What’s what sort of things should we be looking at when you’re doing the design part of it and making sure that things are going to look appropriate?
Sé Reed 23:33
Well, what Steve was saying earlier about the duplicate, a post duplicate something, not from a page perspective, I think is so important. Having the ability to be like I want a page that looks like this page, so I can just clone it and then fill in the blanks. There’s there’s just that alone is worth its salt in, in plugin. They’re very nice
Jason Cosper 23:58
for that. What do you do you do like Steve does with example posts and set up like, here’s some page templates in like a draft or something.
Sé Reed 24:12
Most of the sites that I work with, like I said, are sites that already have content that already exists. Like I, Steve does a lot of new builds, I do a lot of rebuilds. Or people come to me and they’re like it broken, fix this. And sometimes I don’t want to keep the design. So I basically rebuild the design because the design is good. And I just rebuild the back end with the same design. Like that’s happened with multiple multiple clients because they paid a bunch of money for this site design, and they really like it. It just doesn’t work on the back end. So, you know, I would make, you know, if I was starting with a brand new site, I would absolutely make, I wouldn’t launch a site without that content anyway. So I don’t think you should launch a site with no blog posts. For example. Or a missing section that you’re going to fill in later, I tell all my clients, if you’re going to fill this section in later, you should not have the section, because it’s just going to sit there and be empty. Forever. So I don’t really let clients launch with empty sections. So that sample content would be just content for my, for my uses.
Jason Tucker 25:26
Yeah. So I
good Steve. No, go for it.
Steve Zehngut 25:30
See, I was just gonna say at the beginning of this thing, I sort of took issue with the with the term client proofing, right, I get it, and I was saying it’s a little bit negative. This is an opportunity, right? This is this, this is an opportunity for freelancers and agencies, right to do maintenance, right. This is what maintenance is for. And so I don’t know that. We, we, I tend to set the expectation at the beginning of every project and just let them know, Hey, listen, we’re setting this up. You have Have a content management system, you can do all this stuff, right? But this can be a lot to maintain, right? And there are challenges and you can break things. And, you know, there’s a lot of things that could possibly go wrong, right? We’re here to help. We’re here as you need us, if you want to, if you want to do it yourself from here on out, have at it, right. But there there is, there is an opportunity to kind of educate your client as to what they’re going to experience when you launch their website, and what and what maintenance is supposed to look like, right? Because ultimately, the result of this is, is if if your client is start starts doing something, and they break something, or they’re having a bad experience, right? Couple things are gonna happen. They’re gonna call you and tell you to do it, or they’re just gonna leave the site alone, and it’s never gonna change. Right? And that’s, that’s bad. That’s bad. That’s really bad. And you don’t and you don’t want that. And so I’m patient. A lot
Sé Reed 26:55
of developers actually don’t care. They build the site. The client never touches it again. can’t use it and maybe they ghost in there out of there. But that’s not a, that’s those are the people who then come to me and are like, we need your help.
Steve Zehngut 27:08
And, and, and frankly, there’s you know, it’s better out you’re better off not having a website at all at that point, if it’s never gonna change, you’re better off just spending your time doing social media or something else.
Jason Tucker 27:19
I circled back around with mine asking them what is it that is breaking on the site? And then what limitations should I be putting in place is the excerpt should only be maybe 200 characters long. Are you trying to put in an entire paragraphs worth of stuff in there? Are you having issues with you know, like, each of those pieces and just kind of go through there because the client, you know, when you when you, you know, client in quotes, that client isn’t necessarily the person paying for the website, but rather the people that are using the website. And yeah,
Sé Reed 27:48
so that’s your worldly
Steve Zehngut 27:50
action actually. Or if you’re, if you’re working at a company, it could just be an internal client, right? You could just have other stakeholders that aren’t necessarily a client. They’re just team members that you were Working with
Jason Tucker 28:00
back in my day we call them webmasters
Steve Zehngut 28:05
master webmasters that’s an awful term. It is
Jason Cosper 28:12
time to make business cards that are gonna say webmaster damn Dreamweaver webmaster.
Steve Zehngut 28:20
Yeah. Um, yeah, I you know, I have a lot more to say on this, but maybe we can turn this into a part two. At some point,
Jason Tucker 28:29
I think we should definitely turn this into a party and start breaking out some of these things and kind of going back around through it and talking about them.
Sé Reed 28:36
I just want to talk about the whole client proofing concept it does sound really negative because you’re like protecting the website from the client when the client is the person who should use it so maybe really the terminology should be you know, I don’t know there there should be like the opposite of garbage like what is it mean what’s the positive version of client proofing is like I plan streamlining like,
Steve Zehngut 28:59
I don’t think It’s negative in that sense, I don’t think it’s negative. In that sense, though, really, you’re, you’re protecting the client from themselves, right? Because they don’t know. They don’t know they can make mistakes and they don’t know what these mistakes could result in. Right. And so the mistakes that we talked about here are potentially, you know, PageSpeed mistakes, SEO mistakes, Ada mistakes, right? If you make a design
Sé Reed 29:21
talk about accessibility and that right, you can
Steve Zehngut 29:24
you know, you make it this and that’s one of the things I was gonna say you make a design mistake and now your your your site is out of ADA compliance. Yeah, and that that could result in a fine so maybe we should pick this up next week.
Sé Reed 29:36
Well, I’m good
ones cuz I have to give you an out here Jason just kind of saw.
Jason Tucker 29:41
Yep. Yeah. All right, folks. I want you to let you know that you can go follow us over on Patreon and help us out over there, we would really appreciate that. You can go over to patreon.com/wpwatercooler. You can also subscribe to this content as well if you haven’t done so. We’re an audio podcast too. So you can go over to any of the places that you can listen to audio podcasts and go and help us out over there by subscribing. talk to y’all later. Bye bye