[00:00:09.110] - Gordon
Hello.

[00:00:09.930] - Taylor
Hello.

[00:00:09.930] - Gordon
My name's Gordon from Drayson Design.

[00:00:11.820] - Taylor
And I'm Taylor from The Creative Tinker.

[00:00:13.920] - Gordon
And welcome to "This Week With," a weekly podcast and vidcast where we talk about things that have happened in our businesses over the last seven days. So welcome. Thank you very much for joining us. We've been working very hard on a particular website this week, and we thought we would spend the whole of the episode just talking about that. So the website is not up yet, so we won't mention the website address yet because it's not finished. But what we do is when we take on a new website, we create a staging site. Do you want to tell us what a staging site is?

[00:00:54.360] - Taylor
A staging site is basically a kind of temporary domain where, there are two types so there's a temporary domain which is, if there is an existing website and you kind of you still want the current website up, but you want to be developing a new website, or you have a staging which is normally if you want to make changes to your existing website, you kind of do this on like a, a staging site, it's called, and it means it doesn't affect the front end. And once you are happy, you then push all of your updates and changes to the live site.

[00:01:30.150] - Gordon
And the reason for having a staging site is to allow the site to be built and the customer to then see it, without anybody else seeing it. Because it's just sort of a hidden URL that no one else knows about. But it works as a fully functioning site.

[00:01:46.230] - Taylor
Yeah.

[00:01:46.740] - Gordon
So that's what we've been working on. So the company that we're working for is a company that is a photographer, photography company. And so they do all sorts of different types of photography, everything from studio head shots to pet photography, families...

[00:02:04.620] - Taylor
Babies.

[00:02:05.310] - Gordon
Babies.

[00:02:06.072] - Taylor
Corporate.

[00:02:06.720] - Gordon
Weddings. They do a whole host of things. And so we looked at their original website and it was good, but we felt it could be a lot better. And in fact, they told us it wasn't working well for them.

[00:02:23.290] - Taylor
I don't think it represented them as a company. I think their graphics and their logo and things like that were all very, very polished and very nice. However, their website just didn't reflect that.

[00:02:34.350] - Gordon
No, it didn't look as good as their pictures.

[00:02:36.220] - Taylor
Yeah.

[00:02:36.760] - Gordon
Yeah. So we talked with them about what they wanted and we came up with some ideas for them as to what we thought would work well. And we had a meeting with them just this week, in fact, where we showed them all the work we'd been doing and they were over the moon. They were so pleased. So the reason for using this episode to tell you about it, is that we had a few unique situations and we thought we would talk to you about what that situation was and what we did to overcome it. Do you want to start?

[00:03:08.130] - Taylor
Yes. So we wanted to integrate with a booking system. So this is basically so that people can go on the website, they can look at their services, so for example, 'baby photography,' and then you could book a session for this baby photography and you pay the deposit. You then book that session, that time session, and you get an email and yeah, you get, you then go along to it.

[00:03:31.510] - Gordon
Now, it sounds really easy, right? You know, coming along, finding a date, saying, "yeah, I'd like to book it," except you need to consider there may already be a booking for that date and time already. You need to make sure that the booking fee that's being paid is the right amount, because it depends on what sort of package they're looking for as to how much that booking fee will be based on how much work is involved.

[00:03:54.680] - Taylor
Yeah.

[00:03:54.680] - Gordon
So there's quite a few things going on here. So the first thing we did was, we found a 'booking solution,' so a WordPress plug-in that will allow us to offer the customer a calendar so that they can choose the date that they want, the time slot that they want, and then take the details that the photography company need to be able to book it in, and then ask for the money. So we found a plug-in called "Amelia," which is really good. And that does everything we need it to do.

[00:04:31.860] - Taylor
Yeah.

[00:04:33.120] - Gordon
However, the calendar part is a bit of a potential problem because "Amelia" has its own calendar and you can put into that calendar, "I only want to take bookings for Monday, Thursday, Friday and Saturday," they're the only days that we actually book the studio. So the other days need to be blank, we can't take bookings on those days. And then on the days that we do take bookings, we need them to be certain time slots. So you can do that and you can put that into "Amelia." Problem comes, what if someone's already booked that time slot and didn't use the website? Maybe they phoned up and they booked a slot over the phone. How do we do, how do we solve that?

[00:05:18.660] - Taylor
Well, what we did is we synced it to "Google Calendar." This has a number of benefits. It means that everyone in the company can have access to the calendar and it has a two-way sync. So all of the bookings from the website go into the calendar and all of the kind of appointments or anything that's booked in via "Google Calendar" will show in the booking.

[00:05:43.270] - Gordon
Yeah. So if anyone takes a booking over the phone or someone walks into the studio and wants to book something, the calendar will always be up to date in Google. And whenever they put something into that, if it's a booking for a certain time slot, that will then become unavailable in "Amelia."

[00:06:03.040] - Taylor
Yeah.

