[00:00:08.810] – Katherine Powers
I’m Katherine Powers, the Director of Marketing at Engaging Networks. And you are here for our Webinar on our new free and flexible templates designed in partnership with 4Site Studios. We have Corin Hartley Pierce from the UK Office of Engaging Networks, John Siemiatkoski from Engaging Networks, and Brian Casler with 4Site Studios and they will be sharing some backstory on why we’ve created new templates, sharing some examples and detail on code, all kinds of wonderful information. So dig in if you get distracted because we’re going to get into the nitty gritty areas stuff later.

[00:00:44.320] – Katherine Powers
You can always watch the recording later. We will send that out. It will also be posted on the website. So keep an eye out for a follow up email. And I am very quickly going to pass this off to John to get us started.

[00:00:56.730] – John Siemiatkoski
We’re going to get right into the content here. So starting off with just the framing here of today’s session. So what is a template after all? So a template and we’re talking about page templates. We’re not talking about email templates today. That’ll be some webinar in the future, I suppose. So the page template, it’s that HTML wrapper for your pages. It provides the design and styling for your pages to provide that consistency from page to page because you can use the same template over multiple pages. So that way you get consistent look and feel to all your pages.

[00:01:28.720] – John Siemiatkoski
You can edit your templates either in HTML. If you have those skills or in our Blueprint Editor, talk more about the Blueprint Editor and Corin will show you some examples of how to do that in the blueprint editor. We’ve made it really easy for non technical users to make these changes. Your template can include your fonts, your CSS or JavaScript, anything you want to plug in there you can put in your template. We do give you that access to the HTML so you can create a custom bespoke design for your templates.

[00:01:55.080] – John Siemiatkoski
Now we are talking about templates that we’ve pre built for you, so maybe save you a lot of time and effort there as well. You can insert your code for tracking, whether that’s to Google Analytics or Google Tag Manager or other tracking services like Adobe et cetera. And you can also put in pixels for remarketing or Facebook or other purposes. For pixels, those can go both into the template as well as into individual pages for code blocks as well. So how do you access the template?

[00:02:20.830] – John Siemiatkoski
Well, when you’re looking at a page builder page like I am here on my screen, this little icon up here will bring you into the template editor. And then when you do click on that what it will then do – if the animation works. There we go. That will bring you into the Blueprint Editor. So having these nice replacement boxes in here. So for the nontechnical user, you can easily swap out an image, maybe change the size of things. Change of colours very easily. But for the advanced users, you do have full access to the HTML that’s behind the door.

[00:02:51.990] – John Siemiatkoski
So what then is a blueprint? Well, blueprint is that editing layer, and it uses those replacement values for the values inserted in HTML. We’ve gone through and done the work of putting in those replacement values such that the editor will then display the box or drop down, or the various forms where you can easily get in there and make the changes that you need to. So it’s easy to simply put in your Google Analytics code snippet. So Google very easily provides an entire snippet for you.

[00:03:20.960] – John Siemiatkoski
We give you a box to just drop your snippet into so your Engaging Networks pages track through your engaging your Google Analytics account. Also easy access over to the image and file library that’s all run through our Contact delivery network so very easy to manage those images. And again, this is all about providing non technical users the easy ability to make edits to the template to any updates. Or maybe you want to make a couple of copies of your templates. Just different seasonal themes. Perhaps maybe giving Tuesday gets a different theme this year.

[00:03:52.950] – John Siemiatkoski
And within the blueprints there are two levels in here. There are sample blueprints, and the one we’re really focused on today is a new free and flexible page template designed in partnership with 4Site Studios. And then below that are also Account blueprints, which are customizable you can put in your own request. But our focus today is going to be on the new free and flexible template designed partnership with 4Site Studios. And let’s turn it on over to Brian Casler of 4Site Studios to talk about how we arrived at these templates and why we’re creating new ones.

[00:04:29.950] – Katherine Powers
Okay, pause just for 1 second. We did have a question about accessibility, John.

[00:04:39.970] – John Siemiatkoski
These templates do not necessarily have any functions in it to render for WCAG 2.0 2.1 AA. But we are bringing out yet another set of templates to address that those will be available sometime after the first of the year, and then we may go back and retrofit these as well. So that’s a conversation we’ll have with Brian afterward to bring in some accessibility features into these settings.

[00:05:05.750] – Katherine Powers
Thank you.

