 So you got to be able to swap out parts of that workflow easily. And a lot of that comes down to tools and process. And I try to keep my workflows as flexible as possible because you never know how someone's going to want to work, or they need to use their server or whatever. So you want to control as much as possible because when variables come in, you can account for them. You know, okay, well, I know how long it takes me to do this stuff in mind. This is going to be different, so I'm going to have to increase my quote because we got to use their server or we got to do whatever. So tools. Tools are often the easiest to control. You can control what tools you're using. And the more familiar with your own tools, the better you can anticipate problems. So if you know your server, you know how long it takes you to get live on it. If you know your themes, you know what problems they have. So first off, you can start with hosting. We don't believe in cheap hosting where I work. I always say if you spend more on Starbucks than you do on your hosting, you're doing it wrong. Case point. So we tend to host on AWS using Plesk as a control panel. AWS, we use because a lot of our clients already use AWS because they're SaaS service providers. So they already have internal staff that can manage the server. And it's kind of robust infrastructure. So if AWS goes down, everybody's going down. It is self-managed, so you do have to have a certain amount of knowledge to get up and running. But it's automated. You can automate all those things. Once you get used to it, you can script a lot of things. You can spin up a server like that when you're ready. So the Linux distro we use, we tend to use CentOS, but it doesn't really matter. You can pick whatever you want. And we tend to use Plesk Onyx for a couple of reasons. I like it because it's got a really powerful management stack. You can edit Apache files, Nginx files, PHP settings right in the panel. So you don't have to SSH in and remember, oh, where is it in this distro? Where do they keep the option files? Where's the configuration? It's got some pretty advanced integrations. It's got one-click Git deploy right in the panel. So if you're a person who likes to do your themes in Git, you can just link it up on the instance. And just when you're ready, pull, pull, pull as you go. And that's right from the web panel. It also has built-in let's encrypt. So you can get a certificate really easily and it automatically renews. You don't have to worry about setting up weird deploy robots to renew your certificate every three months. And it's got a really good WordPress toolbox. I can basically spin up a WordPress instance. It lets me create sets of plugins and themes. So I can basically one-click. I spin up that instance with all the plugins I want without having to install them manually. And it's easy to clone from dev to live, one-click. So it saves you a lot of time there. So key takeaways from that. Hosting, you want to be familiar. You want to be auto-madeable if that's a word. You want to be flexible. And you want to have, if possible, an easy dev stage layout. I tend to use Elementor Pro with Hello Theme. I'll get more to those later. And then my standard plugin set kind of includes gravity forms. I like it better than other forms because it's really powerful. I can do stuff like if I want to build a ROI calculator, I can do it right in gravity forms. I don't need an extra plugin. And that's my contact forms and all that, the normal stuff. If I'm just doing, if it only needs a contact form, I'll a lot of times just rely on Elementor Pro's form plugin because it just comes with a form thing. And it's fairly good. Advanced custom fields for custom metadata, CPT UI, which I think there's already talk going to be done on those two later. So I won't go into those too much. Yo, that's what SEO guys like, so I put it on. And I use WPS CSS, which is a SAS compiler that works in PHP. Part of the reason is because Hello Theme actually includes the SAS files, so I can upload SAS files, have it compile, and I don't have to do an extra CSS file. It's the native theme CSS. And as a kind of a side, I do tend to then use the WordPress theme editor a bit too much because I just added the CSS files in the theme editor, which I tell people never to do. Then kind of a few extra helpful extras. I use custom icons for Elementor, which lets me upload a SVG font file. And anywhere that Elementor has like an icon, I can replace it with my own. I like custom skins, which lets you create custom loops in Elementor. I am hearing rumors that it's not being supported anymore, so I'm kind of trying to find a replacement or hoping that Elementor actually ends up just making that as part of their core functionality. Because it's nice, because I can create a custom skin for the archive post so I can make it look how I want instead of the two options that Elementor comes with out of the box. I just put on redirection, just because whenever you're launching a live news site, you usually have to do some redirection because something's changing. I like Seed Pro coming soon, Seed Pro coming soon pro. Elementor has a coming soon functionality, but I like Seed Pro because it lets you bypass it with a variable, so you don't have to log into WordPress to bypass the coming soon page. It's really good when your client needs to kind of circulate it around their team. You don't have to give everyone access to WordPress. You can just send them a URL with like bypass equals with whatever variable you set, and then they can share it internally without actually having to give, you know, log into everybody. So when the CEO wants to see the new website, they can see it without having to find a new password. And for feedback, I've been using lately project-huddle.io. It's a WordPress plugin that lives on another WordPress instance. So you kind of spin up your own WordPress site, install project-huddle, and then you put a little bit of JavaScript on the site so you can use on, basically, you don't have to worry about WordPress, you can use it anywhere, and it gives you on-page commenting. So like, just like a PDF comment, you can like add a little sticky note, make a comment, and you can discuss, anyone who has access can discuss. We were using Bugherd, but Bugherd, they changed it where you can only see your own comments. So it wasn't good for James discussing it. So lately we've been playing with that. I've been happy with it so far. So Elementor plus Hello Theme. So I don't know if you guys are familiar with Elementor. It's a fairly decent layout plugin. It's good because it gives you a lot of options, there's not a lot of abstraction, like you don't have like that visual composer view of just blocks. It's actually WCWIG, and you can edit right in browser so the client can put their cursor in where the text goes and just start typing. It's fairly performant. It's a layout plugin. It's not going to be a rocket no matter what you do. Very few I've seen that are really fast anyway. There's minimal accessibility issues, so if you're working on Terio, that's a good thing because most web designers don't even know that accessibility is actually a law on Ontario that your website has to be accessible. It's fairly customizable, and the pro version gives you like the ability to custom headers and footers. Hello Theme is nice because it's totally neutral, so it's really nothing to it. I'm a person, I can write probably CSS faster than I can find options in the WordPress Customizer, so I just write my H1 tag, CSS, write my body CSS for my thing. I don't have to dig in through the WordPress editor to find out how do they organize their customizer. I don't know. It's nice because what I've done is it's been recently added to the WordPress repo for themes until about two weeks ago. You can only get it on GitHub, so I just forked a version. It has a lot of CSS files with the standard things I customize, like I have a typography of CSS where I just throw in my options. I have to remember, oh, what selectors is it for header tags for each different thing? Yep. Well, hello's been around for a while. It's been around for about a year or two. They recently moved it to the WordPress repo, so you can just install it from WordPress. I still use the Git repo because I end up customizing it a lot, and so that's the URL for my branch of it, which has a lot of those optimization options in it already in SAS files. You go in, add the variables, add the stuff, and it compiles new SAS for you if you're using WPCSS or if you're compiling locally. The next step is process. It's a little less control here, but you still want to standardize it to a certain extent because you can kind of plan your project that way. So usually we start wireframing. Then we go to move to design, then the build, which is actually taking the design and putting all the pages in. We test and optimize, and then we launch. So here's where I'm going to lose the room, all right? Before you start any work, get content first. I mean it. This is the hardest part because web design is one of the few industries where designers were like, okay, we'll design it, and then you give us the content. If you go to design and add for print, you get the content first, then you design the add. You want to design a book, you get the content first, then you design the book, right? And getting the content first saves you a lot of headaches down the road. What happens is having the content first means the client can figure out what they really want and content's the hardest part for a client. How many times do you talk to a client and they're like, oh, we have a website right now, I'll just edit the copy, I'll get it back to you in a week. Two months later, you're still waiting for copy. And realistically, you don't need all the content. Sometimes, depending on the size of the project or the speed, I say, get me the homepage, get me your longest product and your shortest product, final copy, because if you have the two extremes, everything in the middle for a large product website is easy to figure out because you know, okay, I need to be able to have this much copy and this little copy and it still has to look good. So, wireframe through content. I tend to wireframe in browser. Either using a framework like Foundation or I'll do it right in Elementor with Hello. So, this way, the client can see how their content flows. They give you a bunch of content and they see, oh, well, realistically, once on a page, I think these two points should be in a different order or we need to say this further up the page. They have a better idea where they're called to action because when they write the copy, they don't necessarily think it calls to action, but then as you're scrolling through, you're like, oh, wait, we really should get them to do something here at this point. And the other thing about wireframing is they're not distracted by weird things like poor image choice or color choice. You'll send a design to a client and they'll just obsess about, I don't like the picture of that guy and they'll totally forget about everything else or can we get a puppy? Right? If you do a wireframe, it takes all that away, right? They can't be distracted by the colors that they don't like or the image choice they don't like. All they're worried about is content. So, I'll kind of show you an example. So, this is one we recently did. Realistically, it's very simple. This is done right in Elementor. You know, a little bit of interaction. You know, the client video, a little bit of stuff. In this case, we're doing the copy. So, I was able to use, like, lower Mipsum a little bit more of the copy just because our copywriter is writing it. So, I had a little bit more control over what the final product was. So, another page. So, this is like a product, a market vertical page. Right in Elementor, the client can see it, give feedback, they see it as an actual page. So, potential problems with wireframing? Clients sometimes have trouble visualizing it, right? They'll go, well, I don't get how my, how's it gonna look with pictures in it? But that's not what they're worried about there and it's trying to keep them focused, like, you're not worried about pictures now, you gotta worry about, is this the right order? Is there the right emphasis on certain points? You know, are we talking about the right thing at the right time on the page? You can burn too much time trying to get things just right. Just, it's, you gotta be fast, you gotta be iterative, don't waste too much time on these. Can trigger a lot of copy revisions? They can, once they actually see how the copy looks in order, they wanna rewrite it. Which, it's a problem but it's a good thing because they're gonna get closer to what they need. So, and then we move to design. Often I'll move to an offline editing tool for the initial design. Like, I'll go to, like, the illustrator or experience design or if you like, what else, like, any of the other tools. And I'll just do, like, a static mock-up in that kind of based on the wireframe. Because, you know, most designers, wireframes are first step anyway, so you might as well show the client it. So, and then once I kind of get a first feedback on the kind of static version of the site, I'll move it into Elementor and just start designing it. I tend to try to plan my reusable blocks at this stage. Elementor lets you set global blocks and templates. So I try to start planning ahead going, okay, this is probably, you know, this section can be reusable. I'm gonna make this a template. I plan ahead. I also plan out my accessibility here just so I know, you know, everything's got the right area tags and things like that. And I build out any page templates here for those key pages. You know, the whole trick is make it as reusable as possible. And I write my initial CSS at this stage. It's nice because it lets you write CSS on a per page and per element basis right in the tool. So if I just want, you know, this one type of, like, call-to-action button to look a certain way, I'll write the CSS right in that element just to get it right. And I can iterate quickly that way. I think a client signed off. So, you know, you don't move past this stage until the client says, yes, I like how this looks. Potential problems, you're not thinking responsibly. You're just worrying about the desktop layout. One problem I do have with Elementor is it's written desktop first instead of mobile first. I tend to think mobile first. So there's a little bit of, you know, work there just to get myself to think, oh, yeah, max width. And as a result, you don't have breakpoints already set for those huge screen sizes. It kind of, your last breakpoint in Elementor is at 1024, which, you know, most people's screens these days are bigger. So I'm always writing a little extra custom breakpoints for the big screens. Get two meritorious tools. So you put a widget in or an element in and you don't customize it enough because you're like, oh, I don't want to have to work on this or, you know, it's got to be done this way. Like, oh, it's a call to action. I have to use the call to action element instead of building one from scratch. Like, and you make it a reusable block. To marry to your vision. So your design, it's got to look how I want. Let the client give it, the client's got to give feedback. You know, don't fight too much. But there's some things I tend to push back on. I like, I haven't built a carousel in two years. Yeah. Analysis paralysis is another big problem. They start to try to get it perfect at the stage. Right? I tend to say a word press site or any website. It's a living document, right? It's meant to evolve. It's not meant to be static. You don't have to get it perfect. You can keep changing. You can change it two seconds after it launched. You know, you don't like, oh, I need a period there. It's fine. Put it in. And the nice thing about word presses, you can just log in and do it. You don't have to get a developer to do it for you. So at this point, I actually start building out the site. Once I have approval on key pages and design. And usually by this point, I have enough kind of pages built that there's enough design language established that makes it easy to roll out to other pages. I kind of know what my blocks of copy are going to look like. I know, you know, what layouts I'm going to be using for different types of content. So at this point, I move my CSS to production code. So I just, usually what I end up doing is I copy that element code out at a class, replace the generic selector with my class and in my CSS, compliance done. I copy, paste, change a few things and where we have production-ready CSS. You might have to do some refactoring, but, you know, usual stuff. Build all my pages. Finalize image selection. So this is, you know, where you really start worrying about is this the right picture? Do I like the way this lady looks? Is she too old? Does she look happy enough? This is where we use Project Huddle for feedback because, like I said, the client can just mark up the page. I want to change this image. I want to change this copy here. Just click a button and it adds a thing, sends you an email to tell you, hey, there's a change here. You can then pass that change off to someone else, assign it to someone, or you can do it yourself. And then you can just say, oh, yeah, the kid's done and the client can say, yeah, okay, good. Next, we move to the test-optimize phase. So here, I tend to start checking forms, integration, so, you know, check your HubSpot connections, your Salesforce connections, make sure all that stuff works as it's supposed to. I test my caching plugin because I'm working, I know my server environment. I can technically test my cache on Dev. I don't want to test it on live. Do my SEO checks. The usual stuff, make sure all my images have alt tags and every page has a meta description and all that stuff, which, you know, realistically, you should be doing it as you go, but just do the double check and make sure you didn't miss anything. I retest accessibility just because accessibility is important. This is where I test my cross-browser issues and any custom redirects. Right now, I tend to use SuperCache just because I'm familiar with it. We had a client on SiteGround and SiteGround has its own caching plugin and I turned it on and set it up and I'm like, it's still crap. So I went back to, like, remove their caching plugin, put W SuperCache and took my settings that I know and it was, you know, the speed where it was supposed to be. Because I tend to plan my performance ahead of time. Like, I know, I'm like, okay, I want my pages. I don't want them to be any bigger than X. So I know that Elementor is going to give me a certain amount of CSS. It's going to give me a certain amount of JavaScript. So I know I have, you know, this many kilobytes to play with for fonts and images. So from that perspective, I'm already ahead of the game because I'm thinking about performance as I go. But like the caching stuff, like I said, I find a tool you like and use it, like, be familiar with it. And that's the whole thing about workflows is finding the tools you know how to use because, you know, there's nothing worse than having to, like, sit there with someone's new theme and go, how do they set the font size in this? Where's that option? Is it in the Customizer? Is it in a Custom Settings panel? Yeah. So it's all about, you know, trying to control as many of those variables as possible. And then we launch. So I tend to, you know, check to come, turn on the coming soon plugin. Make sure it's on, on dev. Remove any dev plugins I used because you install stuff just for dev. Then I migrate the site with Plesk. It's one click. I just say cloned alive and I'm done. Then I go and check the usual suspects, make sure any, you know, URLs didn't get, didn't get caught or, you know, you can't log into WordPress panel. It's just the usual gotchas that anyone who's deployed a live site, you're probably used to it by now. I remove the coming soon plugin and then I run a crawl on the site. I usually use Scream and Frog. It's a tool that SEO people use, but I find it's one of the better actual crawlers. It's expensive though. It's like 150 pounds a year, which for a tool that I only use a handful of times seems like a lot, but it does things that when I need that feature, nothing else does this thing. And then we're good. So that, I'm just going to go back and show you that this site here, you went, this is the wireframe. This is the final. It has its own CSS, but it's not, it's very neutral. So out of the box, Elementor looks like this, right? The Elementor with Hello theme has no styling. Yeah, yeah, exactly. You can write, like you can, it has the options to customize font, customize things, but a lot of that stuff is reusable. So you don't want to have to customize each element every time. Oh, I'm like, oh, I like my headers looking a certain way or like, you know, I have this lead copy or whatever, right? This lead paragraph, right? I'll write custom CSS for that because I'm going to reuse on every page. I don't want to have to go in and change the options on every, it's too slow, right? Well, it depends if it's reusable. If it's a one-off, I'll do it all in that thing, but if it's something like, that's one of the things, like I'll set those defaults, because Elementor has like a neutral default. I will rewrite those to be what it should be for this site. So that way when I create a new call to action or a new header, it already looks like what I want. And I don't have to make it look like I want for that site. And there's a lot of good themes already for Elementor that you can use it with, and so you can have those header and font options and all that. Like I said, I've just more come from writing CSS. So for me, yeah. Yeah, but it's, that's how you learn, right? You get to a thing like, I really want to do this, but I can't get it to do it with the built-in options. So how do I do it? You start learning a little bit of CSS. You find the way someone else did it, copy it over, change some things, see if it breaks. That's web design. I always say web design is one of the classic punk art forms, because punk rock was all about, I don't need a music degree. I can get up on a stage. I know three chords. I can do this. And that's what web design is like. It's like, I don't know anything about web development, but I can do this. I can figure this out. Questions, and then I'll just bring this as a slide up, so you guys can actually see what I'm, the tools, so if you have specific questions. Back. I tend to use, there's a plugin for Firefox called Wave, I think. It was last year's WordCamp, there was an accessibility talk, and they mentioned it, and I tend to use it. And then I run it through the regular web-based checkers, but as I go, I tend to use the Firefox plugin, which is really good. And like I said, Elementor's pretty good, because it doesn't have a lot of major accessibility, so you just remember to set some of your area tags and things like that. You had a question? Any other thing on the server itself? I tend to rely on, like, plus security, it's kind of like a security audit thing. Yeah, and it's pretty good, because I also don't have a server guy either. So, like, I'm not a server guy. I've figured stuff out by having to, right? Yeah. And I find sometimes, sometimes one of the security patches will lock up. I had that on one of our servers this week, where, oh, sorry. He was asking about using Plesk, and if I think the security's decent on it. Like I said, I'm not a server guy. I tend to use it. I just follow its guidelines. It's pretty good. And if you're using AWS and you keep, you know, strict permissions on who can have it access the panel, it's also really good. But as I was saying, we had an issue this week where one of the scheduled updates to Plesk crashed the server. I'm like, you know, 10 in the morning, all of a sudden I get this email from my uptime monitor saying, server's down. I'm like, why is the server down? Can't log in. Can't SSH in. I can't do anything. It'll log into the AWS control panel, and processor usage is at 100%. I'm like, what's going on? You know, luckily, I have a backup process running, so I'm like, I'm going to reboot. Log in, and I see there was a scheduled security update today. Like, security patch reduced yesterday, so I'm like, okay, it must have been that. It must have just locked up in the update process and just pooched. But like I said, if you have a backup process, you don't have to worry because, okay, well, it was backed up last night. I'm sure no one's changed anything yet, so just reboot and get to go. Any other, we've got five minutes left. Any other questions? Like I said, right now, we backup the whole server. I use scheduling, which is just a service that lets you schedule AWS backups. But it's something you can set up manually in AWS. I just don't have the time to fight with it to figure out exactly how to do it. Scheduled backups in AWS. Oh yeah, and as an aside, we're hiring. If you're a techie dev guy or a marketing person, come see me. We're looking for more people. So any other questions? Yep. Like I said, there's a bit of a learning curve just because it's self-managed, right? But uptime's good, and like I said, we use it a lot because our clients use it. We have a lot of SaaS service clients, so they're already using AWS for their product, so I can just spin up an image and then transfer it to them. But yeah, there's days when I'm just like, oh my God, I have to figure out why this isn't working. I don't... It's self-man... Like something that's managed like WP Engine. If you don't have the internal resources to deal with managing a server, something like WP Engine is great. Like I said, we only use AWS because our clients use it. Yeah, but like I said earlier in the talk, I'm like, if you're paying more for your coffee than you're hosting, you're doing something wrong, right? Because yeah, like I can go to GoDaddy and get like five bucks a month of server. I'm like, I spend seven bucks on coffee sometimes. So and like if you're running a company and you're making profit, you should pay for good hosting. You should be able to afford good hosting. I'm like, yeah, if you're just... I tell people about clients, I'm like, okay, if you're just running a blog for yourself, GoDaddy's fine. You don't have to kill that. You don't have to break the bank. You just do it for yourself. But if you're making money on your site, pay for good hosting. It helps. Any other questions? My general... What do I do for email? My general rule is don't host your email on the same server as your website. Don't host your DNS on the same server as your website. So most of our clients already have email set up. They're usually running either... They're running Google apps for email or they're running Office 365. So then you just have to deal with the SPF slash de-kim issues for your form-sending. Because when you have your email on one server and your website on another, if your website sends email to you, Hotmail like Office 365 and Google both check to make sure that the server sending the email is allowed to send the email. So if you're sending to your own email address, it goes, well, it's not me, so I'm not going to accept it. You're getting forms that are like, I'm submitting the form. It doesn't work, but when I submit it to someone else, it works fine. So it's one thing you need to understand. And usually I tell most people the easiest way around this is to put an SMTP plugin in because then they'll just use SMTP to send emails instead of PHP mail. Yeah, so he's saying plus has the ability... I don't host email on the same server as my website because my website goes down, my email's down, right? So I'll pay the five bucks a month per email address on Google or Office 365 to know that my email's up. No matter what happens, my email's still up. I'm a big proponent of paying for things. I'm like, if it's going to save me time and a headache, I will gladly pay. I'm a little lazy. I don't want to have to sit around figuring this stuff out and managing an email server. Email's like this big black box. I don't know what goes on in there. It just gives me email, it sends email. I don't know what's happening and I don't know how to figure it out. So I was like, I will put it somewhere else and let someone else deal with it. Any other questions? I think we're good. All right.