[00:06:03.410] - Gordon
And it's a really, really clever system, especially for this type of company that work on bookings. So that was the first thing that we set about doing. And the solution for that is really good. It also integrates with "Stripe." Oh excuse me, pardon me. It also integrates with "Stripe" so that we can set an amount for the booking fee and then when they get to that point in the booking process, they can make the payment and it confirms the booking by email. The one other thing that I was going to say is... ooh, 'custom fields.' So it also allows custom fields. So we needed to know, for example, how many people are going to be there for the photo shoot. That's a custom field, we can add that in. Job done.

[00:06:54.820] - Taylor
Yeah. Next one.

[00:06:57.350] - Gordon
Yes, the next one is a little bit of animation, so we have an image on the front page, on the home page, which changes every time the page reloads, in a circle. And Taylor thought it would be really nice to use his new GSAP skills, which we spoke about the other day, to have like a camera aperture closing and then opening again just once just to attract attention to that part of the page. And it would fit in with the photography theme. How difficult was that?

[00:07:30.380] - Taylor
It wasn't too difficult because I use kind of inspiration and bits of code from here and there to kind of put it all together. And it turned out really, really nice. The one thing that I had to figure out was trying to get the animation to, like, play when the page had loaded. So when I, the one that I was using as a bit of inspiration, worked based on a button, so you press the button and the animation would play, whereas I wanted it to just automatically play when you visit the page really.

[00:08:03.520] - Gordon
Yes, so you don't want it to play while the page is loading, because maybe the image isn't there yet. You want to wait until it's all loaded and then play it.

[00:08:10.610] - Taylor
Yeah. So I've been learning 'JavaScript' which is very new to me. I've, most of my kind of development progression has been in 'PHP' over the past, you know, six- seven months since I've started really to get into it. And, you know, I've never really looked into JavaScript and trying to do everything using PHP, just because I know it better. However, using JavaScript is opening up a lot more doors. And it's also interesting to learn.

[00:08:39.830] - Gordon
Yeah, and it allows you, once you know how to use JavaScript, to do pretty much anything you want on the Internet, which is awesome. So the last thing I think we should talk about, is the way that we have created a system to allow the customers to add services to the website, so we know they have services...

[00:08:59.900] - Taylor
And anything really on.

[00:09:01.430] - Gordon
Yes, but services is the big one.

[00:09:03.710] - Taylor
Yeah.

[00:09:04.190] - Gordon
For this site. And we're using 'advanced custom fields' for this. So we're using WordPress as the platform and advanced custom fields makes it nice and easy because the design of the pages is all fixed and done, by us, and then the content that's given to each field gets pulled into the right places.

[00:09:27.000] - Taylor
So a template basically.

[00:09:27.750] - Gordon
And styled correctly. Yeah, it's templated. And it means that if they want to add a new service in the future, they can go to the 'services' tab and it will ask them all these, it'll have these fields that just need filling in. And once they've done that, it'll automatically appear on the website.

[00:09:47.600] - Taylor
Yeah. So it uses input boxes. So it will say text box, there'll be a date field or colour field or images and all of these basically then are mapped onto the front end. And it means that if you wanted to update the design of the website or the page, you just have to do it once rather than having to do it every single service, which you can have errors because you might forget something that you didn't copy to another, the other pages and also, yeah it's just tedious to update it. So having a nice centralised area where the customer or client can't mess up any of the design that you spent hours trying to get right, but also giving them the flexibility that they can update the website themselves.

[00:10:35.930] - Gordon
They can add content. Yeah, exactly right. So that's using 'advanced custom fields,' which is an awesome plug-in. We find ourselves using this more and more now. I'm surprised that WordPress haven't bought out advanced custom fields and brought it into WordPress, but, you know, maybe they will in the future. So I think that's just about it. It's quite a short one today. We've got a lot on today. So we are sort of making sure that we do our scheduled broadcast to you. But we've got lots of things to finish off, being the end of the week.

[00:11:12.800] - Taylor
Yeah.

[00:11:13.340] - Gordon
So that's it for today. We hope you've enjoyed the information we've given you. There'll be links for all the things that we mentioned in the show notes. The show notes actually don't go up until after we've finished our broadcast, because quite often we don't know quite exactly what we're going to talk about. So just give it sort of an hour or two after the broadcast and quite often the show notes will be up and you can then see them then.

[00:11:38.750] - Taylor
Yeah.

[00:11:39.350] - Gordon
So thank you very much for joining us. As always, you can find us on YouTube and Facebook. The addresses are on the page now, on the screen now.

[00:11:48.560] - Taylor
And you can go to our website: thisweekwith.co.uk, which has all of our past episodes. We have all the show notes, videos and also the audio versions.

[00:11:57.740] - Gordon
Yeah, so don't forget like, subscribe and share with anyone you think might be interested in the sort of information we're giving. That's it for this week. Thank you for joining us. We'll see you next week at 1pm. It's goodbye from me. My name's Gordon from Drayson Design.

[00:12:13.910] - Taylor
And I'm Taylor from The Creative Tinker.

[00:12:16.220] - Gordon
Goodbye.

[00:12:16.850] - Taylor
Goodbye.

This Week's Topics

Show Notes