[00:05:07.870] – Brian Casler
Yeah. And I really appreciate that set up, John. And I’ll add that the templates can be WCAG adjacent. But the big thing with blueprint is it’s up to you to decide what colours to use, what fonts to use, what font size to use, so you can shoot yourself in your own foot. But it’s that flexibility that’s really impressive with the templates. So just a little bit about 4Site and why did Engage networks partner with us? I was looking through the folks that are on the webinar right now, and there’s a lot of familiar names, but there’s definitely some new names in there as well.

[00:05:45.450] – Brian Casler
So real quick. 4Site is a DC based digital agency that focuses on design, development, and supporting nonprofit technology. So we work with a lot of engaging networks clients. And I would say we’ve kind of carved a niche over the last six years for ourselves implementing and supporting engaging networks. We actually partnered first with Engaging Networks about six years ago to create the free and flexible page templates 1.0. We didn’t have the 1.0 because we didn’t know there was going to be a 2.0 at the time, but those are the page templates that have been in the platform for a while now, and I remember when I designed those and we worked to implement them that we really wanted them to be workhorses.

[00:06:28.760] – Brian Casler
My background is I used to work at a nonprofit, and I was on the receiving end of all those calls of hey, this doesn’t look right in my browser. I can’t make a donation, and what we wanted to do is create page templates that were really rock solid. That meant they didn’t have a lot of options, though. It meant that it was really on rails. And a big part of the 2.0 templates was to provide more options baked into the template. One thing I want to point out, though, is that six years ago, after we developed those templates, we continue to work with many organisations on the platform, and we continue to develop that code.

[00:07:06.150] – Brian Casler
So every client of ours gets that code, the current version of it, and we keep adding to it. So if one client asks for something cool, new or different, we added in there, and then the next client is going to get that. So there’s a lot of lessons learned, a lot of best practises that were really baked into that core framework, and that’s what we use to create the free and flexible templates 2.0 if we jump over to the next slide john a big big concept, and this was part of both a code underpinning, but a reframing of the motivations around who we’re developing and designing our code and our page templates for.

[00:07:52.690] – Brian Casler
And that was for digital marketers. It used to be that we were really designing and developing for developers with the one on one level experience. What we found is that that really wasn’t the use case. We found people either had support from more experienced developers, or the carrot was big enough that it was worth learning and sharpening your Dev skills. So it actually meant we could do a little bit more advanced things, and that really opened up the opportunity to build templates for marketers who want different layouts.

[00:08:29.090] – Brian Casler
who want that Giving Tuesday different colour scheme. They want to do cool things like that. And so we started to retool. And this happened even before the free and flexible templates, but it came at the perfect time. One of those retooling big one was using some modern Practises and dropping some legacy stuff like IE Eleven just right out the window if you need IE Eleven support for whatever. That’s what the old templates are for. They still work. But I think Engagement Networks as a platform that says we don’t officially support it.

[00:09:02.970] – Brian Casler
So you should probably consider what your offboarding process looks like for that. But for the geeks in the audience, the underlying code was really changed from just like one big CSS file that was hand edited with Firefox specific styles and Safari WebKit specific styles. And we got rid of all of that. And we started using Web Pack for a build process. We implemented CSS Grid for layouts, using Type Kit for JavaScript development and CSS Preprocessors to avoid having to add in those vendor prefixes. Also, something that was really helpful was we started having versions, so some of that’s broken out in our code repository, and that really helped us to increment at a different pace where it used to be one monolithic code base.

[00:09:59.600] – Brian Casler
And then now we can make small changes without potentially breaking backwards compatibility. But like I said, that was the big restructure of our code and our build out approach. Just some other things worth knowing about, because I think they’re worth considering for your own development. Best Practises. Now we have one codebase per client project. What does that mean for you? Number one, you should be backing up your code. Too many of our clients only have their code in their engaging networks pages, go ahead and create a free GitHub repository, make it public.

[00:10:35.070] – Brian Casler
All that code is public anyways, right? Go to a donation page, view the source. Oh, there’s the code. So go ahead and put it on GitHub and start having versioning. Start creating derivatives or forks. But I highly encourage you to do that, and it’s part of what we implemented for ourselves. Also, this idea of one page template to rule them all, you’ll see with the blueprints, you’re able to choose different layouts. Those aren’t different page templates. It’s the same exact layout, and all of the configuration options use the same exact layout.

