[00:00:10.390] - Gordon
Hello.

[00:00:11.340] - Taylor
Hello.

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

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

[00:00:15.600] - Gordon
And welcome to "This Week With Taylor and Gordon," a weekly podcast, and vidcast where we talk about things that have affected our business in the last seven days. Now, for those who are new, we both run our own individual businesses and we both do website design.

[00:00:32.490] - Taylor
Yes.

[00:00:33.720] - Gordon
And we've done a thing. We did a thing.

[00:00:36.560] - Taylor
Yeah.

[00:00:36.560] - Gordon
I think this is episode 38. Yeah. And it's time for change. Yeah. What do we do Taylor?

[00:00:46.230] - Taylor
We re-did our entire website.

[00:00:49.170] - Gordon
We did. So, thisweekwith.co.uk was a website that we put up very close to when we started. And the website was basically done in "Divi," which is an "elegant themes" product and it's a builder for WordPress. And it was a design that we found rather than doing ourselves, and we put it up so that we would have a place for people to come to, to see the latest episodes, and to find out where...

[00:01:24.540] - Taylor
The archives.

[00:01:25.410] - Gordon
Where we are, the archives. And it's worked really well.

[00:01:29.940] - Taylor
Yeah.

[00:01:30.340] - Gordon
Yeah, it's been good. However, we had changes that we wanted to make. We hinted at this a little while ago, didn't we?

[00:01:39.030] - Taylor
We did.

[00:01:39.030] - Gordon
And, well for the last few weeks now, on and off, we've been doing it. We've been putting our work where we where we say we're going to do. So, do you want to start by explaining what you thought was wrong with the old site Taylor?

[00:01:55.710] - Taylor
So, I wasn't a big fan of the design to start with. It was a pretty basic template that we used. We kind of just threw it up together, to have somewhere that people could go if they wanted to find us. There wasn't much thought gone into it. We didn't have much knowledge or insight into where our podcast would take us. And so...

[00:02:21.540] - Gordon
Or even if it would take us.

[00:02:22.870] - Taylor
Yeah.

[00:02:23.100] - Gordon
You know, we're on episode 38 now, and who knew we would get that far?

[00:02:27.250] - Taylor
Yeah. And, and the other thing was being able to find past episodes, I think wasn't the easiest.

[00:02:34.560] - Gordon
And the content within them.

[00:02:36.060] - Taylor
Yes.

[00:02:36.670] - Gordon
Yeah. There was no easy way to search for something that you may want to watch. You know, if you've got a topic as a viewer that you're interested in, just do a search, and be able to find it. But we didn't have that.

[00:02:51.690] - Taylor
No.

[00:02:52.350] - Gordon
Which meant that all of our episodes just had the episode number and the play button, basically. There were show notes, but you had to go to each individual page to see those show notes. Which is still the same now, but you can now search...

[00:03:08.580] - Taylor
Yes.

[00:03:09.690] - Gordon
Through those show notes and find them easily.

[00:03:13.050] - Taylor
Yeah. And what we've done is we've made it easier so you can quickly pop up the kind of quick info and it will give you a kind of little, it will just give you a list of everything in the show notes so you don't have to go to each page, you can quickly pop it up and find the information. And also you can filter by the season, filter by, if you've got a certain time frame that you say you've got five minutes or ten minutes that you want to watch something, you can say "only show me stuff that's ten minutes long." And you can also choose a date, so a date range between...

[00:03:44.640] - Gordon
Yeah, if you know the date that the episode was on, you can search for that. Or you can search for all the episodes that were in November of 2020 etc etc. So shall we just talk about, a little bit about the process? I know we've spoken about our design process before, but shall we talk about the process that we went through for this site in particular?

[00:04:07.710] - Taylor
Yeah. So what we first did is we used "Eagle", which is where we store, where you can store lots of files and footage and things like that.

[00:04:18.060] - Gordon
Yeah. So it's an asset manager. It's a really good application. It's available for Mac and Windows. We have mentioned it before and if you haven't already gone and had a look, check it out, we'll have a link in the show notes.

[00:04:30.900] - Taylor
And we went through Pinterest and we just went through Google basically finding examples of kind of things that we like, things that we wanted to maybe include features and things like that.

[00:04:43.020] - Gordon
Yeah.

[00:04:43.740] - Taylor
And then we decided, then we started designing.

[00:04:47.070] - Gordon
Yeah. And what, we used XD for, oh no we didn't we didn't use XD we used...

[00:04:51.360] - Taylor
Figma.

[00:04:51.930] - Gordon
Figma, that's right. Why did we change to Figma? Only because Figma allows you to have more than one person editing the page at once.

