[00:00:00] Nathan Wrigley: Welcome to the WP Builds podcast, bringing you the latest news from the worth Rest community. Now welcome your hosts David Waumsley and Nathan Wrigley.
Hello there and welcome to the WP Builds podcast. You've reached episode number 325, which is episode seven in our Thinking, the Unthinkable series. This episode is entitled, designing in the Browser. It's for amateurs. It was published on Thursday, the 4th of May, 2023. My name's Nathan Wrigley, and I'll be joined in a few minutes by David Wamsley.
But before then, a few bits of housekeeping. If you like what we produce at WP Builds, why not stay in touch? The best way to do that is to go to WP Builds.com/subscribe. Over there, you'll be able to find all of the different platforms that we produce content on. Typically, that's YouTube and also the podcast that we have on our website.
But also places like Twitter, there's our Twitter handle there. And most importantly, there is our subscribe form, which you can use, and we will send you a couple of emails each week. One will be for this podcast episode when we push this out, and also the show that we do on Monday this week in WordPress, which is a live show.
We'll also notify you about that. Speaking of live shows, there's a couple of things to tell you. Firstly, this week I kicked off with Mark Westguard, a six part webinar series, all about using WS form. We're gonna be doing it on Wednesdays for the next few weeks. It's gonna be completely live, and the idea is that Mark is going to show you how to get the best out of WS form, which is probably, as you've guessed, a WordPress form plugin.
It does a lot of heavy lifting and some. Really complicated things can be achieved through clicking, pointing, dragging, and really understanding how WS Forum works. And so that's the intention. So we've had episode one, which was laying the Foundations really. And then over the next five weeks or so, Mark's gonna be showing you the complexities of all of the different kinds of things that you can do.
So join us for that. As well as that, you'll be delighted to know that I'm doing another Piccia Neri UI show that's coming up next Tuesday. If you want to submit your site, go to WP Builds.com/ui, fill out the form there, and hopefully Peter and I will have a little natter about it and Pet will cast a expert I over what it is that you are building.
The best way to know about these things is to go to the WP Builds.com homepage right below the main. Banner at the top, you'll find two little sections, one for marks and one for peach shows, and you can find some calendar links and things over there as well. So really appreciate that.
The WP Builds podcast was brought to you today by GoDaddy Pro. GoDaddy Pro the home of managed WordPress hosting that includes free domain ssl, and 24 7 support. Bundle that with The Hub by GoDaddy Pro to unlock more free benefits to manage multiple sites in one place, invoice clients, and get 30% off new purchases. You can find out more by going to go.me/WPBuilds. And we do sincerely thank GoDaddy Pro for their ongoing support of the WP Builds podcast.
Okay, what have we got for you today? At the top of the show I said it was called Designing in the browser is for amateurs. David and I came up with this title and then we both contributed to the show notes, and it turns out we both had completely different ideas as to what this meant. David thought this topic was about whether or not to use design software rather than jump straight.
Into the page builder and start templating and amending it that way. And I thought it was about how design tools are increasingly online. So there's all sorts of different tools that you can use to make these designs happen. So it was an interesting chat, but the principle is the same. Are you an amateur?
If you do your designs in the browser, or should you have some dedicated tool? It's an interesting chat. As always, leave us some comments. Head over to WP Builds.com. Search for episode 3 25. I hope that you enjoy it.
[00:04:32] David Waumsley: Hello. It's the seventh in now thinking the unthinkable series where we attempt to rationalize controversial views on WebPress and web design.
Today's topic is designing in the browser is for amateurs. And Nathan, this is interesting cuz we thought this was about different things. We came up with a title and I thought it was about whether we use design software rather than jump into a page builder, which is what we've talked about before, or start amending a template and.
What did you think it was about? I thought
[00:05:01] Nathan Wrigley: you meant that everything in the browser or everything not in the browser. So I went down in my head, this version of this podcast would be all about let's discuss what tools we're using online tools, and by that I mean in the browser and how that's changed over time.
So a good example would be something like Photoshop. Yeah. 10 years ago, Photoshop really was the tool. Largely, I think the only tool that anybody was talking about. I know there were things like gimp, but most people were using Photoshop for manipulating images, and over the last decade, a lot of these tools in the browser have come along.
I think probably the most successful that I can think of is Canva. Which I confess I don't really use, but it, everybody seems to be talking about it and what have you, and now it can do a proportion of the heavy lifting that Photoshop can do. Now, obviously, I'm not saying it can do everything because I'm a hundred percent convinced it doesn't even scratch the surface of what Photoshop can do.
But the point being that, 10 years ago you had to have a desktop app. Now the browsers have moved on sufficiently so that for many people it's sufficient to do the job. So I thought we'd be talking about that. Audio editing tools, video editing tools, image manipulation tools, and obviously website building tools, all being in the browser.
And for my part, just to get this out there. I am, I'm really wanting the day where every tool is in the browser and I discover it by going to a URL rather than opening an app on a computer. Yeah. I really want that to be the paradigm.
[00:06:45] David Waumsley: I think that's the way we're going. Oh, we're gonna discuss both in a way, because there's such an overlap.
I think the one is the technology changing. I think since we've got things like nodes js allowing us to download online apps into our browser, that, that kind of distinction between what's software on your own personal hardware and what's online is disappearing rapidly. But also I think, how we might use that software to design websites.
And when that's going, I think it's all interlinked. So we start with the the graphics tool versus page builder, how you start your projects bit
[00:07:24] Nathan Wrigley: first. Yeah. Shall I kick off here or do you wanna go first? Yeah. So yeah, you go, I guess I don't really do so much of this now, but in the day, the process for me was always, okay, we'll start from a blank canvas, pretty much.
And the process was, I'll hire. A graphic designer. So there's several locally to me whose work over years has proven to be excellent. So I typically go with them and depending on what the budget is, I will nominate one of them in my head and say, we've got a graphic designer, but not really get into who they are and what have you.
Or it may be that they want a variety of different mock-ups, in which case I'll. Talk to two or three and get them to put things in my direction, and then I have that conversation. Try to pause that conversation, put it into a document, or write it down in some way. Then have a telephone conversation or a meeting.
With the graphic designers, they threw something together and returned it to me, which I then presented to the client is a in a sort of, winner takes all challenge. The client picks one, the others get dropped, but they get paid for the work that they did. And then I onboard that graphic designer into the project to iterate from that moment on.
So that's how I always did it
[00:08:44] David Waumsley: really. Yeah, but you, cuz we've both on this podcast argued for the starting off in the page builders. Yeah. So you've done a bit of that as
[00:08:53] Nathan Wrigley: Didn't you? Yeah. So that, that, that kind of, that implementation dried up for me as soon as page builders came along because, As soon as there was that ability to click a button on the entire page or, a selection of rows could be thrown in.
It really did bring into question in my head, at least the worth. No, that's the wrong word. I don't mean worth the usefulness in some cases of a graphic designer in that project. So I'm gonna be slayed for what I've just said, aren't I? But you get the point if the client has a limited budget and the idea of paying a graphic designer X amount of pounds was the difference between me winning the project or not, then, Demonstrating that a lot of this could be done with templates was a complete win.
I could win the project, I could cut down the design time. They were happy with some kind of templated design. So I began to do that more and more, and it got to the point where, More or less, everything was done in that way because as soon as I sat down with the client and showed them something like Beaver Builder and said, look, and look.
Here's a bunch of pre-made things, and you can click that and it'll drop in. You could see the penny was dropping. Oh, okay. Okay. I can use that kind of, yeah. You just start editing it over here and it was so obvious, so I very much moved away. From that graphic design, but that is based upon the fact that my projects were always local and the BOD budgets were always pretty modest.
[00:10:26] David Waumsley: What about you? Yeah, but I think, what you've just described also I think has a bit of historical content to it. I think, from the early days of the web, really most people just saw the brochure site and it was about how it looked in a brochure. So the client was, yeah. Most still are in that stage where they, the website is only what they see and it needs to be decorative.
So the designer. We'd have to be right in the beginning doing something that go, oh yeah, that's really pretty. Now go and build it. And that made sense. But as we've moved on, a couple of things have happened. One is that we've realized that actually a simple websites, it's more of a, a user app, which works on mobiles.
And mobiles are also responsive. So it needs to. Look different on different devices anyway, right? So we slimed down the I think, suddenly you start to think, I could do this in the page builder because one, it needs to be a simpler app for people to use to achieve their tasks. Cuz that's what we've learned about how the web works.
They don't sit there looking at the design like they're going to an art gallery. They use the website to get. Job's done. So it needs to be simple. And for that point of view, it just makes sense, doesn't it, to go to the page builder first because not, you're not repeating yourself. So there's time and money in that.
You're not having to spend too much on design that may not have a massive impact on, what's likely to come in from the business. There might be better time spent on the SEO and the content that's there, the actual copy. And for that point of view, I think, and being able to see the responsiveness and being able to demonstrate it and interact with it immediately.
Yeah. Which you can't, with the graphics made sense. It's
[00:12:10] Nathan Wrigley: the, it's the interaction for me, which was the crucial bit. It was
[00:12:17] David Waumsley: that they could literally
[00:12:20] Nathan Wrigley: click publish and then immediately see. The results of that and okay, so we've changed the hover state on this button from red to blue.
Let's go see what that's like. Whereas in previous iterations, that would've been a whole round of email probably. Yeah. And then another version. Of an I image, I'd get an image back saying, okay, this is now what the HO state will look like. That's the, that's great. It totally works.
But it's from a different era really, isn't it now? Yeah. If I can do that in the browser and the client can see it in real time, you probably had those conversations where the client sends you an email in the expectation that you are gonna get back to them in a week, but they are something so poultry that you just think, I'll do it right now.
And you email back within a minute and say, okay, that's Don. And then they go, whoa, okay, that's great. And that was, that's just so powerful. Yeah.
[00:13:16] David Waumsley: Do you know one of the other things about having a design because. People have designed for me and then I've made them up. But, and one of the nice things, and particularly if you've got a page building a stealth that's got a set of icons that go with it, if you send it off to a designer they'll come up with their own set and suddenly, yes, you are faced with this Quite trivial.
It seems trivial, but it's a big job sometimes to swap out a whole icon set in a page builder or something for the ones that they've used when, if they'd already known what you were using in the first place, they could have just designed it around. What already was there to save time. I actually had
[00:13:51] Nathan Wrigley: the exact reverse of that.
Just the other day. I had a client that I was dealing with, and they have an existing website, and they wanted me to build a, I won't bore you, but essentially they sent me the wrong icons and I had to take them off their current website and say, can we just use these? Because they're the ones you actually want, aren't they?
And they, oh, yeah. Yeah, that's true. Yeah. Yeah, so it works in reverse, but yeah. Yeah.
[00:14:21] David Waumsley: Anyway, for all that I've just put, that was our old argument for page builder, but I've done a complete turnaround where I've gone for the first time really using with clients Figma as the starting point for my designs.
Rather than going into the page builder
[00:14:36] Nathan Wrigley: tell, I think we probably should pause and say what Figma is.
[00:14:40] David Waumsley: Yes, we probably should. It's Figma stencil, Adobe xd, they're all the kind of new wave of, if you like, Photoshops, the ways of being able to mock up your designs. And they're, all of those are geared at responsive apps for the web, aren't they?
[00:15:00] Nathan Wrigley: So you do Figma as a desktop app or is Figma done inside the browser?
[00:15:08] David Waumsley: Yeah. We've moved on to the la last part of our conversation, which is there any difference any longer because yeah, at all, like Fmy, you go to it, it's online, it works. Like any program that you might have offline allows you to lay out things.
Little victor squares, be able to design 'em, use a be tool, change all your colors, add in photos and position them. It's working. On a, what we would traditionally expect to be just our desktop software. But it's s neither one or the other. Is it really? Because you can actually download the program and work locally and connect up to their.
Cloud service as well. And I think most of the work you're doing in the browser is with that new technology, JavaScript technology, where you can achieve much more dynamically within the browser itself. But, okay.
[00:16:02] Nathan Wrigley: That aside, getting back to it you've moved away from yes. The, let's use the page builder as the templating tool, if you like, and you've moved onto, okay, I can get a superior result.
From this third party thing, so then you've got an explanation. You've got a, another job in your suite of things that you've got to achieve. You've got to show that Figma design. How do you, what's going on there? Yeah. Do you build it in Figma to your satisfaction and then demonstrate it and hope for the aha moment or do well?
How does that work?
[00:16:34] David Waumsley: What's shifted here is the moving to the Agile, the idea that the client gets involved in all the decisions and we go through it logically. I think everybody's been trying to do that from day one. When you had graphical tools, we were talking about wire frames where you try and stop people thinking about the color, cuz we want to focus on the structure.
So you remove all that, but it's very boring and people disengage from it. So how I've used Figma now is that I want to get back to. How the content is going onto the page, what's important, what's gonna be on that homepage? Is it going to contain the big selling point of theirs? Where's it going to put in the benefits?
Where's it going to put in the social proof? So I want you to have that discussion with the client while we build. They're copy together, but also give them something visual. And suddenly I realized that I couldn't do this in the same way I've just been able to work with a client in the page builder or how I did it before, because I would set up something and even though it would be quick to move things around it wouldn't, I wouldn't be able to do what I did with them, where I'd put a whole load of chunks partly styled so they got some visuals of content and we could rejig them around, but also I could duplicate.
A, a homepage that I'd made multiple times and changed the colors while they were there on it, and they could compare the color that we changed to the last color that we had. So if I to try and do that in a page builder and they were saying yeah, but I like the old one. Can you go back? I'd have to redo it where there I can have a conversation live and rejig all this content around on this big.
Canvas, if you like, and show a mobile version of it as well.
[00:18:10] Nathan Wrigley: Yeah. So in Figma, do you get, essentially the bit that you show to the client, what does that look like? Does it almost look like they're interacting with a website, albeit only, a graphic version of the website? Or does it have, in the version that they get to see, do they have the sort of, mobile toggle and some of the settings that you may have as well?
How does it, how does the client view it? Ah,
[00:18:35] David Waumsley: sorry. Actually I didn't set the context here. So the only way I've used it so far, I don't send them to a link of what I've done there. I've waited until there's a conversation and we're going to have a, let's decide how stuff are gonna look on this homepage.
Let's start with that. And that's what they're coming in for the meeting. So I bring it up on screen share and I move it all around. Oh, okay. Yeah. And. What's been nice about that is that I can visually, as they're telling me, oh yeah, show me that. Do you think that Brown could be. Blue instead.
And again. Okay, let's just shift that around. And I do a copy of it and I realized that working with this, where we're just trying to, let's see if we can nail down the color scheme here, right? Let's see if we can nail down the positioning of stuff and they know what's going on, but I can manipulate it in a way I couldn't do with a page builder.
After we got to a certain point, then I'm happy to share a link with them. But I could, and this is the interesting thing, I think about the new set of tools. Like Figma and Adobe xd. Is that Yeah, I think that's right. They are Desi. Yeah. They are designed, aren't they too? How? And I haven't got into it.
Components are a part of Figma where you can say, set up your hover states if you like, so someone can interact with it as you would do. But in all honesty I don't think I'll ever go down that path. You just wanna
[00:19:58] Nathan Wrigley: show them what the, what it will look like without the interaction and just get that bit approved first.
Yeah. It's,
[00:20:05] David Waumsley: it's wire framing with a little bit more visual. In a quicker way. And I think that's why. So suddenly I've about turned on my. Build everything in the page builder and not repeat myself to actually, because I'm now more manually coding, actually I'm stuck because unlike the page builders word drag things visually onto a page, I have to sit there and think how I might code it.
Yes. So I need the visual now. So I was
[00:20:31] Nathan Wrigley: gonna say, so if the client's watching that, I was gonna make the point that what's the difference between them watching that and watching you use a page builder and change the settings over there? You've got things like global colors and all of these kind of things.
Yeah. Changing the color globally is possible. And they can, they could watch you fiddle with beaver builder element or etal, but you, there's more control inside of Figma, is there? Or is it just that it, because you are intending to build things with your own theme and start from the ground up and work with the code that.
That's a better
[00:21:06] David Waumsley: bet. I think I've needed it now because as I'm gonna be doing more coding and working directly with that it's almost impossible for me to be in two minds at the same time. To be in the designing something and code in it at the same time. Cause that's two parts of the brain, aren't they working?
So you almost need to design it and then start coding it. Yeah, so partly the switch is forced on me, but I honestly like the collaboration element of it in a way that I couldn't do that with a page builder. Because I would've to have multiple instances to be able to compare them alike. So when you are working with something, and that's the difficult thing for me to.
To suddenly adapt at all, which doesn't work like Photoshop or those tools, cuz you used to get one screen, which you would set in the first place, wouldn't you? Yeah. When you go into something like Figma you, you've end up with a huge blank canvas of which you can endlessly zoom into. Yeah. So you could turn, you could put on that page as many homepages at full size as you want on it, so you can easily duplicate and then zoom in and show the client that and compare side by side and move around.
So what used to seem like I could never get things like Figma, could you, I if you played with it but
[00:22:22] Nathan Wrigley: I, I was actually gonna say, why did you settle on Figma? I've seen it and I've played with it for a brief number of moments, but I've played with other similar tools, more wireframing tools like Whimsical, where the canvas is infinite in every direction and you just keep zooming.
And I find that's really. That's really great if you get that paradigm. But for clients it was like, what? What do you mean? They've got all these things side by side. How does that work? But why did you settle on Figma, given the range of tools out there? Was it just the first one that came across your radar?
Was it the UI that you liked the best?
[00:22:59] David Waumsley: Seemed to have jumped on it and I thought I must try and work out what it is in. Interestingly, and we've been talking about this before I, it's probably not what I'm going to settle on, I think, or even though I've got used to Figma fairly quickly and used it in the basic terms.
I'm probably going to move to pen pop, which is new, just out of beta, and is an open source, really a version of Figma. And to be honest, I've just tried playing around with it and at the level I'm at with it, you really it's like the same. Tall. It's so
[00:23:37] Nathan Wrigley: when you say it's open source what does that even mean?
You can download that and put it, you are gonna make that, put it on a digital lotion, droplet, or something like that, or you're gonna download it to your desktop. How will that work? I don't, or are you gonna use their paid plan presuming they've got
[00:23:53] David Waumsley: one? They don't, yeah, it's all entirely free and plans to be free as an open source, so you can use it in the browser there.
I don't know how they fund this or we'll continue to fund it, but presumably because it's used in your computer's resources more than it is because of the new technology we have. Yeah, to work dynamically in the browser. So pen pot, you can use online as you would with Figma, but you can also. Download it as well and make it your own personal app and put it on a server somewhere.
[00:24:26] Nathan Wrigley: So you could have it at, oh dunno, design dot david worsley.com or something like that if you really wanted to make your whole white label experience. Excellent. I
[00:24:36] David Waumsley: get it. Okay. Yeah. Yeah. I think this is, but it is, I just found it quite interesting, the whole tools and the technology is obviously driving what, how those tools work and how easy they are.
And the fact that you can have something which intends to be free for all time as open source that you can use online. And the reason for Figma is the fact that I didn't, I wasn't even aware of it was the fact that Adobe had bought Figma. Oh
[00:25:03] Nathan Wrigley: yes. Yeah, for a giant amount of mono if memory
[00:25:07] David Waumsley: service.
Yeah. 20, 20 billion, which I think someone told me was was about 10 years worth of Figma revenue. They're clearly buying the competition to Adobe XD and. The beauty of Figma and why it's become so popular is that unless you need to do some collaboration online with other team members, it's pretty much free.
You get, you can, you've got you've got free areas that you can, three areas that you can use for free, but I think you can have endless, so you can work on it for the free version, and that's intended to be for life. So it must be a serious threat to
[00:25:50] Nathan Wrigley: Adobe. Yeah, that's interesting, isn't it? Cuz it's a lot of money.
But you are right in that for well years now, that word has come up all the time. To the point where it's it's become, in my mind it was always photoshopped, that was the word, to yeah. Create these designs and nobody's talking about Photoshop anymore. So you do wonder if. Adobe realizing this is the way that things are shifting for this at least anyway.
Obviously if you're into editing photos, probably Figma is not the right thing for you. But yeah, that's fascinating. I'm gonna have to explore these tools because I really haven't. But given what you've said about the acquisition of Figma by Adobe, I think if I do explore that, I'm gonna go straight in on pen pot and make that the thing that I probably, in my case, waste a load of time
[00:26:40] David Waumsley: learning.
I think one thing that I'm really pleased about is because Figma is new to me and I was about to get into all the advanced things that you can do these kind of creating components. So you could globally change things and link, link your different boards that you've set up. So make all these big changes and have these rollover effects, all these kind of things to make it more like a A proper sort of page builder experience, if you like, for the client to test out.
I never got into all of that stuff and I'm so pleased I haven't, because of course that doesn't carry through to move into another tool that's very similar and it seems to me that Adobe XD stencil, Figma, pen, pot, all essentially the same design in terms of ui, somebody's mastered how to lay these out.
So if you move from one to the other, I think. The process is pretty easy. I tried pen pot and it felt like I was in Figma straight away. Yeah, just use few little things, just maybe trip up, but otherwise, everything I'd learned about using Figma just applied to pen pot,
[00:27:48] Nathan Wrigley: are we overloading clients here, though? Obviously if you've got experienced, if you've got a enterprise company coming to you and they've got a design team who are really getting into the conversation with you and they understand all these tools and how you're doing it and all of that's great.
But if you are just, I don't know, some sort of. Personal fitness guy that's got a little website and he's got 20 clients and he's working locally and he just wants the thing, Dom is, this is all this sort of figma stuff and pen pot stuff. And is that just all overkill do, is it not okay just to say, look, we're gonna use templates and you can work with me.
I dunno. I wonder if we're just putting too many roadblocks in and throwing design tools and make the whole process seem alien to them.
[00:28:36] David Waumsley: Yeah. For me, I'm not, they don't need to know Figma. They just have a conversation with me and I show them how. How, because I want them to be part of their website.
You say it is just a personal trainer somewhere. We were just having this discussion about the client that I've got who's, been sold a website, which is showing his training in business and A few moments of talking to this guy, you suddenly realize that he needs to be front and center.
Everybody buys him because they like him and what he offers, and he would've been hidden away in this other design agency. We've gotta charge him a lot of money. And to be honest, when you have this conversation, it's an ongoing one about how they might want to market themselves and in some ways to bring them into the design and how we might position things on the webpage.
Here's the picture of you here, we can stick it here. What do you think, to find their comfort level and. Work through stuff. I think having a tool where you could just throw stuff around on a canvas and duplicate it, is it is a kind of revelation to me for that con it's really part of the conversation before you really set down to build in it.
Yeah, so it's a real reversal for me. As I say, I felt it was always pointless. Now as for good reasons, to. To just jump into the page builder, but now I realize actually to have a better collaboration with people, a very loose one. But yeah, I'm not using it like people do use Figma cause they really go to town and fully design everything beautifully and make it interactive and yeah,
[00:30:10] Nathan Wrigley: cuz your process is very much an iteration and agile approach and conversation and all of that kind of stuff yeah.
Yeah. That's it. Yeah, I can well imagine that's
[00:30:19] David Waumsley: gonna be really useful. Yeah, it's for the conversation. That's why. But yeah, it's, but yeah, it's interesting, isn't it? Just how we're moving forward and there's a new this is really touching on what you are saying. You would like everything to be in the browser.
W we're definitely going that way with this technology. It's moved away from having to buy Photoshop, which only works on your operating system to something that works online, and you can. Make it your own, you can put it on your desktop. Yep. Regardless of the operating system. Yep. Put it on a Chromebook if you want my complete,
[00:30:54] Nathan Wrigley: ideal setup.
Is a, is basically a Chromebook. I don't have a Chromebook. I've never owned a Chromebook, but if that technology was perfected where I could have the quality of software, which in my case the Mac affords or something approximating it pretty closely. Then I would totally jump at that. I really do like the idea of the cloud.
Of course, that brings its own problems. If you're not connected to the internet, you're doomed. And where I live in my part of the world, that's a, that's fine. It, so far, historically, the internet has been really robust and reliable, but you can imagine the day where the internet goes down on all the.
All the people who've got desktop apps or giggle ha look at their misplaced faith in the internet. But yeah, that, that would be ideal to me, A Photoshop alternative, which worked brilliantly in the browser for me. Like I said the impediments are editing audio and video. I do a lot of that at the minute and.
Really the tools are not there yet. Maybe they can approximate it, but they can't, they really can't keep up in terms of speed. I use a, I use an app called Logic on the Mac, which is actually built by Apple, and it does a whole load of stuff. I don't know, 99% of what it's capable of, but for what I want it to do, it's just so quick, so snappy.
There's no glitchiness or anything, so maybe it'll come. You were talking about node js and things like that. Maybe that kind of stuff is on the way. If it comes an apple ship logic in the browser, I'll totally go to that. Or somebody else comes up with a version, I get glimpses of it. I can see SAS apps popping up, left and center that attempt it.
They're not there yet, but it's coming.
[00:32:47] David Waumsley: Yeah, we I mean I mentioned to you, and I wish I could remember the name, but when I was looking into pen pot, I found a video, a YouTube video, and the person who was talking about it was from a video editing background. And I looked it up at the time cuz I thought, wow, I didn't know about this.
There was a kind of a rival, if you like, to something like Final Cut that. Is in the browser online. Wow. Which a lot of people are using. And I thought, and I never really got into it, but I thought maybe it's the same kind of logic where you were mentioning to me, how can you do this? Cuz some of these, files that you are editing are, numerous gigabytes big.
But I assume if it. If this kind of technology is working where you can work in the browser, it only needs to do the work that's editing it. You provide the power if you like to store and use that video. I think we're moving to this point where it is becoming indistinguishable, isn't it? Yes.
Where,
[00:33:47] Nathan Wrigley: yeah. So until recently, any app that I've used to edit video, you have to, you have to upload the video file. Yes. It then is sitting on their cloud somewhere. Then you interact with it. On their ui, but it's all a bit janky and a bit glitchy, and they work. But yeah, heralding in the day where the browser has access to local storage so that video file is held on my computer by, I interact with it in the browser.
I don't really understand, in all honesty, how that technology works, but it that, that really will be a big shift. I just like the idea of this one interface. It's just the browser. It just feels like that's what the internet. Should be. So yeah, the Chromebook. I'm gonna, I'm gonna move the conversation on, because we can't, seemingly we can't get through a podcast these days without talking about ai.
So we need to have the AI chat. Have you noticed bits of AI creeping into these bits of these tools that you're using, these figs and pen pots and what have you?
[00:34:52] David Waumsley: It. I think I haven't yet on that, but you mentioned actually to me something that you'd noticed as well that AI just crept into a tool for WordPress pine Gro.
Yeah, that's right.
[00:35:07] Nathan Wrigley: I honestly, this piece of news came, landed on my desk like yesterday or the day before or something, and so I, I can't speak to how well it's implemented, but the idea now is that in the Pinero, you are you. Interact. Okay, so chat, G P T, I dunno what they're using, but let's assume it's something like that.
You type in what you want to be put on the screen. So you know, I would like a blue button linking to the homepage with the text. I don't know, go home or something like that. And it does it, but you can also instruct it to. Carry out certain sort of CSS type things. So if you want to, let's say, I dunno, divide a row up responsibly into four columns which collapse on mobile to two columns or something along those lines that you can now do and you talk to it in this, in the case of the screenshots that they were showing you talk to it in English, you just write the thing and out it comes. Yeah. This is all very compelling. Of course, say,
[00:36:11] David Waumsley: We're ahead on our episode here, so this will probably be old news, but didn't I see something about plans to introduce AI into the WordPress Media Library, or is this through a plugin? This No,
[00:36:24] Nathan Wrigley: that's right, but this is on wordpress.com.
So on wordpress.com. So if you're paying obviously WordPress at that point, then you can do this. And essentially you write a prompt and it gives you four images. But there are commercial rivals that you can do that on. Dot org version, the WordPress that we normally talk about. You can do that with things like.
Bertha AI and also Imagine, and there's a whole bunch of other ones as well. And yes, that's creep creeping into the design process, but I do wonder. If you'll be able, oh, okay. So getting back to the pine grow thing, they right at the bottom of the page, and I'll try to link to it. Actually I should probably make a note of that.
The, there was an endeavor to write, a prompt to do the whole page, which was fascinating. So you said to the prompt, I would, I want a homepage and it's got to feature this, and this and this. And it was about, I don't know, six or seven sentences. And it built the homepage, David. Wow.
That's pretty incredible. And from there you obviously iterate and your skills as a web developer or designer or whatever it may be, come in at that point.
[00:37:39] David Waumsley: Yeah, see I'm a little bit cynical about what the, you are more optimistic about what it'll be able to do in the future. At the moment my experience using, I've been using chat g p t a lot to help me with code, but every time really I've played around with this, it's not that I've told it to give me this cuz I don't like what it's given me, what it does really is I've started this, what's wrong with it, and it helps me out.
I find that if you wanted to design a website and it to do all your CSS for you, I don't think it'll ever do it. Cause it'll, it will never be able to look at the strategy. Grid is a perfect example. If you wanted to use Grid, the new great way of laying out your pages, you could do it with such minimal code because you can make a small tweak to one line of Coke can change the layout of.
Proceeding pages. So your homepage might be different to all the other ones. It's never, you're really going to have to tell it everything to be able to get what you want. It's going to do it in the most kind of clumsy way. I think it's gonna be more bloated than it needs to be. So I'm never quite convinced that the it is anything more than an assistant to your.
Strategy in the first place, and you need to know the stuff.
[00:38:56] Nathan Wrigley: When we two years from now, have a conversation where we talk about the fact that web design, the web design industry no longer exists because of ai. As we wrap up the WP Builds podcast for the final time and launch the AI podcast. Yeah, exactly.
Then yeah I think your I think your confidence in humans is. Interesting. But I think history shows that the amount that it's come from a standing start to where it is now in less than a decade, y i, I have no idea what it'll be able to do in a decade. And, it might be able to do all of that grid stuff just by you saying at the very top of the prompt, can we use grid for this please?
And let's, let's see where we go. Yeah. I think all of these tools at the moment are very interesting. But they are not replacing anything yet, but I think watch
[00:39:55] David Waumsley: this space. Yeah. It's interesting. I, the other example with that is just how it might do it. I don't know if it'll ever be up to date with how the spec is changing and where you're planning with something like css, but there was a classic one where I, I asked it for, I wanted it button to the bottom of the page would, it would smooth scrolling, and then it turned out all this really complex JavaScript solution for me.
And I said, my next prompt is, yeah, can't we do this with c s? Yes. Here's the one line you need. But you see it did it. Yeah, but I need you to know that you could, you
[00:40:32] Nathan Wrigley: know? Yes. But what's interesting, I wonder though if the chat bot is keeping a record of that. That there's an alternative CSS option, which is one line, and it's, in some part the algorithm will figure out that less is better.
Yes. And so it won't serve up the complicated JavaScript if it could say, here's a c S option. It's one line. Do you want a more comp? Do you want a more. Complicated in-depth JavaScript version. If so, click this button kind of thing. So yeah, I,
[00:41:05] David Waumsley: I think by the time I've explained to AI all the nuances of what I'm planning to do over this design, it would've been quicker for me just to get on and do it.
[00:41:15] Nathan Wrigley: It will have given up. The prompt will come back. David, please don't talk to me anymore. I'm here by severing relations with you. I've logged your account out and do not return. Okay. So I think the takeaway here is, the subject was supposed to be designing in the browser is for amateurs.
Yeah. I dunno. I want everything to be in the browser, which is great because I'm a complete amateur.
[00:41:40] David Waumsley: Yeah absolutely. And the browser's changing, isn't it? So No, it's no longer the case. There is one other quick thing we could just talk about. Oh, because we led to it. There is a new. What we didn't touch on in things like Figma is now you can export your c s from your graphic designs.
Yes, and I've seen some other tools around which I forget Kevin Powell, who does an excellent YouTube channel on c c s, was promoting a kind of visual builder. A kind of page builder, but turned out html, the CSS that goes with it. So they potentially, this designing in the browser with essentially a graphic tool that then becomes your page builder is a serious threat to things like not necessarily cuz of the dynamic content, but it's certainly a threat to any of the page builders who are serving dynamic sites.
[00:42:35] Nathan Wrigley: So you what you design it. In a graphical way. So you put elements onto the page and you color them and move them and add padding and what have you. And then you finally say, give me the JavaScript, the c s and the H T M L. Yes. And I'll take it from here. So it's not a, you don't click publish, you click
[00:42:55] David Waumsley: export.
Yes. It's I can't remember the name of it. I was desperately trying to find
[00:43:01] Nathan Wrigley: it. Yeah, if you do think of that, I'll add it into the show notes. That would be really cool. Or anybody listening wants to comment what it is. That'll be helpful. Because
[00:43:08] David Waumsley: see, it's heading that way. Even with, the kind of figma and these tools, that there isn't that distinction cuz that's what the original is trying to do between the page builder and the graphical interface that they're becoming one and the same, so you might be right, I think we will be doing more in the browser, but there might be less of a distinction between the tool that builds. And the tool that designs,
[00:43:31] Nathan Wrigley: yeah, I guess in the scenario that you've just painted with the export from there, you really are on your own, aren't you? In the whatever.
It's export, you're gonna have to work with that. It's not like you can maybe they'll have an export to Elemental or export to. Oh, I don't know, Squarespace or what have you.
[00:43:49] David Waumsley: No, you just take you take these files and you shove 'em up to something like Netlify in your life. Yes.
[00:43:54] Nathan Wrigley: That's true.
That's a whole other conversation there, but Yeah. Yeah. But it, if you wanted to, if you wanted to interact with it and change it, and you wanted to, I don't know, add in another row in the middle of it, Yeah, you can't do that with the, with a page bill that you've got at the moment.
But given the popularity of some of these tools, I wonder if they will make those integrations possible. Long and the short of this is give me it all in the browser. That's all I want. I want everything in the browser are men.
[00:44:25] David Waumsley: I think you're gonna get it perfect.
[00:44:29] Nathan Wrigley: Next time we haven't discussed, but next time we'll probably get onto some other equally controversial subject and,
[00:44:36] David Waumsley: Oh.
I, there is one on the
[00:44:38] Nathan Wrigley: bottom there. Oh, I did see that. This Now cheer. We'll go with that. Why not? Oh, yes, that's a good one. Open source is a liability that works both ways. I could think. I think that'll be interesting. Let's go with
[00:44:48] David Waumsley: that. Ok doke. Nice chat. Yeah, nice.
[00:44:52] Nathan Wrigley: Bye. Bye. I hope that you enjoyed the podcast.
Always lovely to chat to David Wamsley. You can see that we really didn't have our beams aligned when we decided on the show title. We both went off in different directions, but the discussion was useful anyway. As always, if you've got any comments, go to WP Builds.com. Search for episode 3 25 and leave us some commentary there. We'd really appreciate it.
The WP Builds podcast is brought to you today by GoDaddy Pro. GoDaddy Pro, the home of manage WordPress hosting that includes free domain SSL and 24 7 support. Bundle that with The Hub by GoDaddy Pro to unlock more free benefits to manage multiple sites in one place, invoice clients, and get 30% off new purchases. You can find out more by heading to go.me/WPBuilds. And we sincerely thank GoDaddy Pro for their support of the WP Builds podcast.
Okay. Just a quick reminder, we really are being very busy in the next week. Monday. We've got our, this week in WordPress show. Tuesday we've got the Peach Andary UI UX Show.
Wednesday. We're talking to Mark West Guard about Ws forums, the second in our six part series, and then Thursday we'll have the next podcast episode out. So it's a jam packed week. Head to WP Builds.com to find out more. That's all I've got for you this week. I hope that you enjoyed it. I hope that you stay safe.
I'm gonna fade in some cheesy music.