[00:11:07.760] – Brian Casler
So it’s really also simplifying your overall code, your overall kind of investment in that framework. It prevents you from having 15 different page templates where the code is implemented differently on each. And then suddenly you need to make a change and it’s like, okay, can I just make that across all 15 page templates, or am I going to break things because each page templates doing something a little bit different. So one page template to rule them all is a really important aspect to the reframing. That is, unless you need different meta Tags and then typically, then it’s the same exact page template with different meta tags.

[00:11:48.630] – Brian Casler
And that’s because you can’t change meta tags with JavaScript, they have to be in the code itself. And then here’s another one, just more modern best Practises and also taking advantage of some new supported approaches by a vast majority of browsers, and that’s switching away from body classes to keying off the page layout, the theme, stuff like that, and going to HTML data attributes. If you’re not familiar with it, then you probably don’t need to be familiar with it. But if you’ve done any development in the last few years, you’ve probably run across them.

[00:12:23.810] – Brian Casler
The big switch there was one is with data attributes. You can still key CSS off of it, but also, data attributes are much easier to change without JavaScript without running into edge cases that you can run into when you try to add, remove, or manipulate classes on an HTML tag. And then lastly, and this was a big part of the handoff for Corin who’s the one that actually implemented the blueprint. But we put almost all the styling behind CSS custom properties, which allowed very easy manipulation without actually needing to touch the CSS declaration itself.

[00:12:59.460] – Brian Casler
So CSS custom properties used to be called CSS variables, and you think about it that way. So it’s like, hey, what’s my width of the input fields border is it one Pixel? Is it two pixels? Is it three pixels? Well, now we define a variable and the blueprint sets the value of that variable, and we CSS customer property changes all the things. So it’s very easy to set many of those common attributes you’re going to want to change to apply your organization’s, brand and theme to the page template.

[00:13:32.090] – Brian Casler
I think Corin, and I think that’s going to go over to you to actually talk a little bit more about the blueprints and go into a live demo.

[00:13:41.510] – Corin Hartley-Pearce
Great. Thanks a lot. Yeah.

[00:13:43.420] – Corin Hartley-Pearce
So I’m just going to share my screen and check that everyone can see that okay. So what I’m going to do is just show you from scratch how you can make a template from these new blueprints. So I should show you hopefully how easy it is. The first thing I’m going to do is go to my petition that I’ve made, and this petition doesn’t really have very nice template, as you can see, not very much styling in there at all. So what I’m going to do is go to the template button at the top right and load from library.

[00:14:28.340] – Corin Hartley-Pearce
So this is where all your templates are stored. You can also create new templates here. So I’m going to go new templates and then template blueprints. So these are as John showed you earlier. The blueprints that you have are the ones that are available to every client. The account blueprints are the ones that you may have created yourself. The first two here in the sample blueprints are the 1.0 ones. So they’re going to be probably renamed as Legacy. You also have one for Ecommerce pages because they’re basically very different to everything else.

[00:15:08.410] – Corin Hartley-Pearce
A relatively new one as well, an Iframe template that just allows you to quickly make kind of pages for iframes that you embed on your page and that removes things like the background image and the logo. The ones we’re going to do today is the free and flexible page template version two. So just go and select that. There’s also documentation on here as well. There’s a link to the supportal page there which explains a bit more some of the variables you can use. What happens now?

[00:15:40.620] – Corin Hartley-Pearce
It loads the blueprint editor, and this is where you can alter the template quite a lot without having to do any coding. So let’s give it a name first. So I’ll just call it something and then you have all these different sections down the left of all the different variables you can change. So if I go to say general, you can see the background colour, the background image. Those are all set here. So I’m going to change the background colour to be this kind of green and you can just drag that around or just type in the code if you know it.

[00:16:28.830] – Corin Hartley-Pearce
My charity is about forests. So I’m just going to go to Logo and load in the image which I’ve uploaded already. So it’s called Help Forests. So the logo just shows up on screen there. It’s a little bit narrow. So I’m just going to change the width to 350, say, just to make that bit bigger. Also, I’m going to just change some colours of say, the button at the bottom, the submit button. So that’s under the button section here. So I’m just going to change that to this colour, as you can see as you Hover, that fades that kind of dark or in something to change that to be a sort of dark green.