[00:05:02.340] - Taylor
So yes, so what you can do is you can have like real time, you can see each other's mouse.

[00:05:08.010] - Gordon
Yeah. So it's a bit like Google Docs or Google Sheets where you can have more than one person editing a document at one time, and we wanted to make it a collaborative design, so we worked on it together. We had two different computers. Both logged in to the same design page, and we worked on different parts of the design. And we only really created three pages, didn't we?

[00:05:35.700] - Taylor
Yes, so this is how I normally do it. And I call them kind of 'individual' or 'unique' pages. So, what that means is if you have an archive page, that's going to be a list or a grid. If you have a home page an about page, an episodes page, a shop or products page, you're only going to ever need to design that once because they're going to be duplicate of the same style.

[00:06:01.770] - Gordon
Well, they're going to be cloned. It's going to look like the same on every page.

[00:06:05.070] - Taylor
The only thing that changes is the actual content, which means that there's no point in designing 38 pages worth of the same stuff just with different content, because you know that it's going to follow the same same style.

[00:06:15.360] - Gordon
That's right.

[00:06:15.840] - Taylor
So I basically just design all of the unique pages, which means the home page, about page, single post pages, or if you want a blog or something like that, and then you can then build everything out using templates, which works really well.

[00:06:30.510] - Gordon
So we decided on a home page, a search...

[00:06:34.810] - Taylor
Archive.

[00:06:35.610] - Gordon
An archive page, which is all the past episodes. And on that page you would be able to search, and then an individual page for each episode. And then all of the templates that we created would link through to each other. So once we designed them and looked at them and we thought, we like this design, completely custom design. We didn't...

[00:07:04.850] - Taylor
We took inspiration from a lot of...

[00:07:06.000] - Gordon
We took inspiration from other places, but it's our own design.

[00:07:09.319] - Taylor
Yes.

[00:07:10.620] - Gordon
Then it came time to coding it. And previously we used "Divi." This time, Taylor is the one that's done most of the work on this. I did a lot of data entry. We'll come to that in a minute. So you chose to use...

[00:07:26.430] - Taylor
Oxygen.

[00:07:27.000] - Gordon
Of course, if you've followed this, you'll know why.

[00:07:30.030] - Taylor
Because it's, I just find it's really flexible. And if you're trying to get a custom design, that you've done yourself, then, you know, you can't really be matched in terms of, for WordPress, in terms of speed as well, because obviously you could custom code the entire thing with your own theme. But then along with that is a lot of time and work, that you have to put into it. And just works really well and everything links into each other, which is really nice.

[00:07:58.320] - Gordon
So, as we were having it built, so as Taylor was building it and I was finishing off the design, we decided to add a few little extras, didn't we?

[00:08:10.560] - Taylor
Yeah. Just a few.

[00:08:11.910] - Gordon
So there's a few little 'Easter Eggs,' if you like. If you don't, if you haven't come across that term before, an 'Easter Egg' is a sort of a hidden surprise. So there's one right at the top in the, above the fold, on the home page isn't there, Taylor?

[00:08:26.680] - Taylor
Yeah.

[00:08:27.180] - Gordon
And this is just awesome. So, if you go to our website thisweekwith.

[00:08:33.870] - Taylor
Desktop only.

[00:08:34.590] - Gordon
Desktop only that's right. If you go to thisweekwith.co.uk, you will see on the top right hand side there is a mobile phone. It's an iPhone, isn't it?

[00:08:44.610] - Taylor
Yes.

[00:08:45.330] - Gordon
And it shows what looks like an image of YouTube on it with, like a couple of our episodes. It's not just a picture, though, is it, Taylor?

[00:08:56.850] - Gordon
So it's interactive. So you can actually scroll and load more episodes. And these update with the latest episode.

[00:09:06.510] - Gordon
Dynamically, we don't have to do anything. It automatically pulls the content in. And you can actually click play on any of the episodes and it will open up a light box and play the episode so you can watch it.

[00:09:20.910] - Taylor
Yeah.

[00:09:21.420] - Gordon
I mean, that's great, isn't it? It's a little "Easter Egg." Not any, hardly anyone's going to see it I think.

[00:09:27.890] - Taylor
Or understand the complexity...

[00:09:29.940] - Gordon
Or understand how difficult it is to do. And what's really interesting for the techs amongst us, is that the mobile phone itself is created in CSS.

[00:09:39.310] - Taylor
Yeah, so there's no, it's not an image or anything like that. It's all created using divs and shapes, basically.