[00:17:13.290] – Corin Hartley-Pearce
So then my style guide colours are coming through now. Everything is kind of looking a bit better now. You can also change the button corners here so you can make those zero, which make it kind of a square button instead of a curved one. So that’s kind of variable there also under General, I’m going to add a background image. So I’m going to choose this nice field here and that won’t show in this editor here it’ll show, though, when you preview the page or when you actually see the live page.

[00:17:47.110] – Corin Hartley-Pearce
Of course, something to note here, which is kind of one of the most powerful things about template is the layout option. So you have four different layouts. And previously this was handled by a couple of templates. Now it’s all in one. So you can just really easily just try centred one column left or right, or you can do a sort of wider column, two column layout, which is good for if you want content across two columns. And all of these are responsive, of course. So for a mobile that those two columns would stack onto one column, also going to type in the organisation name, and that appears in the tab at the top, which I’ll show you in a second.

[00:18:31.890] – Corin Hartley-Pearce
There’s various other bits and bobs, which I won’t do right now. But one nice thing is the fonts. So previously you really were limited to the fonts that are set in the browsers to Ariel or Verdana or something like that. But now it’s much easier to use alternative fonts just by choosing other and then Loading in a different family to kind of use a different font that isn’t available in the browser. Either you can upload it as a file and support be able to help you to kind of show you how to use styles to pick that.

[00:19:10.020] – Corin Hartley-Pearce
Or you can use something like Google fonts, which have a lot of the fonts hosted online already. So in my kind of pretend charity, my headline font is domine and my body font is open sans. So what you can do is just add those styles. So if you select that, it kind of creates all the code for you here. So I’m just going to copy that code that Google has given me and go back to my fonts advanced area and just paste that in. So what that means is that plonks that code into the header, which means that font will be available as one of the options.

[00:19:52.270] – Corin Hartley-Pearce
So if I go back here and just copy that font family there, and this is all explained in the support article. So I was going to paste it for the headings. You can see that’s loaded in that font onow for my heading, which matches my logo font. So it looks a little better. Also, for my kind of main body font. I’m going to just go for the open Sans One and paste that in there and that will switch that f ont there to be that. So for this petition, I want to have one column.

[00:20:35.090] – Corin Hartley-Pearce
So I just save that and I think everything really is then done. So I’ll just use that selected component as a template and that’s now loaded in for my petition. So if I preview this, it will show you with the kind of background image and all the nice colours and the fonts are loaded in properly. One other thing that’s been added, and this is a constant kind of question to our support team was, hey, how do you have a long bit of text on the page but have it kind of read more so you can click that.

[00:21:13.210] – Corin Hartley-Pearce
It just shows everything, because obviously if it’s too long, it takes some time to scroll down. So now you can just simply put your long text or list of images or whatever you want in there and then just go to the style button here and give it a style. Click dash two dash expand, and that would just set that text to be expandable. So it’s really simple now to do that. So that’s the petition demo. So maybe I should pause the questions at this point if there is anything.

[00:21:54.910] – Corin Hartley-Pearce
Yeah. So someone asked if pixels the only option for the logo width or percent is percent also available. Not at the moment, but certainly these things can be added. It’s really easy for us to change these. So I think as people start using these templates with sort of welcome comments. So I will note that one down and probably talk to Brian to see how we can add that in there. But I think it’s pretty simple to do.

[00:22:22.730] – Katherine Powers
Corin, if people start using these and they do have comments, how should they share those with the accounts team?

[00:22:29.710] – Corin Hartley-Pearce
There is a percentage. Sorry. Yeah, I think just talking to the support team because there might be something that they can do to help. I was wrong with that.

[00:22:41.770] – Brian Casler
I’ll add that you probably want to set the Pixel width and that should be the upper bounds where that’s the largest logo should ever be displayed at. And the reason you want to do that is one. You don’t want a giant logo. It’s also responsive. So even if you set a crazy number, it won’t break out of the bounding of the content area. At least let’s find out. But it’ll also respond as it goes down. So it’s maximum width is 100%. So even though it’s width is 1000, it’s Max width is 100%.

[00:23:19.270] – Brian Casler
The other interesting bit is that when you do your logo, you want to ensure your actual image file unless it’s SVG is double the width of the pixels you put in there. So if you have, you want it to display at a maximum width of 400 pixels, your logo should be 800 pixels wide. The reason for that is on Macs. You have a high density display. They call that a retina display. Same with any Mac product made since 2011, has this high density display. And if you ever see an image, especially a logo that looks fuzzy, it’s because it’s a 400 Pixel with image and it’s displayed at 400 pixels, you need to double everything.

[00:24:02.900] – Brian Casler
And so that’s also part of it. So if you want a really crisp looking logo, and again, it’s 250 pixels wide, then make sure the actual image is 500 pixels wide.

[00:24:15.830] – Katherine Powers
Brian, what’s a good width to set your logo for mobile. If you’re going to set the pixels?

[00:24:23.660] – Brian Casler
it’s responsive so it will go to that maximum with whatever Corin puts in there. So if Corin put in 250, it’ll never be bigger than 250. And then on mobile, it’ll just shrink down even to the smallest device. It’s very unlikely, though. You’re going to usually the smallest device people shoot for is 320 pixels. It’s very unlikely. I don’t have any clients with a logo over 320 pixels wide.

[00:24:51.210] – Corin Hartley-Pearce
There’s also a couple other questions. So the first one is can you upload font files already purchased? Yeah. So we probably need to write a guide for this, but yeah, you can upload the file, say the WOFF two. What are they called to your file library in Engaging Networks to get the URL and then there’s CSS font face rules. I think that you can set domine or something. You could give this your own name to that file URL and that will be able to call that font in.

[00:25:28.000] – Corin Hartley-Pearce
So you don’t have to use Google fonts.

[00:25:30.850] – Brian Casler
I’ll also add from a performance perspective about how fast the page loads, and there’s multiple aspects to page load time. But the most tangible one is how quickly do you see the page? And then how quickly can you actually parse what’s on the page? So if a font is slow to load, you might see the page and then all the text changes. Three, four or 5 seconds later after the custom font is downloaded. A benefit of uploading your font to engaging networks is that when your client connects to engaging networks, it’s connecting to that server.

[00:26:06.770] – Brian Casler
It’s connecting to the asset server where your CSS and your JavaScript are going to be. And so it already has a connection established. And if you have like, Google fonts, it then has to go establish a new connection with a new server. And even on the fastest computer, it’s still going to take fractions of a second on a slow computer, it could take seconds. So the benefit of also uploading to engaging networks is that it’s going to get that font into the user’s browser just a little bit faster.

[00:26:39.190] – Corin Hartley-Pearce
Good tip. Thanks.

[00:26:40.180] – Brian Casler
Yes, I think I have it on my bonus content slide, but you only need WOF two W-O-F-F two. If you have that, then you have support for all modern browsers you don’t even need WOFF original or TTF or OTF or any of the other font file formats you literally can now get away with a single font format. The other ones are purely to support IE eleven and even more legacy browsers.

[00:27:10.730] – Corin Hartley-Pearce
The next question is about adding Google Tag manager. Yeah, there’s another section here I haven’t shown yet. Which is the extras. So here on scripts, you can put anything you like in here, including all the script Tags. And that will just put that right in the head of the page. So if you have anything from Google Analytics or a Facebook Pixel, just put it in there and that will load into the page as well. And then there’s a question just about fonts with email, Brian’s right. And do that.

[00:27:49.870] – Brian Casler
Email is its whole own ballgame. So what they translate to email? Yeah, but the work you’re doing here is not applicable at all to email.

[00:28:01.730] – Corin Hartley-Pearce
Okay, so just continue to the next just to show you some more kind of pages using this template. So one of the really nice thing, just find one of the nice thing about this new blueprint is it works across many of the page types. So one of them, the more kind of complex design wise is the events page. So if I just edit this one here, this is using the same template that I just made, but it’s been set with the two column layout. You can see that the second column has a background colour.

[00:28:44.770] – Corin Hartley-Pearce
I’ve placed the ticket block in the second column. If I just preview that, you can see that that’s kind of nicely designed and kind of all fits in there properly. If I just squeeze the page bit so you can see as you get narrower pages, it sort of jumps from two columns to one column, and that event block is just moving with the birth properly. So it’s all readable and looks very clear. So that’s kind of an example on Events page. There are some things just to note that for a normal non blueprint using a page not using this blueprint, when you add a ticket block, it will also add this sort of checkout button, which acts as like a form submit button.