[00:09:46.830] - Gordon
It's a drawing using CSS, which is just amazing, really. And then all the content is put into the middle part of it and it makes it look like it's inside, but obviously it's just behind really.

[00:09:59.550] - Taylor
Yeah.

[00:10:00.270] - Gordon
So that's one thing. What else did we put in?

[00:10:02.550] - Taylor
We have a custom kind of app, mobile menu. So if you look at the likes of Facebook, Twitter, you'll see, they always have the kind of app icons at the bottom of the page where you can go between different pages.

[00:10:15.930] - Gordon
So this is just on mobile?

[00:10:17.220] - Taylor
Yes.

[00:10:17.880] - Gordon
Yeah.

[00:10:18.480] - Taylor
Or if you make your screen small enough on desktop. And it just makes for a nice, easy navigation between the home page, the episodes, and then you can also have easy access to both YouTube and Facebook and also all the podcasts, different...

[00:10:35.850] - Gordon
Yes, because you've got all, we've got all the different podcast platforms that we are on. And if you click on the podcast icon at the bottom of a mobile screen, it will come up with a pop up with a list of all the ones that we are on. And you can click on that and basically it will take you to it or subscribe to it, depending on what you've clicked on.

[00:10:58.710] - Taylor
Yeah.

[00:10:59.760] - Gordon
Which is really cool. We did have an issue and I'm not sure if this is still an issue. We may be doing a few tweaks. The website is live, but we may be doing a few tweaks just to finish things off. But what happens if you click on it? Because originally the issue we had was you had to click on it twice, once to activate the icons, and then the second time would actually make the icon work.

[00:11:22.050] - Taylor
So that is, I believe, a safari issue. I don't believe it actually happens on any other browser, I believe it's Safari. So what happens is if you touch near the bottom of the screen on a Safari, so iOS and Safari, Apple actually bring up their own kind of back button, a forward button, or you can show all your tabs and that is something you can't get around and it happens, I'm pretty sure it happens at the top of the page and the bottom of the page. So if you have a hamburger menu and you go to tap, you might tap twice because they bring down the URL bar so you can search. It's something that Apple just integrate and there's nothing you can actually do in control because it's browser based and not website based.

[00:12:05.250] - Gordon
That's right. So something else that we did was, we had to convert all of the current data over into the new site. So we decided to change the formatting of the episode names. So we now are doing 'S2 E38', for example, to mean season two...

[00:12:27.550] - Taylor
Episode 38.

[00:12:29.310] - Gordon
Episode 38. And it meant that I had to go back over the last thirty seven episodes and update them all, ok? Now that's fine.

[00:12:37.380] - Taylor
We updated the kind of URL slightly as well. So instead of it being "thisweekwithTaylorandGordonSeason2Episode38," we've now changed it so it's "thisweekwith/season2/the episode number" rather than being "thisweekwith/season/thisweekwithseason2episode" etc, which just makes it look a lot cleaner and easier to find if you want to just search for it.

[00:13:04.410] - Gordon
And I went through all the show notes for every episode and I got rid of our, what's the UL stand for?

[00:13:14.250] - Taylor
Unordered List.

[00:13:15.210] - Gordon
Unordered List thank you. I got rid of our unordered list which basically puts a dot in front of everything. Because we were going to show them in a different way, we wanted more control over the paragraph spacing, so we wanted to have paragraphs between each of the show note items. So I took all of those out. I made sure that all of the bits at the end of the show notes were consistent amongst all of the episodes so that they were the same. We also went back and converted all of the m4a, which is Apple's, AAC.

[00:13:56.910] - Taylor
Audio file.

[00:13:57.690] - Gordon
Audio file format, which is really good because it's high quality and it's quite small file size. But we converted them all into mp3s. Why did we do that Taylor?

[00:14:10.470] - Taylor
Because the player that we wanted to use to make it look nice didn't accept m4a and it only accepts mp3, which is understandable, which means it's more compatible with lots of things.

[00:14:23.760] - Gordon
That's true. So having all of the episodes as an mp3 over all the podcasts will make it more compatible because that's a format that everybody uses. It just means that, you know, I had to go through and convert every single file into an mp3 and then replace all of the files that we had previously and then link to each of the files from each of the episodes. So that was quite time consuming.

[00:14:51.980] - Taylor
Yeah, a lot of data entry for you.

[00:14:53.250] - Gordon
Yeah. And then I decided it would be nice to update all of the images on the episodes. So instead of having "episode thirty six," "episode thirty five" etc, we would use our new format. So, I went through and I updated every single one of our episode graphics, our square ones, and also our YouTube ones, which meant I then had to go through each of the YouTube episodes and update every single one of the cover images.