[00:29:44.090] – Corin Hartley-Pearce
But currently that you can’t change the kind of label on that button. So what this template has done is just remove that button entirely, and now you can just control it via a standard form block button. So that just makes the control a lot better. And the design of the button kind of matches everything else. There are also some specific things to do with events you can see under the events kind of section in this blueprint is whether you want to show if you want to show or hide the additional donation promo code.

[00:30:20.690] – Corin Hartley-Pearce
So you can see on this page. You’ve got these boxes here, but you may not want to give the options you can now just hide those and those won’t be on the page. So that’s just using CSS. Essentially, it’s just very easy to use and very quick to do that’s kind of the main stuff I wanted to say on the events there is also wanted to show you the donation because this is another kind of page where some extra special styles have been added. So if I preview this, you can see by default when you add, say, donation amounts as radio with other in the page builder.

[00:31:12.970] – Corin Hartley-Pearce
They are radios, of course, which are those sort of circular things that you click. And lots of people have been asking for nice buttons you can click and select. And rather than having to add your own CSS, now that’s just an option in the template. So if I go to the donation section, I can choose for three different field types. I can change the amount back to radio the accent as a radio instead of a button. Also, you can change the what’s called the recurring payment input, which is essentially telling you whether it’s going to be recurring payment or not.

[00:31:55.220] – Corin Hartley-Pearce
So yes or no. And also there’s an option for the frequency as well. If you expose that, in this case, I’m actually hiding it as a hidden field and just setting it as monthly. But you may want to expose that so people can choose quarterly or yearly, and all of those can be kind of shown as buttons or radios now. So that’s something else that has been added to the donations and just kind of because these are so easy to use. You could quite just create a template and even do a split test against your existing one to see if there’s what kind of differences in conversions you get.

[00:32:41.260] – Corin Hartley-Pearce
You can just go new page split test and then choose the two pages that use the different templates and then just promote that split test url. What another client has done, which I’ll show you now is to get the thing they weren’t sure if the one column layout or the two column layout would work for them. So they created two templates from theis blueprint one with one column, one of two just by simply selecting the option and moving the components around. And they found that this two column layout worked better for them.

[00:33:32.260] – Corin Hartley-Pearce
They have better conversions. So they went with that. So lots of things you could test out without having to make any assumptions. But yeah, I think that’s everything just checking if there’s any other questions. Yeah. So question about footers. You could do a footer just as a single row at the bottom. So that kind of shows in there. What this client has actually done is quite cleverly added their own footer in the code. So that currently isn’t an option in this blueprint, but it could be in the future.

[00:34:09.870] – Corin Hartley-Pearce
But yes, certainly just speak to us if you need to get a footer in there or something similar and hand over back to John. I think he’s just going to finish the slides.

[00:34:27.210] – John Siemiatkoski
So we just did a screen share and some of those examples are listed right here. So we have some examples done up with these with the new templates on them. We’ll share those somehow in the chat that could work. This was one of the examples that Corin had shown you, and now it’s Q and A time. And if there aren’t a lot of Q and A, we do have some bonus content lined up. Thanks to Brian. Seems like you’re answering everything live in the Q and A.

[00:35:09.470] – John Siemiatkoski
So why don’t we move on to the bonus content? Without further Ado bonus content.

[00:35:15.230] – Brian Casler
John, we got one question from Natasha asking, how can we implement the blueprints into existing client accounts?

[00:35:25.770] – John Siemiatkoski
Yeah, the blueprints are there inside the client account from the pages menu or from the page itself. Either way, you go to components and then it’s templates and then here under new template template, blueprints, second tab. And then right there, that’s the one we’ve been looking at, the free and flexible template. So you select that it will draw in that content and then allow you to then modify that template for use. It’s already in there. Just a little bit of basically take it out of the box, take the wrapping off and put it into use.

[00:36:06.750] – Katherine Powers
And then, John, just for clarity, for Natasha, I don’t know what level of experience they have with the platform, but then you would just go into each page and change the template on that page. Correct.

[00:36:16.600] – John Siemiatkoski
Correct. Yeah.

[00:36:18.740] – John Siemiatkoski
So to switch the template on a page pretty easy, go into the settings for the page and then right there on the right hand side where it says template, you simply select template, actually, from the templates area. Can we do a global change for multiple templates? We can do a select multiple selecting pages.

[00:36:44.870] – Corin Hartley-Pearce
No, I think you can certainly sort of see where they’re applied.

[00:36:51.170] – John Siemiatkoski
What about from the page builder list?

[00:36:56.070] – Corin Hartley-Pearce
It’d be nice, but I’m not sure.

[00:37:02.950] – John Siemiatkoski
Yeah, we don’t have a global change there.

[00:37:06.610] – Corin Hartley-Pearce
So you just have to just click on the Cog icon or you can do it. When you edit the page, you can click on that template button at the top right and load from library. Just choose it that way. So there’s a couple of ways.

[00:37:22.210] – John Siemiatkoski
Yeah. So if you are going to change multiple pages to the template, you have to go to each page to do that. There isn’t a global change to say select templates and apply a global change to the select. But food for thought for the roadmap indeed. Check that is answered live. So on to the bonus round. Keep the questions coming because we’ll still feel the questions as well. So, Brian, let’s talk through some of this stuff.

[00:37:59.930] – Brian Casler
Do you mind if I share my screen?

[00:38:02.510] – John Siemiatkoski
Please do.

[00:38:08.070] – Brian Casler
Cool. Because I also want to do a live demo. These are just quick tips for you for end of year. The first is just a tool that I love. It’s where I go now for all of my image compression needs. It’s called Squoosh.App, and it’s created by a bunch of Google engineers, but you drag an image in here and let’s see if I’ve got one that’s going to work here.

[00:38:35.180] – Brian Casler
Here we go. Just drag that over. And then on the left hand side, you have your original image on the right hand side. You have your compressed image and you can pick from the drop down. All the different options. Don’t go with these exotic ones unless you know exactly what you’re doing. Just stick with the most JPEG or Oxypng, and you’ll be fine. But you can Resize in here. So I had an issue, not an issue, a piece of work yesterday where we wanted this exact image with the actual paid version 250 pixels tall and the default compression level was fine, but it was going to display about that big so you can switch back and forth and yeah, that looks good.

[00:39:16.210] – Brian Casler
Or you can play around with the compression and go up or down or just hit that download button and you’ll get a copy of it. It all runs in your browser. So if it’s a really computationally intensive bit of compression, then it can actually take up to a few minutes sometimes for the image to compress. That’s one tip for optimising your pages, get those images, optimised the next one is kind of a cool feature that isn’t a part of any documentation out there because we used it during our debugging, and we left it in there for any of the developers who go and kick around.

[00:39:54.290] – Brian Casler
So I’m going to share that right now. And that is a debug custom data attribute. Let’s look at what it looks like on Corin’s example page. And then this is for themers. So if you have a developer who’s like writing CSS, you could create a page template and add that in right there. And when you do that, you get to see bounding boxes around all the different elements on the page. So if you’re ever trying to get alignment and troubleshoot with resizing, like what is going on, take advantage of that again, it’s more for developers.

[00:40:35.040] – Brian Casler
You’re probably not going to use it as a content creator, but I just want to show you on a complex example. This is a custom development we did, but it uses that same underlying framework we did for Amnesty. And if I put one, if I put that on here, there we go. See, we’re getting all those bounding boxes. This little bit gets inserted up here. This 50 pixels at the top is just for that debugging. So this doesn’t get overlapped, but so helpful for understanding where all the alignments are happening and troubleshooting those really hard to get at layout issues.

[00:41:17.170] – Brian Casler
This is a pro tip around Google custom fonts. A lot of folks will just drop in that Google URL. And what happens is your browser goes to that URL, and then on that URL, there’s a bunch of font face declarations that then have URLs themselves, and so your browser has to go there, get that file, parse it, and then go to all those font files. You can circumnavigate that entire process by copying the contents of that file and using that in your page templates rather than the link to the Google font declarations.

[00:41:49.730] – Brian Casler
This can save again about a quarter of a second to up to a second on really slow connections. So just a small optimization there. It’s the same exact code. It’s just removing a step from the process. And this is one of those things. If you’re trying to eke out the fastest page of times, you have to start thinking about literally connecting to how many servers are we going to connect to? What order and how many hops then happen? Is it requesting another file that’s requesting another file?