[00:15:24.030] - Taylor
And we also updated the YouTube videos, didn't we?

[00:15:27.060] - Gordon
We updated all the YouTube video cover images,

[00:15:30.800] - Taylor
Also the actual...

[00:15:31.710] - Gordon
And also the videos themselves. And there's a couple of errors we need to talk to YouTube about. But what we did is the timer at the beginning, well we realised we didn't need that after it had gone live. So what we've done is we've edited that off the video. So when you're on the website, or even on YouTube from now on, it doesn't affect the Facebook videos because they're streamed separately. But on the YouTube and the website, you will now see it goes straight into the episode without having the countdown. So that's going to make life a lot easier for everyone watching.

[00:16:07.620] - Taylor
Yeah.

[00:16:08.760] - Gordon
What else did I do? Because I, there was something else I remember thinking, "I must say that." Oh, I also updated the image of myself in all of the graphics that I re-did to make the cut out a lot better, because I had wobbly hair before. So now the cut out is a lot better. And there was one other thing I was going to say. Oh, my brain's gone. Um. Is there anything else you want to say while I'm thinking? Anything else about this whole process?

[00:16:43.470] - Taylor
The whole process was quite fun for me because I want to try out a lot of different techniques and new things that I wanted to try out or learn, which I can then obviously use in my client work. So, for example, the light box, which auto plays the video, that was quite fun to learn and figure out how to use. Because that doesn't actually play an advert at the beginning before you watch the video, which is quite nice because it doesn't use Cookies at all like that. What else did we do? The single, or the archive pages sorry, have filters which are all Ajax, which means that you can search for it and you don't have to refresh the page or anything, and everything will automatically update.

[00:17:28.560] - Gordon
It will update automatically, which is great.

[00:17:30.480] - Taylor
So, yeah, hopefully that will make things easier for you guys when you're trying to find a certain episode.

[00:17:35.920] - Gordon
Yeah.

[00:17:36.510] - Taylor
And you remember us mentioning it and we normally mention everything in the show notes of what we actually say, well the key stuff anyway, so hopefully you can find it through that. As well as just kind of trying out new things and using 'tool tips,' which I haven't actually ever used before, but they're really useful. Basically, if you hover over any of the podcast links or icons, you'll see that there are, it will say what the podcast is. So say you look at one, and you go "oh I don't know what that one is," if you hover over it or you tap on it on mobile, it will tell you above and then you can obviously click on it to go through to the actual podcast website or the social media.

[00:18:16.710] - Gordon
A couple of other things. One is that to do 37 different graphics for both YouTube and for the podcast to replace them all, bearing in mind we've got two different colours now for the seasons, I actually used a feature that I have used in the past but a long, long time ago on Photoshop, which is 'data variables.' So basically you can set a variable within Photoshop and you can say, "change this" and you basically feed it a CSV file or a comma delimited file, which you can make in Google Sheets or Excel, it's basically a very simple Excel spreadsheet and it will pull in all that data with all the numbers in it. And you can then say, just go through, create a new image for each of the ones, each of the numbers we've got; replace the image with the number; save it out; replace the image with the number; save it out... And do all of them until you have exhausted them all, which made life a lot easier because I ended up having to do this about three different times when I changed various different parts of the image. So that was really useful. And then we compressed it before we uploaded it. But I think that's the main points of our new website. So please, go and have a look at it and leave comments below as to what you think of the new site. What we might do, if I'm able to, and we haven't figured this out yet no, I can't do this. Maybe I'll try and link to images of the old site in the show notes that way you can look and compare what it used to look like and what it now looks like.

[00:19:57.870] - Taylor
Yeah.

[00:19:58.470] - Gordon
So that's fine, I can do that. That's it.

[00:20:01.530] - Taylor
Yeah.

[00:20:03.240] - Gordon
As always, you can subscribe and follow us on YouTube and Facebook. Links are on the screen now.

[00:20:11.610] - Taylor
And you can also go to our brand new website: thisweekwith.co.uk

[00:20:16.770] - Gordon
What's really funny is we used to say brand new website and we kept that for ages, and now it really is a brand new... Maybe it's a brand new new website. That's what it is. Thank you for joining us. As always, we are streaming on a Friday at 1p.m. in the afternoon on YouTube and Facebook, and then the videos will be available on the website shortly after. So please join us again next week. Until then, my name is Gordon, I'm from Drayson Design.

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

[00:20:47.970] - Gordon
See you next week.

[00:20:49.290] - Taylor
Goodbye.

[00:20:49.440] - Gordon
Bye bye.

This Week's Topics

Show Notes