[00:42:18.010] – Brian Casler
Those Google font declarations will also give you, like, five fallback fonts. You can then trim it down again. Unless you’re trying to support like Ie eleven or older, you only need WOFF2. This is another one, same exact thing talking about redirects. If you take a donation page and you close it in Engaging Networks. You can set up a redirect to replacement page. Awesome to prevent dead ends. Someone clicks that donate page in an email from 2019. They don’t just go to a page not found.

[00:42:48.920] – Brian Casler
They get redirected to probably your generic donation page, but your main donate link on your website should not go to one of those old pages that gets redirected. Usually this isn’t an issue because you’ll usually lose tracking when that happens. But it is actually an issue because again, that redirect takes time and you’re guaranteeing to add a fraction of a second to the page load time that doesn’t need to be there. So when you close a page and you set up a redirect, that’s great for 99.9% of the time, but that main donate link on your website should always point to the end page rather than the old page that’s going to then redirect.

[00:43:29.770] – Brian Casler
This is just one more. We talked about it earlier, but get your code backed up somewhere. So many of our clients just have it stuck in the page template. I think this is also why clients would like 15 page templates, and every single one is different because there’s no central repository for it. And again, all this code is already public because you just go to the page and view the source. So you want to see the source of this page. There it is that’s everything. So go ahead and put it on GitHub and create a structured way for yourself to manage it.

[00:44:03.050] – Brian Casler
And it should prevent some technical debt for yourself in the future. And if these are the types of conversations that apply to you, come join us. We have our own developer Slack channel. It’s not just developers. It’s everybody. Anyone who works with Engaging networks is welcome to come join. This is just a short URL that will redirect you to the Slack invite link, but I’ll post this in chat, and like I said, everyone is welcome to come. It’s usually pretty quiet, and then there’ll be like a flurry of questions and comments and ideas.

[00:44:33.970] – Brian Casler
So come join us. We’d love to hear from you. Thanks, John.

[00:44:45.950] – Brian Casler
Kathy. I was going to say Drew had a question. How do you manage versioning between your code repo and EN. Great question. We have our own version and then Engaging Networks, typically Engaging Networks is additive. I think EN has been very conscious to not do things that break backwards compatibility, which, as we all know, anyone who’s developed something for a decade knows that you build up some technical debt from that, but usually it’s additive, so we don’t typically have to worry too much about that. We do keep a copy of the EN page CSS

[00:45:28.770] – Brian Casler
yeah, we’re nerds. We went through all the thousands of lines of CSS declarations in the Engaging Network CSS file to see where opportunities were to improve our page template and all of that is in the free and flexible templates as well, but we keep a copy a version copy of it in our code repo. Just so every once in a while, we’ll just do a comparison to see what’s changed, like literally line by line what might have changed. But it’s never an issue where we need to worry about that backwards compatibility.

[00:45:58.420] – Brian Casler
So we always assume because every client gets updated. If the CSS changes for en page CSS, every client gets updated simultaneously and is always on the latest version, so it’s always additive. Joe, let me know if that answers your question or if there’s anything more specific around there that I can add. Oh, one more thing. This is an interesting one, and it goes against best practises. But I would say in this instance, it is a best practise. We commit compiled code, basically your dist folder to our repo, and that is so that also serves as a backup so that let’s say something changed.

[00:46:33.310] – Brian Casler
And you had code from two months ago and you didn’t create a backup on Engaging Networks before you replaced those files. If you didn’t have a copy of the compiled assets on your repo, you would have to ensure that you’re replicating your set up from two months ago and recompile it. We just thought it was easier just to include those compiled files as part of the repo that also serves as a backstop. Should anything ever need to be reverted and go to an older version of code.

[00:47:11.890] – Katherine Powers
Corin John, do you have anything else to add?

[00:47:15.850] – John Siemiatkoski
Nothing else to add?

[00:47:17.450] – Katherine Powers
No, that’s right. All right. I think this is still in just a little bit early. I don’t see any more questions coming in extremely informative webinar. I really appreciate all of you joining today to attend and watch this. I appreciate our Engaging Networks team joining to walk you through the platform and huge kudos to Brian and 4Site Studios for the tremendous amount of work that went into this. If you are looking for anything like extremely creative with a depth of technical knowledge, 4Site is a great go to or if you go to our Partners page, you can find all of our accredited partners there.

[00:47:54.250] – Katherine Powers
They’ve all walked through many steps to get accredited with engaging networks and know the platform very well. So again, thank you, Brian. Thank you, 4Site. Thank you everyone for joining.