No Script Show

Making a Website Owner's Manual

2026-03-12T00:00:00Z

Show Notes:

The Website Owner Manual is a working progress. In this episode we look at it's table of content.

A complete version will be available when finish, but for now here is a PDF file of the top level navigation plus notes. A text version is below.

The Website Owner's Manual

A customizable guide for creating an effective brand identity

Slide 1: Title Slide

The Website Owner's Manual

Notes:

The Website Owner's Manual is platform-agnostic.

Canva is used because:

It saves to PPTX or PDF for use with PowerPoint or LibreOffice.
Its real-time collaboration and commenting system allows multiple users to edit simultaneously.
Its whiteboard allows one place to store assets and experiment.
It's popular with small businesses (over 230 million monthly active users).
You get one month's free access to the pro version with vast stock resources.
Advanced presentation tools like audience Q&A, remote control, and drawing on slides.

As image editing software, it's limited compared to Figma, Adobe, or Canva's own Affinity Studio, but professional collaborators can add their work to Canva.

Slide 2: Preface

Principles

Web Principles

Fluid before fixed units
Mobile before desktop
Semantics before styling
Performance before bloat
Accessibility before complexity

Business Principles

Problem before product
Justification before dependencies
Local skills before global corporate platforms
Simplicity before automation

Design Principles

Content before design
User needs before designer/stakeholder ego
Objectives before personal taste

About This Manual

The Website Owner's Manual is a project management tool. A collaborative hub for strategic planning and brand assets.

Like Paul Boag's book of the same name, it aims to give owners control over the legal, technical, and business responsibilities that they inherit with website ownership.

It encourages independence and "Inclusive Design" through Web Standards, Agile development and the IndieWeb.

Notes:

Designers can use this to remind clients of the unique features of the web, their responsibilities, and head off potential friction.

For example:

It makes it easier to see what and when a platform is needed, rather than picking it for them and subsequently having to justify it.
It provides the tools to assess other sites, avoiding telling the owner their ideas are bad and having to criticize the work of others.
It positions design as problem-solving to avoid the process becoming a community art project.
Reduces the need for torturous contracts.

Paul Boag's 2009 O'Reilly book is now available for free. It is still relevant, but predates the general shift to Agile development processes.

Slide 3: Table of Contents

Content

Foundation & Strategy
Content & Voice Guidelines

Content: The mission and message that is converted into semantic HTML and made accessible to all people and devices.

Style

Visual Identity
Image & Media Guidelines

Style: The visuals design that objectively improves the usability of the content and forges an emotional connection with the target audience.

Technology

Web Components
SEO & Discoverability
Developer Specifications

Technology: What is necessary to deliver the message. Follow the "rule of least power" to reduce unnecessary lock-in and maintenance.

Progress

Applications
Testing & Tracking
Governance

Progress: The plan for inevitable change and how to evolve and improve in an "Agile" way.

Notes:

The next 10 slides represent the top-level navigation.

Designers may use these to understand what a client already knows and has.

Slide 4: Foundation & Strategy

Who are you and why should anyone care?

Competitor Analysis - Competitors' strengths and weaknesses. Differentiation opportunities.
Brand Purpose & Vision - Why the business exists. Emotions it invokes. Core values and aims.
Target Audience - Personas. Demographics. Visitor behaviour and their challenges.
Market Position Statement - Where you sit and what you stand for. Your elevator pitch.
SEO Strategy - Sanity checking achievable traffic. Content gaps. Keyword competition. Search intent. EEAT.

Notes:

This is often the hardest part.

Creating a brand requires introspection, and many in business are people of action who employ their gut to adapt to situations.

Online, we have to define upfront a purpose and target audience to cut through the noise and avoid being for no-one in particular.

Online, customers can't meet you first, so your brand identity has to act as your "digital handshake".

On the plus side, this work can act as a useful "North Star" for general business decisions and reduce the need to compete solely on price.

Slide 5: Content & Voice Guidelines

How you should communicate

Brand Voice - Tone. Language style. Personality.
Writing Guidelines - Best practices for web copy. SEO structure. Meta description templates. Alt text standards.
Content Types - Blog posts. Landing pages. Social media. Directories. Flyers.

Notes:

People buy from people, so we have to cut through the impersonal nature of the web.

It's not "creative writing", but reputation control.

It tells people what they should expect in advance.

Slide 6: Visual Identity

Creating an emotional connection

Logo and Favicon - Dark/light modes. Stacked/horizontal. Favicon. Open Graph images.
Typography - Responsive type scale (mobile → desktop). Line height. Letter spacing for screens. Title and sentence case rules.
Fonts - Font stacks with fallbacks. Height, letter spacing. Loading strategy and performance impact.
Colours - Colour values. Light mode and dark modes. Hover and focus states. WCAG contrast ratios.

Notes:

This should be congruent with the brand's written voice and mission.

We should choose based on what objectively best represents the brand to users.

Remember that some visitors will only see or hear your written content (screen readers and search bots).

Increasingly, some will have preferences that will remove a website's styling (high-contrast themes and monochrome screens).

Slide 7: Image & Media Guidelines

Making content easy and enjoyable to consume

Image Specifications - File formats. Fallbacks? Responsive image sizes. Aspect ratios for different contexts.
Video & Audio Guidelines - Aspect ratios. Length. Hosting. Auto-play policies. Transcripts. Signing.
Icon System - SVG styles. Dark & light modes. Accessible labeling.
Photography Style - Mood. Filter and effects. Subject.

Notes:

Embedded images and media make sites interesting.

But there are performance trade-offs, accessibility barriers, and the potential for information fragmentation to consider.

We should ask: Does this media supplement the written text, or are we filling because of poor layout planning?

Slide 8: Web Components

Using the power of website conventions

Interactive Elements - Button styles and states. Navigation. Card components. Modals. Tooltips. Details and summary.
Animation Guidelines - Transition speeds. Easing functions. User preferences.
Responsive Behaviour - How elements adapt across devices. Media vs Container queries.
Spacing System - Margin and padding fluid scaling.

Notes:

The web is interactive.

We need to tab, mouse-click, or finger-tap links and buttons, and we should get visual or audio feedback on our actions.

Visitors need to understand our UI and conventions are our friends in this aim.

Unfortunately, design systems have a history of breaking conventions:

Removing link underlines (Twitter Bootstrap V3).
Replacing form input titles with placeholders (Google's Material Design system).

We should avoid complexity and follow WCAG guidelines rather than blindly trust third parties even if they are used by millions.

Slide 9: SEO & Discoverability

Getting found and established with a SEO-first approach

Technical SEO - Structured data/schema. Page speed targets. Mobile-first indexing considerations.
Content Strategy - Publishing frequency. Site structure and internal linking.
Local SEO - Google Business Profile. Geolocation tagging. EEAT. QR code.

Notes:

With well-structured semantic HTML content, SEO largely takes care of itself.

There can be gains from exploiting weaknesses in search engines, but it's risky.

For most businesses, their domain name (and the online authority it gains over time) is too valuable to throw away on tricks for short-term gains.

Slide 10: Developer Specifications

Code standards and policies on the tech used

Code Standards - CSS methodology. Browser support. Accessibility requirements.
Performance - Max page weight. Core Web Vitals targets. Image optimization standards.
Maintenance Protocols - CMS guidelines. Dependency. Update schedule. Backup procedures. Security best practices.
Hosting & Infrastructure - Environment specs, CDN usage, caching strategy.

Slide 11: Applications

How the brand is used across platforms

Social Media - Profile images, cover photos, post templates (per platform)
Google Business Profile - Photo requirements, post formatting.
Email - Template structure, mobile optimization
Directory and Review Listings - Profile images, cover photos, post templates (per platform)
Off-Line - Community & Sponsorship. Print & Physical Materials

Slide 12: Testing & Tracking

How do we ethically measure success?

Our Privacy Policy - Cookie stance. Use of dark patterns. Hidden tracking "pixels". Session replay tools.
Analytics Tools - If needed, do we use privacy-first, no cookies tools like Plausible Analytics or Google Analytics where a visitor consent pop-up is required.
User Testing - Can visitors find what they need. Are they confused about what is clickable. What is the impression of the site?

Slide 13: Governance

Who is responsible for what

Who can update what? - Level of permissions to any CMS, Github or GitLab. Access to the Website Owner's Guide.
Review Schedule - Quarterly audits, annual strategic reviews.
Decision Framework - How to handle edge cases not covered in guidelines. What happens when someone is hit by a bus?
Change Log - Tracking what and how?
Legal - Is the website following the law and who follows changes?

Transcript

[00:00:05] Nathan Wrigley: Hello there and welcome to the No Script Show in our last episode called Trap or Trade Off, what Small Businesses Should Know Before Getting a website. We use the example of a local plumber to highlight that the web is for everyone. We showed that businesses don't always need to get locked into maintenance costs and restrictions of a third party platform.

Often the only technology needed for an effective online presence is HTML and CSS, which can be learned relatively quickly. However, businesses also have to persuade visitors that their services are what searches are looking for. And to do this, they need a credible brand identity too. So in this episode, we're discussing brand style guides.

These long predate the web and here we're looking at how these could be best updated for web projects. You can find the show notes and the resources for this show at the website, which is no script show slash 29. The numbers two and nine. And if you're watching this on YouTube, the link will be inside the first comment just below the subscribe and like buttons.

hint. As always, I am joined by David Waumsley. Hello David.

[00:01:18] David Waumsley: Hi Nathan. So the last time we spoke, which is about a month ago, yeah. I thought I had it planned out. What we were gonna do for this episode, we were going to, I was going to go ahead and create this brand guide and it should have been straightforward because what we've been using for our presentations, we've been using Canva and Canva's got a whole range of these brand guidelines, which you could just edit.

So I thought would make one for Paul, our plumber and his one page site will turn into something bigger. but, instead, because I hinted at it last time, it is the fact that these star guides go back a long way. generally there are document of the visuals that you'll need for your brand.

And not so much for the web. So as I started adding in things that I thought were relevant to the web. I, it took me right back 20 years to when I first started doing web design.

[00:02:14] Nathan Wrigley: Oh, nice.

[00:02:15] David Waumsley: It did really. And at the time, I used to listen to Paul Boag

[00:02:20] Nathan Wrigley: Yes.

[00:02:20] David Waumsley: And his

[00:02:22] Nathan Wrigley: Boag

[00:02:22] David Waumsley: World Podcast.

It was the only one that was available for people who were interested in making websites. Yeah.

[00:02:27] Nathan Wrigley: He was blazing a trail bike then, wasn't he really was.

[00:02:29] David Waumsley: Yeah, exactly. And it reminded me, and that's what we've called this episode, the making of the website owners manual. This was a book that Paul.

Did back in, I think 2010, which is now available for free. Actually, we'll, move on. There's a link actually where you can just get that book. But he was trying to solve this problem, which actually at the time I, I loved making websites and all the stuff that was involved. I loved that show. But what I didn't like is hearing all the stuff, all the friction that people used to have with the designer and the client who didn't necessarily understand the web the way that the designer would.

Right. And his solution was this, website owners manual. So I thought as we're quite keen for the idea that we have a sort of transparent set up, something where people who know, want to go independent can say a business like Paul, that's what we've covered last time, could make his own website really wanted something that would be similar to that in the sense that the website owner would need to know what they're doing.

So basically what's happened is that I've gone completely off this sort of very simple. you really are design identity thing and, turned it into a sort of a living document, if you like. It is carrying on if you like. What I think Paul, was trying to do with his book, which I don't think works so much, because of the fact that it, well, like his podcast, it wasn't hitting the people that he expected it to hit.

Yeah. Which was the people who wanted to build their websites. It would be more for designers. So, and it's logical because no one's going to read a book before they start to get on with their actual work, so.

[00:04:14] Nathan Wrigley: Right,

[00:04:14] David Waumsley: right. So anyway, so I, what I tried to do, so I'll get on to the point no.

Is that I wanted to show you what I've started so far because there's a lot of work and what I'm hoping you'll do and if somebody's kind enough to watch this and give comments, I'd love feedback because, this is obviously something that I make available to anyone, but, if I'm on the right track, this would be the way that I think would start every website.

[00:04:40] Nathan Wrigley: Yeah, it's, a, I, confess when you'd made it and sent it over to me, I was quite surprised by how in depth this working document is. I think currently it's on about 50 pages or something like that, and it covers a whole, smorgasbord of different topics. I guess I should probably pop it on the screen so that we can see where we are, we're inside of, Canva.

Like David said, this is where it's being designed. and you presumably, I think I said at, in the beginning there, there will be links to the resources and different ways to get it and what have you. but yeah, here we are. The website owner's manual. I guess page one. Yeah, we're current. We're currently looking at the editing view.

David, is that what you are desiring do

[00:05:25] David Waumsley: I think we have to do, because what I've done with this one, so, I dunno if you can read this, Nathan, at all, whether, it's I can and whether our audience can to see what we're doing. Yeah,

[00:05:38] Nathan Wrigley: basically you can click so basic, you can see the notes. They're quite clear on the screen.

I can read them out if you like, but they are very clear on the screen there.

[00:05:45] David Waumsley: Yeah. So what I think what we'll concentrate on this, we haven't talked about this at all, so we're just diving in as it comes up. But what I've done is I've set out a whole bunch of these slides on a Canva presentation. Now, the idea I had for this, 'cause I don't like the idea of just promoting.

one product out there, which is Canva. I mean, it's, wonderful. But I wanted this to be platform agnostic. So we're using it here and I've put it in our notes, because if you make something on Canva, you can save it as A-P-T-T-X document. Yeah. PowerPoint. PowerPoint Or, or if you want open source, you can use Libra office.

but what's great about it is if you use this, you've got a, kind of a way to be able to, particularly if you're on the pro version of Canva, you've got way of getting all these assets and everything to bring them into your presentation of the sort of things that you're gonna use on the website.

Yeah. and it allows for real time collaboration. So if, say, I would use it if I was working with a client, to, go through the steps in this and then use it as a way that they can add in. certain things that they wanted to add in themselves and make changes and comment on it. So you've got a, commenting set up and live collaboration if you want, on something like this.

And it also has, and I'll just go to that. It has a whiteboard option view where you can do this. So this is where I'm messing around and storing stuff for Paul's, site when we get around to making it proper. So

[00:07:25] Nathan Wrigley: it's great. Oh, I see. It's it's atomizing the bits inside the linear presentation with page numbers and you can pop those assets into different scenarios if you like.

So in this case, structure, mood, board, photos and what have you, you can pill for those and pop them into different contexts. That's actually really cool, isn't it? Yeah. So it's recycling the same content in different ways, which might be easier to. To understand, not everybody's gonna want to go through the entire 50 pager, are they?

And read all the words. That's really good.

[00:07:55] David Waumsley: Well, it was just a sort of, you need a, I think 'cause no project runs in a sort of logical order. You'll probably, when you're trying to fill in the idea of this manual is that you fill in all of the things that you'll need to have for your website. So it will be this style guide, which you'll use offline and online, which will tell you how your business, what its tone of voice is.

Yeah. What it stands for, what assets it uses, and the style of those assets. But in order to get there in some ways, and that's what Canva has, it has a presentation which we're seeing here. And then it also has a little bit like Figma. It has a whiteboard. So all I need to do is to link to this, and this is just a place where I can just zoom into any bit.

Yeah. and play around with some design ideas, which I'm doing here. A dark and a light mode.

[00:08:42] Nathan Wrigley: Right, right.

[00:08:43] David Waumsley: Yeah. That's nice,

[00:08:44] Nathan Wrigley: isn't it?

[00:08:45] David Waumsley: Yeah. And then you could just store some of your photos that you might want for some of this and, other things like structure, when I'm trying to work out the structure of this site's gonna be, and of course what you could do is, mess around in here, and have all the assets in one place, and then you can take that and once you're happy with it, then you can start to put it into the star guide or the manual as we've called it here.

Does that make sense?

[00:09:12] Nathan Wrigley: Yeah, that does make sense. That's a nice repurposing of all of those, different bits and pieces. And I think the, obviously the, website owners manual is gonna be like, like you said, like a working document. You're gonna be going through it and making sure that all of the boxes are ticked.

But the, bit that you just showed us, that whiteboard approach, that's like a, nice first pass. It just gives you an idea of. I don't know. Is this colour palette suitable for you? Do you like gen, generally speaking, do you like the layout of these pages and does the structure of the website look right to you?

Yeah, it's nice, really visual and and I suspect that more or less anybody online these days would be able to pass that information. these kind of interfaces are really normal now, aren't they?

[00:09:54] David Waumsley: Yeah. And I think that's it. It's just like Figma where it's got an open whiteboard, right? You need a sort of fi fiddle document when you're messing around.

I'll chuck a load of things in, does that look nice? And then I'll commit to it later in the manual. And I've got another link here. So for those who are listening, this may very difficult to understand, but what you're seeing is a slide and it says the site owners manual, it's a customised.

Customizable Guide for creating an effective brand guide. And then supporting resources is the link within Canva that goes to the whiteboard. And there's also a link, and of course you could use something else, which I've got going to a Google document. And what's quite nice about Google Documents now is because when you get to your sort of content that's going into your webpage, you probably want to get your page structure.

So you've got the tabs where you can line those up, which I've done here, and then you can start to put in the different sections that you're likely to have on each of these pages. And, go ahead with that. So I've started doing something like that.

[00:10:57] Nathan Wrigley: Is there any reason that you've, you've gone for a Google Doc over embedding that same information inside of Canva?

Is it just a superior sort of text interface, I suppose, with Yeah, yeah.

[00:11:12] David Waumsley: I, just felt, I mean, you could do it within Canva because of course it's, it works, it also has a sort of docs area as well, so it works, like, yeah, it doesn't, have the tab in though.

[00:11:23] Nathan Wrigley: okay.

[00:11:24] David Waumsley: So,

[00:11:24] Nathan Wrigley: and the tab, the tabbing being that column on the left in a Google doc, whereby you can Yes.

Headers and, H twos and h threes, you can organise the document and click through to it. Exactly. it's just a, if you're just dwelling on text, it's a superior interface, isn't it? There's just no clutter. Nothing's getting in the way and, okay. Okay. But nice to see that Canva supports the ability to link outside of itself.

Yes.

[00:11:47] Nathan Wrigley: To other things as well. So although it's obviously in a different space, it's there. You can link to it directly. Okay, great.

[00:11:55] David Waumsley: That would be the idea. And then I've got, I've just put this in as a bit of a preface. If someone's coming to this for the first time, I dunno if you can read that out.

'cause it's actually quite,

[00:12:04] Nathan Wrigley: yeah. Do you mean read what's on the, in the notes or read what's on the screen?

[00:12:08] David Waumsley: Oh, on the screen please.

[00:12:09] Nathan Wrigley: Yeah, I can do that. Yeah. so the website owners manual is a project management tool, a collaborative hub for strategic planning and brand assets like Paul Boag book, which I guess is a link there as well of the same name.

It aims to give owners control over the legal, technical, and business responsibilities that they inherit with website ownership. It encourages independence and inclusive design through web standards, agile development, and the indie web. Again, links are provided in there.

[00:12:38] David Waumsley: Yeah. And and they are, and the links for the moment, 'cause you don't probably haven't seen, they are put on our site for the moment.

So we might actually do an episode talking about each of these things. Agile development, agile

[00:12:51] Nathan Wrigley: and web standards and, yeah. Okay.

[00:12:53] David Waumsley: That's,

good. So that's a link really, which is, I've just taken the same format here where you explain what that means and why it matters and the core principles that you would follow and why website owners might want to apply this.

And it's the same with Agile as well, so, so everything from this owner's manual has got a link going out to something where it needs some greater explanation.

[00:13:16] Nathan Wrigley: Okay.

[00:13:17] David Waumsley: and I've put some principles on the side of this as well as the sort of introduction to this is that these probably need some work, but principles are business ones that we, tackle problems before.

Product. so we, we don't say I want a website, we want a website because it solves the problem that we're not getting enough business. we always, do it that kind of way, justifications before dependencies. So instead of jumping on the, heavier software that we'll get as a website, we will justify what we need in terms of technology so we don't have to, support dependencies, that we didn't need to, local skills before global.

This is my own branded, corporate platforms and that we should try and contain our website to, to, if you like, localised skills rather than Have a dependency on people. Millions of miles away.

[00:14:14] Nathan Wrigley: Yeah.

[00:14:16] David Waumsley: so, and that way. favour simplicity before automation on things. So, often, but, well, I'll get clients come to me who want something that's automated, and then if you really drill down, they would've been better.

Just keeping it simple in the first place. And the automate automation actually makes things so complex that they can't manage it. So I've put that in, terms of design content before design, meaning that you get your words and then you design around that first, users' needs before designers or stakeholders.

ego, So it stops being an art project, objectives before personal taste and for the web, but it would've some general views about, fluid before fixed units, mobile before desktop semantic bus, semantics before styling, performance before bloat and accessibility before complexity. So

[00:15:14] Nathan Wrigley: there's a lot there, but

[00:15:15] David Waumsley: there is a lot there.

Yeah. So it's really just trying to set some standards, if you like, which I think are standards that we all hold to, but we just very easily lose them if we don't bake them in at the beginning of our projects.

[00:15:30] Nathan Wrigley: yeah. Okay. and I guess you're just setting the groundworks a little bit, aren't you?

These are the kind of things that are gonna come later, but they're, worth thinking about at the start, so, yeah. Okay.

[00:15:41] David Waumsley: Yeah.

[00:15:41] Nathan Wrigley: Laying the groundwork. Yeah.

[00:15:43] David Waumsley: And I've put again in notes here. I mean, designers might want to use this whole thing or the next level of, if you like, the higher level.

Navigation, which we're just gonna work through here to remind, clients of the unique features of the web and of their responsibilities for having a website and also to head off, potential friction that you can get. So for example, on that, and I've just put this in notes, it makes it easier to, see by going through this process, see, when a platform's needed rather than picking a platform for the client and then subsequently having to justify it.

just on that point, it's probably worth mentioning. There is another website owner's manual. I've stolen Paul Boag name, but there is another one from someone we know, as well in the WordPress space. Yeah. And in some ways that's what theirs does, isn't it? That it's, a document for. To give to website owners to explain the work that goes into maintaining something like WordPress.

So if you're like this, one is a slightly different thing, and the fact that you would try and avoid, you wouldn't need something like that anyway because you would already decide that the client, whether WordPress was the most suitable

[00:17:02] Nathan Wrigley: Right.

[00:17:03] David Waumsley: Thing that was project. Well, that,

[00:17:04] Nathan Wrigley: that was your second point on the business principles, wasn't it?

Justification before dependencies,

[00:17:09] David Waumsley: Yeah.

[00:17:10] Nathan Wrigley: If WordPress isn't the right thing, then that's not the right thing,

[00:17:14] David Waumsley: and that's always been the thing that's sticking with me. I mean, for me it was fine because I came in as somebody who did WordPress, so everybody got WordPress. But of course, the person bringing the clients to me hadn't necessarily gone through the process of whether they needed to be managing WordPress for the job that they had.

So,

[00:17:28] Nathan Wrigley: yeah,

[00:17:28] David Waumsley: so it wasn't covered. also going through the process here would provide the tools to clients to be able to, assess. Other people's sites. so it avoids, 'cause this is often, I think you'll, know that a lot of people will come to a designer and say, and I've seen this on the website and I would like that on my website, this navigation, this slider, this bar.

And I think this is always problem because then you end up with a situation where you might know that this isn't in their best interest. This isn't good for usability. It might not help them to achieve what they want to achieve. So by letting the client go through this kind of thing, there's less likelihood that they will come up with bad ideas, which you'll have to correct 'em on.

Yeah. Which creates friction or that you'll have to get into criticising another website. So it's to head off

[00:18:19] Nathan Wrigley: that, yeah. it feels that, although this is, well we're still on the preface, aren't we? It, there's a lot of conversation to be had here just laying out the groundworks before the, before anything really starts.

[00:18:31] David Waumsley: this is, these are the notes in a way. If you are a designer, I suppose, what's the benefits of going through this approach?

[00:18:38] Nathan Wrigley: yeah,

[00:18:38] David Waumsley: on this one?

[00:18:38] Nathan Wrigley: Yeah.

[00:18:38] David Waumsley: Also, it, going through this approach from the beginning to the end, and I expect if you were a designer showing this to a client, you could do it in a very quick conversation.

You'd go through 10 slides to just to know you're on the same, in the same place. But I think it positions designers problem solving to avoid that kind of problem that you often end up with where a project turns into some community art project. where everybody's saying, what do you think of this?

What do you know? It gets it back to the, science of it. And I think it just. By going through a process like this, it reduces that need for these torturous contracts that people often set up. 'cause they've been burnt by clients wanting to change things that last minute and all that kind of stuff.

[00:19:22] Nathan Wrigley: Yeah,

[00:19:22] David Waumsley: we can get around that.

[00:19:23] Nathan Wrigley: Okay. That's an interesting position of it as well. Okay.

[00:19:27] David Waumsley: Okay,

[00:19:27] Nathan Wrigley: so moving on, I guess when the next one,

[00:19:30] David Waumsley: right? Yeah, so I'll move on. So we've got a table of contents and this is the higher level of, how this kind of document is structured. And I've tried to structure this into different sections.

So, table of Contents has got this sort of first section, which is the, content, which is really the missing and message, which we convert into Symantec, HTML and make. So it makes the web accessible to all people and devices, which other mediums can't do. And then on that, so it's going in order.

You would start with that when you are starting your project, what your. Mission is, then you would move into styling, which is the visual design that objectively improves the usability of the content and forges an emotional, connection with the target audience. So that would be the next level. Then we be looking at technology, what's necessary to deliver the message, so you want to start with the rule of lease power to reduce unnecessary lock in and maintenance.

And then finally there needs to be a section, I think, which is covering progress. So you need to plan for the fact that the web is constantly changing. Businesses change as well. So there's inevitable change here, and you need a way to be able to evolve, ideally in an agile way where you are incrementally improving all the time.

[00:20:56] Nathan Wrigley: Yeah,

[00:20:57] David Waumsley: nice. So, so what's happened here is that, if I just bring this up here, again, people who are listening to this might find it a bit difficult, but on. That sort of content, table of content lays out these different sections. And here you can link to these.

[00:21:12] Nathan Wrigley: These are

[00:21:12] David Waumsley: links different. Yes. Within the

[00:21:15] Nathan Wrigley: document link.

That's an internal link within, inside this Canva board, you can just shuffle backwards and forwards.

[00:21:20] David Waumsley: Exactly. I can go back here. So I go, oh.

[00:21:22] Nathan Wrigley: Oh, that's what that arrow's for. Okay.

[00:21:24] David Waumsley: I just, yeah, that was

[00:21:24] Nathan Wrigley: a nice, like a bit of graphic, but it's not, it's actually a link.

[00:21:28] David Waumsley: It's a link back. So the idea is that, so if I was going through this, how I imagine I'm gonna go through this as a designer, I'd just say, oh, let's start your project.

Let's go through the things you need to do. You, we need to start with your content, what you're trying to achieve here. What's, your brand? What's its message? Then we would go through that first one, which would be the foundations and strategy, who you are, why should anyone care? And there were different sections.

Nathan, you're much better at reading. Do you wanna read out what's

[00:21:58] Nathan Wrigley: Yeah, I can read them out. Yeah, that's fine. Yeah, sure. so we, we've clicked the first link in that table of contents document and we've ended up a foundation and strategy. And this is the Who are You and why Should Anyone Care Piece.

And, it's broken up into five different sections, the first of which is brand purpose and vision. So why the business exists? Emotions, it invokes core values and aims. Then moving on, target audience, who are the personas, the demographics, what is the visitor behaviour and what are the challenges they may present?

Market position and statement comes next, where you sit and what you stand for, which is in effect your elevator pitch. Two final ones, competitor analysis. and in this we're looking at competitor strengths and weaknesses, that sort of swap thing that everybody does. Differentiation, opportunities, how you can stand out.

And then finally, more towards the website itself. SEO stuff. sanity checking. Achievable traffic. Yeah. Oh Lord. content. No. Bring it. Build it, and they will come. David, that's all you need. content gaps, keyword competition. search intent and eat. EEAT. Which I actually have forgotten. What's that?

[00:23:07] David Waumsley: well, it used to be just eat with the one E.

so it's, I think it's experience, expertise, blah. I forgot what the A is. And anyway, it's

[00:23:17] Nathan Wrigley: all

[00:23:18] David Waumsley: the

[00:23:18] Nathan Wrigley: stuff. Quickly move it on.

[00:23:20] David Waumsley: It's what? Google check. I should write it out in full. What Google uses authority is the A and ah,

[00:23:26] Nathan Wrigley: you go. That's it. That's what I remember.

[00:23:27] David Waumsley: A trust or something like that for the T.

There you

go.

[00:23:29] Nathan Wrigley: Yeah.

[00:23:29] David Waumsley: It's all about whether you are a legit business and you show yourself to be somebody very serious. It's a key thing that Google always looking into whether there are signals out there that you are a serious business, so they can rank you higher rather than somebody, particularly if you are doing something which is professional, if it's medical advice, they'll definitely want to see lots of the expertise, some background before they'll favour you.

yeah, so the, that. So again, with each of these, this is the idea. This is where you end up with so many pages. So if I click on any of these individual subcategories, like the first one being brand purpose, vision, then it will take you into Yep.

[00:24:06] Nathan Wrigley: Being moved over. Right. Got it.

[00:24:08] David Waumsley: We won't cover that because that's where I'll put all the sort of tips and that's where you'll write in what they are.

So that's the bit that we'll complete. This is just the overview. so that's the idea of foundations here. So you, hopefully you'll go through this and you'll get an idea about where they position themselves, what is their elevator pitch. with each of these, there are little, ways of being able to do that.

That there are statements you can create, which somebody can pre-fill in. So you know, you are, for a certain type of business, you are your name and your brand is a whatever it is.

[00:24:45] Nathan Wrigley: it's almost like magic tags in an email system, isn't it? You can Yeah. Substitute, substitute the correct phrasing and hopefully something sensible pops out.

Yeah.

[00:24:53] David Waumsley: So the idea is when you go through this, you give 'em all the tools that are around the, there are loads of them for people who do this, that help people to try and come up with their own brand purpose. Because I think if I just go back, let me just come out of this, I just go into the notes here.

I think I put something on that. yeah,

[00:25:11] Nathan Wrigley: you did. Shall I just read those out? 'cause

[00:25:14] David Waumsley: actually I'll go back. Yeah. Okay. I'll just go. is that the one I'm on? Yes. That one. Yes, please.

[00:25:20] Nathan Wrigley: Yeah. So I'm looking at the, the foundation and strategy document, and it says the following. this is often the hardest part.

Creating a brand requires introspection and in many businesses, people, sorry, and many in business are people of action who employ their gut to adapt to situations online. We have to define upfront a purpose and target audience to cut through the noise and avoid being for no one in particular.

Online. Customers can't meet you first, so your brand identity has to act as your actual digital handshake. and on the plus side, this can act as a use useful north star for general business decisions and reduce the need to compete solely on price. I guess with the, as we come later to Paul the plumber, yeah, this, that's a fairly straightforward proposition, isn't it?

the narrative around what do you do is pretty straightforward. but in more complicated situations where your bus business isn't maybe quite as obvious as that, or you've got some strange niche within a niche, then this kind of stuff starts to matter more and more. You've gotta cut through the noise and make sure that you are, it's clear what you do and that you are trustworthy and reliable and what have you.

[00:26:37] David Waumsley: And I think it's quite interesting 'cause I started to do the exercises and, I'll finish this off with Paul properly, but you start to get, even when you get to target audience, you think, oh, well that's just anywhere in linkage. He is a local plumber and he does these particular areas. But when you start to dig into it, you start to think about.

Actually, who are the people that really come? Well, it tends to, the job of calling in the plumber tends to fall more on, on women. And when you look at it, he is got a particular, range of women. generally there'll be over 30 and, generally, householders. but he's also got other people as well that he deals with because he's dealing with landlords as well.

Yeah. So a different, so it's quite interesting how you start to get into it and even though it seems straightforward and you think it's everybody in that area, actually it's not. And they've got

[00:27:27] Nathan Wrigley: characteristics. Yeah. So I've got, you are not living in the UK at the minute, but you'll know this problem.

So I've got a perfect example of where this goes wrong. And that is, for example, if I did a Google search for, let's say where I live, Yorkshire Plumber.

What I know will happen is the first. Set of cert results will be some content farm that is probably based out of, I don't know, the southeast of the uk.

And there are like, there are call centre for plumbers basically.

[00:28:02] David Waumsley: Yes.

[00:28:02] Nathan Wrigley: And you go there and it's pretty obvious that this landing page, which where the word Yorkshire appears, is just some dynamic data that's been inserted in, it's probably an identical page for Lancashire and Wales and North Umbr and whatever.

[00:28:17] David Waumsley: Yes.

[00:28:18] Nathan Wrigley: And it, but yet they win the SEO battle. But the minute I see that generic nonsense, it's like next. You just, there's no depth to it. There's absolutely no credibility to it. You know that the person that's gonna come has no interest in the area. They're probably gonna have to drive miles. You're just a, you're just a data point to them.

You're not gonna be somebody that you can build a relationship with and have Paul, the plumber's phone number in actually is a contact in your phone so that you can call him up at three in the morning when the tap suddenly bursts open. Yes. so yeah, that's, an example of where this sort of stuff really trumps the, sort of, I don't know, the automated promise of what, what the, on what the world can, sorry, what the web can bring.

We've got a webpage, but we don't look trustworthy.

[00:29:08] David Waumsley: Yes.

[00:29:09] Nathan Wrigley: Presumably it still works. I don't know.

[00:29:11] David Waumsley: Yeah. It's interesting and I think we'll come back to Paul in this site a later point. So I can go into some of these things. 'cause there is some quite interesting thing about what. SEO strategists say about plumbing websites, which I would, I just suggest we don't do, but it's another conversation.

Okay. I'll move on with, I'll move on with, the next slide that was here. So the next thing, which is in our content section on the higher level is defining the, content and voice guidelines. So, basically how do you communicate? so there, I'll read these out. There's the three sections on this.

Each have got their own page, which is, brand voice, which is your tone, your language style and personality. So there are tools again, which we'll go into later, as I fill this out on how to come up with that, but often with that kind of thing. In fact, let me just go to the link so I can just cover that quickly.

Just come out here. I think I might have done some of this, filled it in. Already for Paul. Yeah. So I mean, there are a few tips on how to do that, but I put in the slide, so if somebody has to fill that in, there are tips on how you find your brand voice. You can imagine your brand as a person, in this case, personable, like Chris Packham, the eco broadcaster.

[00:30:32] Nathan Wrigley: Yeah.

[00:30:32] David Waumsley: Am I on?

[00:30:32] Nathan Wrigley: Yep.

[00:30:33] David Waumsley: there, I mean there are different adjectives you can use as well to define yourself. You can use the this, but not that way of being, professional but not stuffy funny, but not mean as a way of trying to get to your character. Yeah. read reviews. That's often what a lot of copywriters say.

Use the words that people use to describe you as a good way of getting your brand there and creating a do's and don'ts list of what sort of things you would say. wouldn't say so lemme just go back.

[00:31:07] Nathan Wrigley: it's an interesting world for Paul, isn't it? Because he's got a sort of step into a world, which I'm imagining is very unfamiliar to him.

if you are a, I don't know, if you're a financial institution and you've got a marketing team, presumably the people on the marketing team are really savvy with this kind of stuff. But having that conversation with Paul, I think would, it's gonna be weird. It's for a little while. It's gonna be really trying to drag Paul through the hoops here.

I imagine there'll be a little bit, not resentment towards it, but do we really need to do this? Can't we just build a website?

[00:31:40] David Waumsley: I know.

[00:31:41] Nathan Wrigley: No,

[00:31:41] David Waumsley: I, I know and I think that's the, in a way, I, this should be a checklist. I think, if your clients can't do that, you can skip over it. You say, well, shall I fill that in for you?

From what I know of you, you tell me if it's wrong.

[00:31:54] Nathan Wrigley: Okay. That's an interesting, that's an interesting position as well, isn't it? Is you in effect, are. Being the helpful voice of reason. It's not like, okay, unless Paul does all of this document needs to go in the bin. That's the prof. That's where your professionalism drops in.

I mean, you know what a plumber does. There's no, there's really not much of that industry which is disguised and unfamiliar to you, so you really could Right. But I guess if it's some industry that you've never heard of, X companies making widgets, which they sell to this entire industry that you've never heard of, Maybe not so much. Yeah. But for Paul, do you know what, I think that's a bit of a value add as well. I think if you can show this to Paul and, persuade Paul that, you know what we, I can do some of the heavy lifting here. I've done this before. That's, quite nice. yeah. Probably reassures Paul that you are credible as well.

[00:32:48] David Waumsley: And I think just going through the, it's like anything, if you have to come in and you've got a whole bunch, which is on the individual pages of how you can get this information outta people, I think this just a way, but it's really about making sure that you haven't missed something along the way and that you are logically building up the website.

So,

[00:33:06] Nathan Wrigley: yeah,

[00:33:06] David Waumsley: I mean, my little note on this whole section, if you like, brand voice writing guidelines. And that is the fact that, people buy from people. So we have to cut through the impersonal nature of the web. And this isn't creative writing, but it's reputation, control. because people, when they go to your website, so when people go to Paul's website, that should reflect his voice.

So when he turns up. with his spanners, they're not surprised. 'cause he's completely different to what expected, you

[00:33:35] Nathan Wrigley: know, what that is the, that's exactly it. That encapsulates it in a nutshell. That, that SEO farm that I talked about, which You land on the page and it's got the word Yorkshire, but it's also got some sort of generic stock photo of the area in which I live, and then stock photos of happy plumbers getting out of happy vans in indiscriminate location that's doing nothing like, that's like 2010 stuff.

Whereas if I see Paul and I know that this is Paul, this is what he'll look like, this is what he'll show up. Like, here's, him. Yes. it's so much more authentic and powerful and I, actually think there's, a weird undercurrent here of people just wanting to get back to the real world fatigue of what the internet might have brought.

If you know what I mean. That's an ephemeral thing that I can't really grasp hold of, but that there is some sort of reaction and some requirement for local things, for local people. yeah. And a sort of, pushing away a bit of the internet. So we've gotta blend those two things. Use the internet, but be authentic and real and local and all of those things.

Yeah.

[00:34:46] David Waumsley: And not authentic. Yeah.

[00:34:48] Nathan Wrigley: Yep.

[00:34:49] David Waumsley: let's, move on. So, so now we'd be going into the slides. If I was back to my main table of contents, we'd be moving into the visual design bit here. So visual identity, creating an emotional connection is how I've done this. So I think you need your. Well, sorry, I did skip over that.

I'll just go back a little bit on the, okay. Voice on the content and voice. Obviously, it's a good time at the very beginning to decide what types of content you might be putting out there, whether you will do blog posts, whether you'll have special landing pages that you'll need to make, whether you do social media directories, flyers, and all that kind of stuff.

I think it's good to know the range of written content that you're going to put out there. And also, this is a place where you would define, and again, this is another page, area of writing guidelines, which would also do something which I've never done before, which would actually lay out some of your best practises for web copy.

So it would be the same thing. We showed last time, which would be that, crib sheet, if you like, of things that you do, you write for skimmers and you Yep. you start with the, important stuff and work down, but also it would include other things like. Meta description templates, how you might mark up your images, what logic you use to do that, and that, that kind of stuff.

so we've talked about this on other shows there, where often there isn't a logic to how you might, when you're doing the website, right, the descriptions or the title tags in a certain way. it might be your business name and then about your business name, and then contact, or it might be something else entirely.

So setting these things up, I think is good for before you build the website, because then you've got some consistency. And the same with, with how you mark up your images, what rules you follow. Okay. Okay. so yeah, we'll

[00:36:41] Nathan Wrigley: go two. Did you skip six out by the way?

[00:36:43] David Waumsley: Did I skip?

[00:36:44] Nathan Wrigley: I think you went from five there.

[00:36:47] David Waumsley: yeah. With content and then we go into the next, lemme

[00:36:49] Nathan Wrigley: Oh, no apologies. No, I think, yeah. So there you go. Six. There

[00:36:54] David Waumsley: we

[00:36:54] Nathan Wrigley: go. Okay. Seven. All right.

[00:36:57] David Waumsley: Yeah, I think this is Moving on to the images. Oh, sorry. No, I did skip one, didn't I? What happened? Yeah.

[00:37:03] Nathan Wrigley: Visual,

identity.

[00:37:05] David Waumsley: Yeah. So moving into, so now we've assumed that we know the content we're writing, that we've got the rules on our content.

We've got our voice that we're writing with, so then we're enhancing the web. We're starting with that semantic, HDML, effectively, and then adding in. So, I think the important thing about a visual identity is that it should be congruent with the, brand's written voice and message. It needs to stick with that and not be a, should be choosing on what is object.

Best representing the brand that we've defined to the users, rather than making it some subjective art project. and I think also when we're doing our visual identity, it's important to remember that when it comes to the web, not everybody is going to see what you see as well. So, we're adding a layer of visuals to, Add to the written content, it shouldn't be as a replacement for it because some people aren't going to see it. Screen readers, search bots obviously don't see the visuals, and increasingly people have preferences where they may have, high contrast themes on their, or they put it in reader mode or they have a monochrome screen.

So I think that all needs to be told to a client as well, so they understand what the visuals are doing. But then we would define things like our logo, things that we would include in there, whether it's got a dark or light mode. we need to probably have a stacked and horizontal version of it.

We need to probably have a fon and maybe an open graph image as well that we're going to use as a format if we're, going to putting things out that go into Facebook or

yeah. Twitter or something like that. Not Twitter. X x. So, I mean, that's where you would use it as a normal. So here, if I just go to that link there, I've already started to make some of his logos in the different formats here.

And I'd do that on the whiteboard and I'd make it over, to here. So that would be available. 'cause then you could just download it from camera. Yeah. And use it in your projects as you needed it. Yeah.

[00:39:16] Nathan Wrigley: Yeah. So each of those little assets that we see, so the logo, the light version, the dark version, they, within the Canva book, you could click on those and download them from the asset page and things like that.

Could you?

[00:39:27] David Waumsley: Yes,

[00:39:27] Nathan Wrigley: exactly. Yeah. Okay. There you go. Right. Wow. Gosh, look at

[00:39:30] David Waumsley: that. Yeah. I need to go back to where we was here. So that was, yeah, we

[00:39:33] Nathan Wrigley: were on seven.

[00:39:35] David Waumsley: Ah, okay. So we're moving on. Yes, we did that one. And then there's images and meet. Yeah, it was six I think we were on before. Yeah. Oops, hold on. I keep moving there.

Visual identity. Yeah. So logos to that. And then we'll pick our colours again. I love a format for this one, but we'll want to make sure that we're observing certain things, work criteria on, contrast ratios. In fact, I can do that, actually, I can just go here, but,

[00:40:04] Nathan Wrigley: oh yeah. Nice. Again, it just links to Yeah, look at that.

[00:40:06] David Waumsley: Yeah.

[00:40:07] Nathan Wrigley: Lovely.

[00:40:07] David Waumsley: So, I mean, this is still work to be done. So there's a format so when you go to the next client, you can swap out the sort of way that you just changed the colours over here, so it would make it easier, but it just means that you, it's not so easy to navigate back. 'cause I'm not sure where I've clicked at number

[00:40:25] Nathan Wrigley: six.

You were at, I think six.

[00:40:28] David Waumsley: Yeah, we want that. So I was just showing how that's going. And typography is the same. You've set that out and fonts you would choose those. I've, put that. And I think in style guides they tend to put them in the same thing, but I think fonts, there's enough to write about, the decision making on fonts, whether you're using system fonts, for performance or whether you're going to use them and where you're getting them from and licences and all that sort of stuff.

So I've, got a different section for those. then the next is, the slider, which is looking at images and media guidelines where we want to set those up. And again, there are four overview units to this one. and this is about making content easy and enjoyable to consume. That's why we have media and images.

So we'll set up. And again, these have their own pages. a photography style that we're going to use, whether there's a certain mood, whether there's certain subjects which we incorporate in our, which is pretty simple, I think, with a plumber. it's largely going to be them doing some plumbing, but whether we use any filter effects, in their case, they've got a, standard, rounding of the borders of the images.

Right.

[00:41:38] Nathan Wrigley: Okay.

[00:41:39] David Waumsley: Yeah, so that's the format. we'd also discuss here as well, image specifications. So the file format that we're going to use and the support that we're, because one might want to use WebP with a fallback of a JPEG or something, or we might just say, yeah, no, it's okay. The support for Web P is okay.

So we would define that ahead of time and probably define what sort of aspect ratios we're gonna have for different types of content, whether in certain situations we're using square image in other ones, whether we're using standard, what is it, 16 over nine ratio? Yeah,

And again, audio and visuals with some things that would need to be considered there. Autoplay

[00:42:23] Nathan Wrigley: policies. Yeah. Paul needs a podcast. I think and a YouTube channel. Actually, Paul could probably do really well out of a YouTube channel, to be honest, but maybe not a podcast. Sorry. Well,

[00:42:33] David Waumsley: it was actually, and actually on that first one page site we built, there was a video which,

[00:42:39] Nathan Wrigley: yes,

[00:42:39] David Waumsley: followed from the web.

So yeah, there might be that, and Icon Systems as well. So there's a separate page for this where I can put in the notes where you can find lots of these icons. So you can define these ahead without kind of moving in, which, which is your gonna be, your style and how you'll go about that. now we'll move on to next thing, which is still, I think in the sort of range of the visuals, no, it's not, sorry, it's, into the sort of technology element Of web components and it's, using the power of web conventions with this. I'll put some notes in here as well on this one, so,

[00:43:15] Nathan Wrigley: Okay.

[00:43:16] David Waumsley: Shall I read this?

[00:43:18] Nathan Wrigley: yeah, you could, I guess.

[00:43:20] David Waumsley: Okay. The, really the point on the notes that go with this slider is the fact that the web is interactive.

That we need to be able to tab mouse, click, finger tap to links and buttons. And we should, in the process for that, should be able to get visual feedback or audio feedback. If you are, somebody uses a screen reader and often these things are forgotten about. So this is a, key thing to do that visitors need to understand our ui.

So conventions are our best friend. there's a book, don't make me think, which very much

[00:43:51] Nathan Wrigley: Yeah.

[00:43:52] David Waumsley: Says about the idea of just stick with what people understand. Keep it simple as you possibly can. Don't go and do crazy stuff. Do crazy stuff if you like, you might win some awards for doing it, but you're probably gonna lose a load of visitors.

So,

[00:44:04] Nathan Wrigley: yeah.

[00:44:05] David Waumsley: You need the pockets if you wanna experiment. and I've just put a bit in there about the fact that the, it's generally good to test all of the components that you are adding and keep it simple as you go, because. We're used to the fact that we can, there are lots of design systems out there, but they do have a history of breaking conventions.

So the classic one is removing link underlines, which is what Twitter's bootstrap did for version three. So millions of people there, basically those people who were relying only on colour to see what will link, many, people were just excluded from the web on those sites. Yeah. 'cause they can't see what's the link.

Yeah. And the same thing is even Google with its material design managed to replace, input titles for place, for placeholders on form inputs. So of course that causes a complete nightmare for someone trying to fill in a form. Yeah. So, yeah. So my guidelines on this one or something to remind ourselves is that we want to test for ourselves anything that we're adding, which should encourage us not to add more stuff than we need to onto our website.

[00:45:10] Nathan Wrigley: Yeah. It's, interesting how this is, useful to explain to the client, but also useful as a mnemonic for yourself. These things need to be taken into account because it is easy to forget some of those bits and pieces. I mean, hopefully if you've been in this business for any length of time, they're a bit ingrained, but they may not be.

It might be that some of those things do drop off the radar a little bit and just having a mnemonic to say, wait, hang on. Have a think.

[00:45:38] David Waumsley: Yes. Well, that's the idea with this. I, if you can put so ahead of this, it might solve some problems because if, if it was the first chat you're having with somebody and you just go over, look, these are the kind of, this is better people than me who've worked out all this stuff about the web who had these kind of principles.

If you like that we should work to it heads it off. Because what's likely to happen is that if you don't say something about trying to keep things simple when it comes to these units and the fact that. What on somebody else's website isn't necessarily good for your needs. You might cut down the people who just say, I want this navigation.

So, right. I think for Paul's site, when we go for the navigation to keep it really, simple for him, we'll have a, instead of a really complex menu, we'll have a menu page, which will just Right,

[00:46:27] Nathan Wrigley: okay. Yep,

[00:46:28] David Waumsley: Goal to, oh, okay.

[00:46:30] Nathan Wrigley: yeah.

[00:46:30] David Waumsley: These sort

[00:46:31] Nathan Wrigley: of things. Something really visual, easy to take in.

Yeah. Okay.

[00:46:34] David Waumsley: Yeah, exactly. And makes it easy to maintain and stuff like that. And it's the same with sliders. you take on, what people need to be aware is that you take on a whole bunch of responsibilities, which later you could get fined for, because you haven't thought about those people who need to tab their way around their site or need it to feed back to them in an audio way, because they use screen readers.

Yeah. So it's a way of just trying to, keep. Add what's needed rather than what looks cool on another person's side. Yeah.

[00:47:04] Nathan Wrigley: yeah,

[00:47:04] David Waumsley: so yeah, so you would, this would be web components where you decide the sort of things that you would need, whether you do need tool tips, whether you use, details and summary as a, we will do that 'cause there'll be frequently asked questions thing and what our button stylings are.

We'll have some animation guidelines, where again, we probably want to make sure we honour people's user preferences. If they hate it, then we're not going to show them animation and we'll have some things on there and we'll have some sort of spaces system that would write down. So again, if, even if say I did the site in simple HTML and CSS, it might be useful to, for anybody who had to take over from me, 'cause I'm run down by a bus to know what system was used to create those spacing so they can apply the same, Let me move on. This is going on a bit, so let me move on to the next thing. Did

[00:47:57] Nathan Wrigley: Miss, did you miss out the,

[00:48:00] David Waumsley: SEO team? I did miss the

[00:48:00] Nathan Wrigley: one.

[00:48:02] David Waumsley: SEO. Yes. You're right. So, next thing, again, SEO here. Now this is where we might dig into it a little bit more. most of this will be just reminder stuff. I mean, I've already got links to it.

There'll be content strategy, how much you think that somebody is going to publish. I think in Paul's case, we would just have a few key articles that might help him rather than the blog,

[00:48:25] Nathan Wrigley: unless he's got the YouTube channel, in which case yes. Doing it all the time. But yeah, I think Paul, it's fairly unlikely that Paul's gonna be producing a

[00:48:34] David Waumsley: Yeah.

[00:48:35] Nathan Wrigley: With blog posts. I doubt. Yeah.

[00:48:36] David Waumsley: I thought for Paul, what it might be, might be useful for him because he is, he's a single person with his wife just taking the calls for him. Emergency plumbing, which is popular. He might want to have an article which tells people. That, is it really emergency? Do you need to pay more for me to be called out now?

Yeah. These are a few things you might be able to do and then call me in the normal hours and save yourself some money. Yeah, so you could have an article about that.

[00:49:01] Nathan Wrigley: yep.

[00:49:02] David Waumsley: sorry. Technical, SEO. So that would be about, structuring data and schemas and stuff, what you're going to include on that. pay speed targets.

You might want to set an indexing considerations what, kind of, structure you're gonna have and which you're going to put in. We'll cover this later 'cause I've actually done the work on Paul's. and there might be something as well about local SEO. So you'll cover here. What would you know? What would be the rules on setting up the Google business profile, which is probably gonna get you most of your work, I think, as a local plumber and whether you want to get into things like geolocation tagging.

and again, we're back in with our E-E-A-T-E. Yeah. Yes. And things like that. And QR codes as well. you might be something you wanted to set up. That mean that became a big thing, didn't it? On your advertising elsewhere, you'd have a QR code to come to your website where they wanted the same, let me move on to the next thing.

So the next one would be applications. Again, there's just a section here where you might want a different page, which I've set up, where you would cover the sort of profile images and the sizes. And again, if you're doing a website, it's good to see how the same brand identity is going to go to different applications like social media.

So it might have a different. sizing of your photographs that you do there and different types of templates that you have. Again, the Google business profile, you might put some more details about what photos you're gonna require for that email. Again, it might be something that you set up that needs to be branded.

And same with anything else. Any, directories or review listings or stuff. So they're on the separate page. And finally, I think on, oh no, not finally.

[00:50:49] Nathan Wrigley: There was a 13 as well. There's one more after this.

[00:50:51] David Waumsley: Yes, we've got testing and tracking something I nearly forgot on this one. This would be setting up again.

How do we ethically measure success?

[00:51:01] Nathan Wrigley: I, want to forget this one. I'd love to live in a world where I didn't have to think about this one.

[00:51:09] David Waumsley: So I, mean, I've, put down here, I think it's worth discussing this 'cause this would be a sort of afterthought a lot of the time. So you would say whether you're going to do user testing now, I've actually put a little article in there once you go to this page, which actually gives you a how you could do the simplest of user testing where you just get maybe three to five people.

Three.

yeah. and, you just go and ask 'em to do a few things and watch where their mouse goes and try and get some feedback. So I've got a whole setup for that. So that might be something that Paul might do, if he can take five new customers or something who prepared to give him half an hour on a Zoom call or something like that.

Good luck with

[00:51:51] Nathan Wrigley: that.

[00:51:56] David Waumsley: and analytics, again, this is something that I would discuss at the beginning if it's needed at all. And, if you are and you want to look at your analytics and you think you're going to use those, are you going to go for something like, Oh, I don't think it's written plausible. It should be saying on there.

Sorry, my, oh,

[00:52:15] Nathan Wrigley: okay. Yeah, I know

[00:52:16] David Waumsley: what

[00:52:16] Nathan Wrigley: you meant.

[00:52:17] David Waumsley: Plausible analytics, I think it's called, is the, privacy first. No cookies tool or you've got Google Analytics where if you are in Europe, you might have to be wary about using anyway. Certainly if you are, you would need to make sure that you've got a popup form that comes up on your website and says, I consent to my data going off to.

Google and going off to the us Yeah. Yeah. So, so all those sort of things. And I think this testing and tracking is a good conversation to be having early, what's your privacy policies? What's your stance on cookies use of dark patterns, whether you are against this, whether you are or not, going to have things like tracking, hidden tracking pixels or whether you use, which I did for some time, some session replay tools.

Microsoft Clarity

[00:53:05] Nathan Wrigley: was, yeah, I tried that until I realised that I never ever looked at them. So it was obviously pointless, but Yeah.

[00:53:12] David Waumsley: Yeah. Well, exactly, that's what I found. I think pretty much everybody I used to set up with analytics, but I think. There would be only a handful out of, well over a hundred clients that I know of.

There'd only been maybe about five of them, whoever really did look at their analytics.

[00:53:29] Nathan Wrigley: Yeah.

[00:53:29] David Waumsley: And when they did, it was only for a certain period of time and then it would be left for years again.

[00:53:34] Nathan Wrigley: Yeah.

[00:53:34] David Waumsley: So

[00:53:35] Nathan Wrigley: somebody got a memo that they needed to give a pres presentation to the board and analytics and so suddenly, oh, let's analyse the analytics and off they go.

Yep. Okay. Yeah,

[00:53:47] David Waumsley: and there are other ways of doing that, which I hope to cover. I mean, we're going on forever if I cover all of the slides in this. But in that you would put the alternatives in there because at the end of the day, you can get quite a lot of information by just measuring what comes into you and measuring.

What you can already sign up to. If you are, Google Search Console, or Bing, it will tell you a lot of information about the traffic anyway.

[00:54:11] Nathan Wrigley: Yeah. '

[00:54:11] David Waumsley: cause most people have signed up to it. And finally, last section would be in this higher, level, would be governance. Who's responsible for what? and this would cover sort of levels of permissions that anybody would have to say a CMS if it was a WordPress site on this one, or to GitHub or GitLab.

If it's, something which I'd probably be doing these days, how they might have access even to this guide, as well. So who would have that? Okay. review schedules, that maybe not one at all, but it's worth thinking about how often you're going to review whether your site needs an update in some form or another.

And what you're going to audit. you're going to look, one of the things you might be looking at, which is non-intrusive. You might be looking at where your keywords are positioned. There's tools, plenty of those where you can say, I'm trying to rank for linkage share plumbing. Let's see how we rank.

and you might want to check those every so often. And then the, there's the legal things, again, a page for that which really just needs to reinforce what laws you need to follow for where your website is and the size of your business, in terms of accessibility and GDPR. Okay. yeah. And finally, this is just a couple of things on this slide, which would have their own slides, which is, change log, who's tracking what and how.

And then a decision framework would be the last thing about. Well, what's not covered in these guidelines and what happens if someone gets hit by a bus, which is my thing at the moment.

[00:55:45] Nathan Wrigley: Yeah. You can keep referring to the boss. Poor.

[00:55:48] David Waumsley: Yeah. Yeah.

[00:55:49] Nathan Wrigley: Poor David.

[00:55:52] David Waumsley: I know, I'm, well, I'm well in my sixties now and I'm already

[00:55:56] Nathan Wrigley: be a boss.

[00:55:57] David Waumsley: could

[00:55:57] Nathan Wrigley: be something else. Exactly.

[00:56:03] David Waumsley: So, yeah, and I think it's always forgotten about. I mean, I think certainly who updates what is one and one of the biggest hassles with my, I set up the site for somebody, I think I'm in charge of it. 'cause my job is to do the updating and to make sure that their software's running.

But we've never really finalised that conversation. Who's responsible? So I'm really surprised when they give access to somebody who's able to change my plugins and do stuff. Right.

[00:56:27] Nathan Wrigley: Yeah. Yeah. Yeah. Well it's a good idea to get that written down then. Nice.

[00:56:30] David Waumsley: Yeah. Yeah, so that's the idea. I dunno if this has done a very good job.

I'm sure it's probably painful for anyone listening to this, but, I'll put a link to what I'm working on and you'll see how this keeps, changing over time. But yes, there are about

[00:56:46] Nathan Wrigley: 50 odd pages and obviously each of those table of contents pages that we've just spent the time looking at. I think there were 14 of them or something like that.

yeah, 13 of them. They link to subsequent pages, which make 50 in total. I, would definitely go and have a look at it. And we said that the links would be buried in the YouTube, comments and ju just, I'll just pop it on the screen. Sorry, David, it looks like you wanted to say something and then we've

[00:57:14] David Waumsley: Yeah, no, I'll just put the link to our.

Where we'll put this on our website. And in our website I'll put a link to, this. So, yeah.

[00:57:24] Nathan Wrigley: Well, I'll just quickly do this because I might as well, so the website itself, which we've mentioned, it's on the screen the entire time, but I'll do it anyway. So it's no script show. the YouTube channel is that, but that's feels superfluous.

'cause presumably if you're watching this, you've already discovered that. So anyway, and, this episode will be found here. No script, no show slash number 2 9 29. And yeah, that's a body of work you've got there. David, you've been, really busy. let's hope you get some feedback about it.

Let's hope people drop into

[00:58:01] David Waumsley: the Yeah, it be nice. We don't generally get anything here, but it was just nice to just get your initial feedback on it anyway. Yeah. Just to see if it's, a big thing, but the idea is to keep it, A level where you could cover the 10 slides if you like, the main element with a, client and give 'em an overview without

[00:58:20] Nathan Wrigley: Yeah.

[00:58:20] David Waumsley: But as you want to dig into each thing, then you can get more specific with some notes. And for me, it's a place to store everything that I've been learning all this time. 'cause it always comes up, every time you go to a new website and that you're thinking, oh, what was that site where they had all the collections of all the icons that you can get for free out there?

[00:58:39] Nathan Wrigley: Yeah.

[00:58:40] David Waumsley: Where have I kept that to? The idea is to have this one central hub.

[00:58:44] Nathan Wrigley: Yeah. It's some, for

[00:58:45] David Waumsley: me

[00:58:46] Nathan Wrigley: it's on Google Drive folder or some deleted folder, which is on a backup dis somewhere, or, yeah. Yeah. I get it. that's, amazing. I really am totally blown away by the amount of work you've done there.

So, one last time, no script show slash 2 9 29. If you want to find out more. is that it? Are we done for that one then do you see?

[00:59:07] David Waumsley: I think we are done. Yeah. And I dunno when we'll be next on, or what we'll be doing because well a month today we should be together.

[00:59:15] Nathan Wrigley: Yeah, you might be able to, might be able to do it with one camera.

That'd be fun. Assuming I can actually get, to India. We'll wait and see on that. But yeah, in which case I will bid you and I will, we'll be back soon at some point. Take care.

[00:59:31] David Waumsley: Yeah. Thank you. Bye

[00:59:34] Nathan Wrigley: bye-Bye.

Trap or Trade-off? What small businesses should know before getting a website

2026-02-04T00:00:00Z

Show Notes:

Here's the presentation slides. Below is the text version.

What Small Businesses Should Know Before Getting a Website

The website builders market was worth 3.06 billion dollars in 2025.
It is projected to reach 6.68 billion dollars by 2030.

Hand-coded websites have declined from 76% in 2011 to 33% in 2022.
They are expected to be under 9% by 2030.

58% of web designers have been in business fewer than 6 years, with 40% in their first 3 years.
This is a much higher “newness” rate than most professions.

Web design is the number one freelance skill (offered by 36%).
72% of workers in 2025 have considered a freelance side hustle.

Web Design Is Changing

WordPress dominates the CMS market with a 60% share.
Approximately 60% of WordPress sites use a commercial page builder.
Elementor is 30% of that.

Wix dominates the dedicated website builder market with a 45% share.

Wix reports that DIY builders account for 73% of active sites, while 27% are managed by “professionals”.
80% of active Wix sites are owned by small businesses with fewer than 10 employees.

Hand-coding Wins on Quality

The web was invented (initially for scientists) to make information-sharing around the world easier.
It used simple document tags so everyone could use it.

Seeing commercial opportunities, the “brochure” website appeared.
This advanced the web, but brought significant problems.

Understanding the Web

Mimicking print layouts involved complex code hacks, which made learning CSS difficult and led to the commercial WYSIWYG builder.

WYSIWYGs always fail eventually because, unlike print, the designer has no control over what the end user sees.
It depends on the user’s device and preferences.

It created a back-to-front understanding.
The web is not a visual vehicle into which content is added, but a flexible vehicle for content that can be visually enhanced.

HTML First

HTML is a website’s structural foundation.
It defines content and allows it to be shared and understood by people with disabilities as well as machines for search engines.

It is simple, yet over 90% of sites do not use it correctly.

Meet Paul Brown

Paul (a plumber) is one of the 25% of small businesses who did not have a website.

He contacted professional developers, but they were too expensive.
He tried DIY builders, but got confused.

A friend reminded him that a web page is only a document of content.
Start there.

Paul looked at his competition.
Most sites were an overwhelm of animations, stock images, and sales brags.

Paul’s Process – Part One

Paul decided his authenticity was his main selling point.

He looked up the basics of writing web copy, got a few photos of him working, and created a Google document.

He next found free resources on how to turn this into HTML, which he did with the VSCodium editor.

With a few lines of added CSS this was presentable, not well branded.

Paul’s Process – Part Two

Paul created a logo using a free Canva account.

For now, a one-page site is enough to establish his presence.
He knows he can get free hosting and uploads his HTML to GitHub where he can edit his site and collaborate should he need a professional.

Knowing his HTML is semantic, he gets an LLM to add CSS.
Knowing AI is not intelligent, he asks a CSS coder to check it.

He goes live!

Paul’s Site

Website URL
GitHub repository
Google Doc

Paul Learned

The web is a form of communication, not a funfair of carousels or a game of hide and seek.

HTML is the easy part.
Finding empathy and making the message clear and understandable is the hard part.

CSS styling can be easy if the HTML is right and the design is simple, but is best overseen by an expert.

He did not need a minimum of 5,000 dollars to get started.

Branding, SEO, and UX Design

Branding (The Soul):
The emotional, visual, and verbal identity that makes you memorable and fosters trust.

SEO (The Bridge):
The process of optimizing your site so search engines and users can find you easily.

UX Design (The Experience):
The structure and functionality that makes interacting with your brand easy, enjoyable, and efficient.

Brand Guidelines

Brand Story & Core Values
Logo Guidelines
Colour Palette
Typography
Imagery and Visuals
Voice and Tone
Formatting and Layout
Application Examples

Trap or Trade-off?

Trap

Vendor lock-in
The “90% done” problem
Performance and SEO limitations
Hidden long-term costs

Trade-off

Speed and time-to-market
MVP (Minimum Viable Product)
Budget and resource constraints
Standardized use cases (templates)

Links

Research:

Transcript

[00:00:06] Nathan Wrigley: Hello there and welcome to the No Script Show. In our last episode, we talked about unification, how we are losing our agency to big tech, and how we might reclaim it through the indie web. Now, the indie web is popular with influential developers as well as hobbyists using platforms such as neo cities, yet its growth is considerably outpaced by commercial, no-code platforms that dominate the spaces where small.

And local businesses seek website advice. In this episode, we're looking at how these types of businesses might get a website that avoids the lock-in and quality trade-offs that come with no-code platforms. You can find our show notes and supporting resources over on the website. The URL for that is no script show slash 28.

So that's the numbers two eight. And if you're watching this on YouTube, the link for that will be the first comment just below the subscribe and the like buttons. And as always, I am joined by David Wamsley. Hello David.

[00:01:08] David Waumsley: Hello Nathan. yeah, so do you know what I was looking at? search results? I was, pretending I was, A new person, a new small business, trying to look for a website, and it was really quite stunning. I tried different search engines as well.

[00:01:24] Nathan Wrigley: Okay.

[00:01:24] David Waumsley: It was almost entirely all the things that I saw were almost entirely focused on getting us to adopt a commercial platform. There were either sort of ads to get on something for free affiliate content that was.

Given you the different options or indirectly, and I was checking these out. There were, web designers who effectively are upselling. The, builder that they used to clients had to go and check. 'cause they weren't saying, oh, I see, okay. Around this thing. So I checked on their portfolio and thought, yeah, and I really, HTML, the thing that powers all websites and belongs to all of us is now, I think it's concerning that it's now just increasingly falling behind a paywall.

So businesses, yeah, I think businesses have two basic choices. They still have these, which is either. I'm calling the corporate web where you are offered freedom from code for the price of locking, or you've got the indie web, which is offering freedom from locking for the price of having to wrangle some code and.

I think, well, you and I both know each other from builder communities, so

[00:02:35] Nathan Wrigley: Yeah, we do. Yep. Yep.

[00:02:36] David Waumsley: A decade ago I saw code or no code solutions, that kind of fair trade off between cost and quality. but I think as more builders seem to get, and ified and browsers allow us to do more with less, I'm changing my opinion on that, which is where this is really leading to.

And, I think if we to do it based on merit, you would expect to reverse in the trend. We'd expect more people to be talking about HTML these days, but we're seeing a wider division, so I think we need to look at both parts of web design. For this one, we need to look at the. Web, which is the technology that's needed.

So, and I think ideally we'd follow the W3C's role of lease power and start with what we can first achieve with a website using just simple HTML and. If anything, really, if there's a takeaway from this show, it would be for me that HTML, which is getting forgotten, is the web. And if we own our own HTML, then we effectively own and control our own digital space.

So we probably don't wanna give that away. prematurely. and design is the other bit that we should look at in web design, which is I think some of the appeal with a lot of the no code solutions is the templates. And even though that's the opposite of design, it's beats a blank page, which is what a lot of people who want a website is stuck with.

Really, how do I get started? So I think we'll need to look at this at, just ways to get an effective online brand. But first, shall we start? I've got a whole bunch of statistics me to read. Help Nathan. yeah, look, yeah, look at this, unregulated industry. We call web design, which isn't at all shark infested.

[00:04:32] Nathan Wrigley: Okay. So just before I launch into these, web design is changing statistics, just say, it'd be curious to poll the owners of websites. And so by the owners of websites, I don't mean agency people, the people who literally have paid to have the website for their business, for their whatever it is that they're doing.

It'd be interesting to poll those people and ask them what is their website made of. And I'm sure that the answer will, that will come out of their mouth, will be the paid for platform. That they're using. So, the Squarespace and the Wix and the page builder or whatever, whether it's WordPress or something like that, as opposed to, it's HTML and CSS that you, I just think it's been so wrapped up, commoditized, and, We're trying to get us back to something a little bit more, a little bit more straightforward. Okay. So with that in mind, here we go. I shall just read these four bullet points, some stats about the, changing nature of web design. First one is the website builders market was worth 3.8 billion.

Gosh, dollars in the year 2025 and over the next five years, that's projected to more than double. So by 2030 go up to $6.68 billion blind. That's interesting. Hand coded websites have declined from 76% in 2011. To 33% in 2022. And is, it is expected to be under 9% by 2030. So Wow. So I'm going from three quarters of the market down to less than a 10th over the next period.

That's interesting. Third,

[00:06:15] David Waumsley: just adds start something on that one that, that bit of research, it's all creditable. And I'll put the links actually in the show notes. but that one is actually before chat, GB. T came out and then we got all the vibe code and things. So yeah. Anyway, sorry. And

[00:06:31] Nathan Wrigley: that is trending south even more than, the 9%, which sounded pessimistic, but probably is rather optimistic.

Okay, so STAT three 58% of web designers have been bus, have been in business fewer than six years. 40% in their first three years, a much higher newness rate than most professions. That's also curious. And then the last one for now, web design is the number one freelance skill. Oh, I did not know that.

Offered by 36%. 72% of workers in 2025 have considered a freelance side hustle. Wow.

[00:07:10] David Waumsley: Yeah, so it, it's painting this newness, it's newness is an actual proper term, for how you measure industries and yeah, it's very high. I've actually got some more stats for you to read through this. The last ones here on the builders,

[00:07:24] Nathan Wrigley: oh yeah, sorry, there was a further slide.

I forgot about that. So three more. Here we go. so about WordPress. WordPress dominates the CMS market with a 60% market share. Approximately 60% of WordPress sites use a commercial page builder, Elementor is 30% of that. Wix dominates the dedicated website builder market with a 45% share. That's curious.

And last stat we've got is again about Wix. Wix reports that DIY builders account for 73% of active sites, while 27% are managed by professionals. 80% of active Wix sites are owned by small businesses with fewer than 10 employees. All of these stats paint a picture. Which is not ideal for the lovers of HDML

[00:08:15] David Waumsley: and css and certainly anecdotally, backing up what weeks are saying.

I know. from my time in the builder community, a lot of people were reporting, that they were getting more customers, the people just selling the sort of builder software. Were getting more customers that were coming from actual businesses themselves, DIY rather than the developer who was using it as a tool to, yeah.

But, sorry. I've got a whole long bit, which is my interpretation of these statistics, and they support what I think. I saw as somebody was originally a no co, sorry, a hand coder who, became an early adopter of page builders, how we met and, yeah, I was active in those communities. So initially when I, this, we're going back to sort of 2014, most of the people when I joined the builder that I did, were experienced coders who were adopting a page builder because of its main selling point that allowed for cheaper and quicker websites.

Builds for certain types of clients, and a way also for those clients to be able to alter their own content. And, but this was also at a time back then when CSS was really cumbersome. It was starting to change. We responsive sites were still new. We didn't quite have that. And when you could still find builders that weren't too bloated, what I noticed was fairly quickly that the page builder.

Peers that I had at that time changed to professionals, people who were making sites for people who were non coders. And they generally demanded more and more flashy stuff from their builder subscriptions. 'cause you're paying for that yearly. And I. I, I always felt uncomfortable because with less experience that these people had who were coming in, they were unaware of the sort of technical debt issues that you get and the UX issues that come from the types of requests that they were asking for.

But I also noticed that builders would have to keep adding them or appease them as otherwise their competition. Do that. So it's regardless really, because most of the people I know who started on that no coder route, have swapped their builders multiple times anyway. But I think most concerning for me, being in that sort of arena was that, What's really what entered the no code builder market were these sort of lifestyle gurus, if you like, business gurus who were promoting value pricing to get website clients to pay upfront the highest amount that they could get out of them really on the promise of results, and they encourag. New developers to reframe the no-code builder tools as professional tools that clients don't really need to know about.

So it always concerned me because effectively they were repackaging the skills that went into their software as their own. And then armed with, typically these gurus would give you sales scripts. They were able to charge more than what you'd have to pay for a coder and, Yeah, for me, we talked about this before and now.

Other podcasts that we were doing. and it reminded me of the South African Independent State website back in 2011. They were charged the equivalent of, $15 million for design and development of that site. And what they got was a $35 WordPress template.

[00:11:45] Nathan Wrigley: I remember I read that yesterday as I was preparing for this episode, and that is.

Insane. Such a bizarre statistic.

[00:11:57] David Waumsley: I know, and it, I mean it's seen as corruption in it, but to a value pricer, that's a good deal, isn't it? That the client got what they asked for. They delivered what they want. Yeah, exactly. That was the result they wanted. But for the rest of us, we think, that, it must have probably spent the more, they must have spent more time.

Writing and signing the contract than they did actually developing the site, but Right,

[00:12:20] Nathan Wrigley: right.

[00:12:26] David Waumsley: Yeah, but I think also, one thing to be aware of and you're not in those circles, is that enterprise and public bodies have long learned not to pay these upfront budgets on web projects because things need to change. You don't know how they're going to work out, and we have. Agile, which has been around, for what, nearly 25 years now, is the process that people adopt dealt where they start with the minimal viable product, the thing that they can first put out there, and then they improve it with ongoing iteration.

So effectively they're paying for it as results come in, which of course if you're. A value pricer, you want the money upfront and you promise the results. So, and I suspect really that the reason why we're seeing a lot more companies, DIY in it is because of the lack of trust that there is in the industry.

We can't trust, web designers necessarily to. To guide you in the right direction on this thing. So I think a lot of people are just moving to DIY, but this again, causes a problem. It solves the issue of not getting ripped off and they have more control, but with a lack of understanding of how websites actually work.

We just see, I think it's almost provable now that websites are generally getting a lot worse and owners are completely unaware of why they're worse, so, which is leading to us. Yeah. Yeah.

[00:13:49] Nathan Wrigley: it's, so, it's a self-fulfilling prophecy in a sense, because if, you are the. if, let's say you've got a, small business, there's a few of you running that business.

There's 10 of you and you're all heads down doing the busy work that you have to do to make that business work, and the website is just an appendage. It's just something you know, that you've got to have and then somebody displays to you, okay, here's the finished product. You're looking at it like a magazine, you're looking at it like, oh yeah, that looks great.

But with, how would you understand the process that the magazine had in order to be put on the shelf, all of the graphic designers that needed to be done, the, paper that needed to be ordered, the ink that needed to be ordered, and so on and so on All the things that make that.

the magazine possible. Well, it's the same thing in this arena. All of the things that will make it successful are the things which are hidden underneath that have got not, well, not nothing, but certainly there's a lot, there's many more layers beneath it than just what it looks like on the front end.

Accessibility, whether it's optimized for, search in the correct way, and so on and so forth. But, we've taught our clients just, there it is. Does it look good? Are you happy with the way it looks? Yep. Great. Sign the dotted line. We're done.

[00:15:03] David Waumsley: Yeah, I know. and in a way that's why, it's really mostly in Europe, but this is why we're having to see things like legislation for GDPR because what people aren't thinking about whether data's going, they're not thinking about accessibility.

So we've got new laws for that. It's happened to be enforced because websites are just getting generally worse on the whole.

[00:15:22] Nathan Wrigley: Right.

[00:15:23] David Waumsley: but let's just move, I'll just quickly, this slide didn't need to be there, but, there's nothing ready to read here, just a little. For those who are on the audio, it won't be meaningful.

But there's just a little slide that is showing the results of someone who tested a no-code solution or low-code solution. I'm lumping them together, element against using, hand-coded using Astra. So it's basically just HTML and CSS and it just shows there's a massive difference in the sort of performance.

So the sort of lighthouse scores that you'll get. Page speed from Google and everything, they're very low and the page size is what's 300? Sorry? 3,200 on this one where it's 180 for a Handbuilt site. So it's so much heavier. Than it needs to be. But I think, always hand coding is going to be on quality.

It's always been about the expense thing. there's, there are other concerns as well about accessibility, on the limited flexibility you get with no code stuff. So, and I think particularly those in the EU have to be concerned about the builders that they use now because of these things. Because even though there's.

for marketing purposes, most software will talk about their co compliancy, but they generally are not, they will sell where they are compliant, but they won't tell you where they're not really Right. Right. And most of it's a little bit like, lipstick on a pig. It's bolt on solutions to improve the performance or improve the accessibility.

Anyway, I'll move on. But I think really Okay. What, I wanted to say was just that I think most of us in the industry, and that definitely includes me, I've been caught up in this, I've tended to undervalue the unique reach of the web.

[00:17:32] David Waumsley: Okay. Yeah. I think most of us in the industry have undervalued the. Unique reach of the web, how easy it, when you've got text on the web, how it can be translated.

And we've reverted a little bit to knowing what we already understand, print, we understand visuals as a way of communicating on that. So we tried to recreate that online. But often in doing that, we've often excluded kind of billions of people with permanent, temporary, or situational disabilities over the time, so we're not watching out for that.

I'm as guilty as anybody for this kind of stuff.

Anyway, I'll, we'll move on. Let, I think we need to cover a little bit about understanding the web, so I'll leave it. You Nathan to read this?

[00:18:16] Nathan Wrigley: Okay. I'll just read what's there and then we'll hand it back to you. So, here we go. The web was invented initially for scientists, I guess over at CERN is what I'm guessing.

Yeah. You are thinking there to make information sharing around the world easier. It used simple document tags so everybody could use it. See in commercial opportunities, the brochure website appeared this advanced the web, but brought significant problems such as. Number one, mimicking print layouts involve complex code hacks, which made learning CSS difficult and led to the commercial.

What is what you get builders, which we were talking about earlier, number two, wizzywig. So what is what you get. Always fail eventually because unlike print, the designer has no control over what the end user sees. It depends on the user's, device and preferences. That's such a profound point.

And number three. This all created a back to front. Understanding the web is not a visual vehicle into which content is added, but a flexible vehicle for content that can be visually enhanced, nicely put. I like that.

[00:19:22] David Waumsley: Great. no, I think that's really, and definitely that's the way I see it because you started with the brochure site and the only thing that people are concerned about is how pretty it looks.

And then you end up, and we've just got so used to that and it's taken me, coming back to HML the second time round and, listening to what people said to realize that, well, everybody already knew that the visual. Website builder never worked in theory right from the beginning, but it has worked for limited time in practice.

So the first wave of these, things like expression, web and Dreamweaver, they died as soon as devices changed. As soon as we got the mobile web taken off and we got devices there, suddenly the way that you designed around visually around those pages didn't work for that. But

[00:20:09] Nathan Wrigley: Right, right.

[00:20:10] David Waumsley: There's such a delay because, they still made money because the majority of people still.

Thought that was the tool they would get to make the visual web and would be unaware of the people who were damaged as a result of the way they're making their websites. So, it took over a decade for these to close their shops. There were still money being made on it, and I think the present ones are having to deal with a similar thing because we now have over 2000 different unique view port sizes to deal with.

Yeah. All new

[00:20:37] Nathan Wrigley: nty, that's a naughty. Statistic.

[00:20:41] David Waumsley: I know. It's it's incredible. We've got so many different devices and so many new user preferences. We've got black and white screens and all this. So hence, I think people in the industry are realizing, you'll see a lot of the builders are now pivoting towards, code 'cause a lot more other long term no coders have realized that they need to learn some codes, so there's more of that or AI or both of these.

But I suspect it's a little bit like the gold rush where more people sold. Solve the shovels at the end of the gold run when there's nothing to get that we're, we're peak. This is the way markets go. We're peaking. So all these planned where we think that builders are going to be in the future, how they're going to take over is based on the projection and the peak we're on at the moment.

I think things will have to turn around, but rather than blame the builders, I think we, we have to look at it. Realistically and say that the real problem is the HTML and CSS, that it, even though it was given to us for free, for us all to be able to use it, didn't meet our expectations, at least as sighted people who are what we wanted from the web and as an open language, that only progressed.

Based on the cooperation of everybody in the industry and big players in that other browsers and those browsers at war with each other, it was slow to adapt. And I think why we've seen a sudden change and why really this show has been created because of the fact this change is the fact that we now have browser interoperability agreement between the major browsers that they're going to work together on this.

And as a result, since about. 2018 HTML and CSS has advanced more in a few years than it has in all the previous dec decades. Yeah. So, yeah, so I think, the real point of that one is if we want resilient sites now we really need to start to turn around that original mistake we made of seeing things as visual rather than something that's content that we can make visual.

we'll need to start putting HTML content first in it. I've got

[00:22:46] Nathan Wrigley: you have indeed. So this one labeled HTML first, which is obviously what you were building up to. Nice segue. three bullet points here. HTML is a website, structural foundations. I hope that you knew that, dear listener or watch. if you didn't, there's a lot of Googling to do, around the letters HTML go and have a fun time with that.

it defines content and allows it to be shared and understood by people with disabilities as well as machines for search engines, it's simple, yet over 90%. Of websites do not use it correctly. And I would go back to your point earlier, David, when you said, maybe a fourth bullet point here is it's totally free.

Yeah. It's just completely and utterly free available to everybody. You just need to learn it. yes. Bits of it. So over to you.

[00:23:36] David Waumsley: I know. Well, the name doesn't help, does it? Hyper architectural markup language doesn't.

[00:23:40] Nathan Wrigley: No, not really. I never thought about that. That's true. It's a rubbish name isn't It?

Ought to be given some sort of, slightly more, I don't know, user pronounceable, less intimidating name. Simon.

[00:23:55] David Waumsley: like that. Well, actually, yeah, his. His products actually since the thing that, Tim Burnes Lee's been working on. I've gotten friendlier names, but, but I, like what, Bruce Lawson calls it.

He is one of the, early people, web standards and he calls it How To Make Loveliness.

[00:24:14] Nathan Wrigley: Oh, that's nice. Yeah, I love it. I love that. I love it. Okay. Right. Anyway, we wound you up. No go.

[00:24:24] David Waumsley: Yeah, there's a few, there's lots of statistics out there, but Web Aim does a yearly look at the, I think, top million websites.

So in. 2025. This is relating to the last point about over 90% of sites are not using HTML correctly. They've got it as 92.8% of websites still use non semantic div based layout. So basically it's HT ML, which isn't making sense of the content, but it's there for styling and they also. Come up with a figure that 73% of accessibility issues could have been resolved with proper HTML markup language.

Now, this is so simple stuff, but the problem is we've been focused so much on the visuals that CMSs and builders are really where the problems found, because that's where everybody's concentrating on the visuals and not what the content is and how it's marked up on there. Yeah.

[00:25:19] Nathan Wrigley: Can, you remember 15 years ago or something, you would go to websites and the whole point.

Of the markup was about getting the pixels to go in the places like, you'd wrap everything. You'd put a div round a div, and then a span here and a bit of, CSS there, and there was no consideration whatsoever to the content. It was purely about making it look nice that was like the whole point of HTML was how it looked.

And, and we forget that literally isn't the point.

[00:25:51] David Waumsley: Yeah. Yeah. And, really it's so simple. If we get h tml right, then we are largely getting accessibility for free. We get better. SEO, we get performance all around. That's better. And actually it makes it easier to make sites attractive as well if you use the right markup.

It actually, so in future episodes, we will, we're, gonna go step by step with the process of creating some different types of small business sites. So we're gonna. Keep going through this sort of process, but here, just to give an example here, obviously this is mostly audio, so we can't cover too much.

We're just gonna start with a simple example of a minimal viable product website. So again, I've got a slider for you.

[00:26:33] Nathan Wrigley: Oh, here he is. Meet John Brown. No, it doesn't even say that. It says Meet Paul Brown, so I can't read. so there he is. He is a plumber in Lincolnshire by the looks of it. He's a, chap that needs a website.

So here's our sort of MVP, the, let's set the stage for what's gonna happen here. So Paul Brown Paul, who is a plumber. Is one of the 25% of small businesses who do not have a website already. So he's, primed. He is ready to go. He wants to be on the web. He's got a business. He contacted a professional, some professional developers, but they were too expensive, so he decided I'm gonna try a DIY builder.

But that was all very confusing. bear in mind, he's busy, he is got other things to do and his skillset is not necessarily being online. He wants to do plumbing for people. So a friend reminded him that a webpage is only a document of content. Start there. So he looked at the competition.

Most sites were overwhelming in their animation, stock images, and sales brag. I dunno if you wanna say anything before we move on.

[00:27:39] David Waumsley: No, I'll move on to talk about what you did. Yeah,

[00:27:42] Nathan Wrigley: yeah. So I'll, shall I just read these out quickly? Yeah,

[00:27:44] David Waumsley: yeah, please.

[00:27:45] Nathan Wrigley: so he decided that his authenticity was his main selling point.

So we're stepping away from the markup and the HTML. He's just trying to figure out what it is that he wants to do. By the way, that is the point of it, isn't it? It is that when you, want a plumber, you don't want a plumber's website. You actually want some person who's gonna show up who is actually credible and who knows how to fix leaks and put pipes into, plumb toilets in and basins and bars.

That's what you want. so he looked up the basics of web. Writing web copy. Got a few photos of him working and created a Google doc. He next found free resources on how to turn this into HTML, which he did with the vs coded editor. Should that say code? But let's go with code. Is it vs. Coded?

[00:28:35] David Waumsley: well I tell you, I swapped that one because I've studied you vs.

Coia, which is vs code without Microsoft being involved, so.

[00:28:42] Nathan Wrigley: Oh, interesting. Okay, well let's go with that then. vs. Coia editor. And with a few lines of added CSS, this was presentable, not well branded.

[00:28:52] David Waumsley: another slide.

[00:28:54] Nathan Wrigley: Okay, here we go. Paul created a logo using free, a free Canva account. He's doing all right, isn't he?

Considering how Yeah. How busy he is. for now, a one-page site is enough to establish his presence. He knows he can get a, some free hosting and upload his HTML to GitHub where he can edit his site and collaborate should he need a professional knowing his HTML is semantic, he gets an LLM to add CSS.

Knowing AI is not intelligent. I'm just gonna repeat that. Knowing AI is not intelligent, he asks the CSS coder to check it and he goes live. He's doing very well, all the while on the picture. Still busy underneath the basin. Right over to you. I guess we've got three things here. Website, URL, GitHub, repository, and Google Docs.

I'm guessing they're the three things that he really needed to get himself up.

[00:29:42] David Waumsley: Yeah, and I think we'll just need to pause and we'll bring up my screen, so we'll look at his work. So we just pause a second.

[00:29:49] Nathan Wrigley: I'll pause it back in a sec.

[00:29:51] David Waumsley: Yeah, so here is Paul's site. It's not gonna win any awards, but, as a sort of a job he could do himself.

It's there, it covers all of the main things he's. Main, call to action is over here. So what he did initially was that he got some web copy tips, which was right for scanners, not readers, focused on the benefits. go for clear rather than clever, no fancy words. Try and build some trust on it.

One action per page and consider some of the keywords, but don't stuff it. So that's basically the advice he got. And then all he did was get a few of his photos that he could add here. And followed that started with the most important stuff on the top and. Pretty simple and then he could turn that into H TM L.

Now there are various courses and I've put them, actually, lemme just go over to here where he's got them on GitHub, I've put them over here. Couple of resources for anybody wants to do that. It's a great four hour video, which really goes into everything about HML. Probably you could do two hours of this.

And one hour in fact of this. And you could probably know all that Paul needed to know. and there's HTML for the people, but anyone can do that. And this is on, that's such a great name for a resource, isn't it? HTML for the people. I love that. I know. It. It, and it's. It really is about what this is about as well.

trying to get people to reclaim it and use it as a, tool that they can use to, enhance their own lives as Paul is doing over here. what else do I want to mention? So I mentioned that I should mention the, particularly as the last episode we were talking about vibe coding and the use of ai.

So this was AI did it, he did the, the. Code, and let me just show you that first. Actually, if I go in here, okay, you can actually, because he's uploaded it to GitHub, and GitLab is an alternative to this, which I'll probably be using more often. And if you go in here, so Paul could work this way, create his H TM L, upload it to here, and then collaborate with anybody when he needs a professional.

So if you need somebody to do the coding rather than. Relying on AI to give him some CSS help. He could do that. And it's quite simple 'cause once you've done it here, you've also got an online editor. So effectively it's like having your own little, CMS really. So if I just go into here. I can just quickly show you that the code is simple.

Now there is literally about as simple as you can get with this. There are no CSS classes in this HTML. Let's just see if I can, there, it's coming up there. oh. Everything's collapsed here, so that's okay. Only really? Yeah. So what is missing? When we were talking about, what we are saying is that very few people are using the proper.

Tags to mark things up. And you've got, you put, obviously you need a body else, nothing shows up, but you use these headers for the header area. They're the main area and then different sections, he's got over that in his, and then the main and then the footer. simply having these basic things is enough.

And when you use something like VS Code or vs. Codem, which are the same thing, it's pretty easy to write. So when you want to write anything, you'll write in a paragraph. You put P here. You just tap here, it gives you the tabs you write in there. So anything like this was pretty easy for anyone, I think, to understand.

there are a few more things about how to add in images, but again, you get guided with something like this. You've typed image, it starts to give you the code. Yeah. When it's so uncluttered like that. When it's just so bare bones, it's so, yeah. it's, to call it human readable is a bit of a stretch.

[00:33:36] Nathan Wrigley: I'm sure that for some people, e even that is too much. But I would imagine somebody with a, with an hour of application, most people, many people would be able to just look at that and say, okay, I get how this has worked. I get how the nesting affects things. I get that if you put things inside of other things, that has an impact on where they will be viewed and so on.

It. Yeah, really nice and simple. And I think actually, when you think how difficult it can be to learn a page builder and a UI to get to HTML to change, if Paul had just got somebody to write his HT ML phone and he kept it simple like this with, that wouldn't work if you wanted.

[00:34:16] David Waumsley: To rely on a framework like Tailwind or something, which crams the HTML full of all sorts of instructions, how to, lay out the CSS. But if you keep it here, there's no classes in this, at all. So you can read it. So I think anybody could go into the section that they needed and go, oh, that's a paragraph.

I want to change the text here, or I want to add. So again, so if he wanted on his design here to add in this new little, details and summary thing, 'cause he's got something else he wants to add to it. Well, it wouldn't be too much hard work for Paul to come in and go down to his details and just take this and copy it.

Create a new one. Yeah. And then change it. So I think it's as simple as a page build out when you keep it like that. So that's really what I wanted to show on this. is there anything else? Oh, I'll just show you just for interest, I think on this. So. I'm not a big fan of AI being used anyway, but it's a tool that can be quite helpful if there's expertise behind it.

And obviously Paul doesn't have that with it. So I think if you got something AI generated this, you would definitely need to get it checked out. But I did do, and I'll just go onto inspect so you can see them quickly. There are in here, but just go to the head. There are a few other styles. So something you might do if you did a HT ML course anyway.

Oops. Let's just click in this so I can get to this. If I just go and. Change this to style here. you might get told this is just a few lines of CSS just to center this and give it a background. That's what you get with Hasty Mel on its own with really very little styling. Yeah. Yep. What I did, so anybody could probably create something like that.

I did get, various ais to do different versions of it. So another one, which is okay, wouldn't have said keep it simple. Is this one. Which just basically made it look a little bit like a website over here. Pretty much the same thing. Okay. That's, and then I said, yeah. I said, why not do something a bit crazier?

So I said, okay, give us a brutalist look of modern brutalist look. And, if I can get this to change. I was gonna say, can you, all you can't do is get your mouse in there. Here's the car. Yeah, there you go. It. If I go to three, we will see We've got, oh, now actually, sorry. You'll see this is buggered up and, sorry, I'll put it on dark mode here, which I wouldn't normally be in.

It looks fine like this and quite interesting what it came up with. But here's, I put this in and I didn't change it on purpose, just to show you that if somebody came in dark mode, this is what it gave us. You wouldn't be able to see. Yes, I saw that there was, there was, you can't the text. The text, wasn't it?

[00:36:55] Nathan Wrigley: Yeah. There you go. Yeah, so ai, is not something you would want to trust. And I did one final one, if I can just get to it here, which is not very interesting, but I'll show it anyway. there we are. Just one. I said give us a sort of. Old fashioned newspaper. Newspaper, yeah. Newspaper feel, that's right.

Yeah. Yeah. So he did that. So, but, the ones that was there, but they will AI on this one generated and needed. So if Paul went to and had to pay somebody, they would probably only charge an hour of their time if that, to be able to correct something. Very simple because it works in this case, rather than vibe coding.

[00:37:34] David Waumsley: 'cause usually vibe coding, what you're doing is you're losing control of the HTML. You're saying Create me this whole thing and it will not give you some anti HTML by default. It will give you a sort of bunch of styling with divs and it'll probably use something like Tailwind. Whereas if you've got the HTML set up and it's meaningful, everything's put into.

Has a meaning to it. This is the head of stuff. This has got a proper meaning actually with the content. It gives it quite a good cue. good idea what to do. Yes. Anyway, I think that's probably all wanted to show. It was just to show that you could make a fairly simple one page, which I think. Given what given.

I actually looked at Paul's competition would be around and I wasn't, inflating it. When I say most of the sites that you'd be competing against are just a blur of animations and boxes all over screaming for your attention, salesy nonsense. I think I'd probably go with this simple site to pull over any of those.

[00:38:33] Nathan Wrigley: So he is got a fighting chance right out of the gate just by doing it, making it simple. Isn't that interesting? Yes. For a morning of really working out what he wants to say as his message and then turning that into simple HTML and that. Yeah. So yeah, that was it. I think I'm done with this. We'll go back to our slides, so we'll need to pause again.

Okay. I'll pause the video and we will return in a moment. Okay. So here are some learnings that Paul has had, after his experience with HTML. the web is a form of communication, not a fanfare of carousels. Or a game of hide and seek. I like that description. HTML is the easy part. Finding empathy and making the message clear and understandable is the hard part often overlooked.

That's interesting. CSS styling can be easy if the HTML is right and the design is simple, but is best overseen by an expert. And finally, here's the important bit for Paul, at least anyway, he did not need to spend a minimum of $5,000 to get started. Over to you, David.

[00:39:35] David Waumsley: I know this is probably what's prompted this.

There's so much in this sort of builder industries about people you know, particularly with the value pricing that you know, they're not sensible. Don't need a website unless they can spend all of this good money on the whole thing, but actually just get something help. is the Yeah. The way to go no cheaply.

[00:39:55] Nathan Wrigley: but also it's like such an impediment, maybe if, you're starting out in business, if Paul has just decided to become a plumber, he doesn't have 20,000 pounds burning a hole in his pocket, he needs to make the first 20,000 pounds so that he can employ somebody to take over his website if that's what he wants.

So, exactly.

[00:40:14] David Waumsley: And it's the minimal viable product. He's got a very simple one column thing, which says all that. It needs to say probably easier than most of his competitors do, and then he can expand on that. there was a little thing I didn't mention on it, which I think is the way that perhaps, with the indie web going is that.

It. He is, he had a little slot where he is doing sort of bathroom redesigns and that which he does with somebody else. And I think there needs to be a lot more of that where people start to promote each other in their own trades, in the same way that I'd expect, if we're going to compete with things like b bookings.com than hotel, people are gonna have to team up, I think, and promote each other in different places and say, well, they have a good one in a different location that you might wanna check out.

Yeah. That sort of thing. Yeah. So I think, that's the way. Future, the future of the web as far as I'm concerned. Anyway, sorry, let me just go back on this. So we've really focused on just the technical side, the web bit, the HTML and what you can do with that. Keeping it simple. But there are other aspects of course, and that's the design thing that we're talking about, which again.

Any client has to get involved with, regardless of, the technology that's used anyway. So we'll move on to the sort of design bit and,

[00:41:26] Nathan Wrigley: okay. Yeah. So now we're moving on. I guess we're approaching the end. So he's He's finessing things now, really, isn't he? So this is more about branding s.

CO and UX design. So branding, which you've put in brackets, is the soul, the emotional, visual, and verbal identity that makes you memorable and fosters trust. I suppose that once, once you've actually reached the page, that's the bit that is gonna convert you into. Into one of Paul's customers. However, in order to find that page, you need a bit of this, SEO, which is the bridge as you've described it.

Oh, I like these. The process of optimizing your site, so search engines and users can find you easily. And then finally, UX design, which you've called the experience well. This is the structure and functionality that makes interacting with your brand easy, enjoyable, and efficient.

[00:42:18] David Waumsley: Yeah, and I think Paul, he obviously is made up and he's done it instinctively.

So he's recognized that he is the brand and he's shown a photo of himself right at the front, because guess his competitors, even the ones with the, who are by their name, they are the brand. There's no photo of them. It's the first thing they're gonna want to know. So he knows, he's kept the, web copy, simple and honest.

He's used, SEO friendly semantic, h. TML all the way through that's gonna help him anyway to be found. Whether it's with, Google or whether it's with now ai, both of them want semantic HDML, which is missed by people and he's put keywords in his titles. His design was kept simple. So there's none of this kind of fairground antics left to, Move around things to find your content all over the place. And it is designed with the AI still gave him some consistency in color and spacing so it doesn't jar with people on that. So he's there. But perhaps a better way to start for him would be to create a sort of comprehensive brand guideline document and.

this is something I'm gonna stop doing 'cause I never did. I used to skip over this and I've got another slide. You do? Yeah. Maybe you'll read out. Yeah. Okay. Maybe you'll read out the key things in that.

[00:43:30] Nathan Wrigley: Yeah. So, brand guideline again. Yeah, I'm with you. I never did this kind of stuff. I just either adopted what they already had or ignored it altogether.

So, it's made up the brand guideline. It may be made up of some of these following things. Brand story and core values, logo guidelines, color palette, typography, imagery, and visuals. Voice and tone, formatting and layout and application examples as well. Okay.

[00:43:56] David Waumsley: Yeah. And I would also into that I would add, some SEO keyword research and competitor analysis.

So when you're starting this, so it might be a better way to start. And honestly, I used to skip this, because of the fact that most of the time you're getting people to sign off on a, if they had no branding at all, you're getting them to sign off on your website. So you'd create my website. I've come to realize this is problematic with, for myself working out that we must start with HDML and we must start using the modern techniques of making the design fit around the content.

So you, are effectively needing to design a little bit in the way that the browser works rather than in a set rigid image. So what a brand guideline does, I think it's good for a lot of things because. What it does is, well, it sets out why a website is being built, so most never formalize why they're in business at all enough to be able to convince other people to buy from them.

So, so they tend to fall back on cliches, he could have done where family run businesses, blah, blah. Just the same stuff here on every page because they don't know how to do it. And I think. That's the bit that I think businesses do. And that's where I think there's tensions often when they get designers in.

'cause it's very difficult for a designer to do that unless they've been able to go through that process. the other thing is, I think this is key for me, still doing the designs, is that it allows you to get the look and feel without setting these absolute. In what your website should look like, so you get the sense of how the brand looks because in making one of these documents and you can borrow them, which already nicely beautiful.

The. Branded anyway, so you can steal a lot of their stuff, but you get your typography, your colors all in a document anyway, so you get the look and feel of what a website might look like without pinning down that this is the absolute size of the header and this is this box for this bit of text here.

It gives you that ability to be able to start to style around the content. Rather than the other way round.

[00:46:01] Nathan Wrigley: Yeah,

[00:46:02] David Waumsley: which I think is the wrong way round. This is what we need to change now for our whole industry has been based around the idea of, look at our portfolio. We're gonna make your website that looks like this, sign off on this, and then we have to force the browser to work whatever device is put before it to honor this.

And that's what causes much of the problems that we have with the designs not being very good. So, so you do lean into

[00:46:27] Nathan Wrigley: a particular tool to get. Those kind of brand guidelines you are using, I dunno, Canva or something like

[00:46:32] David Waumsley: that?

[00:46:33] Nathan Wrigley: yeah.

[00:46:34] David Waumsley: I think, we'll do this, we'll go through these in next episodes and Canva's the one, I started when we did some earlier ones using Figma, which is more, I guess the professionals use.

But Canva, if you were trying to encourage people to do it for themselves a little bit or show how they could. Pre prepare, even if they get a professional in later with getting the stuff Canva's much more friendly because you can do lots of stuff, create your logos there. style your photos and, cut and paste them and that kind of stuff.

[00:47:03] Nathan Wrigley: Yeah. So, yeah.

[00:47:03] David Waumsley: But yeah, and I honestly, I think this is where we missed that. We know they, we've talked about this before about the longstanding issue that we have. If you are a designer with a client where you present something, so that. Meal comic where it shows this process, which is very memorable.

Where it shows, yeah, the client and the new designer laughing at the old one going, yeah, that's rubbish. And then he comes and crates and they say, yeah, it's brilliant, but just one thing, change it, and

[00:47:31] Nathan Wrigley: on

[00:47:31] David Waumsley: it goes and on it goes until you get the mess. Well, I think if you've got this sort of stuff there, everybody then works around a framework.

It works around a framework of. Gets to your core values, what you're trying to do, what's different about you, to your competitors and what reflects it. So at least you've got some, it reduces the likelihood of it going awry and everybody hated each other.

[00:47:54] Nathan Wrigley: Yeah.

[00:47:54] David Waumsley: So,

[00:47:55] Nathan Wrigley: yeah.

[00:47:55] David Waumsley: Yeah. So that's it. So that's really what we're going to do next time.

Shall I just, I think

[00:47:59] Nathan Wrigley: Final slide. Final slide. Yeah. Okay. So I guess we're summing it up here. So at the beginning. Trap or trade off, came up. So here's the, here's the two different things summed up the trap in all of this, I guess would be, vendor locking. What you're calling the 90% done problem performance and SEO limitations and hidden long-term costs.

Do you wanna do, you wanna dig into that a bit first and then I'll do the trade off bit?

[00:48:25] David Waumsley: Yeah, sorry. obviously the vendor lock-in is what I started with the 90% done problem. You still see people talking about that often with the AI now about the fact that it gets you 90% there and then it's such a nightmare.

Getting

[00:48:38] Nathan Wrigley: the

[00:48:38] David Waumsley: final 10% The system Yeah. That it takes more than final

[00:48:41] Nathan Wrigley: 10% is actually the 90%. Yeah,

[00:48:43] David Waumsley: exactly. Exactly that. And obviously we know about the performance in SEO limitations that come with anything else that's third party on there that's not custom and the hidden costs. And the next things are what are commonly the trade offs.

So do you wanna read those? Yeah. Okay. So,

[00:48:58] Nathan Wrigley: speed and time to market. MVP, minimal, minimum viable product budget and resource constraints and standardized use cases. So for example, templates. So over to you.

[00:49:09] David Waumsley: Yeah, so people say, it's fine because if I need speed, I need it to market quick.

If I need just something that is a minimal viable product, then you know, it's okay. A builder again, if the budgets are low, this is good. And, if you've got standardized use case, maybe. In most cases, if you were running a shop, they have a similar format, a template where you might just borrow one of those and that's fine.

But when it comes to talking a real message, I think it's a bit different. But what I would argue, or what I hope I've shown partly through this, is that most of the things that we now accept as trade offs are largely illusional when it comes to the simple sort of small business side, which is powered by HD and CSS.

It's no. It's no quicker to use a builder. I'd say slower now. the way that CSS and HTML got a lot easier, to, so the builder's not saving you, I don't think on anything. Time to market.

[00:50:04] Nathan Wrigley: Yeah.

[00:50:05] David Waumsley: A minimal viable product. We've just shown one. So you could probably do that without having to have a builder, and the budgets are not there.

Really, I think overall, given that many people who are selling you a website. Using a builder, a non code builder are going to charge you probably the same as a coder would to come in. I don't see there's a saving there and standardized use cases, unless you ask something like e-commerce, if you really want to get over your personality, you want to design that for yourself.

It's gotta be your words and what you think is most important showing and that needs to be semantic there. So, so what I've argued is that basically most of the trade offs that we accept for simple sites are really ought to go into the trap. Category, really. There's

[00:50:49] Nathan Wrigley: Okay.

[00:50:49] David Waumsley: Unless you need to. Yeah. there's no reason.

No, I think that was,

[00:50:53] Nathan Wrigley: yeah. Sorry. Go on.

[00:50:55] David Waumsley: no. That was it. I, it was just really, it's just about not getting more than you need following that rule of lease power. If you can start simply with HML, do that, and then you could always upgrade. It's difficult to downgrade.

[00:51:09] Nathan Wrigley: Yeah, that's right. I think you've made a fairly compelling case.

Obviously, we laid out the case of all the things that you really need to do, and in many cases they are very limited. What you actually need to do is, very small amounts of things. It doesn't need to have whizzbang, this, that, and the other thing, just something like, like the website that we saw there for the plumber, whose name I've already forgotten.

Was it Paul Forgotten? It was Paul

[00:51:33] David Waumsley: Brown.

[00:51:34] Nathan Wrigley: Yeah, they go Paul Brown. that's all that person probably needs. you can take them on a journey after that, after they've got their first few clients through the door. And, so yeah, I think you've made a fairly compelling case for that, David.

[00:51:48] David Waumsley: Okay. Thank you. And, I think, you know what? What we've done and we all fall for it. we see, builders, produce lots of really wizzy stuff that looks great and you think, ah, that's gonna show me off so much. But it really, most of the time, it just gets in the way of the user who needs the information and it causes them problems.

But there's also one other point I think when it comes to local businesses, if you are one of them. Why not just give your business to another local, somebody who works with HDML and CSS? 'cause I'm sure the tech billionaires in Silicon Valley are not going to starve without your data and money, so,

[00:52:23] Nathan Wrigley: good point.

Good point. also just leading into what you just said, when was the last time you hired somebody Because they had a flashy website, and the answer is literally never. It's because. The, what they say speaks to you. Yeah. It's not because there's an animation. The animation never sold anything to anybody.

Never. So, keep it simple. Stupid. Yeah. As they say.

[00:52:50] David Waumsley: Yeah, exactly. So next time I think, we'll just do some hands-on. It'll probably be over. We'll take one site, maybe we'll take pause and turn him into a bigger site with a new design and we'll go through this hole.

Branding exercise, which is quite new to me, and we'll see how that works out. we might have to do it as a visual only, because I dunno if it'll work on audio, but I think that's what we'll do next time.

[00:53:13] Nathan Wrigley: All I can say is I hope Paul's paying you $20,000 for this. David, he's getting a lot of, he's getting a lot of free work and you're giving him a lot of value.

So value pricing, no, that's the antithesis of what we're talking about. So I guess. I'll stop sharing the screen unless you've got one more slide. I see there is one more slide. No, but we probably,

[00:53:33] David Waumsley: yeah, that's, no, that's just a print out for our thumbnail.

[00:53:36] Nathan Wrigley: Okay. Ideal. In which case you'll see the last slide in just, well at the beginning of this video on the thumbnail.

Yeah. we will see you back here soon when no doubt Paul, the plumber will receive some kind of update to the website that they've already got. Okay, David, nice to see

[00:53:52] David Waumsley: you. Thanks very much. Yeah, you too. See

[00:53:53] Nathan Wrigley: you soon.

[00:53:54] David Waumsley: Bye. Bye everyone.

Enshittification: Why We Need Independent Websites

2026-01-07T00:00:00Z

Show Notes:

Here's the presentation slides. Below is the text version with notes not included on the slides.

Introduction

Borrowed from Cory Doctorow’s 2025 book “Enshittification: Why Everything Suddenly Got Worse and What to Do About It”.
2025 marked a shift from seeing the internet as empowering to seeing it as unhealthy.
Australia banned social media for under 16-year-olds.
“Slop” became Merriam-Webster’s Word of the Year, referring to low-quality AI-generated content.
Trust in digital services declined, AI faced backlash, and concerns about mental health and the internet grew.

The Current State of Web Development

Most website creators have been doing it for less than 6 years.
Many learned via commercial platforms rather than through the W3C.
“Vibe coding” got most of the attention.
This seems magical, but controlled by wealthy techno‑optimists.

Critical Voices

Ed Zitron’s podcast and newsletter: https://www.betteroffline.com
Carl Brown’s YouTube channel: https://www.youtube.com/@InternetOfBugs

Key Authors and Perspectives

Cory Doctorow – “Enshittification”

Canadian‑British author and journalist.
Has spent 25 years advocating for digital rights, copyright reform, and technology policy.
“Enshittification” was Macquarie Dictionary’s Word of the Year for 2024.
Book published in late 2025.
Not anti‑AI; argues AI should be “socialised” like the web.

Karen Hao – “Empire of AI: Dreams and Nightmares in Sam Altman’s OpenAI”

Book published in May 2025.
Former Chinese tech reporter for The Wall Street Journal and senior AI editor at MIT Technology Review.
Previously an application engineer at a Google X spin‑off.
Shows how fragile AI and its key players are and the quasi‑religious fervour around AI.
Argues ChatGPT was OpenAI’s last hope after past failures.
Focuses on human and environmental costs of surveillance capitalism.

Yanis Varoufakis – “Technofeudalism”

Greek economist, politician and UK professor.
Book published in 2023.
Argues that “Cloud Capital” owned by platforms like Google, Meta and Amazon turned people into “cloud serfs”.
People effectively volunteered to become renters.

Ed Zitron – Tech Commentator

British tech commentator.
Critic of “growth‑at‑all‑costs” culture in tech.
Highlights its high cost and limited real‑world problem solving.

Carl Brown – Software Engineer

Software engineer with about 35 years of experience.
Critical of AI in software development.

Tim Berners‑Lee – “This Is for Everyone”

Book published in September 2025.
Explains how the web was created on top of others’ work.
Describes the struggle to keep the web in public ownership.
Critical of unregulated algorithmic control.

Three Stages of Enshittification

Lure Users: Offer a valuable service, often at a loss, to attract a large user base.
Lure Business:Shift value away from users toward business customers (advertisers, publishers) to monetise.
Extract Everything: Once businesses are dependent, extract value from both users and businesses and raise fees and degrade service.

Financial Dynamics

Stage 3 benefits shareholders and investors short‑term, but Stock buybacks are used to inflate perceived value while effectively looting the company.

Ed Zitron’s “Enshittifinancial Crisis” discusses:

Changing depreciation values of GPU stocks.
Valuations based on intent rather than contracts.
Misleading narratives about AI‑driven layoffs.
Circular investments (e.g., Oracle, Nvidia, OpenAI).

Doctorow and Zitron don't see how OpenAI cab survive. No government could bail out the trillions needed even if profitability were possible.

Three Examples

Facebook

Attracted users with privacy and friend‑centric feeds.
Shifted focus to publishers.
Now prioritises boosted posts over organic content.
Procter & Gamble cut a $200 million/year Facebook ad budget and saw no loss in sales.
Early on, Facebook warned MySpace users about Rupert Murdoch’s ownership while later becoming a similar surveillance platform.

Amazon

Initially subsidised goods and shipping.
Search results now dominated by “pay‑to‑play” ads.
Seller fees can exceed 45% of the sale price.
Sellers are contractually prevented from offering lower prices elsewhere, so users ultimately pay the platform’s margin.
The Diapers.com acquisition signalled that competitors would be undercut until they sold.

Google Search

Was known for highly relevant results.
Results worsened to increase search time and show more ads.
Alternative engines like Kagi show what Google’s data can do without ad‑driven friction.
Google originally supported free academic thought.
With AI, scientific constraints began to conflict with fundraising goals.

The Enshittiverse

Removes interoperability.
Weakens antitrust.
Reduces worker power.

Removing Interoperability

Locks in user data, especially on social media.
Prevents tampering with devices and buying supplies on the open market (e.g., printer ink).
Uses DMCA Section 1201, which criminalises bypassing digital locks.
Smart TVs are often sold at a loss and monetised via surveillance.
Companies prefer apps to websites because apps can more easily bypass privacy regulations like GDPR.
Uber can: Charge higher prices if a customer’s battery is low. Lower driver pay if they accept rides “too quickly” too often.

Weakening Antitrust

Antitrust enforcement weakened since Nixon, with some tightening under Biden.
Many of Google’s innovations were acquired rather than built in‑house.
Marc Andreessen is a prominent techno‑optimist and influential conduit between Silicon Valley and political power.
Trump has proposed a 10‑year ban on state and local AI regulations.

Reducing Worker Power

Apple’s use of Foxconn includes stories of suicide nets to prevent worker deaths.
Journalist Oobah Butler exposed Amazon drivers resorting to urinating in bottles due to relentless schedules, then selling “driver urine” on Amazon as a prank.
Companies deploy extensive tactics to discourage unionisation.
Karen Hao documents how AI depends on low‑wage, hidden labour. For example, Kenyan contractors for OpenAI moderating violent and sexual content developed PTSD.

The Vibe Coding Hype of 2025

Timeline

February: Andrej Karpathy coins “vibe coding” in a viral X post.
March: Merriam‑Webster adds the term as a “slang & trending” entry.
July: Y Combinator notes 25% of its Winter batch companies use codebases that are 95% AI‑generated.
September: Major tech outlets report a “vibe coding hangover” as senior engineers struggle with brittle codebases.

Tools and Business Model

Tools: Cursor Composer, Replit Agent, Lovable, Bolt and others.
Many have strong revenues, but only Replit shows a profit.
All pay significant fees to foundational providers (Google, NVIDIA, OpenAI), while competing with those providers’ own coding tools.
Raises the question of whether these companies can escape their own version of enshittification or whether they are “techno‑serfs”.

Technical Reality

Experienced developers note that about 80% of development is problem‑solving, not typing code.
LLMs operate on probability; each prompt is akin to pulling a slot machine lever.
This makes iterative, agile development hard when the system re‑writes large portions of code each time.
Version control becomes difficult when outputs are non‑deterministic.
GitClear’s analysis of over 211 million lines of code found: An eight‑fold increase in duplicated lines. A doubling of code churn.

Vibe Coding in 2026

What Its Proponents Now Say

Andrej Karpathy built NanoChat largely by hand, saying AI tools were not helpful there.
Boris Cherny (creator of Claude Code) says vibe coding is fine for throwaway code and prototypes, but not for maintainable code.
Michel Truell (Cursor CEO) says vibe coding is useful for quick prototypes but unstable for serious applications.

Good vs Bad Vibe Coding

Good when: Used by developers who understand how LLMs work and their limitations. Applied to personal tools, experiments and internal utilities.
Bad when: Used by non‑coders for public‑facing websites. Resulting systems are insecure and hard to maintain or migrate.

Several large firms (Amazon, Microsoft, Google, Meta, Tesla) have:

Laid off developers.
Then rehired for similar roles later, often at lower pay.

What’s Fueling the AI Hype?

Monopolistic tech firms need new growth narratives to satisfy investors.
AGI is framed almost as a religion, enabling imperial expansion of influence and capital.
Consolidation of power includes undermining democratic oversight and regulation.

Socioeconomic View

Doctorow and Zitron stress the problem of needing growth when a company already has a monopoly.
Karen Hao notes that Sam Altman’s 2013 writing framed founders as religious‑style leaders, not just company builders.
Techno‑optimists (Musk, Andreessen, Thiel) see democracy as an obstacle to “progress”.
Many famous tech leaders are investors and fundraisers rather than core inventors.
Most foundational tech was publicly funded and developed in open contexts.
Commercial players later took ownership and only “socialise” technology to gain adoption or share losses.
There are already calls for government backstops as the AI bubble inflates.
Free social networks raised questions about why investors funded them without clear revenue, given the obvious surveillance value.

The Web Is for Everyone

Tim Berners‑Lee’s Web

The HTTP protocol enabled direct connections between computers without logins.
Hyperlinks and basic HTML‑style tagging existed, but he made them more powerful and general.
He worked through the W3C to keep the web in public ownership and evolve it gradually.

Attempts to Capture the Web

Marc Andreessen, during the Mosaic era, attempted to pull the web into proprietary directions.
Ian Hickson of Google led a splinter group (WHATWG) away from W3C, involving Mozilla, Opera and Apple.
Concerns emerged about accessibility, personal views, and Google’s hidden plans for Chrome.
This fragmentation helped justify and implement proprietary algorithms and tracking.
Cambridge Analytica, Brexit and the Trump campaign exemplify how data‑driven manipulation can exploit this environment.
Policy steps like Australia’s social media ban for minors do not address the underlying commercial incentives.

New Initiatives

Tim Berners‑Lee’s work at https://www.inrupt.com explores:

Web 3.0 concepts rooted in user agency rather than speculation.
Solid pods for personal data ownership.
Agentic wallets and agents (e.g., “Charlie”) built on open standards.

Reclaiming Agency as Web Creators

The web is fundamentally low‑tech; no large third‑party platform is required to build an effective site.
People can own their data and syndicate copies elsewhere.
Sites can be designed for human visitors, not algorithms.

Practical Approaches

Avoid overspending on websites that then demand constant paid promotion.
Favour a “dumb” web: Use the rule of least power: simple HTML and CSS first.
Use static site generators where a site is mostly static.
Use open‑source tools for dynamic sites, while watching who controls the project.

IndieWeb and POSSE

POSSE: Publish (on your) Own Site, Syndicate Elsewhere.
Post on your own domain first; then automatically share to silos (social platforms).
Use Webmention and related standards for interaction.
Hard to completely avoid big tech infrastructure: Example: hosting on Netlify (backed by AWS), editing in VS Code (Microsoft).
The key is minimising lock‑in rather than achieving perfection.

AI as a Tool, Not Master

AI is useful for:

Translating between programming languages and frameworks.
Surface‑level debugging and linting.
Supporting graphics and content drafts.
Environmental impact is real, but worse if human thinking is fully outsourced to a few companies.

The End or the Start?

The goal is to build sites that:

Counter slop with quality.
Counter enshittification with ownership.
Counter digital feudalism with federation and federation‑friendly tools.
Counter AI empires with human creativity, empathy and respect.

Why Small Sites Still Matter

The internet’s problems arise from platform monopolies, not from the web’s basic design.
A “dumb web” approach can restore the early sense of empowerment and global connection.
About a quarter of businesses still lack a website.
Even aside from lead generation, the process of creating a simple site and brand can: Clarify purpose and strategy. Provide support and structure in the offline world.

Transcript

[00:00:05] Nathan Wrigley: Hello there and welcome to the No Script Show. Happy New Year. 2025 seemed to be the year when many switched from seeing the internet as an empowering beacon of democracy to something slightly more sinister and unhealthy. It ended with Australia banning social media for the under 16 year olds and slop becoming the word of the year For the Miriam Webster Dictionary, this is referring to the overwhelming flood of low quality AI generated content.

But throughout last year, we've seen a decline in trust of digital services across all sectors and AI backlash and increasing concerns over mental health and the internet. For this first episode of 2026, we're going to try to make sense of this and find the positives for those of us who love the web and building websites to help.

We're borrowing a concept from Corey Doctor's 2025 book entitled and Ification, why Everything Suddenly Got Worse. And what to do about it. You can find the transcript, the show notes, and the presentation slides over at no script show slash 27. So that's the numbers two seven. And if you're watching this on YouTube, the link will be the first comment just below the subscribe and like buttons.

As always, I'm joined by David Waumsley. Hello David.

Hello,

[00:01:26] David Waumsley: Nathan Wrigley. Yeah, indeed. Well, last year was I, I think, you know, for somebody who loves the web of quite depressing, I mean, I'd love for this episode first to be talking about all the amazing things that we can now do with the new HTM HTML and CSS that we have.

And now empowering that can be for people who just need small websites, but, uh, we're in a. Bifurcated industry. I don't think I've ever said that word out loud. Oh, it's a good word. I'm, I'm proud of you, David. Ated. Bifurcated. Bifurcated. Um, yeah. Where most creators now, kind of, I was checking this out. Um, 'cause it was just a sense that most people now who are building sort of sites, we do small kind of business sites, that kind of thing.

I mean, I do. You don't so much. Um, I haven't been doing it very long and haven't got that connection with the W three C. And, and that seems to be the case. Most people have, you know, the majority have done it for less than six years and have learned via commercial platforms so. The big thing for last year really was vibe coding, which is, you know, the idea that you don't have to bother with the code at all, you just tell AI what you want and suddenly you've got buy magic this website.

And um, so really what I wanted to do here is to try and get us back to some of the things that our show is about, making websites simply with HT ML and CSS and talk a little bit about what a lot of people have been saying through that year and are as we go forward about the magic that we see with some of this ai, particularly vibe coding.

We probably should be looking for the man behind the curtain, or rather as they would see it as the wealthy techno techno optimists who have accumulated so much wealth that they now probably believe they are actually wizards. So, um, so really what we're gonna do with this is to just, um. Take a critical, uh, sort of use their views to critically analyze where we're at now.

So, mm-hmm. This is gonna turn into a bit of a book review if I go to Alice. No, that's fine. Let me, shall I put the screen on? Shall I share our screen? Yeah, that'd be great. There we go. There we are. There's our topic in stratification, why we need independent websites. That's what we call this. And I'll move on to next screen here, which is really the range of sort of.

Sources that we're gonna use for this to sort of inform this conversation that we're gonna have. Nathan, would you read out some of the, um, books that we're referencing?

[00:03:56] Nathan Wrigley: Indeed. I'll just crib directly from the slide. So the first one is Corey, Dr. Os already mentioned and ification why everything suddenly got worse and what to do about it. Then there's, um, a book by Karen Howe called Empire of AI Inside the Reckless Race for Total Domination. Uh, the titles are very sort of incendiary, but also that I feel that they need to be because of the, the nature of where we're at.

Yan, um, Jannis, I don't actually know how to pronounce this person's surname, but I'm gonna give it a go. Varo Farkis is how I'm gonna say that. Brilliant. Um, and it's called Techno Feudalism What Killed Capitalism. And then finally, the book by Sir Tim Burnley. He won't say it, but I will. Um, worldwide Web.

This is for everyone. Beautifully titled book. So four there. And then there's a couple of other resources which aren't books, but something you might want to tune into. The first is, um, a podcast and newsletter by Ed Zitron, who is, um, who's somebody online who's been talking about the financial side of all of this for years.

It's called Better Offline. You can find [email protected]. And then Carl Brown has a YouTube channel, uh, which you're gonna have to search for, but it's it's youtube.com/internet of Bugs, and that's the name of it. The YouTube channel is simply called Internet of Bugs. There we go. I think I've done that task.

[00:05:22] David Waumsley: Yeah. Brilliant. Um, so. Yeah, I should say actually the, the, the books here that we've mentioned, the four books, the authors have done so many interviews. So if you kind of look on YouTube, you'll find plenty. So you don't necessarily need to buy it. And all we can do here, 'cause these are so eloquent anyway, um, that you probably should tune into what they're doing, uh, rather than us.

But what we're doing here is trying to make that a little bit relevant to web design, which is not really their background with this one. And interestingly, I mean these are things that have influenced me, particularly, I've been reading these books on. Partway through a couple of them, but most of all I've read through and they all seem to have a, a similar view on what needs to happen, if you like, for the future of the internet.

And I, I wouldn't say any of 'em necessarily are anti AI in any way. It's just that what I think they share in common is that they believe that the web should be socialized, it should be something that we all publicly own and take part in, like the worldwide web is itself. So yeah. Should I just say, I did make a few notes actually here about the D author if you wanna know.

So I'll just quickly go through them. So interesting we're talking about Word of the Year and ification became the word of the year for the Australian Macquarie Dictionary in 2004, I think in 2003. 'cause he was using the term way before his book came out. Yes, I think you're right. Yeah. Was used, I think some international dialect society or something, picked it as the, so it's a, a word that many of us use and I think it's a really good way of understanding where we're at, at the web.

But he's a Canadian, British author and journalist. You've read a lot of his books, haven't you?

[00:07:03] Nathan Wrigley: I've read. He, he produces novels as well, and that was what first got me into him. Yeah, I don't know, a decade or more ago. But he's, uh, he's extremely eloquent, very knowledgeable, and uh, and, and able to communicate a lot of ideas in a very short space of time because he speaks, he speaks very rapidly actually, and, uh, a lot of things fall out of his mouth in, in the time it would take me merely to think of them.

So it's definitely somebody credible.

[00:07:27] David Waumsley: I know, I think he's given us such a great framework for understanding things, and that's why we call this episode after his title. He says, we can use it for, anybody can use it as long as they're representing what it means in his book, which we'll try and do. Um, but he's also 25 years he is been an advocate for digital rights, for, uh, copyright reform and, and, and really been active in, uh, technology policy.

Um, the other one, the em, uh, the Empire of ai, Karen, how She's somebody, well, you read out the title, which is actually the British title, the uk Oh, that's interesting. I didn't know that. Yeah. Yeah. The, the, the US subtitle is, uh, dreams and Nightmares in Sam Altman's Open ai. And that was published last year as well.

Okay. That's so, yeah. Yeah. I mean, she's somebody who technically knows her stuff, but she's been, uh, covering Chinese tech for the Wall Street Journal. She's a senior AI editor at MIT Technology Review. MIT is how, yeah. MIT. Yeah. Yeah. And, um. Yeah. Uh, her book's great because it gives you a real insight because she's done so many interviews with open AI into the key players, how fragile, if you like, AI is how there's almost, uh, religious fervor fuel in it.

And, uh, she exposes a lot of the kind of half truths that we were told really about it as well. So it's really good.

[00:08:50] Nathan Wrigley: I, I think that religious fervor that you just mentioned is so self-evident. Whether or not you are bullish about AI or have like, shackled yourself to AI and, you know, anchored yourself to it.

You can't deny that there is a lot of that. There is some kind of almost evangelical, um, proclamations out there. It sounds almost like, um, a, a religion in some respects. You know, people are really adopting it and, and not, not necessarily questioning it in the same way that obviously these people are.

[00:09:17] David Waumsley: Yeah, exactly. And I've thrown, um, Janni, Fuke in because it is, um, I think his book comes a couple of years before, and really how I think he underpins a lot of this is the fact that he's spotting the fact that we have this techno feudalism, which is killing capitalism, is the fact that somehow we've managed to end up with a situation where all the cloud capital that we have in the world is owned by a few platforms, Google Meta, Amazon, and as such, because we've volunteered into using all these services and become dependent on it, we've become cloud surfs.

So we've kind of gone into this new era and I think that kind of, I'm not really talking about his book in this very much, but uh, I think that kind of underpins where we're at. It's a good way I think, of understanding it. Um, ed Zirin as well, as you've mentioned there, I mean, he's a British tech commentator.

Um, he's a bit sweary, uh, he's, but he's really looking into. Well, he's a critic of growth at all costs and that culture and highlights really the expenses, how much has been paid at the moment for GPUs, how this is inflating everything, but the, it doesn't seem to be solving real world problems. So if you really want to look into the ai, um, boom that we're in at the moment is probably somebody to listen to.

I'm just throwing in Carl Brown on this list, on the slide here because he's one of many, uh, software engineers that's experienced. He's got 35 years experience on this, who is a bit critical of ai, particularly within software development. So, um, that's it. And

[00:10:56] Nathan Wrigley: then No, Tim Burners

[00:10:57] David Waumsley: Lee. Yeah. Yeah. Well finally, because his book came out in September of last year, so it's quite new.

There he is explaining new that. Yeah, he is explained. It's a really good book. Um, the creation of the worldwide web, um, and. I think what I took from it mostly was how easy it can be lost to those same sort of techno optimists if you like. You would like effectively to see a world where democracy's removed, where this kind of tech giants make the decisions in our interests on there.

And just to throw this in, I haven't got a book from him, particularly I I saw, although they don't really mention each other that much. Similarities with Jan Koon, who's one of the three godfathers of AI who left Meta at the end of last year and is working on open source ai. Um. They both seem to have a similar idea, if you like.

I think all of them do about how things need to be in public ownership. So Tim Burnley talks about Wikipedia being the ideal way to sort of share knowledge online. Jan is the same with his. How he thinks that everybody should be pulling their knowledge together rather than doing it in commercial silos.

Right, right. So we, uh, let's move on to the next thing and Nathan, if you'll read that out, let's explain a little bit going back to Cori and, uh, the stages of in notification.

[00:12:18] Nathan Wrigley: Yeah. Okay. So here we go. So, there are three stages, according to Corey, a doctor o of Ification, and they are as follows, number one, re users.

The platform offers a valuable service, which is typically at a loss to attract a massive user base. I think we can all identify that as easy to understand. Number two, lure the businesses or just LEO business once invested, the platform shifts value away from them, the, the users, I guess, towards business customers.

So for example, advertisers and publishers in order to monetize it. And then three, the sort of final stage, uh, extract everything. When business customers are dependent, the platform extracts value from both groups, so both the users and the businesses raising fees and degrading the service. And, um, it's, it's not really in the abstract.

This is it. I think you can chart this across lots of different platforms. This, this sort of three stage approach, it does seem to be a, a playbook. Yeah. I don't know whether it, it started out as an, an intentional thing, but it definitely. Feels like it's a thing.

[00:13:24] David Waumsley: Yeah, I think all of these things just kind of happen.

We just find yourself where we are. We'll, we'll take some of the examples in a minute, but maybe just to sort of go on with that a little bit. I mean, one thing about sort of stage three, if you read CO's book, is that you, you might just see that as being, uh, a benefit to the stakeholders and investors.

You know, that, that, that stage three only they are winning, but also I think, you know, we see that they are becoming the victims as well. So if you take something like Ed Viron, he wrote his longest article ever, which was the and shitty financial crisis where he talks about a lot of the things he's talking about, which is.

How valuations are going on. So how the stock market is being affected by all of this and how they can be, investors can lose out because there's been sort of changing depreciation values of GPU stock, you know, lots of compute power is needed, the buy in everything up, it's raising the prices of this, but they've changed the valuation, how, how it will depreciate to make things look better.

We've had valuations in the stock market growing on the basis of intent rather than contracts. So recently we had Nvidia promising to invest a hundred billion into open ai, but it's just a promise. It's not something that really should raise prices. And there's lots of obviously misleading stories about layoffs due to ai, which actually a lot of people are just using that to break.

Um, workers' rights, if you like, you lay them off because of ai, but you recruit back at a cheaper price from somewhere else, often the case. And there's a lot of circular investments going on, which have been kind of revealed. So the best one is Oracle investing in nvidia, which is invested in open ai and it's going backwards and forwards.

So from his point of view, I think him, both Ed and Cory, if you see them on talks, will say it will take a minor miracle really if open AI is to survive the bubble that they think we are because, and uh, as we notice, we notice that we've got Altman and Zuckerberg at the moment saying that we're in a bubble, sort of talking as if in the third party it's got nothing to do with their kind of theory list search for, um, a GI.

But, um. That seems to be where we're at, but from their point of view, this isn't gonna be possible to bail out anyway, because they were talking about trillions that are gonna be needed and there's no route to profitability at the moment. So

[00:15:50] Nathan Wrigley: yeah, he's, um, ed Tran's definitely doing the rounds. He's appeared on quite a few of the, the sort of podcast that I listen to, and you mm-hmm.

You're right. He, he's quite a sweary, quite a, quite a colorful character. Um, but the underlying message is, um. I guess that he's, he's following the money, isn't he? That's his, his, his take is sort of follow the money and see where that goes. And he's, in his mind, he's extremely sure that the bubble, uh, is not far off collapsing.

I, I don't know exactly what time horizon he's looking at there, but, um, if AI was delivering what it promised to deliver, maybe he'd modify his view. But it's, it's anchored to the fact that he doesn't think it is delivering what it's promising to offer. There's always this distant horizon of, oh, it will do this.

It imagine if we got to this, wouldn't it be great if it did this? And without the investment, it simply can't. And, um, you know, I guess at some point the investment dries up because it doesn't deliver what it

[00:16:46] David Waumsley: possibly deliver. Yeah. I mean, it, it goes to the Y thing where he doesn't believe that this particular way, this language learning machine's neur network approach is the way to get to artificial intelligence.

As everybody understood that, you know. Nobody really understands this. 'cause no one can agree what intelligence is. But effectively, you know, this is a route, but it's a very expensive route to get there. Right. So much has been invested and it's not gonna have, you know, the commercial returns on it because we've seen plenty of reports which haven't listed here, which I think there was one recently towards the end of the year saying 95% of businesses who have invested in it hadn't made any money out of it and Right.

[00:17:24] Nathan Wrigley: Okay. And, and then of course there's the whole environmental thing, which you just sort of touched on there with the, um, you know, if, if like me, you believe in climate change and global warming and all of that, the, the last thing we need is more. Um, power hungry computers being switched on, and, and it feels like this is not just, it's not like a few machines were added to the internet.

This is an awful lot. Yeah. Um, I, I heard some descriptions of the size of some of the data centers that are being added to the, the world in order to satisfy the, the power needs of the, you know, the, the expected use of AI in the future. I'm not gonna say what they were, because I'll definitely get it wrong, but they were fairly eye wateringly large, um, data centers which consumed, you know, like city.

Giant city level amounts of power just in this one data center. And, um, yeah, that, that doesn't seem to be aligned particularly with what humans need.

[00:18:20] David Waumsley: No, and it is Ka Howe's focus, I think, with that empire building. And, you know, she picks out the fact that. Um, you know, it's often shell companies will kind of set up these places, data centers, and then it's like, ta-da, we're meta actually, here we are.

And suddenly, you know, people don't have the water or the electricity. They have, they have power outages and stuff like that. So, yeah. Yeah, it's a lot of that going on at the moment. Um, that's to keep with the ification, that's just. Take a few examples. Should

[00:18:48] Nathan Wrigley: we do them one at a time or do you want me to read out all three?

[00:18:51] David Waumsley: Yeah, read them all out and I'll just

[00:18:52] Nathan Wrigley: fill in. Okay. So three examples. Um, would be the first one. Facebook, I think everybody knows who that is. Um, attracted users with privacy and friend feeds, then shifted to publishers and now prioritizes boosted posts over organic content. This is such a slow and inexorable thing that it's hard to have noticed it, but I think if you look back, the data would clearly show that this sort of stuff is happening and your feed is no longer what it once was.

Right? Anyway, sorry. Um, Amazon, uh, is the second example. Initially, subsidized goods and shipping. Now search results are dominated by pay to play ads and seller fees can exceed 45% of the sale price. And finally, Google search. Once known for relevant results, it made them worse to increase search time. To show more ads.

Yeah. All of it's a fairly pessimistic picture there, isn't it?

[00:19:44] David Waumsley: Yeah. I mean, this is, you know, taken directly from Cory, Dr. O's stuff, and he also, in his book, he looks into other things like dating apps, the gig economy platforms, uh, Twitter and Uber and others. But, uh, you know, his, he often starts when he talks about it with Facebook because he talks about how really it was real users who turned.

Zuckerberg's tool for rating really college girls, which it started off into a sort of useful social platform. And then when they went after MySpace users, uh, when they got investment on that, they, they largely were warning them not to trust the new billionaire owner, Rupert Murdoch with buying history.

Um, which is a tough sell at the time because people, uh, like to be where their friends are, you know, the other people who are signed up to the same platform. So he offered a way to see their posts via Facebook. Of course, when he became the billionaire spy, he close this down. So operability, you know, interoperability was only a sort of one way street with it.

You can't do the same now for Facebook and have people see your Facebook from another platform. Right, right. Um, so it is, um. There's also, I mean, one of the interesting things I think he mentioned, which I thought in the book was a, a fascinating stat was, was Proctor and Gamble. Um, just to look at stage two, when it's there for those people who want to publish or advertise or whatever on the platform, they stopped their, um, 200 million a year, that's dollars.

Um, Facebook ads and saw zero losses, which I thought was quite interesting. So, oh, that

[00:21:20] Nathan Wrigley: is an interesting stand. Yeah. Yeah, it's a very murky thing. The online advertising systems, well, not just Facebook, but all of them. I, I think it's very hard to understand exactly what the ROI is, but that's, that's an eye watering number, isn't it?

So 200 million just curtailed in investing in Facebook ads. But, um, according to this, zero loss in.

[00:21:41] David Waumsley: Sales.

[00:21:41] Nathan Wrigley: In actual sales, yes. You can't

[00:21:43] David Waumsley: chart it, so it didn't seem to make any difference to their overall business. But I mean, the idea is that everybody's caught up and you have to advertise there because your competitors are there.

That's the kind of trap for most businesses. Yeah. It's a

[00:21:54] Nathan Wrigley: beautiful system for the Facebook shareholders that isn't it? Yeah, absolutely. Capture of everything. Yeah.

[00:22:00] David Waumsley: And Amazon, I think is the, I mean. The, the thing is, we all pay more because of Amazon because when they've shifted to charge more, once they've got dominance and everybody needs to be on their platform to sell the stuff, their deal is that you can't sell it elsewhere cheaper.

Which means that in order to keep paying to be on Amazon, they have to put their prices up everywhere. So whether you use Amazon to get your things, you're going to pay more as these individual businesses have to pay Amazon. So that's the kind of trap that we're caught up in there as, yes. Amazon make it more difficult.

Finally, um, Google search. Well, Nathan, you'll know 'cause you are a CGI user. So CGI is an example that Cori uses as our way of showing how Google's data, which is used by CGI can produce a lot of different results to what Google have decided to show with their algorithm at the moment.

[00:22:54] Nathan Wrigley: Yeah, so there's an, there's a, a search engine, which is several years old now, which I decided to give a go, give it a go, and I'm, I'm still using it. Um, I'm paying for it. But that's the difference. You pay a dollar amount a year, um, and you, you do get a very different set of results despite the fact that I, again, I'm not really technically knowledgeable about how that platform, uh, gets its results, but I think Google is in the mix somewhere and, um, they, they definitely look different.

The results that you get, um, you know, you don't get the, the ads for example, that's one of the reasons why you pay. You don't get the sponsored bits.

[00:23:29] David Waumsley: Yeah.

[00:23:29] Nathan Wrigley: Um, and you can modify the, the search in, in a way that you kind of prioritize your own things. So you, you might, for example, want news to come from this particular website and you can sort of favor that.

So you can wait it in your own way if you like. So, yeah. Yeah, yeah. Definitely different.

[00:23:44] David Waumsley: And I think, yeah, um, Curry, Dr. O makes the point about Google, uh, something, which I think we felt ourselves with that one 'cause it's one of the few, if you like, meta Meta Corps out there that I think used to promote free academic thought.

You know, it started that way. You've got Larry Page and you've got Sergei Brynn who were the students who came up with page rank, which told us how we could organize the web search for it. I mean, it was brilliant science, if you like, at the time. But, and they've always had that tradition of introducing, um, academics who will come in.

But this seemed to change quite considerably when ai, when they needed to, when they'd reached a level of sort of 90%, um. Use of Google, where do you go from there? So, you know, AI becomes the next big thing that they want to put it in. So when people are critical of ai, they're the people who have been having to leave Google or sack from it or leave themselves.

So there's a big change in what you can say now 'cause they need to raise funds there. Um, so a lot of people, yeah, I mean Cory, Dr. Row says, you know, when he is presenting this, or I'll say the same thing that, um, and certification may sound like it's just good old fashioned capitalism, but really it's anti-capitalism in a way.

And I'll move on to the next slide.

[00:25:04] Nathan Wrigley: Okay. This has got a great title. Um, let me make sure I get this right. The inverse. Um, so three strands to this. The, the first one is removing or removes interoperability. We can get into that and what that means. Uh, weakened antitrust regulation. And uh, it also reduces.

Worker power. Okay, let's prize this one open. 'cause there's a lot in here. Yeah.

[00:25:29] David Waumsley: Yeah, so I mean the examples of removing interoperability, one I already mentioned anyway with Facebook, you know, locking your data in, which of course, you know, because of the fact that MySpace didn't allowed them to compete with them.

You can't really do that in reverse now. So that's one example of it. But there's generally, and it often starts, a lot of talks about this one, uh, he mentions a lot one piece of legislation that's in there, which is section. 1201 of the Digital Millennium Copyright Act, and apparently this law, which is also known as the anti circumvention role, makes it a felony to bypass any digital locks.

So when you've got chips in things a. That's a way of being able to say, ah, you can't bypass this and this is how it can lock people in. So you remove this interoperability. And the example that is often used is with printers, how you can't go and buy your ink from a third party, whoever's given you the cheapest, you have to buy it from the printer that you've got because they've got that sort of legal right because you, they've got that chip in and you can't bypass it.

[00:26:33] Nathan Wrigley: Right. And the, the printer ink costs more than, I dunno, crazy statistic. Like it's more expensive than platinum or something like that.

[00:26:40] David Waumsley: Yeah, yeah, yeah. Absolutely. And, and there's so many examples of this one, the most recent one I heard, which isn't in his book, which is about smart TVs. I mean, they're being sold at a loss now because we're paying for them to install something which spies on us and gives us the adverts that we want.

And everything's gone smart. We've got smart beds, we've got smart everything. So you know it, it's using this kind of law, if you like, to be able to stop that in. Interoperability, which is a key thing to being able to sort of share our technology and move things around as we like.

[00:27:10] Nathan Wrigley: Mm-hmm.

[00:27:11] David Waumsley: So, I mean, it makes the point as well, you know, that, and again, this is something related to the web that most companies would rather that use their app rather than the website.

'cause they can bypass some of their GDPR laws much easier. It makes it easier for them to spy. And as a great example he gives is of Uber who, and there's a lot of talk about this in not just them, but they will use an app. So if somebody's calling for a ride and they see that their battery is low on their device, they may up their price because they know they'll be desperate to get.

That ride quickly. And if a driver, um, is too quick to respond to lifts or has a certain pattern that shows that they might be a bit more desperate for the money, they're likely to get paid less for it. So there's a lot of price fixing that can be done via apps. Yeah,

[00:27:58] Nathan Wrigley: I heard that. I, I didn't hear the first story about the, the low battery, but that, that is really interesting.

But I did hear the second one. I can't remember where I read it, but that as I was reading it, I was just thinking, God, it, it's like evil genius territory, isn't it? You're sort of, you know, stroking your little cat. Yeah. On your big, big chair in your evil underground layer. It's just remarkable. You know, the idea that if, as a driver of the service of, and again, ca caveats around this, we're saying what we heard, um, yeah.

You would as a driver. You would be penalized because you are good at using the Uber service to get more rides. They see you as somebody that's, you know, just like desperate. Well, we can pay you less if you're desperate. That's just so I know. Again, not in,

[00:28:42] David Waumsley: not in his book. I've seen some other reports where people are looking into, um, some of the, the shopping delivery things and how they will charge you differently for different customers.

They've been testing this by using different apps depending on their spending behavior that will price up the items that are in the shop that they're bringing to you. Really, really interesting stuff.

[00:29:01] Nathan Wrigley: It's such an interesting psychology though that, that everybody is like a commodity. It's like you are something, yes, you are like the sack of money, um, and whatever the conditions are that allow us to get more of our hand into your sack of money and pull out more a any condition that we can use to make our hand bigger and your sack more wide open.

You'll use those, whether that's the battery on your phone or the, the desperation, um, of you as an Uber driver. You just sort of prize, open all these things and try to maximize it. It's so. Peculiar a way of thinking about just life and relations and everything in general. It's such an, oh, I have no words.

It's so strange.

[00:29:48] David Waumsley: Yeah. Antitrust. I mean, uh, obviously that's stopping monopolies. If we want capitalism, we realize that it does have some downsides, so we need, you know, to regulate against those. And Cory makes the point that really these have weakened really since Nixon and only started to tighten up a little bit under Biden, which was a surprise to me.

But I think that the example that he uses is diapers.com when, um, you know, we'll come out of the, the bubble, uh, of the.com bubble. Um. This was aggressively bought by Amazon, uh, because they just had the money to be able to out, you know, at loss. They would sell the same stuff until they basically folded.

So it was a kind of warning, if you like, an early warning to everybody that wants these mega corps that got to a certain size, you sold to them. You know, I'm gonna,

[00:30:36] Nathan Wrigley: I'm gonna dwell on this a little bit 'cause I remember reading that in the book. 'cause I think it's really interesting how that. Story unfolded.

So the, the story that Corey tells is that Amazon want, if I get any of this wrong, just correct me, they wanted to buy diapers.com. Mm-hmm. diapers.com didn't wish to be sold because they thought that they had a, a thriving business. So they were selling what we call in the UK nappies, but diapers everywhere else.

Mm-hmm. And, um, and so Amazon said, we'd like to buy you. They said no. And so Amazon's tactic was to sell the, an equivalent range of products at a remarkably reduced rate because they could obviously, you know, just consume that loss over and over and over again, thereby driving the business of diapers.com out just it, you know, it vanished.

They then bought divers.com a rate, which was significantly less than they would have done previously. And, uh, and, and then presumably, I don't know if this is the tail end of that story, then presumably raise the prices again. Um, yeah,

[00:31:36] David Waumsley: exactly. Exactly. Yeah. Oh, I, I mean, we've seen, I've, you know, friends of mine, I think I told you about this before, I had the same happening with Starbucks.

They had a cafe, Starbucks turned up. They offered free coffees, trying to put them outta business, that they actually were, they moved on eventually. So. Gosh, the one out the public decided they knew what they were doing. It was too obvious. But, um, yeah, same sort of thing. So, I mean, it was a sort of warning and I mean, he makes a point in his book as well about most of the Google inventions that we see, um, were bought, you know, they, they few, you know, were there.

So that's kind of the way we're going. And, and, and it's no surprise I think to me that we have the sort of techno optimist like Mark and Andreasen, who has a kind of hotline to Trump, really always is Trump's person to be able to communicate what's going on in, uh, Silicon Valley. It's no surprise that Trump wants a sort of 10 year ban on state and local AI regulations on this.

They wanna sort of free that up. So, you know, antitrust is being weakened there. Although Cori sees though is, uh, an opportunity, there's a sort of growth in it as well. At the same time, you know, we've got more antitrust, um. Action's being taken against the big corporations at the moment against Google, against Facebook.

So there is something changing there. Um, let me just finish off the notes I got here as well. Okay. Which is just about the reduced worker power. I mean, Cory again touches on Apple using Foxcon in China there where they needed suicide nets for the treatment of their employers there. So that's how you get your cheap Apple stuff.

It's at the cost of some poor Chinese workers. And there was a wonderful documentary, if you can find it on YouTube, it's well worth watching 'cause it's hysterical. Um, UBA Butler, um, is a sort of prankster and journalist who got into Amazon as a worker there. He spotted that Amazon drivers were, because there was such a tight schedule, were having to urinate into bottles.

So he managed to take some of these bottles, package it up and make it into a bestseller on Amazon.

You can't beat that. Um, yeah, I mean obviously he didn't sell it to real public, public, it was his own friends he was selling to, just to make the point. But within that, he realized that the place where he got a job, they were just recruiting loads and loads of people. That's why he got in, because they were trying to break the attempts to create a union there.

Uh, and they have to get over 50%. So as soon as you get close to getting 50% of your workers will join a union. They can fix this by employing lots more people to make sure you can't have a union. So, oh my gosh. Yeah. So that's the kind of things there. So, um, yeah. Um. There's a lot more in Karen. How's book though on the other side of AI as well?

I mean, her concentration is on really what it's doing to the environment, but also about how the magic of AI isn't quite the magic. It relies on a massive amount of hidden low page human labor. So in terms of if they just left all the stuff that is scraped to go out there. It, uh, it wouldn't be something we'd use, it would send out all sorts of stuff so they get low paid workers working for like a dollar a day or something to be going through the most awful content that you can find on the web, sexual and violent content and stuff like that.

So they're getting all kinds of mental health problems with that one. So, so we definitely, uh, kind of see that going on. Can I move on? Sorry. Did you want

[00:35:08] Nathan Wrigley: No, no, no. Uh, it's just you have to take a breath, don't you, and sort of think about all this for a bit. And I mean, we all know that humans have the capacity to, to do Yeah.

Interesting things to one another. Let's just put it that way. And it all sounds so almost like a dystopian. Novel. Yeah. Some kind of version of the future in some science fiction book, but, um, we, I think it's, you know, we, we know that humans have the capacity to, to do things in the pursuit of profit and, um, disregarding all sorts of things that you probably wouldn't wish to happen to yourself and your family.

It's very easy to disregard those exact same things because it will turn a profit for you. And your accompany and keep food coming onto the table and so on. And, uh, yeah, we're, we're a curious species, let's put it that way.

[00:35:57] David Waumsley: Yeah. So when we're using chap GBT, we don't realize that, you know, the, these Kenyan workers who have made this ex, you know, uh, a a dollar a day who are making this and.

You know, seem very human and nice to us. So something to bear in mind. But anyway, talking to the magic of AI on this, shall we move on to the sort of vibe coding hype of 2000? Okay. Nice segue.

[00:36:17] Nathan Wrigley: Okay. And, uh, the colors of the slides change. Woo. So here we go. Um, so vibe coding hype of 2025. Um, I don't think we need to describe what vibe coding is, but I'll do it anyway.

Vibe coding. The idea that I, it's such an unusual word. I don't even know how like vibe coding became the word, but it did. Um, in February in 2025, the term was coined by, I'm gonna say Andre Cari. Um, forgive me, Andre paid.

[00:36:45] David Waumsley: Yeah.

[00:36:46] Nathan Wrigley: Yeah. Thank you. Uh, who was one of the co-founders of OpenAI. Uh, it was a viral post on x formerly Twitter, uh, vibe coding became the term.

And then in March, the phrase spread so rapidly. That it was added again to the Miriam Webster dictionary. The Miriam Webster dictionary has had an, an unusually large presence in this, this particular epi particular episode. Um, it was put in there as a slang and trending term. I think it's fair to say. It appears everywhere on the internet nowadays.

Uh, and then by July, the startup accelerator Y Combinator noted that 25% of its winter batch was building. So, Y Combinator is a kind of organization that you can get involved in if you've got a thing that you want to launch into the market and, you know, you wanna prove that it's got legs, um, and you want funding for it.

So 25% of its winter batch was building companies with code bases that were 95%, uh, generated by ai. That's quite a statistic. And then towards the end of the year, September, major tech outlets began reporting a vibe, coding hangover. A senior engineers struggled to maintain the brittle. Code bases. Okay.

Give us more, David. Yeah.

[00:37:57] David Waumsley: Yeah. I really followed this hype. It was depressing to me. I mean, it was fueled, there was books, there was, by the summer, there was books, courses, and then also the tools that were coming out. So we had Cursor, which, uh, Andre, Ty was talking about actually Cursor when he was doing it, and he was saying, you know, you could just go with the vibe with this.

I can let it do all the work. That's where Q came out of. There was rep agent, there was lovable, there was Bolt. People were talking about that. You just type it all in and just go and it'll send out what you want. And, uh, you know, I think the interesting thing is we look at these, um, and I don't see this talked about, this isn't in Cory's book or anything, but, uh, I, I looked at, I for myself, all of those companies, they have good revenues at the moment, people are interested in, but only Repli, which was only recently pivoted to AI.

First. It used to be a good sort of. Develop a training tool before shows a profit. And if you listen to the users of rep, there's some real horror stories about it. Completely deleting, um, databases doing its own thing with the AI ruining all the work that's gone before. So it is quite interesting to look at this.

And I think also if we're thinking about the certification side of it, you could say they're kind of the stage. Two people, the businesses coming in to make money out as the ai, but they're all paying high fees to the foundational AI providers like Google, Nvidia, open ai.

[00:39:19] Nathan Wrigley: Yeah.

[00:39:19] David Waumsley: Whilst at the same time trying to compete with those same tools.

So, you know, you wonder whether they're going to escape stage two and certification. I mean, are they, it was also

[00:39:29] Nathan Wrigley: kind of interesting how much of a sort of hype cycle they, they they're in, because some of those tools were kind of everywhere in my feed. You know, people were talking about 'em all the time.

And then quite a lot of them sort of seemed to disappear off the radar of popularity that maybe I, it's just that, you know, they were no longer, it's no longer worth talking about 'em 'cause it's no longer new and the use continues. So they're very, you know, they might still be successful, but there was a lot of, lot of hype and buzz around what they could do and, uh, how point, you know, basically you just write a sentence and dah dah, everything's working.

But, uh, yeah. Anyway, so I dunno if that remains to be true, whether or not they've got. Users still sounds like one of them at least, is is still credible rep, the one that you mentioned.

[00:40:10] David Waumsley: Well, still sort of profitable. I profitable, that's the word I meant. Yeah. Thank you. Yeah, so that, I mean, they're all doing, they're all there and people are still using them.

I, we'll move on to this one, but I mean, what I found interesting at the time was I was listening. I mean, I'm not a developer myself who's into, you know, proper software development, but pretty much all of 'em, all the big players you'll see on YouTube, all thought this is all just very stupid because it doesn't, doesn't follow anything that they know about development.

So, because l LMS are a probability machine, so it's like. You know, this is Ed Trons term. It's like pulling the arm of a slot machine every time it'll turn out something different. So there's no way of being able to work in an agile way and have version control. So you know what you are building on. You should start simple and keep building up.

So it's really interesting. And there was some reports, um, Git Clear, uh, does a comprehensive analysis of it says 211 million lines of code, which come out of Git. And over this time they've seen this sort of eightfold increase in duplicate lines. So there's less global management, less, uh, dry as used.

Don't repeat yourself in code basis and code churn doubles because you're just constantly, if you're using this, you are just making new code each time. So there's no way of being able to do what developers have always needed to do. You know, they start with. The most simplest thing and build up and with a process, but if you use that, so, um, should we look at what Vibe coders are saying at the moment?

[00:41:42] Nathan Wrigley: Indeed. Indeed. Okay. Yeah. Okay. So Vibe Coding in 2026. Um, so again, back to this chap, uh, Andre Carpe, the, or Carpathy, I'm not sure. Uh, built nano chat by hand, uh, stating AI tools weren't helpful for that. Then Boris Cherney, who created Anthropics Claude Code acknowledge vibe coding works well for throwaway code and prototypes, uh, but fails when developers need maintainable code.

And then Michelle Trull, who's the CEO of Cursor told Fortune's Brainstorm AI conference, that vibe coding may work for quick prototypes, but creates unstable foundations. For serious applications. Thi this is some, somewhere I sort of arrived at independently of any of these three characters and it just felt that really, maybe if it's something on your local machine where you had a use for it and it was disposable.

And I use the example of, I dunno, let's say you're about to file your tax and all of the bits and pieces that you've got lying around on your desktop and what have you is, is difficult for you to pause. Maybe you'd get something, it would do that work on your computer and then after you've submitted your tax return, you just mothball it, dispose of that thing.

But, but it's not out there in the wider world to be used by anybody. It's just you and you. You take the consequences of, of whether or not that spits out nonsense for you. But it's a personal project which kind of gets thrown away at the end. That seems to be where I was getting in the latter part, 20, 25.

Sorry, over to you.

[00:43:13] David Waumsley: Yeah, no, I think you're right. And I, I feel that's how, 'cause the ones that I saw, because of the type of crowd that we have to sort of people more do it yourself websites or building small websites. I saw Canva as being the big thing. It was all ai. You could build everything. But I see following.

The backlash you got from Figma when they tried to do that same where you could turn your designs into code with that one, it got such a slate in. I see. That canvas seemed to be talking more in the terms that you are talking about. These are nice little applications for your own use, you know, a little calculator or whatever.

But, but there is, I think there's a split in now if you, you hear people talking about good and bad vibe coding rather than abandon the whole idea. Okay. Um, so you've got, it's good in the hands of coders who actually know how LLMs work and know that they're not going to be accurate all the time. So you make it into small little chunks that you decide what goes into the code base.

That's one use of it. Good for the personal lapse that you are talking about, but bad for. The non coder who have live public facing websites that they're gonna put out because they're gonna be insecure and also they're going to be locked in, aren't they? To that? If they want to change it, they rewrite the whole of their page again, they have no control of it, and suddenly they are serfs because they are something that they could have probably done with HTML and CSS on their own.

Quite simply, is now something which you have to rely on, the AI and whoever's providing it to keep control of it. And, you know, it's dangerous, isn't it, really? If you, if you put something up that has insecurities that you wouldn't normally have, because a lot of these, these sites are using technologies that you wouldn't need to have.

If you HTML CSS, that's fine. But most of these are churning out things with lots of JavaScripts and lots of, you know, really complex stuff.

[00:44:59] Nathan Wrigley: So, Hmm. It's very interesting, isn't it?

[00:45:03] David Waumsley: Yeah. Sorry. We'll move on to something more positive. I mean, it's interesting. I think that, you know, most of the major technology companies, Amazon, Microsoft, Google, meta, Tesla, they've all gone in cycles of laying off developers only to rehire them again at a lower rate.

I mean, they use AI as the reason, because that boosts the idea that AI is important. But they, they get people back because it's not that important. But also they get them back at a lower rate, you know? So, so you're breaking the workforce again. And that's kind of the thing. So, you know, maybe the devs, um, Cory's, you know, he's quite amusing on these sort of things.

So he says, you know, he's always telling devs to watch out. You know, they, they can't yet treat you like Amazon workers or someone is working in a Chinese company for a, uh, for Apple or something. But, you know. They really don't want you to have these wonderful sort of offices where you've got fuse ball and cappuccinos on demand.

Right. The old Google

[00:46:01] Nathan Wrigley: offices that everybody was, you know Yeah. Exactly. Wasn't working at, yeah, yeah, yeah. You

[00:46:06] David Waumsley: mean with your pink mahoan and you can have tattoos, you can have, you know, whatever piercings that you like, you know, at some point, you know, if they can get rid of you with AI, then you know, that's what's gonna happen.

But, ah, y yay. Anyway, so right next I think we'll finish off with a bit more depressing stuff there. Oh, great. Before we get Lovely. Yeah, yeah, yeah. Just to end it, um, we'll finish off just with the sort of socioeconomic perspective of, you know, this kind of authors that we've been featuring.

[00:46:36] Nathan Wrigley: So this one then is entitled, what's Fueling the AI Hype?

Um, so three points here. Monopolist easy for me to say. Uh, monopolistic tech companies need, uh, fresh growth stories to satisfy customers. Um, then this one, which is much broader imperial expansion using a GI as a quasi religion. That's kind of interesting. And then the final one here, consolidating power by undermining democracy, right?

This is, you're really opening the, uh, opening the jaws of this conversation, getting on a global, uh, civilizational, uh, level. Let's, uh, let's see what you got. Yeah,

[00:47:16] David Waumsley: well I think this is what all the authors are kind of looking at in a way. So Dr. Ro and Ttra are really pointing out the problems, sort of mentioned it anyway, the problems of growth when you've already got a monopoly.

When you are, you know, you, your Google search, you've already got 90% of your people you need to find the best thing and the, the, the latest thing quickly. And ai, anything that looks really good with AI needed to be that thing. So there was this kind of need for growth there. You need something for investors.

You need to tell 'em you are there at the forefront. 'cause they need more money, we need more growth, you

[00:47:46] Nathan Wrigley: know, um, growth is always the thing. David, you have to be growing. There's no, yeah, there's no point in existing unless you're growing.

[00:47:54] David Waumsley: And, uh, the, I mean, it's about imperial expansion because, you know, the tech and governments are kind of into it.

Twined these days really for this, you know, that they're both financing each other in some sort of way. But I think Karen Howe is the one, I mean, she points out, particularly with Sam Altman, how he had diverse investments. I mean, most of these people are, you know, they're not inventors, they are investors and they look for new business opportunities.

Sam Altman had, um, you know, lots and lots of 'em at the time. He jumped on this and she, she quotes really at the beginning of her book, something that was in a post by him in 2013 where he was saying about the most successful founders do not set out to create companies. They on a mission to create something closer to a religion.

And that's very much the way that open AI have gone about this whole thing. Interesting. Yeah. So I think, you know, most of 'em will be pointing to the fact that we have those techno optimists. We have Elon Musk and Dr. Uh, mark and Andreas and Peter Thiel. Panier, um, Palantir. Sorry, Palantier,

[00:48:56] Nathan Wrigley: that's right, yeah.

[00:48:57] David Waumsley: Was tripping over my Wednesday. Um, you know, who generally as a view they see. Democracy as a problem to progress. You know, it really needs to be in the handful of geniuses who will be able to do this. And this is why we're there is this sort of consolidating of this power, trying to make sure that it's only led by a few people.

If everybody's doing it, then it just ends up with a mess. So that's kind of, um, where we're at at the moment. It is interesting though, I mean, Karen, how makes the point about Sam Altman where you, you never know where somebody like him stands on everything. 'cause he's got the, the, uh, he does what his home product does, which is kind of mirror what you want to kind of hear all the time.

So he is good at raising investor money, but if you are somebody who, with artificial general intelligence, you believe you are a, a dor as Karen calls 'em, somebody who thinks that it's gonna. Killers all in the end, or you are a boomer that is going to, you know, we're all going to live in abundance forevermore.

It, it just really depends who you're talked to because as far as, as far as this whole project's concerned, Sam is both of those, but. Both talking about this is, is really good for the hype and I don't think, yes. Yeah,

[00:50:11] Nathan Wrigley: yeah, yeah. That's an interesting point. Anyway, sorry, go on.

[00:50:14] David Waumsley: Yeah, no, it's fine. Um, what, um, there was just some other points here to make, I mean, there's so much we could talk about this, but I probably should skip on actually and we should talk about, um, the very obvious exception to.

Kind of what we've been talking about there is the worldwide web itself.

[00:50:32] Nathan Wrigley: Okay. So the strap line here is beautifully encapsulated. The web is for everyone, which is a lovely sentiment. So Tim Burnley, the inventor of the worldwide web published, this is for Everyone in late 2025. That's the book that we showed on one of the first slides.

Um, it's a modest account of how this invention was built on the work of others, but it's also an account of the struggle to keep it in in public ownership. Um, it is critical of unregulated algorithm controlled. So you sort of summarized the, the book in just four bullet bullet points. Yeah. Was there, yeah.

Was there more that you wanted to flash out on that?

[00:51:12] David Waumsley: Yeah, just a little bit. I mean, I suppose what, what it was is that, um, it is quite modest in the fact that mostly what you did is the add, the HTTP protocol really making us be able to connect for one computer to another without the logins. Things like link and basic HTML style tags, which we used today, which were obviously fleshed out what already there in place.

So, you know, he is good at acknowledging that shared resources. This kind of openness about your technology is there. Um, I mean he just made it obviously considerably more powerful for me. I would like to say. I think he deserves all the accolades that is, he's. Been given really for his ability to be able to keep the web in public ownership.

Mm-hmm. So we have something like the W three C that makes all of these big powers have to work together. It doesn't progress. It's slow, but it doesn't progress until everybody agrees and everybody's on the same side. And it's one is few examples and I think that's why, uh, it's so great because, I mean, just recount a few little details and I think they're worth just sharing here.

I mean, obviously in the early days there was Mark and Andrea and, uh, with the mosaic. Um, browser and he very much, I mean from Sir Tim's point of view, it was very much he could see that, uh, he, he liked to take credit for the web, take credit for the mosaic against his sort of partner. And he very much was keen to set up, uh, uh, sort of conference, if you like, to bring everybody together really around his vision.

It's only that. So Tim managed to get something together, which turned into the W three C ahead of him. Otherwise, I think it would be slightly different. It would be a little bit like open AI not being ai. And he also makes a point, I'll tell this story anyway. He talks about, uh, Google's. Ian Hixon, who was the chair of the HTML development group around the time of HTML five, and he, um, managed to create a sort of splinter group taking in Mozilla opera and Apple away from the W three C at that point, um, to create the WA work.

I never know how to say that, but it's the web hypertext application technology working group. Yeah. Obvious wish I would come up with short names for these. Um, but you know, from his point of view, he said he seemed to have a problem with accessibility reviews, you know, that he had to do for this one, and it was very, you know, good at being able to pull people away.

So there was a break off from the WCC at that point on it. I mean, what. White was foiled eventually is because they discovered posts on his belief in human, uh, humanitarian eugenics. He believed that mothers should have a license to be able to have children and everything. So the, the tide turned against him.

But what was revealed later is that the reason this splinter group was there, because he was working for Google, seen as someone neutral at the time before they had Chrome. But what was discovered there was that, you know, Google was secretly working on Chrome at the time, so it would favor them to splinter off on the W three C.

So yes, it makes a just a, just a small thing. Yeah, it's quite interesting. So I think the book, from that point of view, you just have to say. You know, inventing is one thing, you know, but he's done that with the help of other people there. He's put the, he's joined the dots together. That's why he's so keen on this kind of open stuff and everybody being brought together across the world.

And I think, you know, that's the, the key thing with that, where people want to kind of take this away really, if they can. So he is managed to keep that going. And I think it's really successful at the moment. At the moment we've got why we've got this show is because of the fact finally the browser walls are over and we've got this interoperability that's running at the moment, allowing HT ML and CSS to really advance quickly.

So I think, you

[00:55:01] Nathan Wrigley: know,

[00:55:02] David Waumsley: you know, without that, it would've been lost on that. Um, he does make the point, and I'll go in about the, I think one of the key things he wanted to make was the, the fact about these addictive algorithms that they're legally allowed. That you can, you know, w. People like Facebook and uh, TikTok or whatever, they know what's addictive on this.

They know that. What gets us angry into this, he talks about Cambridge Analytica and how that had an impact on Brexit and Trump's campaign in the first place. And as you mentioned in the beginning about Australia's social media ban for the under 16 year olds, he, you know, he points out that something that I felt as well, but it's nice to see that he felt the same, was that it's just not getting to the root cause.

The root cause is somebody needs to do something about harmful algorithms.

[00:55:51] Nathan Wrigley: Yes. It's kind of, um, trying to put a, I don't know, a visor over, you know, a a blackout blind over somebody's eyes. Um, and yet it's still there in the background doing Its doing its interesting things. Yeah. Yeah. Okay.

[00:56:04] David Waumsley: Yeah, I'm a, I'm a victim of it and I'm, you know, what's 60, 60 something now, so, yeah.

Yeah.

[00:56:10] Nathan Wrigley: You only have to look along, uh, any row of any human being, uh, in, in this era, uh, to see the, uh, the addiction to the phones and the, uh, the social media. It's pretty rampant everywhere, isn't it? And I guess the systemic root cause is because the algorithms are incredibly successful. They're jolly good at doing what they're doing.

Um, yeah. Making us feel angry. Yeah. Yeah. And, and engaged, you know, just like, or maybe engaged is the wrong word, but it captures our attention very successfully. You know? Incredibly successfully. Yeah. Um, okay. Right. So, and just,

[00:56:46] David Waumsley: just finally with him, I should mm-hmm. Just mention the things that he's doing.

'cause I think they're quite interesting. So he has a, a company, anyway, interrupt. Um, and they've, he, he, he doesn't get much publicity really for those kind of things that he wants to talk about, but his idea for Web3 0.0 if you like, so apps and Facebook and all of that stuff. The social media was, if you like, 2.0.

What he would like to see is that data goes into our own ownership. So he has the idea of these agent wallets and he has two sort of products, which is going out, which has been used commercially, but isn't out for us all at the moment. Which of course will be all open source stuff, uh, solid. And Charlie, so solid is, uh, a way that we can store our own data where we want, wherever we want.

We might choose to use it on, you know, with Google some of it and we can disperse it. And Charlie is this sort of AI that he's working on that will kind of allow you to take the information from the web and then align it with how your life is to remind you how you've done your work. So it's a very different route around it.

Interesting.

[00:57:52] Nathan Wrigley: Okay. Yeah, I guess we'll put links to those into the, uh, description below the, yeah, below the video or the audio. Okay, great. Yep. And, and then we'll one

[00:58:01] David Waumsley: last couple.

[00:58:01] Nathan Wrigley: Um,

[00:58:02] David Waumsley: yeah, we're our reclaiming agency, so

[00:58:04] Nathan Wrigley: Okay. So more or less the penultimate slide. We've got reclaiming agency. So three points here. The worldwide web is low tech. Uh, there's no need for a third party platform to make an effective website. All true. Um, the second point, we can own our own data and syndicate elsewhere.

Again, all true, albeit not at the minute, but it'd be nice if we could spin it that way. And the final one, we can build for people rather than algorithms. That, personally, from my point of view, that's the, uh, that's the crucial one. That's the one that I think needs to be in everybody's mind when we're thinking about this.

Yeah. Yeah.

[00:58:40] David Waumsley: I mean, I've been thinking a lot about why they. Why I sort of feel no energy about websites and used to be so excited about it in the early days. I think the early days it represented this way of cutting out the middleman, being able to do things for our own, didn't matter what they were, whether they're capitalist ventures, whether they were socialists.

You could cut out and, and be your own person and put something out, connect with people across the web. But, and it felt very empowering in the first place. Yeah. Now it seems to have got really stodgy, but I don't think it has to be the same web is there and it's got so much better Just recently since interoperability has finally been achieved, you know, with the browsers.

So I think, you know, it'll take a bit of time, but if we're willing to give up, um, you know, sort of this need to go for short-term conveniences and stop falling for the marketing, you know, we can start making websites. Um. That, that you know, that it's so much easier. And that's what our kind of show is really about.

It's about making some of the new hasty l and CSS, which is kind of vibe coding, just kind of took over. Nobody was really talking unless you were a developer. You weren't talking about how great CSS has become and how Right. Much more you can do in, so that's really the reason for this one. So, I mean, we can't, as people do much about things that I, you know, I hate the fact that we seem to be creating lots of fake enemies to fear around the world all the time.

The fact that we've got wealth inequality, which is getting worse. The fact that, you know, NHS data in the UK is just being shipped off as every other bit of data is to a few US companies. But we can avoid spending a fortune on a website and not have to continue to pay to promote it and update it. So if you, if you spend a lot on a website, which is on a platform, you have to maintain it.

If you. Then spend that money, then you are almost, you have to get your visitors back on that. So then you're on with your Facebook and your Google ads. In order to do it, it's kind of like a trap, but we could go with the dumb web first and follow the rule of lease power like most professionals do, and just start with what we need, which in most cases for the sites most of us build, all we need is the htm, LCSS.

And maybe we'll just need an open source, um, generator like, uh, eleventy, which we're using if it needs to do a lot or, uh, WordPress or something like that to be able to create our stuff without getting locked into. All kinds of systems. So we talked about it before, didn't we? On the show, we did something on the indie web and they got that position where you publish that, that posse thing where publish your own site, syndicate everywhere else, and they talk about web mentions and all of that kind of stuff.

So it's just something that we could be jumping on. Yeah. And, um, anything you wanted to say here before we get to the final? No, I, I

[01:01:38] Nathan Wrigley: mean, apart from the fact that it's just, it's just a lovely alignment of where we, we would like, well, you and I would like the, the arrow to be pointing in the year 2026. I mean, you've laid out the case there.

You've done obviously a lot of research for this episode, for which I'm very grateful. Thank you. Lots of show notes that you can't see, by the way, dear listener. Um, and you've painted a, a, a, a picture of well. Some, some sort of dismaying version of how we are in the beginning of 2026. And then right at the end, here's some solutions there.

There's this, there's this technology that exists. It's free, it's open, it's available for everybody. And somehow we've, we've been wearing blinkers for the last decade or more, and we've been all kind of co-opted, um, voluntarily. Let's go with that. We've kind of, mm-hmm. Maybe walked into things without really realizing what was going to happen again, maybe it wasn't intentional.

Maybe it's just the forces that work that slowly over time get us to where we are. Where, you know, this ification that Corey Ero talks about, maybe it wasn't intentional, but it certainly happened. But there is a, there is a little bit of light at the end of the tunnel and it's, it's free, it's open, it's available, and it won't stop you doing anything.

Um, but maybe we just have to realign and realize. What we're doing. Yeah. Before it's too late. Yeah.

[01:03:00] David Waumsley: Yeah. I think it's just a case of like ai, I mean, I think AI is wonderful. You can use it in your own way. As long as you have control over it, it's not going to take away your agency and give that to a small number of companies to Yeah.

You know, then have control. And I think that's it. So, and last slide here. Um,

[01:03:17] Nathan Wrigley: yep. The last slide is, uh, is it the end or the start? Do we have to record this all again? Um, so this show, the aim is all about building websites that counter slop with quality. Ification with ownership, feudalism, with federation, ai, empires with human ingenuity, empathy, and respect.

Did you write those four PO points or were they some out of the mind or somebody else?

[01:03:43] David Waumsley: No, they're, they're, they're mine.

[01:03:45] Nathan Wrigley: I love those. They more or less encapsulate it perfectly, don't they? It's very pithy and gets to the heart of it all perfectly. I love that. Really nicely gone. Ah,

[01:03:53] David Waumsley: okay. And I, I, I kind of felt that we're going into a new year and we've been doing a show, not kind of moving into it, not knowing what we're doing, but in some ways, I, I think the show should have been called The Dumb Web Show.

Actually. You can have certainly based

[01:04:07] Nathan Wrigley: upon me, it should be called

[01:04:08] David Waumsley: No, no, no. But I mean, you know, dumbing down the web because you could do so much more with simple technologies, uh, without having to make it so, you know, like you're trapped into the new thing all the time. You have to jump on for what we do.

Make small websites where we can connect with people still, I mean. Nobody knows. You don't need to spend a lot of money on SEO 'cause nobody knows if the AI is going to be the way with it. But if you put yourself out there and you do it and you keep the cost low, you're going to reach other people, you know?

Mm-hmm. And you can still use the resources there. So I think, you know, it's our, I, I wanted to do this one because it's kind of our mission, I suppose, for the show, because what we'll try and do throughout this year is, we'll, we did it before, we tried to make some websites, but we kind of skipped over it.

And we're still learning, uh, you know, CSS and stuff and some of the complex stuff. What we'll try and do this time is to. Show the simple process how anybody really people with no prior coding knowledge can simply make their own simple, say business websites or something for local business. And I think we'll try and do some episodes where, break that down into very, very simple thing so it won't be sort of highfaluting, uh, academic stuff for that.

Um, right. This is just a way of introducing it as far as i's concerned.

[01:05:22] Nathan Wrigley: Okay. So a, a bright future for the year 2026 for the, the, the newly titled Dom Web show. The Dumb Web Show. We should talk about that. That's actually a, I think that's quite an interesting title. Um, but anyway, we'll see, uh, maybe we're already captured by our title and the SEO and the Google.

The Google search listings that go with what we've already done. But, um, I guess that's, that wraps it up for this particular one. Yeah. Does it? Yeah. Yeah. It was a long one. Yeah, it was a long one. Um, but thank you. Um, so the year 2026 begins with a bang for this show. There's, uh, there's an awful lot of stuff that we would like to leave behind, but we're giving ourselves the opportunity to do things differently in 2026.

Uh, David, anything you wanna say before I click the stop button?

[01:06:10] David Waumsley: No. Thank you very much for your time today. Yeah.

[01:06:12] Nathan Wrigley: You're very And everybody else who's got to the end. Yeah, yeah, yeah. The four people who've got to the end. Thank you very much for listening. We'll be back at some point in the near future.

Cheerio, Dave. Bye.

Google Ads for local businesses

2025-11-27T00:00:00Z

Show Notes:

Here's the presentation slides.

About Google Ads

Google's search is so dominant that "Googling" has become a universal verb. Its suite of services (Gmail, Maps, Calendar, Docs) are embedded in our daily life.

The world's largest advertising platform through Google Search, YouTube and its Display Network.
Google's economic impact report puts advertisers average ROI at 800%.
An average ROI can not be expected as there's no normal distribution.
Success varies across industries and depends on skill.
Google ads won't give suckers an even break.
It's a subsidiary of the profit focused Alphabet, worth over 3 trillion.
Google supplies free tools because the data support its primary business.
Neil Patel claims that 8 out of 10 businesses lose money on Google Ads.

Traditional vs Digital Marketing

More traffic won't make a bad offer good.

No Message Match

Bob pays more per click because his homepage has a low quality score.
He's at the top of Google search, but attracting those with the least patience to search his site.
There's other distractions and no specific CTA.

Conversion Focused

A tweaked landing page for each ad type.
Builds in urgency with FOMO.
Includes a lower risk conversion option.

Mistakes Setting Up Ads

Not using 'Negative Keywords'.
Wrong location targeting.
No conversion tracking.

Time and Money

Google Ads is not "set and forget".
Most campaigns need 2-3 months of testing and optimization before hitting profitable ROI.
You need to be responsive and have the budget.

Hired Help

A red flag is someone approaching you offering to get you more traffic.
Don't place too much faith in badges.
Look for transparency and someone who can show examples of returns for clients similar you.

Checklist

Have you optimized your Google Business profile?
Have you checked Google's Local Service Ads?
Have you optimized your on-site SEO?

Transcript

[00:00:05] Nathan Wrigley: Hello there. Welcome to the No Script Show. This episode is going to be all about Google Ads and is for those new to pay per click advertising, particularly small businesses, for example, vets, accountants, therapists, electricians, et cetera.

From our experience helping these businesses build websites, many don't have the time to learn the differences between traditional marketing, so for example, advertising in newspapers, local radio, buying sports kits for local teams, et cetera, and digital marketing to which Google. Ads belongs as this is key to spending marketing budgets.

Well, we're going to go over what to consider before launching a Google Ads campaign. You can find the transcript, the show notes, and the presentation slides. They're gonna be at the website. No script show. Forward slash 26. So the numbers two, six, and if you're watching on YouTube, the link will be in the first comment just below the subscribe and like buttons, which you incidentally should press.

Should you wish to get more content from us in the future. As always. I'm joined by David Wamsley. Hi there, David. Hey

[00:01:12] David Waumsley: thanks Nathan. Oh, well, I'm hoping this episode might be of use to future clients of mine. That's really my intention behind it. Even though I kind of do a bit of marketing strategy when I'm building client sites.

'cause obviously I have to think about the users when I'm doing that. Rarely does this stick with them at all. So it's fairly common. A few years later when things had gone quiet on the website for me to get a request to add a Google tracking script or when with a WordPress site to give access to a Google ad campaign manager.

And recently, and this is what prompted me to want to talk about this, a client forwarded a. Appointment with a Google technician, support team member. Right. And the, there was no information. So there was an expectation that I would attend this meeting and but I wasn't sure, so I thought it was a phishing email or something because Right.

Google. Google are huge. They've got, 300 billion in ad revenue, so they've never been interested in handholding small businesses before. But it seems looking this up that it's just one of several defensive actions that Google's been taking since a recent decline in their search dominance.

Okay. Experienced advertisers are starting to report that they're getting poorer ad performance. So I think they're acting accordingly and looking to beginners who previously wouldn't have spent anything because they couldn't get beyond that sort of setting up of the campaign and the Google Tag Manager, the way of being able to analyze the results.

So that's really what's brought this on for me. Maybe this is a good thing that Google are doing, but there's a bit of me, the cynic in me that's thinking, well, this. Did this complexity mean that it was stopping people from who shouldn't have been doing it, doing this? Should you be flying a plane really if you don't know how to take off?

So I think, right, good point. Probably, yeah, give some advice on this. So we'll move on to our slides probably and talk a little bit about what Google and Google ads are.

[00:03:20] Nathan Wrigley: Yeah. Okay. So that's a, I guess that's a good place to begin. So just cribbing from the slide here a little bit. Google's search is really pretty dominant.

I mean, I don't know exactly what the numbers are, but it has become like a universal verb to say to Google things. We definitely used to say search, but now we say Google. And then of course it's got a massive suite of products behind it. I mean, there's four listed here, but there's way more than this Gmail maps, calendar docs.

Pretty much everything in my life is embedded in those. We, for example, share docs in Google Docs for this show, and I use Google Maps and I'm a Gmail user. It's pretty much everything. If Google went down, I'm in big trouble. It is the world's largest advertising platform, which is kind of strange to know through Google Search, for example, YouTube as well.

And it's got its ad display network and Google's economic impact report puts advertisers average return. At 800%. That seems like an eye watering figure, but okay. There it is. 800%.

[00:04:21] David Waumsley: Wow. Yeah. Yeah, I know. And well, I did a bit of research onto this one and I should probably mention as well that for those who don't know, Google Display Network, it.

It's really this collection of over 2 million external sites and apps, often blogs and games that make money from displaying ads. So, they put their ads on their site. If somebody clicks on it, they make money from Google. There are other creditable reports that suggest that the number, the return on investment might be more like.

200 to 400. And then I think typically as an industry, it seems that most people will say that the average return on an ad spend is for every. For every $1 spent, you'll get $2 in revenue, but it's still pretty good, isn't it? And you can see why. Well,

[00:05:07] Nathan Wrigley: yeah. I mean, so long as it's more than $1 for $1, it's probably a good business decision to start using things like that.

I'm staggered that it. Is as high as that. In all honesty. I kind of thought the days of that were all over. But anyway, so there's more in the about section. So for example this whole ad thing is a subsidiary of the profit focused Alphabet. So Alphabet is the parent company of Google.

That I don't know. Quite why they did that move a few years ago. But they did. And alphabet itself, gosh, really $3 trillion is apparently the worth of alphabet, which is pretty amazing. Google supplies free tools because the data supports its primary business. Yeah. They're not giving it to you for No Yeah.

Reason at all. And Google Ads won't give suckers an even break. What did you mean by that exactly?

[00:05:56] David Waumsley: Well, I.

[00:05:57] Nathan Wrigley: They, they're

[00:05:58] David Waumsley: a business and their ads are set up. If you go in with no skill or no knowledge and you go with their defaults, they're not going to necessarily work in your interest but work.

Yeah. In their business interests. And I think we'll see that as we go through. I mean, really this slide is just to, because I think many of us will see Google through rose tinted spectacles that you know Yeah. But they are one of the magnificent seven out there, apple, Microsoft, gosh, Amazon, no script show.

No script show. Satan I dunno who the others are. But and we, I think particularly I talk to clients all the time because I, people who came in on that wave of. The digital revolution saw Google as this wonderful people who just did things right, who had a really good culture.

Yeah. People wanted to work for them, but I think, we have to realize that their ethics has kind of been watered down over the years. They are big corporate business. There don't be evil motto has long gone. And more recently, the longstanding commitment to avoid AI in weapons development that's gone.

Google's face multiple. Privacy violations and probably in terms of that, just taking the most tinted spectacles off. One thing that if you're going into this, that you need to be aware of, 'cause. They won't make your way off because of GDPR. If you are sending any data, which you will do through Google Tag Manager, you actually need the consent to be able to do that before someone's data is taken over there.

Right. And of course, like most businesses who are set up to trade in data like Google. They're only really going to advertise where they meet GDPR. They're not likely to advertise to somebody who's setting up Google Tag Manager that you need to add this. Quite intrusive off putting privacy pop up to your website which you will need to do if you get into Google Ads.

So I'll move

[00:07:52] Nathan Wrigley: on to another slide. Okay, so I guess this is our final about slide. So there's some more information about Google and whatnot. So an average return on investment cannot, can't be expected as there's no normal distribution. The success is gonna vary across industries and depending on skill.

I I'm just gonna dwell on that point. I think that skill bit is the crucial bit and probably what we're doing here, in all honesty, setting it up properly. Like the defaults are probably not gonna get you anywhere. And it's a bit like something like Google Analytics. The devil is in the detail, which is in a menu, buried in a menu, buried in a menu, buried in a menu.

And also a familiarity with the interface and the ability to adapt as that interface changes over time, which inevitably will. And the final point in our about section is Neil Patel. Claims that eight outta 10 businesses lose money on Google ads, which is about everything you need to know about that.

Really? Yeah. If the ROI is claimed to be 800%, but eight out of 10 businesses seem to lose money on it, you, there's definitely something going wrong for those 80%, and yet the 20% seem to be making all the headway from the platform.

[00:09:00] David Waumsley: Yeah, I mean, Neil Patel, I mean, he is a prominent digital marketer.

For those who don't know Nathan, and I know his work, he's authored books and he creates a lot of SEO content and I think he still owns a keyword research tool as well, but it's not really backed up. But I will say in this, with my limited number of clients that I know of, maybe there's about seven or eight of them who I know of who have spent money on Google ads.

None of 'em are particularly knowledgeable about this. Actually, they all lost money on it, basically. So, what Neil Patel's saying is probably likely a lot of people go in not really knowing what they need to know.

[00:09:39] Nathan Wrigley: Yeah. Okay, so we're gonna drive the conversation forwards a little bit and we've got a number of different slides to promote that conversation.

So here we go. The first bit we're gonna tackle is traditional. Whatever that means versus digital marketing. So we've got this strap line here of more traffic won't make a bad offer. Good. It kind of stands the reason, doesn't it? Yeah. If you if you've got a bad thing, it doesn't matter how much you spend on the advertising, nobody is gonna buy it, but you've got some more data to back this up.

[00:10:06] David Waumsley: Yeah I'm just gonna concentrate on this a bit 'cause I think this is the crucial thing about anyone getting into this, because traditional advertising, I think most of us know of moving to digital, it's hard to get your head around that. So traditional advertising through old media. Was fairly intrusive and blunt.

You would've to advertise to everybody. So where you and I might have enjoyed the body form TV ads or something, you and I as gents wouldn't have been interested in the sanitary towel product because apparently according to Jimmy Carr, it's not a proper gift. Oh, okay. Right. Okay. But and I think similarly when we go into the first wave of digital marketing, a lot of people carried that mentality around just get more traffic.

So people were gaming Google we keyword stuff in all the stuff that you knew about in the two thousands and 10 Google. Kind of got their act together and punish people who were gaming the algorithm. 'cause it wasn't in their business interest. And a lot of people kind of went out that time.

And that's saw, I mean, it was always there in the first place and offline. But there was a concentration in our way to think about conversion. The idea of using sales psychology to present an offer in a targeted way. Which you can do. That's the beauty I think of Google Ads.

Unlike any other sort of search engine work that you might do it allows you to kind of really finely tune who you're going to Yeah. Have come to your site and. I mean, I'm gonna go on a little bit on this, but I, we, I think we just instinctively know this in the real world. So if for my example here, if I was setting up, I'm not going to do this a shop, and it, this shop only has one product.

It sells classic black dresses. We'd know instinctively that value of that dress would depend on the person coming through how they would value it. So if a young teenager came through. I'm probably going to guess when they come through that they're not gonna be interested in stuff that I might have worried about.

The fabric that it's durability, that it's easy, washable, that's probably not gonna be their primary concern, whether it's called who's wearing it now might be their thing. If it's an older person, they might be like me, they change their weight all the time and they want to know that it can adjust to that.

If it's a man coming into the shop or something. Assuming that they're not like me and they'd like to go by the name Susan at the weekend. I'm joking there. By the way. It's Jenny. I prefer, sorry. No, really? If they come in, they're probably looking for a gift so they won't reassurances.

That this might be the gift for the right kind of person, and you might sell the fact that it's easy returnable, that sizes don't matter too much. It's quite forgiving and that you gift wrap. So if you see what I mean. Yeah. One product Yep. Can be sold. And the highlighting and that I think is the key thing about where Google Ads come in is because it allows you, with pay-per-click, you can target who's coming into your shop so you can greet them.

With the best story, if you like, to be able to convert them. So, I will move on. Sorry, we'll move on to this side.

[00:13:09] Nathan Wrigley: Well, no, it's okay. I've just got a couple of things to add to that, and that is to add to that. And that is that, that sort of hyper targeting whilst yeah. Whilst it's like the unicorn, it's what everybody wants.

There's also a boatload of work in there, isn't there? Because each time that you identify this, let's go for avatar, that word, this persona if you like. Yeah. You've gotta tweak the message for that eventuality and then tweak it for this other possible eventuality. And so, in the same way that putting a shop op.

You're gonna have expenses in terms of, rent, electricity, gas, staffing, and all of that. This isn't a quick fix. You're probably just gonna have to divest some of those resources into other ways. You won't have the gas to pay for, you won't have the electricity to pay for, but you still have to pay for stuff to make this work because time will be the thing and expertise will be the thing.

So it's not like you just move everything and it's instantly rainbows. Yeah. There'll still be an awful lot of work to do to figure out how these people, who these people are and figure out the language to correctly sell to them. And yeah. So, sorry, that brings us to the next slide, which is the yeah, the irascible Bob Smith, who is a gardener.

[00:14:20] David Waumsley: Yeah. So I'm just gonna use him as an example of this. Yeah. I mean, most websites, the homepage. Do things that you would never do in a shop. So, somebody entered your shop, you wouldn't say, welcome to my black dress Emporium. We were established in blah blah year. Yes. And we are passionate about, you would move straight into it.

And that's the problem with homepage. So if we imagine we are Bob Smith and we're a landscape gardener in the uk, in the county of Lincolnshire, which we. Both hail from. Yeah. And let's imagine that he gets lots of work from his website, but it's general gardening work. He doesn't get the stuff that he would ideally like to be doing, the hard landscaping, making patios, walls, driveways, and past that kind of thing.

So he's told, he's got his website. It's doing its job, it's not giving him the work that he wants. He is told he can target people via Google ads, so he sets up campaigns for them. But the problem is that he. Sends all of this traffic to his generic homepage where there's kind of very limited message match.

And I'll let you read

[00:15:21] Nathan Wrigley: out these main points. Yeah. Okay. So I guess this is like the golden goose, isn't it, of the internet, the ability to target things. So for example, in the case of Bob Smith he's gonna be paying more per click because this page has a low quality score. So in other words, the people that are arriving at that page.

The intuitions are not quite aligned to what it is that they're looking for. He's at the top of Google search, but attracting those with least patience to search. His site, which is kind of curious, isn't it? That's a weird juxtaposition of information. The idea that people who are quickly searching around on Google might be the people who are the least likely to dwell and stick around.

And then also there's a dis, there's distraction and no specific call to action as well. Yeah. If we, you can just about see the picture. Yeah. Under David, there, there's, it's very generic. There's nothing particularly leading you to the next step.

[00:16:14] David Waumsley: And I think that quality score is an important thing, but it's about relevancy.

I mean, if you are going to cheat your way to the top by paying Google to surface on the top, the less relevant your page is. And that's gonna be about keywords. So in a typical website like Bob's, he's probably gonna have a section that goes into hard landscaping, but on his page, he's probably got no mention of patios, the thing that he's advertising.

Right? Right. So when somebody goes there, they land on a generic page with a generic. Call to action to get an estimate and no mention of the thing that sent 'em there in the first place. And given that those people are probably clicking on the first thing that they see, they're probably least likely to go search and they expect it to be handed to them.

[00:16:53] Nathan Wrigley: Yeah. So, oh, I see. Yeah. Yeah. That's a really interesting intuition. Yeah. Yeah.

[00:16:56] David Waumsley: Yeah. So I think that's the thing. I mean, quality score, I should just probably emphasize is a little bit more than just having the words in there because Google use this as a way of predicting how likely your ads.

Likely to be clicked on the sort of relevance to what you're talking about and your site and you know how closely your ad copy, which is quite important if you're setting up the schemes to get that right. Match the user search intent. So Bob really, like most people, would have no time. To work on a landing page that was specific for each of the people he was sending.

He'd be too busy to do keyword research to know, which is the sort of low hanging fruit to pay the least. And he's probably unlikely to set up lots of variations of the copy of the ad to see which one performs best as a quality score on all of this. So you end up, and I'm sure this is the case with a lot of people that.

They're willing to pay to bring more the people that they want to see, but in that they are ignoring. The key thing that Google Ads does is that it allow you to get a specific type of user, and it's the user and how you accommodate them that ultimately makes it possible for him to get the work that he wants.

[00:18:10] Nathan Wrigley: The other thing for Bob, sorry, can we just, if we just stay with Bob for a minute, is Oh yes. That, given that Bob is a gardener Yeah. Like he's just doing this whole gardening thing and the internet is probably not his thing. Maybe it's his thing, but probably not. And so that whole intuition of, okay, you need a page for this and it needs to be configured in this way to attract these kind of people.

That's not. Bob's thing. That's kind of your thing. My thing. You've got a background in psychology, which always bleeds into these conversations. You probably don't even notice it, but there's always some psychological driver in what you say, and I think that's really interesting. What are the intuitions?

What are the incentives that people arrive at that page on? Yeah. Is gonna be really important. The other thing is that Bob is failing. I'm assuming a bit about Bob, but I'm imagining Bob is watching the pennies and every single thing that he spends on a Google ad, it could feel like a complete black hole of money, yeah. I've just spent 200 pounds and I don't have any intuition as to what happened to it, whereas the ad that I put in the local paper, I got a phone call. And I know that gave me something back and it's so much less obvious. Yeah. It's easy to say 800% ROI on Google ads. It's, but it's harder to know.

Where that 800% is coming from, because the internet just doesn't give you that information. Well, it doesn't out of the box, obviously. We'll maybe get into that in a future episode. Anyway, that's me finished about Bob. Sorry. Yeah,

[00:19:41] David Waumsley: no, that's fine. I mean, I, what I've done is, and I'm gonna have to talk on a bit there, I've contrasted it with Bob's wife, who's Mary, who runs a marketing business.

So she knows this stuff and she has a web designer, she has somebody who does the Google ads managing for, but they coordinate the two sides of this. Through her strategy. So one of her clients wants to promote a summer music festival a year ahead of the event. So what she would do as somebody with a kind of marketing mindset or digital marketing mindset, she'd set up a landing page for that.

Early on to try and get listed on search as soon as possible, and then via social media and blog posts in particular, she'll create links into it to hope that it'll get promoted in organic search and not have to pay for anything. Right. So she's likely to do keyword research for the blog, so you know, she'll be.

Doing that sort of psychology, thinking about who are the people who might be interested in this are the potential customers that might be holiday makers coming to Lincolnshire in the summer. There'll be regular music lovers, concert goers. There'll be fans of the performers that might be on that show, and she can write blog posts on all of these and create this kind of hub and try and get free traffic.

And that's the ideal, she would start with that a year ahead, hope to sell all the tickets, but she would also know, and this is where Google Ads could be useful, is that on something time sensitive where she doesn't have the time for this to rank higher in, in organic search. Right, right. We use Google Ads to boost, what does less well organically, and she's already done the keyword research for a blog post anyway, so that's gonna give her, when she's doing that, she's going to note what the cost per click is, what she's doing that. So she's already set up, if you like to be ready for Google ads. So. She is well, conversion focused.

Conversion focused.

[00:21:27] Nathan Wrigley: Yeah. Okay. So the skinny on conversion being conversion focused is a tweaked landing page for each ad type. So we kind of alluded to that with Bob. So rather than just generically dropping in on the homepage, there's a place. Where each of the ads will end up, and hopefully it's fine tuned to what the ad message was saying.

Builds in urgency with a bit of fomo. So the fear of missing out, I guess that's in the case of a concert, that's nice and easy to achieve, isn't it? Because there's a deadline in terms of the calendar, but there's also a finite amount of tickets may be more difficult for Bob Special offers, things like that.

Who knows? But also includes a lower risk of, sorry, includes a lower risk conversion option. As well.

[00:22:09] David Waumsley: Yeah. Sorry, I put this in the notes there. But yeah, so with her, she could do the fomo ad can stand out 'cause she can say this is the last chance to get your 20% off this concert. To try and increase the urgency.

And then of course, what she's going to do with her landing page says it's built and it's gonna have lots of different imagery. She can change that imagery. So she's attracting families. She'll have more family stuff with kids in it, on images of the stuff. And she can change all the headlines to match what's going in.

So. Some of those ads will be set up to see if the money is gonna help 'em convert. But also I think what she'll know, and this is something that Neil Patel and people like that would allude to as a digital marketer, is that most of them will know and we know. That over 70% of the people who will visit a website will leave.

They'll get distracted and they'll never return again. They'll just completely forget about it. Life takes over. And so what you would generally do, if there's a possibility you would add in a lower risk conversion option to go in that. So for Mary, there were a lot of options that she could do that would build into what she would do.

So if she's trying to attract the tourist or something coming into Lincoln she might add into the bottom of that. For the, in exchange for an email that there's a guide that they can download here. To find out about other events for music lovers, similar music events for bargain hunters where there are discounted events in the area.

All that kind of stuff is a way of just getting an email of somebody so you could follow them up later at some point and just say, here it is. And encourage 'em to go again. So your cost for your click, you've got another chance to reuse that, so, right. Yeah. Yeah. Yeah. And I think that's, I mean. Obviously there's so much more we can go into about the sales psychology and the conversion side, but I mean, anybody who's new to this, hopefully that sort of gives you a flavor for the different type of mindset that Mayri might have compared to Bob.

Yeah. When looking

[00:24:01] Nathan Wrigley: at this. Yeah. So it kind of feels like everything that we've done so far is a bit of the why. Yeah. And now it feels like we're moving into the how the practicalities of doing things. So here's our, here are some examples of making mistakes whilst setting up the ads. This is basically where I would always fall down.

There was always things that I think. That I didn't do correctly. I didn't understand the tool and what have you. So, so just a few, three to begin with, not using negative words. Wrong location targeting. Ooh. Yeah. And also no conversion tracking, so you're not following that through and figuring out when people did a certain action.

So yeah. Over to you, David.

[00:24:39] David Waumsley: Yeah. Yeah. So, I mean, negative keywords, I mean, I looked this up myself. There were people giving various estimates about how much that might loot waste in your budget. It went from 30 to 80% of your budget. Wow. So it's that example of, well, even you, I mean, we can't get into all the details, but you get an option of basically a broad match for your search terms.

So you can bring in people that are. Words that are very similar to what you've put in your ads or what the keywords you're working for. Or you can have an exact match, but even with an exact match. And this is where you need to keep up with Google 'cause it changes the rules on you. So, there's a lot of work in that, but even with an exact match, you need negative keywords.

So Bob, obviously he wants to maybe promote his patios that he's doing, but of course he wants to get rid of the people who are searching for DIY patio. And as he is at the top, he doesn't wanna get. People who are just gonna click on it 'cause they think that's what they search for. DIY. And he came up so they've clicked on him.

So you wanna get all these negative keywords, words that people could type that are similar to what you are doing. If you were a carpenter, you might wanna remove the word canon 'cause you don't want people searching for music by the carpenters or whatever.

[00:25:45] Nathan Wrigley: Yeah.

[00:25:45] David Waumsley: So there's that.

And then. Wrong location targeting. There's a little, this is what was mentioned in before about Google, kind of set it up for their interest, not necessarily yours. They set it up so it says presence and interest in an area where most people will want to change that to just presence. They are actually coming from the area.

Yeah, itself. Now, in Bob's case that would be the case because, I might need a landscape gardener actually for this house that we've got in India. But, and I've got an interest in Lincoln's share. So if he left it at the default, I would see his ads and think he's for me. Yeah. So where Mary might want to.

For a particular campaign where she wants the holiday makers from out the area, she might want to leave it on the default for that particular campaign. So yeah. You can really make a mistake by advertising to the wrong people. I think this is gets much more complex these days, particularly with the sort of new digital acts and everything and people move into VPNs.

You're not quite sure where anybody really is these days. But anyway, that's just one of the challenges. Yes, it's, yeah. Yeah, and the other thing to just let that's the targeted, the conversion tracking, obviously this is the thing that Google are helping people with by now. Setting that up, I think it has to be noted that when you've got somebody like Bob, he's got, he's going in and it's very simple, I think for Google to give in a little bit of time to say, okay, we can just, we can track.

Who's coming through your contact form or maybe your clickable telephone number. Whereas Mary, I don't, I, I dunno if Google would spend all the time that they would need to do to set up something with Mary where she's got lots of different calls to actions and buttons going on for different pages, lots of different funnels that people can go through to take up the secondary option.

So I'm not sure if Google would be helping the professional in that way. Okay. That's interesting.

[00:27:36] Nathan Wrigley: Yeah. Yeah. So the other thing to think about shall, about, shall I take this or do you wanna go with it? Yeah, please. Yeah. Okay. So, okay, thank you. The next one time and money. Probably the secondly word anyway at least is why we're doing this.

Google Ads is not a case of set it and forget it. Oh, I wish it was a case of set it and forget it. Everything's gonna change, isn't it? Your offers are gonna change, your pricing is gonna change, but also there you are is probably gonna change. So you need to stay familiar with that.

Most campaigns, this is fairly amazing. Most campaigns need two to three months of testing, gosh. And optimization before. Hitting a profitable ROI. That's the bit that Google definitely won't be alerting you to out of the gate. I wouldn't have thought. And you need to be responsive and have a budget, so able to change and able to spend and adjust your spending as things ramp up, time of year, whatever it may be.

[00:28:29] David Waumsley: Yeah, well I used a bit of AI to try and pull together what other people were saying about the sort of time that's required for this. And they came out with a sort of minimum of an initial setup, four to eight hours. Yep. Monitoring one to two hours and a monthly optimization of two to four hours. But I think in truth, 'cause it's a changing platform, you, there's always something new to learn and to set up.

And you're really going to, you need to have an analytical mind. I mean, to get the best value you need to do a bit of. Keyword research anyway on this.

[00:29:00] Nathan Wrigley: And it's not nothing though. That is it, that's quite a considerable amount of time, in, in a busy working week that's already ramp packed with things.

Especially Bob, the idea of one to two hours a week, where's that coming from? A monthly additional two to four hours to optimize things and tweak things. It's just that's tough. That's a difficult justification when there's gardens to be landscaped,

[00:29:23] David Waumsley: yeah, and I think, they're saying, I mean, putting this into pounds, that you generally need to be thinking that you're going to be spending 400 quid per month for at least a couple of months without expecting anything to come back.

And that, in my experience with people I know have done it, they've pulled out after a couple of months, after months. That's brutal, isn't it? Months, yeah. Yeah. Of investing to be able to get some return. 'cause you need to test all these different variations. So a lot of people are just not into that kind of thing.

So. And also, unless you know what you're doing, you want to avoid. And now I don't think it's a default at the moment, but there was a point where it led you to put yourself on the display network, which means that you can end up on all of these blog posts or you can end up on these games. And of course, these people are making money to people clicking on their.

So they're gonna put them quite near to some control. So you accidentally click so you can really burn through money. So you definitely, if you did do that, you need to set a max, spend off Google or just take all the money that you've got and make sure, so it's quite a minefield, but you can set this.

But you know, the problem is this balance, people don't allow enough time or loss to come with it. And then. They might burn it up in the wrong way for that. So,

[00:30:31] Nathan Wrigley: well, like the example that you gave of 400 pounds over two months, so 800 pounds in that case. Yeah. It's, that's a, if you're just starting out or you've, you're struggling that, that's a healthy amount of money to lose.

Yeah. With, at the end of two months, no expectation that you won't be at 1200 pounds by the end of month three. At sort of 1600 by the end of month four. In other words, it just seems like a ca a chasm of money. And of course, the intuition there is to pull out because I've lost quite a lot of money that I can't afford to lose the next month and the next month.

But counterintuitively, if you give it some time. Then the results hopefully will come. But that's a diff, that is a difficult psychological bridge to get across, I think.

[00:31:18] David Waumsley: Yeah. I think you need to go in knowing that you're gonna lose some money in there. The last person I know, the client who told me what happened, very good client, smart person as well, but he'd spent in two months, 4,000 pounds, and you got one lead out of that.

And that's it. He pulled out, then we did something else. So that was quite a big hit. It's more than what he spent on the stuff that we've done together. So yeah, that was a lot of money. So yeah, I made the point actually on the slides that you read out that you need to be more responsive. So I think generally there's a view that if you are in.

Advertising people know that you are advertising your stuff or even if they don't and you are on the top, so you are selecting out the least patient people. You need to be quicker with your responses than you might be with your normal website. So you probably want to adjust your campaign so they're not displaying when you are not around, you want to be replying within an hour or two generally.

I think that's what people say if you're getting. Click through from those ads.

[00:32:13] Nathan Wrigley: Yeah, of course. At this point, the you are kind of thinking to yourself, okay, this is all. Lots of money to be lost here. Lots of difficulty. So what I'm gonna do now is I'm just gonna hire somebody to take all of this burden away from me, and they'll be brilliant because they've got lots of badges on their website saying how great they are at this kind of stuff.

But David has some, I guess, red flags or some things to be mindful of here. Let's just read them out. One red flag. Is someone approaching you offering to get you more traffic? I think you are gonna go into that in just a moment and explain. Maybe there's a, there's something different there. Don't place too much faith in badges.

So I'm guessing, this accreditation thing that they have on their website. Maybe not. And also look for transparency in someone who can show you example, like real, actual. Examples of clients, which are basically, I guess, similar to the business that you are running. So three things there, which you are gonna develop some more.

[00:33:09] David Waumsley: Yeah, I think so. I I never really know with clients whether they've been approached by somebody or whether they've decided to employ. And I think with some of them they have, just been approached for this. And I think it comes that sort of, we'll get you traffic and get you to the top of Google thing, which you hear a lot of the spams people saying.

And that sounds good to somebody who doesn't really know. But it's quite. Because that's what Google adss offer. You give them money and that's what you get more traffic and you get to the top. So that's an easy thing to do. If they're not talking about conversion or the quality of score, that's probably a really worrying sign, particularly the way that most will charge for their time.

So there's a range of how campaign managers who are experienced do this. Some will go on a retainer and or an hourly amount, some will even do it on performance. But generally only if it's a big. Ad spender what most local businesses are likely to be offered, which is the most common thing, which is to charge by percentage of the spend.

So if that is their promise only to get you traffic and get you on the top of Google and not. Quality and conversions, then they're incentivized to burn through as much of the old money as possible and as quickly as possible. Yeah.

[00:34:22] Nathan Wrigley: Yeah. That's a really interesting in intuition. Yeah. Sorry, I interrupted.

Yeah,

[00:34:26] David Waumsley: No, that's fine. And I think the badges is the other thing about the you've got Google Partners and you've got Google certified agents, and they have to be certified once a year on this one, and it can be reassuring and it can be a sign of something good, but also, again, in this case.

Google can be gamed because I mean, you can pass this certification every year by just googling your answers and putting them in. And mostly your search partners are people who are spending $10,000 over a 90 day period as, and that's the primary driver. And unlike with this type of gaming Google, it's in Google's interest because they earn money from the people who are.

Generating this money for them. It's not like the search where that's being gained, where it, ruins their reputation. So, so I think, from that point of view, it can be a good sign and at least it means that people have made that effort to do that. But I think you've also gotta look beyond that, which is why.

Probably you need somebody who can show you examples of similar help they've given conversions that they've given for industries similar to yours. That would be the best

[00:35:23] Nathan Wrigley: sign. Yeah, and I feel that, well, certainly my inbox, my email inbox is definitely from time to time full up with people promising a lot with this kind of work.

It seems to be almost the most spammy thing you can. Possibly imagine, I'm cold calling you with a, or cold emailing you demonstrating my credibility. And it is, as you say, it really is often just about, I'm gonna get you to the top of Google. And of course that's great if you've got an infinite amount of money.

But exactly as you said, really what you want is, I wanna make it so that you are getting loads of conversions. Okay? Yeah. Right? Yeah. And I don't really have anything to add here, so I think you should just crack on with your checklist, so, yep.

[00:36:01] David Waumsley: Yeah, it's the last thing that we're covering here.

So just really the main things I, there's so much we could talk about on this one, but I think the main question you need to ask yourself if you'll move into Google Ads is. Firstly have you optimize your Google business profile, even if you have one. Now, I'm always encouraging people to do this and set this up because it's free traffic for you.

You are, you have your business account on there. They've called it different things over the time, but you set it up, it's for free. And then if somebody's in your local area asking for your service, you can show up on the map. Now you've got all your competitors there, but if you optimize this, get lots of reviews on it, lots of good reviews, send people to it.

People just don't do this. And you fill in all of the stuff that they want you to tell them, like your opening times and all of this, and put in all the images. You've got a really good chance of getting a lot of free traffic and people move straight to Google ads before even setting this up as local business.

So I think that's a key one. There's also something which I didn't know about until I started researching this. Shame on me. I think it's only been around since. 2020 mostly started in the US but they have a thing called Google's local service ads, and this is a pay by lead. Thing. So basically you pay more than you might do for your clicks to appear at the top with a call to action directly in that, to either call you or to email you from that.

And they will charge as that event happens. But you do have the option to say to Google, no, sorry, that was a spam thing. Don't charge me for that, and they'll refund. So, okay. That's interesting. I didn't know about that. So they No I didn't as well. And it, if you're in the uk, the I would check in their site and the, for a lot of the clients that I was checking out that it wasn't available for their industry in their area.

Okay. But it's wanted to check out. Okay. Because it might be the way to go if you really do need to. It might be more expensive, but at least you know it. You skip out all of that. Yeah, there's a lot of

[00:37:56] Nathan Wrigley: qualification litigation going on there, isn't there? Yeah. There's a lot of, and you skip

[00:37:58] David Waumsley: out of sticking all that nonsense on your scripts on your website as well.

You just go directly to Google, sends you the traffic for your lead. That's it's much more simpler thing. Yeah. And then finally, and I think this is my plea as somebody who always feels, like I should say something to clients that have you optimized your, on your onsite SEO now? Generally when I'm building a site for people it's not always what everybody wants, but it's what I try and build into it.

I'll try and build in landing pages, if you like, for the different things that they do, and I'll try to do more, but I usually always feel that I want, even if they I will go as far as making. Content for them for blog posts or something if they give me a clue. But often I don't get to see this through and in all my experience of working with the clients who have gone to Google ads and then we've worked together to increase their blog posts and to focus on something in every case.

And it's just due to the nature of the fact that they've got so much low hanging fruit. I my, what they pay for me really outstrips anything that Google ads. Yeah. Interesting. So far it's not that I don't think Google ads are good, it's just that I think the missing, the low hanging fruit. Yeah. With this first, so that's really been my experience.

I often think. It's always one of these difficult things I think in the industry, I've talked about this before, is the fact that so many clients, when they come to a website, they come with the solution. They want this, they want a website. They don't come with a business problem. They want a slider, they want a bookings form, but they gen generally don't come with a problem and that the person provide the solution.

So I think anybody who's looking into that, they might wanna see if they know somebody who's working in some sort of marketing digitally and ask them, come with your problem. To them. Yeah, and they might say Google ads because that might be the perfect thing for you, but they might say, you've got other things you can do First.

[00:39:50] Nathan Wrigley: There we go. I think did I just ran then? No. That made perfect sense. And I agree. It's kind of curious that the very last bullet point kind of, upends the entire conversation we had, but at the same time, that's the bit you've gotta get, right? There's no point in having an online presence without getting the free benefits of.

Just having a good online presence. If the entire purpose of your online presence is to spend money on Google ads maybe you've missed the point. And there's lots of low hanging SEO through, especially in the long game. If you're in this for the long haul, you can definitely tweak that over time and make it work for you.

So there was. The no script show, episode number 26. You can find it at no script show slash 26. So the numerals two, six, what's gonna be the follow up to this? David, what are we doing after this one?

[00:40:41] David Waumsley: I have absolutely no idea. Well, I could talk

[00:40:43] Nathan Wrigley: about this. Well, we shall find out is all that I'm gonna say when we.

When we're joined for episode number 27, is there anything you wanna add before we knock it on the head?

[00:40:54] David Waumsley: No, that was great. Well, I enjoyed doing it through these presentations. It's a little bit awkward really for doing this for the first time, but it was a slight change

[00:41:02] Nathan Wrigley: in. Do things normally. We're not driven by slides, but this time you had created these slides, which kind of drove us forward.

I liked it. I thought it was a really good way, and no doubt we'll we'll get slightly better at the the machinations of doing it in a slide driven way. Okay. That's it. We'll call that a day and I'll see you on the next one. Yeah, thanks Nathan. Bye bye.

Form options for static websites

2025-09-10T00:00:00Z

Show Notes:

Expectations and clients

In the era of heavily marketed no-code products, it is not unreasonable for many website clients to think web interactivity is easy.

They may think:

If they build it, they will come (the form will itself generate business).
Complex forms are plug and play and easy to manage.

Most are less likely to think about

UX and accessibility.
the responsivity needed for today's devices.
The impact on page load and in turn SEO.
The potential cost of support and maintenance.

ℹ️ As freelancers, it's tempting to buy an off-the-shelf product to match a client's request. But, if we don't probe enough, we can find ourselves responsible for things we can't control for clients who cannot manage them and that were not actually needed.

Do all websites need a form?

The only form many personal and small business sites have is a contact form. There’s lots of debate around whether these are needed these days.

For

Avoids the spam of a public email.
Lets you collect structured, required information.
Can route messages to multiple or specific recipients automatically.
Makes it easier to automate leads into CRMs/databases.
Standardizes subject lines, making inquiries easier to manage.
Keeps users on the site rather than opening an email client.
Can log and analyze submissions for tracking and insights.

Against

Forms can still attract spam without proper CAPTCHA or filtering.
Users may find forms restrictive compared to writing a direct email.
Accessibility may suffer if the form is not properly coded.
Misconfigured forms may fail to deliver messages.
Requires technical setup and ongoing maintenance.
Risk of poor design creating confusing or frustrating user experiences.
Server or plugin vulnerabilities could open security risks.
Meeting GDPR requirements is more complex with forms.
If forms are too long or intrusive, visitors may abandon them.

Additional points

Many UX experts say an email address is a key trust factor.
Perplexity's search of studies concluded contact forms convert 3-5%.
Clickable Emails & Phone Numbers convert up to 38%.
Website chat converts at 33-50%.
WhatsApp message links can achieve click-through rates of 45–60%.
A phone number field can lead to a drop in submissions.
No research over disabled users preferring email or forms.

ℹ️ Links not included as the statistics were amalgamated by Perplexity AI.

There is certain to be bias, a difference in methods, and well, it's AI!.

If accessible, short, and the options do not overload the user, a contact form seems a good idea.

What are our form options?

Sending form data from a website safely requires us to have a client and server side.

The client-side is the HTML the user interacts with. We can think of it as the bouncer on the front door of a night club.

They do first checks. We have basic HTML form validation, but presently for accessibility, we typically need ARIA and JavaScript to make them fully accessible.

The server-side acts more like the security guarding the VIP section. It checks the data is safe to allow through and stops the riff-raff (spam).

1. DIY server and client side

Along with the HTML, CSS, ARIA and JS, we have to manage a self-hosted backend server. Perhaps using:

Serverless Cloud Functions.
Static Site Hosting Plus Separate Backend/API.
Email-to-Form Solutions via Mail Server.
Open-Source Form Server Software.

We are not going to do that!

2. DIY client-side with a 3rd party server-side service

The No Script Show is doing this for our (yet to be improved) contact form. As we are hosted on Netlify, we could use their service that offers 100 free form submissions per month.

Without adding Cloudflare's Turnstile CAPTCHA Replacement, we were getting about 5 spam emails a day, so without this, we would have used this up. We are presently using Formspark, listed below with similar services:

Form Backend Services
Service	Free Plan	Pricing Range	Submission Limits	Key Restrictions
Formspark	No free plan; $25 lifetime	$25 lifetime	50,000 lifetime submissions	Suitable for low-traffic. Could not submit in India. Unresolved!
Basin	Free trial	$4 - $108/mo	Up to 25,000 (plan dependent)	Paid plans for advanced features
FormBold	Free plan. 100 Submissions/mo	$5 - $59/mo	For personal/hobby use	Some features may be premium
FormBackend	Free trial	$5 - $50/mo	Unlimited forms/fields (paid)	Advanced features may require payment
Formzillion	Open source/free. 100 submissions/mo	$5 - $100/month	Up to 30,000 monthly	More suited for self-hosting
Web3Forms	Free tier. 250 Submissions/mo	$12 - $33/mo	Limited submissions (free)	Focus on email notifications
Formspree	Free limited. 50 Submissions/mo	$5 - $50+	50/mo (free plan)	Higher tiers for integrations/features
Formcarry	Free limited. 50 Submissions/mo	From $5/mo	Unlimited forms (paid)	Team features paid
FormKeep	Free limited. 50 Submissions/mo	From $4.99/mo	Restricted features (low plans)	Limited autoresponses, integrations

3. 3rd party with a client and server-side service

This, for us, is the most suitable option if we need complex conditional forms for bookings and taking payment. The downside is you lose control over page load, UX and accessibility.

Form Builders
Service	Free Plan Submissions	Free Plan Forms	File Uploads (Free)	Accessibility (WCAG)	Stripe on Free Plan?	Stripe Fee	Notes
Paperform	Free 7-day trial (Full access)	Unlimited during trial	Not specified	Not specified	Yes (trial only)	None (during trial)	Stripe/Paid features only after trial
Fillout	1,000/mo	Unlimited	Unlimited	Partial, improving	Yes	None	No added fee, just Stripe
Jotform	100/mo (10 Stripe payments)	5	100 MB	Full (2.1 A & AA)	Yes	None (max 10/mo)	Upgrade for >10 Stripe pmts/mo
Cognito Forms	500	Unlimited	100 MB	Full (2.0)	Yes	1% per Stripe payment	Unlimited pmts, 1% fee plus Stripe's
Typeform	10/mo	Unlimited	2 MB/form	Full (2.1 AA, direct links)	No	N/A	Stripe requires paid plan
Formester	100/mo	10	100 MB	Basic (no compliance claim)	Yes	None	No extra fee, just Stripe
Youform	Unlimited	Unlimited	10 MB/form	Not specified	No	N/A	Stripe/pro is paid only
FormNX	Unlimited	Unlimited	100 MB	Not specified	Yes	7.5%	Stripe fee drops to 0 on paid plans
Survicate	25/mo	1	Not specified	Full (2.1 A & AA)	No	N/A	Payments not supported
Tally	Unlimited	Unlimited	Unlimited	Improving, not fully compliant	Yes	None	Ongoing WCAG work, no extra fee
AidaForm	100/mo	Unlimited	Not specified	Not specified	No	N/A	Payments require paid plan
FormSmarts	Not specified	Not specified	Not specified	“Best effort”, not certified	Yes	Depends on plan	Stripe fees/plans vary, read T&C

Missing is the popular Google Forms which appears to value accessibility and can be extended via addons.

We will talk more about these in a future episode. Presently favoured is Tally because of the philosophy behind it. They are based in the EU and are proud to be a bootstrap company with a small team.

Also they do not by default load huge amount of JS. Formapp, was also not included here because it loaded 1.5MB of JavaScript over 49 files with a basic form. It has a focus on AI.

Paperform is added because David has used it due to a low cost life-time deal many years back. It is slow loading with over 0.5MB of JavaScript and presently is not yet accessible, but other than that good.

ℹ️Luckily, we can lazy load iframes so we can prevent heavy forms failing us on Core Web Vitals by putting the form lower in the page or containing it within a details element.

Transcript

[00:00:06] Nathan Wrigley: Hello there and welcome to the No Script Show. This is part of our series looking at components that make up a website. And today we're talking about forms. Forms turn the web from a passive medium into something dynamic and interactive. Without forms, users can't search, comment, access, private content, or shop online.

As it is such a huge topic, and the aim of this show is to keep things simple. We're gonna start with an overview. When we might need forms and what services are available to help us.

For static sites like ours, the no script show, we certainly need additional services to add forms, but this episode should also be as relevant to those on dynamic platforms like WordPress.

As always, if you head to our website, you'll be able to find the show notes. This time, there are no script show forward slash 25.

And just a quick message, if you like, what we do over here, don't forget to hit the subscribe button. My understanding is that if you do that, you'll be notified by YouTube when we create content and that will help us out no end. So and subscribe, they say, David, I understand. Okay, over to you.

[00:01:11] David Waumsley: Yeah. I had some trouble trying to, put together something on forms because, it's just such a huge topic Yeah. As you've mentioned. And, so I decided this overview might be a good thing because, a couple of things I guess happen with me.

One is that, I've been moving towards static sites and our own society is static, If we want anything dynamic with a server, then we have to employ a service for that. And we have got a contact form which needs fixing, on our site. But also, I've had clients as well who I've put onto static sites who need to then manage some more complex forms.

So I needed to start, and my assumption was, I know there's been a big, huge move. I. Think it was the Web Almanac, for last year, 2024 that said that in the top, I think it was 10,000 sites, there's been a 67% increase in the number of static and hybrid sites. Wow. Yeah, I know. So when I was first moving that direction, when I looked around, maybe it's just me bad at searching.

There wasn't much available in terms of form solutions now. And of course looking now, and I think this has been reflected since to be so many of them around. Yeah. In different forms. So I thought we'd look at those. And what other thing did I want to mention, I should say? I think we'll break this up, so we'll talk about this, but in.

A later episode, I think we'll need to do a video bit of content. Okay. Where we'll look at some of the form solutions. 'cause we'll need to explore how they look and how they behave. Yeah. and then we've got other things that we'll need to do as well for the show, which is, at some point, I think it's its own topic, is to look at search, search options for static and also look at commenting systems.

[00:02:54] Nathan Wrigley: Okay. Yeah, it it's freaky when you think about it that essentially. There's no interactivity on the web without forms, basically. I know that with things like JavaScript, we can move things around and what have you, but anything, or you want to submit something so that isn't just limited to the typical use of content forms, every time you go put something on, I don't know, blue Sky or Master On or X or Facebook or whatever it may be.

Basically interacting with a bunch of forms. It feels like half the web became forms when social media came along. You wanted to communicate with other people and the only way to do that was with forms. So very important, not just for contact forms, but the wider web as well. Shall I pop the show notes onto the screen?

Yeah, that would be lovely. Okie

[00:03:39] David Waumsley: do

[00:03:39] Nathan Wrigley: also, 'cause I'm going all white as well. Yes, it's very sunny where you are. You've definitely been illuminated. Fear not, you're only a small circle on the screen now, so it's not so important.

[00:03:51] David Waumsley: okay, so yes, show notes. Let me just get my mouse over them here. So I thought we'd just start by talking a little bit about when it comes to forms, expectations and clients.

That sort of is my title here, because we're in an era where, you know. So all know code products are being heavily marketed. So certainly my experience is that the clients I now get, they think that getting any kind of interactivity is a pretty easy thing, something that they'll be able to manage themselves and it doesn't always prove to be that way.

and a lot of clients that I've had have actually come to me for. literally a form really. A couple of people have come just for a, booking thing. they've seen that, they've had rooms that they've got for hire as part of their practice or something, and they want to hire them out.

And that's the main reason they've come to me is because they want someone to make this form magic happen.

[00:04:49] Nathan Wrigley: Okay?

[00:04:50] David Waumsley: so I dunno how much you've experienced this, but that my feeling is that there's a real sense that. With a lot of clients who are not that familiar with the web, it's that they see the, our forms out there and they think it's a case of build it and they will come Oh, in, in other ways.

So the form just having a form up there for bookings, then bookings will come because it's, yeah,

[00:05:11] Nathan Wrigley: this is What I, my experience was back in the day when I was doing client websites, was that exactly that you put on a form and the expectation would be that it would arrive, and often you'd get into conversations about, the, deluge of things and how they would manage it.

And in the end, you. You just had to silently and in some circuitous way say, I wouldn't worry too much. It's highly unlikely that it's gonna be, hammering your inbox all the time. Then again, you never know if you, if you suddenly go viral somewhere on the web, maybe the form will become the thing that brings your site to its knees.

Who knows? But, yeah, this whole thing of build it and they will come maybe. Yeah.

[00:05:53] David Waumsley: And I know, I'm one client who I really but it was, it's taken me so long to convince her because she says, a competitor down the road doing so well from their bookings form. But I said, but it, but they are, but it wasn't that.

It's because they put so much extra work into making themselves visible. on the ground advertising, the reason

[00:06:13] Nathan Wrigley: the form is getting filled is 'cause of all the other things that person is doing, which obviously dunno. Having said that, I am working with a friend of mine on a WordPress product at the moment, and we've made extensive use of a WordPress form solution for the support.

Which we anticipate, and it's not really a case of build it and they will come. In our case, we're trying to work out ways to prevent people filling in the form unnecessarily, if So we're putting all these different roadblocks in to say, have you tried this? Can you try this?

blah, blah, blah. I dunno how successful that will be. But certainly we're, trying different ways on the assumption that we really don't want people filling out the form too often, if

[00:06:56] David Waumsley: Then another thing that I think, some clients think is that, if they do have a sort of solution, for forms that they'll just be able to manage it, it'll just take care of itself.

And because I'm doing the static side and I now really, I think it's quite important for me to give the dynamic stuff over to the client so they can control that. So it can separate what I've built for them against other services. but there's a real, the same client who wanted the booking forms, it's become very clear over finding lots and lots of solutions for her that she wouldn't be able to manage it anyway.

She's just hates computers. She's just not, she wouldn't be able to manage to do the things, to change the appointments as needed or to cancel, to get back just to, to run it. So it, it was a good thing that we never. Built it and spent all this money, because I don't think there was a solution out there.

[00:07:48] Nathan Wrigley: I think it's this beguiling idea that you can offload stuff to the internet, and the internet will magically do these things. I don't know, for, in the case of booking. The idea would be that, everybody's on their phones all the time, so if I put a booking form up there, my calendar will suddenly become full.

they've gotta find the page to start with, and then the form's got to be not that confusing. And honestly, I am more and more getting to just gimme the phone number, just, and we'll get into that in a bit. But if I can find the phone number and talk to a human being, I will, try to miss out forms as much as possible just 'cause I know that I've then spoken to a person and that thing has been dealt with and I've booked the thing at 4:00 PM on Friday and now everybody knows that's happening and it's guaranteed.

Whereas with the, I don't know the online bit, I'm a little bit more, I dunno, I've been let down by people misunderstanding how their own technology works, let's put it that way.

[00:08:43] David Waumsley: Yeah, and there's another client as well that, that's what came up recently. I was looking for something where they can manage it because I've allowed them to use one of my accounts that I've got for form.

And this form needs to, they've got events and people need to pick an event and then, pay for that, which goes through to Stripe. And I'm using one of the solutions which we'll talk about later, but. What I realized is that I let 'em use my account to do that and they add access to it, but actually it really confused them anyway because it's got these conditional logics in it.

Yeah. So it's not that easy for them to work out. So I still had to go in and

[00:09:14] Nathan Wrigley: sort that out. So figure it all out for them. Yeah, they can get very complicated. very quickly. So what, on the front end might appear really obvious? you've ticked a box and then a bunch more fields become visible.

The, logic behind that can get infuriating. Pretty quickly. Yeah,

[00:09:31] David Waumsley: so I, and I've just listed a few things which, which will be typical for this show to mention, but, what clients are less likely to think about is UX and accessibility of the forms that they're gonna use, whether they're responsive to today's devices, where it needs to be fully responsive really, isn't it?

We can't just go to standard sizes. the impact that the form solution has, on. Page load and in turn, SEO and the potential cost of support, maintenance for the forms that they might want on their site. So I think, yeah, that is generally not considered when a client comes. And I think, yeah,

[00:10:07] Nathan Wrigley: and may the, maybe the subscription model as well, they've got to pay the yes of that, for, having a plan on whatever service that is as well.

You've done a lot of work with, ai, I think, to draw out some of that, which we'll get to later.

[00:10:22] David Waumsley: Yes, exactly. I think, certainly I did that when you've got a client in the early days and that you are just keen to give them what they asked for, so you'll rush off straight away to get something that, we can't build.

'cause we're not, back and front end developers, who can do everything. so we're gonna look for a solution and then often without probing enough, it's, Very easy, I think, to end up providing a solution that the client really can't manage themselves and haven't really thought about and may not be needed in the first place.

Yeah. that's what's happened with the people who came to me for bookings. They've actually never had a bookings. That's what they came to before, and they've been talked out a bit because what they needed more than anything was somebody to come to a website they owned, That was the first hurdle.

[00:11:10] Nathan Wrigley: Get them. Yeah. the booking form will not be viewed. Yes. By anybody. So it's pointless. But there is this sort of beguiling nature. It's the whole build it and they will come thing as well in overcomplicating what you've got. Yeah. so as the purveyor, I don't know, let's say that you've got a hair, a hairdressers or something like that.

You, you provide 50 different options and you wanna know exactly what they want and what time they wanna come. And ada rah, before you know it, the form takes 10 minutes to fill out. And actually all you needed was date time. And your name and that's it. that's really all that you needed, but you overcomplicate it because you can.

Okay. Do all websites need a form? Is that where you're going to now? Yes,

[00:11:55] David Waumsley: I think so. Because this is a ongoing debate because I think you see it somewhere maybe on Reddit, every year, I think you say, do you still need forms on your basically small business sites? The sort of brochure sites as people say in 2003, four, five, it keeps going on the debate.

And, so I thought we'd just, I've summarized basically what I've seen in all of these debates. The, can I just

[00:12:19] Nathan Wrigley: interrupt you there? Sorry. because what you're about to say, if it's true, I never knew. Any of this. Okay. And it's so interesting 'cause I, my answer to that question would invariably be yes, it can't hurt.

You might as well have a contact form, but what you've discovered here, again, caveats if it's true, and let's hope it is that, I'm so wrong. I was so wrong about that. So sorry I'm interrupting, but I just thought it was an important metric. Keep keep. watching. No, I

[00:12:51] David Waumsley: think that's interesting. Your, I would've, I think I would've said the same, but now I question it a lot more.

one reason I question it is because, I'm keen to promote the indie web, the fact that people can just manage their own H ml and CSS and keep it as simple as possible. And as soon as you get into forms. Then in some form or another they're onto dynamic servers and that makes the whole thing more complex.

So if you can just use third parties and avoid the form, then that's great. And also, forms are such a, one of the things that I've been doing, which we'll talk about later, is I've been really jenning up on how to make a good form. I've been reading a book by Adam Silver, who's, on, as well as some other people on accessibility and forms get really complex to do them right.

so Can we avoid them all together? yeah, the debates are going on. I suppose it's no different from, is SEO dead in whichever year? it's the same sort of thing. But, yeah, I'm thinking about just the contact forms with this really on the sort of personal and small business sites.

That might be the only dynamic thing they need on the site. If you put a form and do they actually need it? So the people for adding a form will generally say it avoids the spam of a public email. It lets you. Collect, structured, structured and required information, you can route messages to multiple or specific recipients automatically.

It makes it easy to automate leads to, CRM or databases or whatever you use there. Standard subject lines is something that you can control with that one. Making inquiries easier to manage. It keeps the user on the site rather open A email client or something like that.

[00:14:34] Nathan Wrigley: yeah.

[00:14:35] David Waumsley: And you can log and analyze the submissions for tracking and insights.

So that's the fours and they

[00:14:41] Nathan Wrigley: all make perfect sense. None of that is weird. And, I think I was, I would've said all of those things without thinking about any. Of this stuff, which is about to come. Yeah. Yeah. And especially the additional points. So anyway, sorry, carry on.

[00:14:55] David Waumsley: Yeah, no. I'll do the gates list that I've got here.

Forms can still attract, spam anyway, so you need a proper capture. So you've got another third party in there or some form of filtering, so that's another service you rely on. users may find forms restrictive compared to writing a direct to email, so they might not wanna just follow that message, but they might, I dunno, they might, Want to add more than your form allows. Accessibility might suffer if the form's not properly coded, which in most cases it's not. misconfigured forms may fail to deliver messages. It requires technical setup and ongoing maintenance. With these things, of course, and a. Even with the services I've had, we've had flaws.

So you introduce that there's a risk of poor design, creating a confusing or frustrating user experience server or plugin vulnerabilities could open up security risks. Meeting GDPR requirements is more complex if you've got form 'cause you have to highlight what's going through that way. And and also if you make your forms too long or, intrusive visitors may abandon them.

And I got some extra points to try and Balance these out. So this is the fascinating bit. This is the bit that I just

[00:16:07] Nathan Wrigley: didn't know, and I'm so curious about this. Go on.

[00:16:10] David Waumsley: Yes. I think everything I say has gotta be taken with a pinch of salt because some of it has been generated by perplexity ai, and amalgamated some of these statistics.

So bear that in mind. Okay. Let's just

[00:16:23] Nathan Wrigley: put all of that to one side and assume that AI never hallucinates about people and all of this is true. I'm sure there's a kernel of truth in every one bit of this, okay.

[00:16:32] David Waumsley: Carry on. Okay. there's definitely a case that many, UX experts, and I've actually put link to the, Norman Niland group or the Neil Nielsen Norman Group.

We never remember to, but anyway, whether they're talking about the, email being a, key trust factor, so one of those four was the fact that you can obscure your email address and just use a form so you don't get that spam. But to be honest, if you do that, it's quite a key trust factor. People want to see an email address anyway, so that's gone for one of the four.

And then there's some, there is amalgamation from publicity of the studies, so there's they, and I've seen this in a few places actually, that the forms themselves, and of course it depends what the situation is, but the form itself only converts at about three to 5%. These sort of surveys that are shown, which is not very high, is it?

And when you look at clickable emails and phone numbers, they can be converting up to 38%. Of course, context is all important that with this. But, website chat, I think a lot of these studies are presented by people who have a product, a website chat widget. Yes. But they come from something like 33 to 50% and then.

Also WhatsApp. And I think, there's obviously people who want to promote that. Those, message links that you can get where you can click open to chat through that, they can achieve rates of somewhere between 45 and 60%. That seems very extreme and I'm not sure if I believe that, but it's just interesting when you look at it, when you get, I asked it in a few different questions actually for ai, and I got something very similar, which really put the form, the contact form much lower than all these other.

methods of context, so do we need it? And there was a few other things that, I found out as well, from a few different places that phone numbers, fields can drop, submissions. So if you are adding that one, even if it's optional, just someone seeing, particularly the youth as we were talking about earlier, if they see a phone number being required or, looks like one's being asked for, that will put them off.

[00:18:38] Nathan Wrigley: interesting. Anyway, sorry, you finished the bullet points and then we'll go into, oh

[00:18:41] David Waumsley: yeah, there's only one more, which is just there was no research. I was looking for research to see whether I thought disabled users for accessibility, whether they would generally prefer to click on an email with a familiar system that they use or over a form.

And of course, obviously a non-accessible form. The email's going to be better for them, but there's no real research into which people prefer. There's just generally a lot of people. May prefer what they're familiar with, so they would probably go for the email clickable link rather than the form.

[00:19:10] Nathan Wrigley: There's so much interesting stuff in that, so I'm just gonna pause it in the way that I see. So first of all, that the, again, let's just assume it's true, if it's wildly inaccurate, apologies. But the low conversion of, forms. Somewhere in the region of 5%, let's go with that, is amazingly low.

if you present that 20 times, one person will fill it out or less in this case. So that's remarkable. But also the, clickable email and phone number converting somewhere in the region of 35 to 40%. That's also curious, but that really does jive with me because if I see the phone number.

Okay, so first of all, let's assume it's like some local business. I'm gonna ring that a hundred times out of a hundred. I'm not gonna fill out the form if it's possible for me to speak with that person. I've decided years ago that's the best way to conduct almost any negotiation is to speak to the person.

So I don't know if it's a plumber. I just wanna know when don't you come in. Let's get it all sorted out. I'll talk to you, we'll establish trust. You can figure out who I am and I'll tell you where I live and, I'll get all of the details out. And it's because of that conversation, it's because something surprising will inevitably come up.

And I, wanna know that I've given all the detail in all of its fine, gory detail, whatever that may be. And I've also decided, that I can get a across in one minute, probably what it would take me 20 minutes to write out in an email. So that whole phone number thing is brilliant. Second email.

Yeah, I'm all about that as well because it's this, I can put all of it down. I'm not constrained to a field. you've gotta say all the thing, you've gotta list the things here. What's the reason, what have you I just wanna explain the reason in this one big email, text box area, if you like.

And so that works for me. I'm, not so sure in, my case. This statistic about WhatsApp and website chat. That doesn't ring true for me. But obviously, the why I, try not to use those things. If, possible, if they're there, I will use them. Not if it's a bot. As soon as I get the notion that it's a bot, my first thing is can I speak to a human?

I just type that in and see what happens. so those kind of don't work for me. But that's the one about the, if you just put a form field asking for a phone number, that just, that it drops submissions That's so curious to me. Because I can get that as well. I don't wanna give my phone number up as a part of this exchange, and I don't know if you do the same thing.

I often put a incorrect phone number in if it's required. I'll just make up some random phone number which satisfies the length of digits. But I don't wanna give some random person my phone number because I don't know where that's gonna end up. Yes. and yeah, and then obviously the, the bit about, disabled users and what have you at the end.

So all of that to me is basically extraordinarily fascinating. And the whole chat bot thing and the clickable email and phone, I hadn't given that any thought at all. But it would definitely skew my advice to somebody going forward, depending on their need. if it was a local business website, I think that's telling me, promote the phone number more or less, above almost anything else.

[00:22:39] David Waumsley: Yeah, it's, it's interesting 'cause, context is gonna be important, how these are designed. I, do believe the loan number on the contact forms because of the fact that I've seen. Roughly, with some statistics, how many people have gone to a contact form but not filled that in? Yeah. So that doesn't surprise me that it's so low because they've gone to that page a lot, but very few submissions come from it.

but the other numbers which are saying how high the high numbers are, the ones that I don't trust so much.

[00:23:07] Nathan Wrigley: So interestingly as well, I think the device that you are visiting that page on will really be critical. So I'm far more likely to fill out a form if I'm sat. With a keyboard Yes. On the phone because of the pain of, typing anything into a.

Form field on a phone that probably, it is probably part of it. And as more and more of us are viewing more and more of the web online with a mobile device in our hand, that probably skews us away from it. I do wonder if Form Fields had an audio option where you could, click a button, record some audio and send that a lot, I wonder how that would, work.

Never really thought about that. You can do that.

[00:23:49] David Waumsley: Anyway, it was just, most of this, it was just me thinking, do I need to put a form on everybody's site? And I will just mention just on the WhatsApp, which I hadn't really thought about before, but because people are so used to that as a way of contact and the way of being able to share imagery, it very useful for where I've put it on, electrician site on that, because.

What he's saying is that, people often want to show him a picture of what needs fixing.

[00:24:15] Nathan Wrigley: Yeah. So, I have done this, so I have a, I use a plumber and, w we know we've known each other for many years now, but that is the modus operandi that he has. And so I'll explain that something is broken.

Yes. And it needs to be replaced. And so the immediate thing is can you show me a photo of the bit that's broken and that must make his life in immeasurably more straightforward? 'cause immediately he's captured, okay, I know what that job involves now. Whereas before he'd have to show up, then probably go and get the part that.

Demonstrated was needed. So there's two journeys there. Whereas the photo, the photography bit there probably cuts that out. So yeah, that's really interesting. Really interesting. Yeah,

[00:24:58] David Waumsley: it's just made me think a little bit about what I think I've come to the conclusion that, and interesting enough, I was talking to Paul Lacey, who's been a guest on the show and is a good friend of ours, and at the moment he's doing some designs for the.

Page builder that he does some occasional work for. He is doing some, pages and I looked at his contact page and I thought, although were quite well thought out, he's got different ones. And that contact pages as the Nielsen Norman Group or Norman Nielsen Group say about contact pages. It should have all the sort of things that you might need if you're going to make contact in any form.

parking and where they are on the map and all that needs to be included. But on his, and that he made very clear is. Telephone numbers, a sort of little box that was very clear and what needed to know about telephone and what you needed to know about the email. And then the contact form followed later and I thought that layout, just the design of it, seemed to be perfect for this.

So I put it, but I think, you could easily skip the contact form on some sites and not, I asked the AI in various forms, the question, do you think, given these bits of information here, whether, a contact form would lose, not having a contact form would lose you any business. And they generally came out to the fact that they didn't think it would make much difference.

And in fact, another argument would be that you can overload people with too many options and then lose people that way. Yeah. And also it means that you've

[00:26:21] Nathan Wrigley: got to man several options, haven't you? So if you present a phone number. And an email address and a contact form, and I don't know, WhatsApp as well.

There's four places where you've got to be visible. Whereas if you, put it down, I guess the contact form provides convenience, especially on the side of the business that's got the website, because they just have to man that inbox, don't, they just have to keep an eye on that form and, yeah. The kind of data that they're gonna get is predictable.

So it's definitely got its benefits. but I always went with the, the options on the Contact us page. I would, always list out phone number, address and things like that, but I, didn't apply the amount of thought that. Paul obviously has some in this scenario, but that's interesting.

[00:27:04] David Waumsley: Yeah.

Sort of laid out in a way where it's not just a bit of text, which you'll skip over and then see the big form, which

[00:27:10] Nathan Wrigley: Yeah.

[00:27:10] David Waumsley: Is the eye. Most is actually made the telephone and the email capture eye more than the form the forms. Okay. Secondary and I thought that's probably how I'll do it with most of my type of clients.

obviously. But some people, they need, there are circumstances with people where they do need to collect that into Yeah. a system, Yeah. Google sheets or something. So a form is needed. yeah. Okay. So, let's, assume, ah, we need a form of some kind. Yeah. Let's assume that, shall we?

Okay. form options. So I put some stuff here 'cause I needed to get this straight in my own head. let's start with some sort of basic facts. that in order to be able to send some data via a form on our website safely, we do need a client and a server side. Working. We need that sort of dynamic server on there.

So I've, I might as well read the notes out. So the client side is, for anyone who's not familiar with that, is the kind of HTML that the user interacts with. And we can think of this, I like this analogy. I, somebody else gave me this one that we can think of that as the sort of bouncer on the front door of a nightclub, but it's doing the basic, yeah, it does the basic checks.

And if we're creating our own forms, then it's up to us to make sure that people know when they've made a mistake before they. Click the Submit Sore out there doing those sort of safety checks, but they're just basic ones. And then the server side, acts as, the security in the club, guard in the VIP service.

So it is gonna check whether the data is safe to send onto your email and whether it stops, some of the riffraff getting into that special area. So that's the spam, that's, we need to connect the anti-spam, we need to connect that to some sort of server in between. Be right. So I like it.

I quite, yeah, I like the analogy. The, most interesting thing for me though, is what I've learned, and we'll talk about this in another episode, is that even though HDML form validation comes built in, it's probably not good enough to say it's fully accessible for everybody. okay. 'cause it's not going to read out without using RVO and JavaScript.

It's not going to tell somebody necessarily. When they've done it in real time or point them when they need to go, if they need to, Correct. An email address or something. So

[00:29:27] Nathan Wrigley: do you know if that's an endeavor of let's say, browser manufacturers to make

[00:29:32] David Waumsley: the,

oh gosh. The service stuff? Yeah.

we, didn't get it until H ML five, although that's very old now. We didn't have that and we needed JavaScript. there has been that move, but I don't see, there's much that's changed to alter and make forms easier. Basic, contact forms, I think, because the majority of people only need that.

And I think, yeah. Yeah, because I think. It will correct you automatically if you're do nothing with the html. It will correct you to say you haven't put an AT sign in your email, but I don't think it pulls you out if you, yeah, if you've left the dot out from, dot com or whatever your email address end is.

Yeah. I don't think it'll call you out, so it does allow you to. Anyway, it's for another time, but I think when we get to, yeah, this one. Okay. Yeah, Sorry, derailing. So yeah, so our options are, firstly is to either DIY, the server and the client side. So we write the front end code and the backend code, but we're not going to do this 'cause this is really going to mean that we have to host this.

Backend server. So we can do that either, with serverless cloud functions we have these days, we have more choices. We could do it with static host plus their own backend APIs. We could do it with, email to form submissions via mail server, or we can use some of these new open source, server softwares to be able to manage this stuff.

But that's way beyond me. Certainly. I think it is for you Nathan, as well. yeah.

Yep,

Yeah, I think you are better at this kind of stuff than I would be, but anyway, I'm not touching that. The next option then is to go where we've gone with our, 'cause we have got a contact form. It's not very good. that's on our site.

And, that's used the next option, which is DIY, the client side. So I've put the HTML in there. And we use a third party for the server side. And if that's the route that we want to go with this one, then there's a load of services, which, for those who are listening to this, won't be able to see.

But if you go to our show notes, you'll see there's a big, table here. We are basically ones that fit into that category. So both you and I, Nathan, we bought, didn't we? Form Spark, and that's the one I've been using.

[00:31:37] Nathan Wrigley: Yeah. So this is a, it doesn't do any building of the form. You have to build the form yourself.

you have to either write the HTML with the form fields and the submit button and whatnot, and then you connect the submit event to their. I, can't remember how it works. You basically copy and paste some endpoint, don't you? And that data then gets sent to Forms Spa. It worked pretty well.

it did, everything. Obviously it's not check, it's not sanitizing things, it's not checking for errors and what have you. But the, submissions once. The end point had received it did what it said it would do, which would be forward it on to. Yes. But it it was technical. Not tremendously technical, but there was a little bit of a learning cover.

I certainly wouldn't have thought a client would like to be involved in any of this process. Yeah, definitely the sort of developer's job, but it worked. It was fine. And it was cheap as chips. Yeah. Still going I guess. 'cause I've stopped using it. Yes, it's still

[00:32:34] David Waumsley: going. Yep. from personal experience, I, you're not gonna get much support from that.

this is a one-off, it gives you 50,000 lifetime submissions for this fee of, 20, $5. And that just lasts as long as it needs to us. And on my deal that we got the same as you, I think, where it keeps adding each month. 'cause it was a slightly different deal, which we got there. So I'm never gonna run out of forms there.

My only beef with that particular thing is that once I, contacted them through support and never got an answer, the second time I did it, I did get an answer, but they never resolved it. And that was the fact that in India on my, IP address, which is actually, the state, Broadband service.

I couldn't submit. It wouldn't go to them. It failed, and it's constantly failed. They had to put a VPN on to make it work. Now, I'm not worried about that because I don't think the couple of clients who are using that at the moment are gonna lose anybody because, but we could be, because Yeah, that's

[00:33:34] Nathan Wrigley: not a great thing though, is it?

And especially, no, if the support, 'cause obviously you, they're obviously doing an IP. They've obviously got some IP blocking somewhere in there and who knows.

[00:33:45] David Waumsley: Yeah. And I think they bounce off other people's services as well, don't they? To Yeah. Send these things. I dunno what that was about, but otherwise it's worked pretty perfectly for me.

but the rest of them are all the same. there's one called Basin, I think the well-known one, I'll just skip down the chart, was, forms Spree, I think is one of the earlier ones, meeting that new demand for static sites. And 50

[00:34:09] Nathan Wrigley: submissions a month on Forms spree for free, and then you're onto their paid tm.

Yeah,

[00:34:15] David Waumsley: to be honest, there's nothing, I won't list them all. maybe I should, I list them all out for, I'll just say 'em.

[00:34:20] Nathan Wrigley: Shall I just read 'em all out loud? So you've got forms Spark Basin. There's a common pattern here. By the way, they all have ingeniously titled names. form spark basin form, bold form, backend form, zillion web, three forms, form spree form carry.

And form keep, if I was in the SAO business, I think, I think there'd be some conversation to be had here. but there's loads of them. Yes. And I bet there's loads that you didn't find. 'cause they didn't start with the word form.

[00:34:48] David Waumsley: Yeah, I know there were some that I've missed off on this. So they've all offered these sort of like free limits.

50 50, 50. There's one form, zillion offering, a hundred form bold offering a hundred for the free. And given that you get a hundred, if you use something like Netlify, which we can use as well, you get a hundred with that, they're not really offering much other than the fact that you. You may want some of the individual services that they offer on the backend, the way that they might connect up to other things, like maybe directly to Google Docs or something if you, or spreadsheets.

But they all behave differently. And I think most of these are exactly the same thing. You write your HTML, you put this one line saying to submit to this address that you've got, and that's what it does. So that's them pretty much. And then the one that's. Interesting to me is the third one, which is really the form builders we're talking about where we get third parties to do both the client and the server side of

[00:35:42] Nathan Wrigley: things.

So this is

[00:35:42] David Waumsley: much

[00:35:42] Nathan Wrigley: more SaaS service login set up your form. Yeah. They make your form code into a website and you're done. Yeah.

[00:35:48] David Waumsley: Yeah. and this is where I was blown away with what choices are, and I know I haven't included everyone that I came across here. and I got. Certainly AI struggled to find all the ones.

So obviously this is hugely competitive. the ones that I thought about on our list of these, is, oh,

[00:36:08] Nathan Wrigley: Shall I just read them into the record again? Just form Oh yeah. Read them into, so we've got paper form, fill out jot form, cognito forms type form. You're gonna have to scroll it. There you go. Thank you. Forster U Form nx. Oh, that's a nice title.

ate tally ADA form and form. Smarts I've never used. Oh no, I have, I've used paper form, the one at the top, but the others I don't believe I've ever used.

[00:36:32] David Waumsley: Yeah. And you, you were mentioning to me that you'd use Wooo from Oh yeah. Wooo,

[00:36:39] Nathan Wrigley: wooo, wooo, whatever, W-U-F-O-O back in the day. Yeah. That was one I tried out when this whole thing was brand new.

this allowed you to do all sort, it was clever. It was a really in innovative product. But now I think all of the products have got all of the features that they have. Yeah. and I also actually downloaded a few. paid for scripts which did things like fu So I downloaded a whole bunch of things which mimicked what these do, but it was self-hosted and in some cases it was open source.

There was one called Mac Formm, MACH Oh FORM, I dunno what it's called now. But yeah, there was that as well. yeah. what are you using? Are you using one of these on our website then?

[00:37:22] David Waumsley: Yeah. no I'm not because the, we've only got our one contact form. Oh, of course. Sorry, you've already said you were using the, forms spark thing.

Yeah, I have for a client, I've been using the paper form because that's the deal I've got on that. And, it works well. But, in fact, on my list here, 'cause I, set AI on the. The, task of trying to find out what was a, what was accessible, that was a key thing for me and, what we could get for free and whether they could connect up to Stripe for free Okay.

On that, because that's what a client particularly needed at the moment, who I'd put on paper form. Now, the problem was, is that. With the deal that I got, it's my account. And up to that point I could give him, 'cause I'm not using it for any other site other than this client. 'cause it was there and they've now put a security check.

So every time you try and log in, then it sends an email to my address. Oh, that renders that whole thing. Absolutely. Yeah, exactly. So we're looking for other solutions and that's really what set me off on this one to

[00:38:26] Nathan Wrigley: see I've actually overcome that problem in the past by setting up a filter. In my, email client, which then forwards that email to them, but just, it's a

[00:38:36] David Waumsley: real clue.

It's not ideal. I thought that very thought and I thought, no, let's have a look, because I had a bit of an issue Anyway. I put it on their own domain because it's a heavy load, and that was another thing that's not on my chart. If you are, if you're looking at our show notes, it's all there. I haven't included it because I think we'll do an episode.

We'll come back and we'll look at all these when I've tested them all out and see, you know what my preference is. I've already got a preference so far, but I haven't tested them all out and spent some time. 'cause one thing that's quite interesting to me is now I signed up for the free accounts for a whole bunch of these who's.

Filling up my e email box with all sorts of, it's free, but not free of spam. No. And so jot form, which looks really good because it's, fully accessible and it does a really good job actually. It's beautiful actually how it works on their forms. Because if you've made a mistake, it comes up with this big red.

thing on the top, but it also announces to somebody using a screen reader, that they've made an error on where to go to and where to skip to and all that. It's really good. Oh, that is good. Yeah. Yeah. And they've got a free amount. You can, but very limited. For Stripe payments. You can only get 10 for free, but there's no extra charge on that one.

And you've got a hundred. Per month for them. So they look really, good. But I'm totally put off by the fact that they have just every day sent me some sort of email trying to Okay. you're the product, David, you are the product. Yes. Yes. and the same thing, I'll just quickly mention as well you form, which I didn't really like.

I have tested it out. I like the way that it's designed and the fact that it takes one question at a time and it'll move to the next screen and stuff. All that. Beautiful, but totally inaccessible on that one. I tried it with a screen reader, just, you don't know where you're going at all. So that's outta the question.

They call those conversational forms, don't you? Yes. One question

[00:40:29] Nathan Wrigley: and then you slide to the next, and I, to me it's nothing like a conversation, but

[00:40:33] David Waumsley: anyway, there you go. Yeah. we'll. We'll touch on that. I think having that ability to do that is a great thing, and many of them do that. And I think, as I say, I'm reading this book by Adam Silva's, and he's very keen on the fact that it's very good for, usability.

it does kind

[00:40:48] Nathan Wrigley: of lock you into the one question at a time thing. Yeah. But the bit that I don't like about it is that it disguises how much of the form is still to come, if So you might embark on a form and four minutes in you're like, I've no idea.

[00:41:02] David Waumsley: Exactly. If you know the stages and where you are going on this and that's, but then you don't know what the next, when you go to the next slide, effectively with these things, you how many entry, so you might think you are 90% there.

And then the last one's got,

[00:41:17] Nathan Wrigley: they get over the problem with things like a. Progress bar or something. Yes. bound to the top of the screen, but I'd still just rather see the form, the whole thing and work it out for myself.

[00:41:26] David Waumsley: Yeah. Anyway, paper forms, it's, it was easy to set up. It's logical, it's got lots of options there if you are, but there's no free option on this one.

But it wasn't accessible and they don't even mention anything about accessibility. And it was still, although it's got a lot lighter, it was still heavy. On the load. Okay. So I put it on their domain for his site because I didn't want it ruining the core web vitals, which were all pretty much close to a hundred, across the board.

And you only need one page that's listed on your site that's out and that can throw your whole fail, can't it? So, we put it on its own place there, but. We'll come back on this one because there's not much to say other than the fact that, you do get some more generous offers. And I think the one that I particularly like at the moment is Tally.

So is there, okay, this is new to me. I've not

[00:42:16] Nathan Wrigley: come across this, but very nice looking website. They've done a great job with that. What was it that you liked so much?

[00:42:23] David Waumsley: I like them. I like, the way that they talk, their blog, what they're talking about. They, went out on purpose to do it because things like these things to get.

Some of the things that you might need gets very expensive. you're on $25 per month to get, you get something free. Soon as you overstep it, then it gets really expensive and they've gone out to not do that, to make it as free as possible. And they've been very open and transparent in the blogs that I've seen about how they're making money on it.

So it, it's unlimited. For everything here, but you don't get some other things that you might want. remove the branding of course. And also, if you want to be able to style these forms with your own CSS, then you are limited on these kind of things. But they say they only need, they've been running basically on 2% of the people who are, their customers are paying for the pro version and that's enough for them to run their small business.

And I like them 'cause they're based in the eu. They're very open. They, They very much committed to a small group and bootstrapping rather than using venture capital, which I think, that's appeals to me anyway. So aligns with your, yeah. Fibers, shall we say? Your moral fibers.

Okay. Yes. Good. And what did it, and I missed it, completely missed it. I only caught it because I watched a YouTube video by Al Adam Silver and Become a bit of an expert because he is advising people like, gov UK and BBC and people like that. And the fact that he, obviously, he builds his own forms, but for one thing that he needed for his personal site, he used tally forms for this intermediate thing that he needed.

And I thought, if he's using it, then it's gotta be you. So a stamp from him. Good, Yes. Yeah. So that was basically it. And what else? There was some, as I say, there was some that I didn't include on this formed apps, because the fact that, and this is, I think. Might be common when I've checked them all out, but it was loading for the most simple form, which was basically your name, your email, and a message and nothing added.

We, we got, just in JavaScript alone, there was 1.5 megabytes over 49 different files for that. That was on form app, was it? Yeah. Their focus is on ai, which a lot of people are moving towards, so that's another off-putting thing for me personally, if they, okay. If they want to encourage you to use AI to create your forms now.

As I'm learning, there's a lot more to build in a good form and AI's not going to do a good job on it, so, those ones that head in that direction are not for me personally, I might suggest some of these just because of their ease. If I'm passing this on to a client and I say, that's your responsibility, this can sit on their domain.

we will just put a link on your site where they can do whatever they want there and book you and pay and all that and you are taking care of it, then that's fine. It doesn't interfere with me, and if they find one of these others a lot easier, I think probably. Many of these will be a lot easier than Tally, which is my favorite.

[00:45:25] Nathan Wrigley: yeah. So there's a whole load of choices there. Yeah. So you feel that a piece of content in the future will be a more deep dive into the features and what have you. So you've obviously put a table together there. Yeah. But deep diving in on video to how these ones fare against each other given, I don't know, you maybe do a price comparison or you maybe do a JavaScript load comparison or something like that.

[00:45:46] David Waumsley: Okay. Yeah. Okay. I think it's amazing what we've got now these days for these form builders that can, do payments and do all these really complex and, a hundred per month of submissions. So as long as you can control spam, Which is the other side of it, that's the problem I think with a lot of them that give you a hundred, or netlify, I knew where I put our form, we were getting at least five spam emails a day.

that's over your a hundred used up straight away. So if you don't control that.

[00:46:15] Nathan Wrigley: Yeah, some kind of capture like, I don't know, cloudflare's turnstile or something like that. Just in between it and the submit form. yeah. Okay. Yes. Okay. so there we go. Do you need a website to have a contact form? I don't know.

But certainly they're there, they're available, they can be used. Is that it? Are we done for today, do you think?

[00:46:34] David Waumsley: Yeah, if you were using one of these, one, just one little thing that I discovered, which I thought was quite interesting is say Google Docs, which I didn't, me, sorry. Google Forms, which I didn't mention earlier.

Google Forms. Yeah. it's great. You can embed it. You can't do much. It is good for accessibility, but if you wanted to put it in your, embed it in your, site. It downloads all of the fonts that are available in the form. So it becomes very heavy download.

[00:46:59] Nathan Wrigley: Yeah.

[00:47:00] David Waumsley: But you can get away with that one, which I was just playing around with because of iframes allow you to lazy load.

Oh, the call my vitals is not hit. Yes. If it's down in the bottom of the page or you put it in, details and summary. Okay. So it only appears when it's clicked on, so you can overcome that. Page load difficulty. So yeah. Okay. So the drawback is it's downloading

[00:47:22] Nathan Wrigley: all the fonts. The pro of that is you don't need to load the form Yes.

Until you're ready to see it. Okay. So from an SEO hit, that might not be quite so bad. Still curious that it's loading all the fonts you mean? All the fonts?

[00:47:35] David Waumsley: All the fonts. I think all the fonts that. I wish I'd brought it up on here because I did do a test on it, but it was all of the fonts that, certainly were in the forms.

God knows why. I told you, I did question this and got AI to say, why on earth did they do this, and is there a workaround? And, they gave a plausible thing to me with my small brain when it comes to backend stuff about why they did this for everybody's, to. It's just so it's available to everybody.

I don't know. You would imagine

[00:48:08] Nathan Wrigley: though, that you only need the fonts that you need on the

[00:48:11] David Waumsley: form

[00:48:11] Nathan Wrigley: that are being used on the form, but it is,

[00:48:13] David Waumsley: it's ridiculous with Google, isn't it? It's the same with YouTube. We have to take all these extra precautions to stop it. They're the people who have really got us to think about page load, and they're the people who make it so difficult for us.

Make it difficult to achieve it. Difficult. Yeah.

[00:48:26] Nathan Wrigley: The the, the, hand doesn't know what the leg is doing or some. Thing like, yes, I don't remember. Okay. In which case, I will remove the screen share and I will say thank you. So that was our first look at forms in follow up episodes. Looks like we're gonna be doing, yeah, content in which we'll describe what each of the forms does and what have you.

and so I guess. We'll see you next time. It is. Oh, thanks for that. Oh, like I can subscribe. David, let's say that one more time. If you enjoyed this. Yeah. Please, hit the subscribe button onto the YouTube video and that enables YouTube to, to notify you when we produce new content, which would, be nice for you and

[00:49:04] David Waumsley: nice

[00:49:04] Nathan Wrigley: for us.

[00:49:05] David Waumsley: Yeah, I think generally, because we don't, we're not promoting any, we've got no commercial element to this. to be able to keep going with this one, we need to feel that people are actually,

[00:49:15] Nathan Wrigley: yeah. I haven't told you about my new SaaS service. It's called Forms Bank or something like that.

I haven't told you about that. We'll leave that for the next episode. I'll, review it on that, bomb. Shell see you next time. Yeah. Cheers byebye. Bye.

Don’t quote us on this!

2025-08-20T00:00:00Z

Show Notes:

Where we quote

In testimonials for credibility and social proof.
In blog comments for engagement.
In "pull" quotes for style and highlighting.
In articles to support our arguments.

The difficulty with semantic HTML

We have the <blockquote>, <q> and <cite> elements, but the specifications have changed over time and don’t entirely line up with our design patterns.

Michelle Barker's article I’ve Been Doing Blockquotes Wrong highlights how difficult HTML can be at times.

The official HTML specifications are with the Web Hypertext Application Technology Working Group (WHATWG). This tells us:

Quote elements are for external sources only. Presumably to the page rather than the domain?
The cite attribute is used to specify a URL source. This is invisible to humans and most screen readers.
The visible cite element is for the title of a creative work only and should not be included in the quote element.
A blockquote is a sectioning root. It marks a distinct part of the content, but not part of document's outline as with sectioning elements (such as aside, article, nav).

This means:

We should not use quotation elements for (self quoting) pull quotes.
We should not use cite elements for authors of quotes.
The citation is orphaned from the quote. Not ideal accessibility.

It's hard to find consistent advice

Many expert sources have encouraged us to use blockquotes in ways that seem technically incorrect including platforms (code example).

Haydon Pickering suggests placing blockquotes and cites within <figure> and <figcaption> elements.
Adrian Roselli recommends against using figure as it's verbose for popular screen readers. However, his preferred approach breaks WHATWG rules as he uses cite within the blockquote and uses them for authors too.
The W3C design system uses a <footer> element to cite an author Unlike Adrian Roselli, they do not use the cite element because of the WHATWG specifications.

Design systems for local governments reveal many other variations. Probably due to changes in the original W3C documentation that was not carried forward to WHATWG. The W3C essentially defers to WHATWG's HTML Living Standard as the authoritative specification.

Our approach to the HTML

We don’t have the standing to influence specifications like Haydon Pickering, Adrian Roselli or Michelle Barker so we'll stick to WHATWG rules to be consistent from here on (until told otherwise).

Testimonials

The typical pattern is the external quote followed by the author's name sometimes with a link to their organisation and image of them (example).

For this we will use the W3C design systems approach of not using cite, but putting the author credentials in a footer element within the block quote.

If there is a URL we will add the invisible cite attribute.

If the testimonial contains a heading the markup would change depending on whether the heading was part of the original quote. If it was, we would add the heading as part of the quote.

If not, we'd use an <article> as below.

<article>
<h3>Review Title</h3>
<blockquote>
<p>The review content...</p>
<footer> — Reviewer Name</footer>
</blockquote>
</article>

Note: Google's review snippets can not be self-serving.

Comments (blog posts)

According to WHATWG

A blog entry on a site that accepts user-submitted comments could represent the comments as article elements nested within the article element for the blog entry.

Pull quotes

According to WHATWG

The aside element can be used for typographical effects like pull quotes or sidebars

Jeremy Keith set off debate in 2016 by asking Why do pull quotes exist on the web? It's a great question given it is a duplication of content that visually does not look impressive on small devices. It is also not easy to code with many employing JavaScript to achieve it.

Regular quotes

To keep things easier for both sighted and non-sighted users it seem to make sense to cite before the quote.

<p>In NAME's article/song/presentation
<cite>
<a href="https:/www.example/">NAME OF THE WORK
</a>
</cite> 
s/he says:
</p>
<blockquote>
 THE QUOTE
</blockquote>
<!-- or <q></q> if inline  -->

Block or inline quotes?

Haydon Pickering points out that the term “block quotation” precedes the blockquote element. The Chicago Manual Of Style recommends block quotations are over 100 words. Some examples in the specification have very short quotes and so it remains unclear when (semantically) you should use one over the other.

Styling quotes

Please join us for part two where we look at adding styling with CSS (this is a video only episode).

Mentioned

The State of HTML 2025

Transcript

[00:00:06] Nathan Wrigley: Hello there and welcome to the No Script Show. This is the fourth in our series, looking at components that make up a website. Today we're looking at testimonials, block quotes, pull quotes, and the site elements and how these are most likely coded wrongly.

As with other episodes in this series, we'll be considering these from a technical design, accessibility, and SEO perspective, and we'll follow up this chat with a YouTube video looking at some coded examples. This time it is slightly different in that we will be focusing on the HT RL markup in this podcast, as there is a surprising amount to cover.

And CSS styling is what we'll cover in the follow up video only content. As always Joined by David Wamsley, who's over there? Hello, David? Hello? Hello? Nathan Wrigley. You're sporting a slightly different background.

[00:00:57] David Waumsley: Yes, I'm in London, usually I'm in India. but we're a bit closer. We were almost close actually.

Yeah. we nearly got to see each other. Yeah. It all happened in this time, but yes. anyway, let me move on to this. 'cause you were the one who really set me off on doing this topic a bit earlier. We would've done it anyway because you shared with me a video by Kevin Powell, called is HTML the Hardest Language, and he was demonstrating with his, followers and everything, how.

Everyone, he gave them a card component to code up and everybody did it in slightly different ways, which really asked you that's what is the semantic way. And this really reminded me of a post by or series by Hayden Pickering where he is looking at various, has HTML elements and. It really highlights the fact that there's a lot of confusion on how to do HTML and it really caught my attention, the block quote one that he did and the site element.

So it set me off experimenting about, how, 'cause we're trying to set up our own, if you like, design system and have a consistent way of marking things up. And yeah. So I went on a bit of a journey. Yeah, sorry

[00:02:13] Nathan Wrigley: about that. All of that. With me DMing you on blue sky and set you off on a complete, laundry list of things to cover.

So apologies about that, but hopefully there's some useful content in here. Should we switch to your screen? Do you wanna do that one? Yeah, let's do that. Okay. We've

[00:02:28] David Waumsley: got a lot of notes to get through actually here. I'd be largely reading these out I think, 'cause the research has been done. Yep. So let's talk about, so we called this one.

don't quote us on this, or I should mention as well. I'll put a little note. It actually is already in there that another reason for doing this is that the state of HTML 2025 is still open as a survey. I, haven't done it myself, but I will. No, I

[00:02:54] Nathan Wrigley: took a quick look at it. I didn't fill it out, but I will come back and fill it out.

It's not a long enterprise, it's fairly quick, but, obviously somebody somewhere needs to know where we're all at. and yeah. Useful to fill out. I would've thought so. We'll provide the link in the show notes,

[00:03:09] David Waumsley: Yeah, it's down there in my. So for those who are on YouTube, you will be able to follow along with our notes.

So I put first where we quote, where we use quotes. So in testimonials for credibility and social proof, we use, in blog comments for engagement, effectively where user submissions are a quote Yeah. Of some form. Yep. in pull quotes for style and highlighting. I'm not sure. do you know what?

When I say pull quotes, does that mean

[00:03:40] Nathan Wrigley: anything to you? Do you

[00:03:41] David Waumsley: have an expectation?

[00:03:42] Nathan Wrigley: No, I'm, basically imagining the, things that you've described previously. So to me, a pull quote is a block quote. I, genuinely wouldn't have known what the difference was.

[00:03:53] David Waumsley: Yeah, it's all, it's just interesting. We'll, move on to this one.

'cause there's an article by Andy Clark where his interpretation of a poll quote is different to what I think, I'm talking about here. But generally it's a self quote, I think, where we put it. Usually in an article where there's this big thing that gives you a, some styling, it gives you some highlight of text that's to come.

So it's a, okay. It's duplicate content. and we use it in articles, for, oh, I've made a. To support our arguments. Okay. often,

[00:04:25] Nathan Wrigley: it's fairly widely used throughout the web. I think the, place that I see it most is, comments on blogs and things like that are out of fashion, aren't they these days.

But I see it all over on testimonials. you, somehow want to, I don't know, link the words to the image or the person's name or something. And in order to do that, you adopt this different style and maybe some iconography around it. And,

[00:04:49] David Waumsley: yeah. Yeah, exactly. this is the interesting bit really of what we're gonna get stuck on, the difficulties with Symantec HTML.

So we have the block quote element, the Q element for inline quotations. We have the site element, which Haydon Pickering says really ought to be called citation rather than site, but, But the thing is with this, the specifications have changed over time and they don't entirely line up with the design patterns that we use.

And after reading Haydon Pickering's article, I also stumbled across Michelle Barker's article, which says what exactly what I experienced. I've been doing block quotes wrong. Through, listening to or reading his article, she realized that, and I've got it up over here. And there was quite a lot of, and this has helped me look into this more because there's a lot of comments here on that by some really.

quite clever people. She's a very clever person as well. She writes some of the M dms, we've mentioned her before. Yeah. Articles and, that was

[00:05:54] Nathan Wrigley: me saying comments or dad and Yeah. No, there's a load here. I, on this

[00:05:58] David Waumsley: topic. I think it's particularly popular. Yeah. and also she's actually using eleventy as well on that.

Oh, interesting. Add in our comments myself. Yeah. yeah, so that was quite interesting. But the, I think the, a lot of the changes due to the fact that the official HCML specifications are with the web hypertext, applications, technology working group. Easy for you to say no. What w what? What wg, I think, 'cause it's, the working group, so we'll call it what, I dunno how people say it, but we'll say what working group.

I think that's be easy. So what they tell us through their documentation, which I've got over here, is go back that quote elements are for external sources. Oh, so we should only be, so if we're using those, if we're using a block quote, it should be for someone else's comment, not our own, but presumably, because it's not spelt out.

This is to the page, at the page level rather than the domain level. But. I'm not sure that's unclear. Okay. the site attribute, attribute being the site equals quotation mark should be where you put a URL to that source of the quote. Okay. Okay. And it's invisible to humans and most screen readers, but the visible site element, the, one, the actual tag itself is for the title of Creative Works only.

and it, and there's another element of this, that the site element shouldn't be included in the quote element, so it shouldn't be within the tags of our block quote.

[00:07:44] Nathan Wrigley: So there's a lot more depth to this than I imagined. That's yes. rules upon rules, not rules as such recommendations, But nevertheless, I did not know that there was that level of granularity, so that's fascinating.

[00:07:57] David Waumsley: It is, and it's also quite confusing as well because it's some of this comes in, so this idea that it's only for the title of Creative Works only rather than an author comes only after HTML five. I know that's been around for a long time, so there has been changes over time and it's.

Disputed. I, think Jeremy Keith is one person who was trying to argue against that at the time. anyway, I'm going into things that we don't need to, and the last point that I got here is that the block quote is a section in route, so it marks a distinct. Of content, but is not part of the documents outlined in the way that section elements such as side or article or Nava.

So with screen readers, they will be able to look at different makeup of a page or something by looking to those section elements, but it is still something distinct. What I wrote down here is that it means that we should not use quotation elements for self quoting, pull quotes, and that's what I generally think.

A pull quote is something where you are referencing something within your own document to stylize it and say, here's a bit of a teaser of what's to come. So we shouldn't be using, the block quote tag really for our pulled quotes. we shouldn't use the site element for authors of quotes.

And the last point on is that citations are, or orphaned from the quote, which is not ideal for accessibility because again, it's Haydon Pickering, it picks up on how uncomfortable that is because it's a little bit, I think he does make this example, but it's a little bit like how, if you. Have on a blog archive page, these read more buttons that you have, which are separate to, or links separate to the description, then it's very difficult.

It's not, It's not, yeah, it's outta context with it. So I think that's a similar thing happening, but really that's what we're encouraged to do if we go with What wg

[00:10:00] Nathan Wrigley: have you managed to memorize that in your head now, such that if you were just writing out HTML and you were trying to deploy citations, block quotes and so on, have you got that cascade of things figured out or would you have to go back to that and say, which example does it fit into here?

I think I've got it sorted

[00:10:19] David Waumsley: out now. Yeah. But that's what I'm trying to do for this one. We can have something is, is the no script shows way of doing it, I think. But this is the next thing. I've put it on my notes here that, this is where it gets really difficult 'cause it's hard to find consistent advice.

So we have. Many expert sources and I've only actually put one in here and that is, lemme just go back here, is the HTML five doctor, which is supposed to be the place to really get, to learn all your stuff. it says different things Wow. To watch. Yeah. so that becomes a problem.

And we also have, as well, with WordPress as well, it is quite interesting because if we go to. press.com and it looks at it's, quote block there. So it works against it as well, because what it literally says is that you can use this, it will add in your citation will be the author, and there's nothing on that.

and the citation was in with the block quote. So technically according to what wg Yeah, what WordPress does on there. And there's a code example on here. it calls no problems for. and this will make sense for, there's an article here looking up the Block quotes by Amber Hines, who's a big accessibility person in WordPress.

And she sees no issue with how that does it. He thinks she's doing it semantic, and I think you'll understand why she doesn't see an issue with this one. Yeah, maybe she's not looked into it, but let's have a look. if we go here. So there is that side of it. So technically these. Experts there, and this platform is wrong according to the present specifications.

But also when we start to get to experts like Haydon Pickering in his article, what he suggests is a get around the fact with, lemme just go to his posts for those who can see, that one. Yeah. Yeah. So in terms of accessibility as a problem with the idea that you would put the citation. Separate to the quote, because it's not programably linked together.

Yep. Yep. So his way around this is to put everything in a figure. So you have a figure. Then a block quote, and then you have a fig caption, which contains your citation within there. Citations

[00:12:42] Nathan Wrigley: in there.

[00:12:43] David Waumsley: Yeah. So that's his approach. However, then we come to Adrian Ly, who's one of the big players when it comes to accessibility, who's gone and tested all the different ways that a screen reader will read these different ways of doing it.

Oh, interesting. Okay. Yep. Yeah. So his own approach is to not do that. What he recommends is because it's so verbose for screen readers, all the popular ones to read out, fig not to do that. Yeah. So he goes with block quote, and then he puts in a footer where he puts his citation and then closes the, block quote.

Yeah. So that's his way as an accessibility expert who doesn't, let me say that all of these people say this is how they've dealt with the situation. Not necessarily this is the way to do it. I don't think anybody feels confident in what rules we have at the moment, so, anyway, you could see a contradiction there.

So you can go two different routes on that. And let's see, gosh, what, it's really surprising. Open a hole. Disagree. I know.

[00:13:46] Nathan Wrigley: Isn't as fascinating. Yeah,

[00:13:47] David Waumsley: I think attention's going to H-D-M-L-A lot more at the moment. it's been on CSS, but yeah. But I think we need to get these fundamentals right. And finally, the one that I think we are effectively going to use is the W three C design system.

So if I just move on to this one, so it's similar to Adrian ly in the sense that there's no fig with this one. It's put in a block quote. Then it's adding a footer. Yeah. 'cause this is a section in route. It's perfectly fine to add in a footer element and, ending it with a block quote. So if you like, but what they, and they point out in the considerations.

They point out the fact that, and this is really where it all goes wrong, there's been some leniency when HTML was decided by the W three C itself on their own documentation. But since. I think 2019, this has gone to the Living Standards Working Group, which is the what wg. And not everything that has been changed there has transferred over.

So our official documentations may not be up to speed, if you like. This is where we get some of the confusion.

[00:14:59] Nathan Wrigley: Yeah, I was gonna say officially then. It's really confusing officially.

[00:15:03] David Waumsley: It's confusing. Officially. It's confusing. Yeah. Yeah. When you've got brilliant experts like that, but I think. I think the way for us to deal with it.

and again, I went and had a little search around just what people did well, interestingly enough to search around what some of the people say they do and what they actually do as well doesn't always match. So they've changed. Okay. They've changed over time. Like we, we will be changing over time and when we go and look round, there's not much in the way of the big design systems out there for this specifically, but there is a lot of sort of local government, Design systems out there. So if you go and look at them again, they're all different variations. Gosh. Yeah. It's a, spaghetti, isn't it? It is. And yeah, I, just think it is due to this. And in fact, there's a point that was made on Michelle Barker's, I've been doing. Block quotes wrong. I think the last quote on here.

Yes. This is by Amelia Bellamy Rhodes, and I know of her, she's on the working group for SVGs, I think so I've seen her name for this one, and that's it. How she's spelling it out how the three C spec was modified. If you allow two. Be a little bit more flexible to do what Jeremy Keith, I think years back wanted to do to be able to contain authors.

So when I was pointing out that sort of WordPresses basically got it wrong in terms of the official spec, you can understand why it's like that? Yeah, because, We were generally leaning towards that, although I think, it would be better if it did have a little footer to separate the citation within the block quote.

But, so that's really, I think, what we'll do, I think as we don't have the kind of standing and influence like people like Adrian Rosalli, Haydon Pickering, or Michelle Barker. I think we'll try and stick to the what WG rules. Okay. Just to get some consistency. Yeah.

[00:16:59] Nathan Wrigley: Yeah.

[00:16:59] David Waumsley: And, until we're told otherwise.

[00:17:02] Nathan Wrigley: Okay. Yeah. Until they've finished that bun fight and, sorted it out, frankly. Yeah. Okay. Testimonials now then, is it?

[00:17:10] David Waumsley: Yeah. So, rationalizing the code, so this took me some time to kinda work out, so exactly how we're laying things out. So a typical pattern, and I've got an example up here. On that sort of little demo site I made first, which we'll use at some point.

A typical pattern for a testimonial might be something where we have what someone said about us, maybe a picture of the author and their name, and maybe a link to their organization. Or one of the other. and that's a sort of common pattern here, That would be straightforward. What we're doing here with something like that is that we'd be putting it all in a block quote.

Yep. And using W three Cs and putting all of the stuff where their names, their image, their where they work, or their company or their t yeah. We would all go in that footer within a block quote, so that would be fine. there is the circumstance where. Sometimes you see with these, this pattern, you will see a header as well as the quote.

sometimes, there's just a sort of summary of what the quotation

[00:18:20] Nathan Wrigley: says. Oh, interesting. I'm trying to remember when I've seen that, but I, can't conjure it up. Okay.

[00:18:26] David Waumsley: I think sometimes if you're taking from a source, that does that some, reviews do allow you to put the title and then like a name, like a too long

[00:18:36] Nathan Wrigley: didn't read kind of thing where you summarize the quote.

Is that what you mean? Yeah. You might just, Yeah. Like, stunning.

[00:18:43] David Waumsley: And

[00:18:43] Nathan Wrigley: then the quote, which is, yeah. Okay.

[00:18:45] David Waumsley: Got it. they might just pull out the main, because we know people read titles and some of the review, things are set up, which is another point actually I should mention really. 'cause, just thinking about the SEO perspective on this one, when it comes to testimonials, we can't really use, that review markup, the rich.

Text or the schema for that one because it can't be self-serving, so we can't say something. You can't use other people's quotes about us. yeah. To self serve. So for testimonials that, that doesn't become an issue. Anyway, thi this did make me think about that pattern. So if it was a pattern where, the.

Header was part of the quote that was submitted by the user. Then I would just put a header three probably that would be the likely one, and then it would be the block quote. Okay. In the block quote, itself. Got it. but if it was one where we decided to sum up their block quote, then what I would do is wrap the whole thing in an article.

Okay. Yeah. Again, this is another one where it's another Hayden Pickering, topic where he talks about article, and I think it's from him that I got this idea. 'cause when I thought of article as a tag, I tended to think

[00:20:04] Nathan Wrigley: of just blog posts. Yeah. that's where my head goes. It, doesn't, in my head, it doesn't land as a container for more broad stuff, even though I know it should be.

[00:20:13] David Waumsley: Yeah, and I think if we look at the actual spec for it, I won't pull it up here at the moment, but it actually says it's any sort of standalone element that you could use on its own. Yeah. So an article would be right for this, and I think it was Haydon Pickering or something. It said, is, and I think this is that way of looking at it, and now I think of it as like an article of clothing.

[00:20:33] Nathan Wrigley: Oh, interesting. Okay. You do you know what

[00:20:35] David Waumsley: I mean? It's like a pair of gloves or something. They stand aside, but they're not the entire thing. And, because we can use, yeah, because I think it's any sort of standalone. So I think it would be suitable. So that would be the semantic way. And I've put the code here, sorry for those who are just listening, but basically it would be the surrounding, wrapper, if you like, would be the article tag within that, then I'd put our header, Because we're making that up ourselves in that would be the block quote with its footer, with the reviewer's name, and then it would close with the block quote, and then finally the article wrapper so that you got article

[00:21:11] Nathan Wrigley: with. Children of a heading and a block quote. And then inside the block quote, you've got your content paragraph, footer and so on.

Interesting. Okay. yeah.

[00:21:22] David Waumsley: I was wondering about comments as well. not that we've got them, but we're gonna have to get like blog

[00:21:26] Nathan Wrigley: posts, that kind of thing. Yeah. So

[00:21:28] David Waumsley: when we're inviting people to use a generated what, where they would fit in, and I think the official specification tells us this, what we can use, and that is a blog entry on a, this is.

Quoting from them, a blog entry on a site that accepts user submitted comments could be represented as could, sorry, could represent the comments as article elements nested within the article element for the blog entry. So I wouldn't be using blog quotes for that kind of quoting, and we would just stick them in nested articles.

Articles.

[00:22:05] Nathan Wrigley: So you'd have articles nested within articles. Within, an article.

[00:22:10] David Waumsley: Okay. Yeah. So I think that's how, it is interesting because I think later we'll try and put some form of commenting system on our own, site. So I think, it's interesting to see,

[00:22:22] Nathan Wrigley: yeah. Especially given the user submitted nature of things.

obviously with modern CMSs, you've got the capacity to, put things into a pending state, so they don't make it there. But if you're worried about SEO and things like that, then. User submitted content might really run against what you're trying to do, or I don't know, mention your commercial rivals with links and things like that, so there may be something there.

Yeah,

[00:22:46] David Waumsley: I did look, Michelle Barkers, I, because I was there, I thought I'd poke around at the code there and I noticed that her articles, which obviously she said to create the whole HTML for that one, we put in a block quote, which is seems appropriate. For it. but when you think about it, people just shove all sorts of stuff in there, which isn't necessarily a quote that might be quoting somebody else.

It wouldn't fit the quote. So I actually think, and, when I looked at examples of at least classic WordPress sites that I've seen, I think most people have marked it up in the way that, what WG would suggested by using the Raptors articles in the, okay. Okay. So I think that's what we would do in that case.

So pull quotes, Again, we've, what WG has given us, and I'm quoting here, is the aside element can be used for typographical effects, pull quotes or sidebars. So it literally mentions where we can use the aside. so as a sidebar,

[00:23:48] Nathan Wrigley: the aside being a side.

[00:23:51] David Waumsley: because they've spec specified pull quotes.

So if you like Paul quote, is that duplicate of content that we put on somewhere in style separately? It's an aside to our main article.

[00:24:02] Nathan Wrigley: Oh, that's pull quote. Is it? 'cause at the beginning we talked about, so a pull quote is where you. You literally are pulling something out of the article. It's duplicate from an SEO point of view.

Yes. But you wanna highlight it. So it's like when you're reading a newspaper sometimes, or a magazine, sometimes they'll just, I, don't know. It's eye catching, isn't it? They'll throw that, that one sentence, which kind of encapsulates the next two paragraphs. Yes. As a, as an easy way. It's almost like a heading, it's navigates you into what's coming or what has just been said.

Yes. Okay. Okay. I didn't know that.

[00:24:34] David Waumsley: Yeah. So block quote isn't appropriate. No. that's what people have used of course, because of the confusion. But an aside seems to be the thing to do. no one really knows, but that seems the most. But there is an interesting debate that goes back.

Jeremy Keefe set one off in 2016, got tons and tons of comments, asking the question, why do Paul quotes exist on the web? And it is a great question given that if your screen reader. And in his own post, it gives that example, if he was to read it with a screen reader, it's terrible because it's got this pull quote out and then it repeats the next thing you know.

Yeah. You're just hearing this constant re repetition. Yeah. With no visual clues to know what the heck is going on. Why is this article repeating itself? So there's that difficulty. There's the difficulty. Some people, although I don't think duplicate content is an issue for SEO, but some people have been conscious about that, but also, you do all this work.

To pull quotes. Generally they are pulling slightly out of the main body of content. You mean physically? they look, yeah. Physically. They usually pull to one side left. Yeah, Do that to the main content. Yeah. If you're

[00:25:44] Nathan Wrigley: a left to right reader, then it's slightly to the right.

[00:25:47] David Waumsley: Yeah. Yeah. And they're really, difficult to code.

We'll move on to that when we talk about CSS, but, a lot of people have had to employ JavaScript in order to make this thing that's outta the main body. Move to where you want it to do, and then it doesn't look all that impressive necessarily when you get down to smaller devices where you can't see that it's pulling out you, you've literally only got the room for your text.

Yeah. So yeah, so there is that. and, what did I put here for regular quotes? Okay. So our format, in. unless you disagree on any of these ones, I think to keep things easier for cited and non-sighted users, not non-sighted, as I've written here,

it, seems, I'll put an s in there later to make sense to cite before the quote. So I think when we're doing our articles, generally it's better to you'll have your paragraph that will be running, you'll put the name of the order. Author and then, reference their article, song, presentation, whatever it is, as the title of the work, with a link to that one, and that will be in the citation.

And then. he or she says, and then it will just be in the block quote doing it that way. So if you are put in as, I think most people when they were thinking about HTML spec, were thinking when you use a block quote, you're quoting generally, you might introduce it first. Yeah. Before you do the block quote.

So in. General, general blog posts. That would be my format. I think so

[00:27:26] Nathan Wrigley: I guess it's almost serving as a little signpost of Okay. This is why it's now, okay. It is out of the flow of the normal text, but here's a, flag saying this is what it is. This is, as you've written there, the name of the work.

It's like a mini title. It's alerting you to here's something different. Yes. Then the quote comes afterwards where if you had it the other way around. the site. At the end of it, after the block quote, then it would just go straight into that. It would feel like an ordinary part of text and then the name of the title would randomly come and you wouldn't know where that started or stopped.

Okay. Yeah. That's interesting. And I think that's presentation. you often see it. Differently, don't you? You'd see the, you'd see the quote first encapsulated in some container, which is, I don't know, a rectangle or something to differentiate it. Different color background or something. Then the person, let's go for person's name.

no. The name of the work might be at the bottom. In an old font or something like that. And, you can capture that 'cause you can see it all. But if you're doing it. With a screen reader that's all back to front. 'cause you need that indication at the beginning. Okay. Yeah.

[00:28:35] David Waumsley: Yeah. I think the pattern's different and I think most of the haste, this is my understanding of it, is that the, when writing out the spec there, they've generally been thinking of written text and articles where you might.

you'll introduce as part of your copy who the author and what work it's citing before you move to the block quote where it all gets thrown out. And we get into trouble is when we start to think about this design pattern of the testimonial, where we tend to put the quote up front. yeah.

And then the author after, and it doesn't work anyway, I think we've solved that. Yeah, there is, another interesting point again from Hayden Pickering on his article, and that is, when you use the, we've been talking about block quote all the time, but there's the, there's the Q tag, the inline, quote and.

For those reading the notes here, I will correct these later 'cause it says it's okay. yeah. He points out the, fact that, the term block quotation precedes the block quote element ever existing in HTML and the Chicago Manual of Style recommends that a block quotation is over a hundred words. There are some examples as he points out in the specifications, which have very short quotes and they use block quotes. So it still remains quite unclear when at least semantically you should be using block quote over the queue. Interesting.

[00:30:03] Nathan Wrigley: Yeah,

[00:30:04] David Waumsley: it's a visual thing in the end, doesn't it?

Ends up you say block quote because it's basically. Style wise, it's taken up the whole block where it's not in line. But, semantically, I don't know. There isn't any clear guidance on

[00:30:16] Nathan Wrigley: No.

[00:30:17] David Waumsley: Which you should be using.

[00:30:18] Nathan Wrigley: No. Interesting that, we reference things like the Chicago Manual of style. I love that.

that's Hayden. No, but just the fact that there. A Chicago manual of style. I think I need that in my life. I don't have enough style basically, and it's got to be over a hundred words. Oh, fascinating. Okay.

[00:30:38] David Waumsley: Alright. Yeah, so I, anyway, I guess that's this, our aim of our show was to try and simplify things and I think I've just made things as about as complex as they, no, you highlighted

[00:30:49] Nathan Wrigley: complexity that all of us have ignored, basically.

we, I think it would've been fair to say that most of that, nobody's pricing off the. The lid to appear inside that jar just because you rely on, especially in the WordPress world, you rely on a block increasingly to just take this work for you. Yes, you put a block, quote, block in, and you assume it's doing everything correctly, whereas in fact, perhaps you need to roll your own or certainly be thinking about the context in which you're using it, be it a block quote, a quote, a testimonial, a citation, whatever it may, be.

There's a lot more to it, honestly. Way more to that than I thought, so that's fascinating.

[00:31:26] David Waumsley: Yeah. And I would be really interested, if anybody does have any thoughts or, they spot anything that I've completely missed on this or want to change our mind, then I'd love to hear on that one. But I think what we've decided to do on this as a design system sort to make sense 'cause we're not, breaking any rules.

I think the interesting thing is about the site element. It really, it doesn't seem to have any purpose. It's there for semantics. Yeah. But it's not read out by screen readers. Certainly, when we're using that as the attribute, nobody sees it. So what's it? Therefore it's, the, full use of this isn't in place.

But perhaps one day if we all do the right thing, maybe it might be useful.

[00:32:11] Nathan Wrigley: Is there any more on that, page that you want to go? No. You just got some links there at the bottom, styling quotes, part two and what have you. So are we. Are we a wrap? Wrap? Wrap? It's a wrap. Wrap as they said.

Yeah. We'll just move

[00:32:23] David Waumsley: on. And this will be quick, I think, just part two because we've talked all about the HTML and said, we'll just quickly talk about how we might. Go about styling some of these.

[00:32:33] Nathan Wrigley: Okay, so in which case, if you want to follow along with the show notes that David's been displaying there, including typographical corrections, you can go and find those as well.

Then head to no script show. And then this episode is 24 so slash 24, the numerals two four. Go and check that out. And then there will be a corresponding episode in which, this is demonstrated. David gives it a bash, and that is no script show slash learn. 15 1 5. So those two things will correspond and overlap.

So we will, see you then. So shall I, shall I, hit stop on this recording and yeah, we'll go into the next.

[00:33:16] David Waumsley: Alright, see you

[00:33:16] Nathan Wrigley: soon.

[00:33:17] David Waumsley: Thanks Nathan. Bye.

Styling Quotes with CSS

2025-08-19T00:00:00Z

Show Notes:

In part one we attempted to rationalize the HTML mark-up needed for testimonials, regular quotes and pull quotes. Here we are looking quickly at styling them with CSS.

Testimonials

It's common for these to be displayed as a carousel, but until this can be achieved in an accessible way without JavaScript we (for reasons associated with the show's name) look for simpler and more resilient options like:

The "Reel" a horizontal scrolling technique used on Every Layout .
<details> and <summary> as used on our demo here.

An example of a 3 column testimonial can be found on our intrinsic framework.

The details and summary used on the band website demo combines the RAM technique shown here with the disclosure widget example shown here.

Pull Quotes

As mentioned in part one pull quotes don't naturally lend themselves to the web as the effect is complex, lost on smaller devices and is a repeat of content that does not make sense (by default) to those using screen readers.

Interestingly though, Rachel Andrew's CSS Day 2025 presentation called Multicol and fragmentation talks about the idea of the web being more like printed pages going forward. She introduces the idea of "exclusions" (to normal flow). The examples she shows look much like the patterns designers often try to recreate with pull quotes.

A screenshot from Rachel Andrew's talk.

The No Script Show uses a named grid lines technique to allow some content to break out of the narrow (more readable) confines allowed for written text (as seen with the above image). This can be used to create something close to a typical pull quote pattern as shown here and here.

Regular Quotes

Over time we will be building up some copy and paste styles, but a good starting point is this recent post on CSS tricks by Andy Clarke.

Transcript

[00:00:06] Nathan Wrigley: Hello there and welcome to the No Script Show. This video is a follow up to our podcast episode called Don't Quote Us On This, where we looked at some of the confusion there is when it comes to writing semantic HTML for testimonials, pull quotes, and regular article quotes.

You can find that at no script show slash 24, so the numerals two, four, and it's worth checking that out before watching this. Here though we're quickly looking at various approaches to styling these things. With CSS and as always, David Waumsley joins me over there with a lovely shirt today. Very nice.

Shall I put the screen on and crack on?

[00:00:46] David Waumsley: Yeah, let's do that. 'cause this one will be quick. Okay. Because I haven't had the time to actually, do many variations of the sales on the things that we were talking about. Sure. But, I've got some things to point out. I think when it comes to testimonials, which we talked about first time, there is, it seems pretty common to me to see those put in carousels of some form or another.

And obviously with us being a no script show, there's reasons why we want to avoid things that require JavaScript. If we can. So we're looking for simpler, resilient options. So there are a couple here that. Thought I'd mention. and the first one is the, what is called the Real by Hayden Pickin because he's getting a mention again and Andy Bell in their every layout, and I use this on our site anyway, but I think it's a really good solution.

So if we go to their. cycle. See, it's been employed over here, so you just put the testimonials in this nice. And, looks nice so you can find it here. Unfortunately, the reel is under their premium thing, but if you want to see how it works, you can just go to the no script show and look at how we're using it.

okay. There you go. Yeah. Yeah. So if you could see the reel is effectively here, you can get the gist of how that is put together. It's horizontal scrolling. So that's one approach, instead of having a carousel when you've got a lot. Yeah. And you don't wanna take up too much, of the vertical space.

And another one, which, I should have brought it up actually. and we'll just show it here in effect. So I've done a little demo, which we'll use at some point. Let me just go to it, show you some reviews. So I've. Lay these out. But another way which I needed to use was to just use the thing which we talked about.

The sort of details. Details and summary. Correct? Yes. And I've got that as an example. And in fact, I'm combining two things, which are on our intrinsic framework. I'm combining this thing of setting a maximum column. So I've got the sort of CSS here where we can just set these up, how many we want, and then it creates this sort of, if I can resize this sort of situation, but it doesn't go beyond three or whatever we set it to, put that inside the same thing.

Let me just go back to. Our homepage where I can see it. And, we've moved on since then. Let me have a look for the disclosure widget. So yeah, so I'm just using the same disclosure widget there, but I'm sticking that ram technique, those, grids within that. I think that works quite well. I did it on a website.

In fact, I can just bring it up. If I can just search for this, earth. Affinity Center. Yeah, you've got the URL there. Yeah. if I just go into there a couple, it was a problem that I had. I don't think the markup is good as I have here, but we had all these different sort of, reviews, which he collected and he collected so many and they were in this carousel.

And I never realized until I had to remake the site how many were, and you could see wow. Yeah. So I thought, that was the best way to deal with that. yeah. So that, so you pushed them

[00:04:06] Nathan Wrigley: into a container there, which has a maximum of whatever it was, six or something like that?

[00:04:10] David Waumsley: Yeah. Yeah. So on this case and then they just, and it's quite nice because responsibly then it will just adjust.

Yeah. and I think, these are better, I dunno what you feel about them. I now hate it when I see a carousel for reviews.

[00:04:26] Nathan Wrigley: I think the beauty of the. the details block is that everything is definitively hidden until you touch the details. you invoke the detail, you open it.

Yes. In fact, you open the accordion and then it's all. Available, whereas the carousel is somewhat available and you have to interact on an ongoing basis. So you have to continue to scroll and then scroll a bit more and then scroll a bit more and then scroll a bit more. If that works with your finger.

That kind of almost feels like on a mobile device that kind of sweepy. Sweepy, yeah, something. Something quite good about that. 'cause we're used to that with all the applications, but I think on a desktop your I Imple implementation with the details is better. Because it's all on. All off.

You toggle them all on, you toggle them all off. If you were to have, let's say that you had 50 on that page You just showed us that scroll bar is gonna be tiny. Maybe it's not 50, but It's a pro. Yes. it's probably not far off, is it?

[00:05:30] David Waumsley: That on this though, I didn't do. So if we look at this one, if I go back to the, that one that I was doing, I limited the space.

[00:05:38] Nathan Wrigley: Yeah. You

[00:05:39] David Waumsley: okay?

[00:05:39] Nathan Wrigley: So you carried on with the scroll there. Interesting. Yeah. Okay. Yeah, so there's options. There's options. I actually. Quite like what you did, where you opened it all and then you had that big close button at the end. That seemed to work for me. Yes. Yeah. I think, I'm not a fan of the carousel either.

Basically I, I think it's had its day, it was interesting, but

[00:05:59] David Waumsley: not, yeah, and I think this is why they argue on every layout and that you'll notice on websites that either of these guys have done, that they tend to employ the real quite a lot for their stuff because on a mobile. It does, you can do it with your finger, so it does, Scroll along quite nicely. so anyway, that's just a solution to avoid having to get into JavaScript until, the hope is because we had that initial excitement about, Google managing to put forward some new, HTML that would, give us carousels. Except it didn't, it didn't.

The thing is they called it accessible. And then, There was Susan Suan who Yeah. Did real experiments on it and said, no, actually it's not. So it's still ongoing. It's ongoing. It's not a work, we it's a work in progress. It's not finished. Yeah. Yeah, exactly. So that might get changed over the time.

I'll just, Let's just go over, I did do on a intrinsic framework, I did mock up. If anyone wants the sort of way I've coded this up with these example testimonial here, I'll probably keep adding to these. so I've put in the HTML, which we were talking about in the way that we would do it now, given What we learned in the. The first part of this, and then here there's not much to say on it. so basically if we look at this, so how it works is that we start mobile first. So we just set those up. Yep. And then have them go into the grid past a certain point Into the three, which not that difficult for anyone to set up.

there were a couple of things here that I put in the code, which I thought were quite interesting. and new one was, and, people who are watching this show won't get it. But you had, an accessibility expert look at our site, didn't you? Yeah. Joe Dolson. Yeah. Yeah. Joel Dolson and I, although I saw it, he reminded me how we could use it.

So I'm using it here to put in this sort of. CSS generated content here and then escape it from screen readers by just putting in a blank, which we, which is new CSS Alt that we can have with this. Yeah, that was novel, wasn't it?

[00:08:17] Nathan Wrigley: Yeah. So you had to have a blank for it to work. So like in effect, you think it not being there would be superior, but having a container with nothing in it was in fact what you needed to do, which is curious.

[00:08:33] David Waumsley: Yeah, so I'm able to just put this with the little stars just so it's decorative. Yeah, it looks nice. Doesn't mean anything at all. Yeah. But you can do it. And as we can now do it with generated content without, having that read out to screen readers, which is quite nice. The other thing that was just employed on there, which is worth, as I say, we use a media query then to bring in the grids and I've just put three columns on this one.

It could be anything. Yeah. And any other thing that I've put in there. When it does get to that, I wanted to use sub grid. To make sure that whatever size of the quote is here, that the people and their details line up. They all stay the same. Yeah. They all line up at the bottom. Yeah. Yeah. It's in a subgrid related to that, but That's it really. There's lots of different ways. Nice. Yeah. It's just a simple thing, but it's a good starting point when we do our projects or something to say, oh, that's how I coded it up before,

[00:09:26] Nathan Wrigley: just to say, obviously I'm putting the URL on the screen if you want to get. This, if you wanna be able to see where this code is, you can obviously look in the URL bar on our screen, but head to no script show slash learn slash one five number 15, and the links as you can see on the screen are right there.

Just click on them and you'll be able to get to all of these bits and pieces. Sorry to interrupt.

[00:09:47] David Waumsley: no, it's good. so I think that just covers testimonials. So let's go back to pull quotes again, something which I've, I think maybe ever used once in my career. Do you

[00:09:58] Nathan Wrigley: know what, when you see them in a printed magazine, which we can now see on the screen, so we're looking at, I don't know, maybe it's, some magazine, vanity Fair or National Geographic or whatever it may be there, man.

Is it effective? It's like super effective, especially as the, you've got this columned layout of text, like it just jumps at you does, it really stands out. Yeah. Typically in on the web, we're never gonna employ three columns of text like that. So I think the opportunity to make it stand out quite as effectively as that is less.

But there, it's profound. it's like it's the first thing you're gonna look at. You can't escape it. It's brilliant.

[00:10:38] David Waumsley: Yeah, no, design wise, and you can understand why people love these pull quotes. 'cause a lot of the designers who've gone to the web started in print, didn't they? And they want this.

So in contradiction to what we was talking about in the first part with Jeremy, Keith's argument, why do we have these on the web? They don't suit the web at all. because the duplicate content, annoying people, 'cause screen readers can't understand it. And then we have it. Technical difficulties of making these work on all screens.

And there's good reasons not to have poll quotes, but interestingly, just recently, it was released actually on YouTube, so you can actually watch the Talk by Rachel Andrews, for the CSS day. Thousand 25 and later in there, I've actually linked to the timestamp where she shows this and she talks a lot.

She's talking about multi columns, which I use quite a lot, this way of being able to just automatically generate columns and she's working on the spec of that Uhhuh. One of the big problems she has is multicolor and fragmentation. Fragmentation is about how you control what automatically gets shipped over to the next row.

Yeah. Anyway, so that's mainly what it talks about. But she also talks about the idea of exclusions. So it's not there in HTML, but she's asking the basic question, how much do we need it? Because with exclusions, the idea that you could exclude something from the normal flow, Rather than a sort of fragmentation that's excluded from the normal flow, everything can go around it.

And of course when you think about it, that's exactly what we'd want for things like pull quotes like this, Yeah.

[00:12:14] Nathan Wrigley: So does it sit somewhere else then? can you, in this idea, would you specify it would belong at the end? or would it just disappear entirely, if So it'd be presentation.

It'd be there, but you wouldn't be able to see it. For example, on a screen reader, it would just evaporate.

[00:12:34] David Waumsley: I dunno the answer to this. I think if there's a demand for it, they'll start to look into how they can implement this. So the implementations are known at the moment, but while she's looking at it, how much do we want these kind of design patterns?

And she does make a point, updating 'cause generally, and she would be part of that group. We've generally said, look, the web isn't like print, no, forget that. But as she started to look at fragmentation, she started to look at how you might fragment these things. Particularly some people still want to print.

And in fact you can print our articles actually, 'cause I put the code in for that. She's thinking that you now can fragment stuff. So things go into pages. So if we want the web can behave a little bit more Print, Yeah. And

[00:13:18] Nathan Wrigley: honestly looking, okay, this is a curious aside. For the first time in probably 15 years, I subscribed to a magazine last week and it arrived, and I just loved it.

Because the way it was presented and the way it was laid out was just so alien to me. And I did that curious thing where I tried to, I forgot, and I literally tried to pinch and zoom and on a bit of text and then I laughed at myself as I did it, but it was so pleasurable to see. Quirky layouts.

Yes. That obviously at the moment we've pushed against that. It's we just want this one column. why do we want this one column? increasingly, we obviously on a mobile that would be desirable, but on a big screen, which many of us have got the privilege of having something quirky would be interesting.

Columned layouts. Why not? Yeah. it's fascinating and it's artistic. Yes, as much as anything else, it lends some sort of, okay, this, they're credible, they're artistic, this is what they do, vanity Fair or something, or Vogue or whatever. something like that would really be able to lean into that, wouldn't they?

Because that's their whole thing is creativity and artistry and all of that. Yeah. Okay.

[00:14:41] David Waumsley: I would trust Rachel Andrews if she was behind the spec on it. Obviously that's one of her jobs, as she says. 'cause no one else wanted it. 'cause the multi Coles have been around for quite some time. yeah. Up there.

But nobody uses them, right? I do. quite a lot now. Okay. You use them. Okay. But you, it, that's where, the spec isn't as it should be. 'cause there's been lots of ideas and that's around fragmentation about the fact that, when you put something into multi coal, then you have to control what is falling as you change your screen sizes.

Yeah. And sometimes that can be awkward. So you can, that's the fragmentation side, but it does lead onto the question. And the same also, it links into what she's done with grid and the future spec of grid, where now we can. with CSS, we, it, we can control right? how things are read out to screen readers, right?

When our design patterns are going all over the place.

[00:15:36] Nathan Wrigley: so the browser could intelligently apportion the. 3000 words of text into manageable, three column layouts in a grid or something like that.

[00:15:47] David Waumsley: yes, but it's more about just when our layouts, the problem is, if we put something left and right or something and it falls underneath, but it falls the other way.

Yeah, exactly. Yeah. It's gotta be able to, it's gotta read the dom order, but the dom order's going to need to change with the CSS that's moving that around visually. Yeah. that's coming into grid. So I imagine within this, I mean I guess you're thinking ahead, at the moment it's just at the stage of do we want this, is there a big demand for this?

Because obviously there's a lot of work to do, there's a lot of convincing the browsers to get on board with the how to solve this. It's an interesting

[00:16:22] Nathan Wrigley: kind of reversal of the last 10 years of. The internet it feels like, but it's nice. I think it's a brilliant, it's quite refreshing.

[00:16:30] David Waumsley: Yes. Yes. So I think, yes, really interesting.

I think that's, anyway, there's just that. But in terms of, in terms of pull quotes, 'cause they are quite difficult to do. I've done a little cheat, which I think works because we use on the no script show. In fact, I can even do this probably if I just put the inspect on here. I just show it quite easily.

We are, as you can see here, probably just about, we can see the lines so I can have content as I'm, in fact showing here it's breaking it out of the main body without having to open up a new div. So I thought the next thing, and I did it here, let me just bring this up. just on that demo thing, you could use the same, yeah, there you go.

Yeah, so it's a pretty easy thing. We would use that as standard to do that there. And then I did another one, so

[00:17:23] Nathan Wrigley: that's nice. I really like that.

[00:17:26] David Waumsley: Yeah. So it looks okay as it moves to whatever size you've got. 'cause it starts to move a little bit in until it's just that regular old heading it looks like almost, doesn't it?

Yeah. Yeah. And these name line things are easy. And I just did another one. Which one did I open? Let's have a look at this one. This is a bit more awkward. Good. Because then I, and I've had to put the text. So this is what is a sort of pop out size. And then I've had to book Yeah, the text. Yeah, that's a curious,

[00:17:52] Nathan Wrigley: that's a curious demonstration of limitations.

'cause you really want the text to wrap and I suppose it now it suddenly works, but on deck and do you know what it's not. Jankey, but I can see why it might annoy your aesthetics. it might, because a

[00:18:07] David Waumsley: lot of the pull quotes here are often lined up this side and then, yeah. Because I would've to do a lot of work to do that and I'm, and then if it was non left aligned for a right, for a left to right reader, that would be, yeah, that would be a faux part,

[00:18:19] Nathan Wrigley: wouldn't it?

Okay.

[00:18:20] David Waumsley: For anybody who doesn't know about, I think we've mentioned it before, if you want to make these nine, na named grid lines for your pages, then there's a great generator over here, that allows you to do that. So the link is in our show notes, so you can just set up your own grid lines. Yeah, once, once you've got the code for this, it's complex code.

Once you've got the code for this, you can just. Change the numbers you want for the w, is that

[00:18:45] Nathan Wrigley: gonna be in the show notes as well? Will that be, yeah, the

[00:18:48] David Waumsley: link to this generator, and we're using it all the time, it's on our site as well. So you can, again, just look at the code there, but I thought it does allow for that.

okay. We are going to do this quickly. I think that's all I needed to cover there. And then for regular quotes, luckily just as. In this thinking that, oh, I need to do some styling to show Then the lovely Andy Clark came to the rescue Yeah, exactly. With the CSS tricks article. So we'll have a look at that.

and it seems like a good starting point. He, in this article, which I won't go into, just gives a whole load of code for styling these different block quotes. Nice. And it's Andy Clark, so they're always beautiful as always. I. And that's really what they're brilliant

[00:19:35] Nathan Wrigley: as well. Some of them aren't they?

They, I'm particularly drawn to these much more straightforward ones where it's just some sort of separator at the top and the bottom. Yes. I like that. Not quite so into the, I don't know, the icons at top and bottom and the surrounding it with a speech bubble or something. It's less for me.

But they're beautiful. You're right, they're very, they're quite nice actually, now that I've said that, quite like those.

[00:19:59] David Waumsley: The one thing though I will notice here is this little, so we see this sort of really beautiful pull screen on his example here. Yeah. What he doesn't provide us with, maybe there'll be an article following this up because been using this demo site for different articles, but I'd love to know.

If he's actually turned that into a code and how he's done that. Yeah. and I suppose it's similar to what I've been showing there, but I would like to see how he goes about it. Yeah, that's interesting. But it's not there in the article. But otherwise there's, it's a good starting point I think to pick up some CSS to start with this and, yeah.

[00:20:35] Nathan Wrigley: So this is, on CSS tricks.com. Again, the link will be in the, the show notes. Yeah. there's the url, no script show slash learn slash 1 5 15. Yes. There we go. And I

[00:20:49] David Waumsley: think I've lost my notes, but I Yeah, There's the end at the end.

[00:20:55] Nathan Wrigley: We're at the end.

[00:20:56] David Waumsley: We are at the end. Actually, if I just go back here, let's just check my notes.

Yeah, we're done. We're done.

[00:21:02] Nathan Wrigley: Okay. In that case, I will, I will take your screen away and, and we'll just mention one more time where you can go and find it. the piece of content which came before this. So if you're curious about what we spoke about and the trials and tribulations from a kind of a technical point of view, but it's all.

Speech. woo. That didn't work. There we go. No script show slash 2 4 24. That's the, the preamble to this episode if you like. And obviously if you want the show notes there, you can find them. But if you want the bits and pieces for this one, no script show slash learn. Slash 1 5 15. So there we go.

That's it. We will see you next time. David, thanks so much for your, for your hard work. I'm riding on your coattails. Thanks a lot. Alright, see you next. Easy. Bye. Yeah, bye.

Are we right in the head?

2025-07-16T00:00:00Z

Show Notes:

What is the head element?

A HTML element for machine-readable metadata on web documents.
There can only be one head element with only these 8 tags:

<title> <link> <style> <meta> <script> <noscript> <base> <template>

Typically it follows the <!doctype html> and is the first thing in the HTML element.

It’s worth validating the HTML particularly with CMS's where others have access to the <head>.

Essentials of the head element

A meta tag to set the document charset to UTF-8.
A metatag to set the viewport to an initial scale to 1 (responsive).
A title tag to name the document.

Common Issues

Accessibility

To meet WCAG 2.2 we must have title tags that describe the topic or purpose of a page.

Avoid special characters and certain types of punctuation.* Dashes are safe, but screen readers can read "|" as "pipe" or "line" or as a pause.
Keep titles short and consistent across pages.
Keep the <title> near the top of the <head> for quick loading.
Just outsite the <head> it's worth mentioning that not setting <html lang=””> is a WCAG fail (and missing on 15% of websites!).**

* Google also says to avoid the vertical line symbol too. Semrush did an experiment and overall dashes seemed to bring in more organic traffic than vertical lines.

** Overwriting lang="" and styling it for international phrases and words is underused. It’s pointless these days to cram loads of keywords into titles.

UX - page load

As HTML is rendered line by line, Harry Roberts has demonstrated how important to performance structure is. He suggests we should:

Move what we can out of the head (trackers, JS and some CSS).
Avoid @import and redirects to 3rd parties.
Put synchronous JS before CSS. Browsers see if JS refers to CSS.
Put CSP headers top as they break parallel preloading.

Naturally, there's more to discuss such as the benefits of preloading/prefetching assets, speculative loading and when we should use inline CSS, but this offers a great overview. Harry also has a neat bookmark we can check our heads with.

UX - design

Missing links to Favicons and metadata for Open Graph and Twitter images.

Favicons:

Since Safari 26 we have support for SVG favicons.
SVG icons can respond to light and dark preferences.
We still need an .ico fall back.

Social media

metatags.io is good for checking OG and Twitter images.
If a social image has enough white space one image can serve all.
We need an image to stop social media showing the first in the DOM.

The No Script Show's uses YouTube's thumbnail on the episode pages. For all others there is a generic image. Titles and descriptions for social media is added, but is not needed as it is the same the site's meta.

Technical SEO

Some things we might want to include in our head tag:

<meta name="robots"> for search engine crawl and indexing.
<link rel="canonical"> to prevent duplicate content issues.
<meta name="robots" content="noindex"> for duplicate content.
<link rel="alternate" hreflang="x"> for international sites.
<link rel="alternate" href="/feed.xml" type="application/atom+xml" title=""> for RSS feeds.

With CMSs and large content sites the <head> can easily become the source of technical issues.

For example, when Web Auditor was run on the No Script Show it showed scores of 301 redirects as a few dynamic URLs were set up without a trailing forward slash (/). Not major, but extra work for the user's browser that could be easily fixed. See the report here. (The errors are false positives).

Screaming Frog's SEO Spider is a partly free (up to 500 URLs) alternative checker.

The No Script Show has not added Schema.org mark-up. Organization schema might be good for some companies. Perhaps a good signal for Google's E-E-A-T.

Transcript

[00:00:05] Nathan Wrigley: Hello there and welcome to the No Script Show.

This is our third in a series looking at various components that make up a website. Today we're talking about the head element as it's unseen by visitors. The head is easily overlooked, but a few mistakes can have a dramatic effect on the site overall. As with all episodes in this series, this is in two parts.

First, we'll talk about. Head elements from a technical design and accessibility, SEO as well perspective. Then we'll follow up with a YouTube video looking at some coded examples. And as always, there's David Waumsley who does all the hard work. Hello David. Hello. we call

[00:00:47] David Waumsley: this one, are we right in the head?

And as we've established, I definitely wasn't right in the head, but I've been getting professional help.

[00:00:54] Nathan Wrigley: you, yeah, from a variety of different websites. I might add, not from the medics. I, read the show notes, which you always, you know, very faithfully put together for us. And I have to confess, it's been a long time since I looked at something, which I'm gonna call so basic and it really alarmed me that this incredibly crucial and basic thing I basically didn't know anything about.

no, not great. Yeah.

[00:01:22] David Waumsley: So we got some show notes. Sure. We bring them up then. Indeed.

[00:01:25] Nathan Wrigley: There we are. So are we right in the head? Let's, let's kick it off. So the first one, what is the head?

[00:01:32] David Waumsley: Yeah, so what I've got here, it's fairly simple. It's A-H-T-M-L element for machine readable metadata on web documents, and this is something which I don't think I ever knew as well.

I knew that there could only be one head on a page and I didn't know that there were only eight tags that are supported. No, me neither. And they are, we know these Title link, style, meta and script and no script knew those. Yep. Base and template. I didn't really, I think I understand base. Do you?

No, that was the

[00:02:10] Nathan Wrigley: alarming thing. The first ones that you mentioned. So title, link style, meta script, no script. That was all fine and self-explanatory. However, I saw base and template and Yeah. Basically didn't know what either of them were for.

[00:02:22] David Waumsley: I think, to be honest, I dunno why I stuck on this.

'cause, I don't know. And I think base is the one where you can set the URLs that I used so you could change the whole, it has a knock on effect. So if you are only including these certain URLs, it's a little bit like you can leave the full domain name off your document forward slash so you could have your base being.

no script show and then you could change that to something else, I think. Got it. That's what it does there. Okay. template I'm not so sure on. Okay. We'll just

[00:02:52] Nathan Wrigley: swiftly move on.

[00:02:54] David Waumsley: Yes, let's do that. And it typically follows the doc type HTML, tag that we have, which is a lot simpler these days.

And we would talk reminiscent about the times in the early HTML, where there all these different versions you're

[00:03:08] Nathan Wrigley: have. That's right. It was like a full two lines of impenetrable stuff that you had to basically copy and paste. I could never remember what was required, so I would just copy and paste it every time.

But it was, set and it was XT X-H-T-M-L and all of these numbers and things followed on. But then I think HT ML five came along and, I don't know, I think you said about 2010, something like that and boiled it all down to this simple declaration doc type HTML, which made everything, all of that nonsense go away.

[00:03:37] David Waumsley: Yeah.

[00:03:37] Nathan Wrigley: Yeah, because you literally had to

[00:03:39] David Waumsley: pick, didn't you? Which team were going to be on, Yeah. and, generally the head is the, first thing that goes in the HTML element itself. And I've just put here because somebody else told me this, will mention that person, Harry Robertson. It's a good idea to go and validate.

People don't do this these days, but there is the [email protected], which is good for HT ML validation. and we passed. I've just done it on our site. Oh,

[00:04:08] Nathan Wrigley: okay. Great. Yeah. So we passed. You followed all of those things. You didn't include a tag that couldn't be included or shouldn't be included, and you've got your, document declaration correct.

A bravo, yeah. First thing.

[00:04:19] David Waumsley: Yay. I do that now and I haven't done that. We used to do that in the early years. Again, used to have those little tags that you could put saying that this was

[00:04:28] Nathan Wrigley: valid. H-T-M-L-I know, yeah.

[00:04:31] David Waumsley: Yes, nobody does. Nobody does that these days, but perhaps we should. But there is a caveat with that because a lot of what is seen as good practice is often used in a lot of inline modern CSS.

And if you do that, is gonna churn out lots of errors. 'cause it doesn't recognize modern CSS in there. if it doesn't validate, it's not necessarily a problem. okay, so let's talk about the essentials that we need in a head element. These three things that we really must have in there.

And that's a meta tag to set the documents character set to what is UTF eight, which, oh, David, come on. What does that mean? He says, because you can't see it on the screen there, but I'm hovering over it 'cause I've put it in there. It means Unicode transformation format eight

[00:05:17] Nathan Wrigley: bit. Okay. I didn't know any of that, and I still don't even get what that does.

Like I get it. You've got to include it. why eight bit? I'm not asking that as a question because I'm, I don't know if one, but, anyway, it's required, but what if we made it into a nine or a seven? What would happen?

[00:05:36] David Waumsley: I don't, I don't know how it works, but

[00:05:38] Nathan Wrigley: anyway,

[00:05:38] David Waumsley: we know what it does.

We know we need it. Yeah. Yeah. It allows all those. All those unicodes that are in your fonts or available, any way to be able to use them. And I use them a lot actually. I use like little arrows and stuff and yes, triangles all over. And if I didn't have that, I don't think it would recognize them. So yeah, so we've got that.

And we need a meta tag at two set of view ports to initial scale of one for responsiveness. If we don't, we'll be on our mobile phones and it'll try and show us a desktop view, too wide. We need that and we need a title tag, a name for the document. So particularly screen readers for accessibility so they can read that first and know where they are.

[00:06:19] Nathan Wrigley: which, so sorry, just quickly. Then those three are the basics. Like we, we have the, list of eight that you can use, but those three are the ones that you must have, you cannot pass go unless you've got those three included. Yeah,

[00:06:30] David Waumsley: I suspect you prob you've just get. Problems with it, won't you?

You'll get problems with your characters, you'll get problems with scaling. Yeah. And you'll just annoy a lot of people who won't know where they are. Accessibility and a title. Yeah. Good point. Yeah. Yeah, so really the rest of this is about the common issues. Many of these. If not most, I didn't know.

And this is through other people's work. So for accessibility to meet, basic, the basic standard I've put down here will tag 2.2. We must have title tags that describe the topical purpose of a page. And I've got, for those who can see it on YouTube, I've got the document up here. So we just need to make it clear and consistent what our pages.

are telling us on this. So typically I think, and I used to be terrible at this, I used to keep my, I used to put keyword cram stuff 'cause I was into the SEO all the stuff and I didn't have a consistency. It wasn't, now it is about, and it's no script show on our thing and contact, no script show and keep it simple.

the one that was really fascinating, the first bullet point I got here was to avoid special characters and certain types of punctuation. And it's, again, Sarah Suan an accessibility course, which she, it was a sort of passing reference to it, but it's really dangerous for screen readers to be able to put certain things in, so dashes are safe, but when it comes to the vertical line or the pipe, or the line symbol, or whatever you call it, a screen reader.

May choose, depending on which one or combination with your browsers. Choose to read out pipeline or just pause as it would do with the dash. Oh, pause would

[00:08:13] Nathan Wrigley: be

[00:08:13] David Waumsley: a total catastrophe,

[00:08:15] Nathan Wrigley: wouldn't

[00:08:15] David Waumsley: it? no, pause is fine. Just to pause between the, pause. Oh, I see.

[00:08:19] Nathan Wrigley: It's not gonna end there. It's literally no, just create a, like a one second pause.

Okay. Got it. Got it,

[00:08:24] David Waumsley: So it'll work as a dash. So the safest thing is Dash. And honestly, you've been good. You were just telling me that you've generally gone dashes. Suddenly I have this.

[00:08:32] Nathan Wrigley: Yeah, I only went with dashes just 'cause I went with dashes. I could easily have done pipes, but I just went with dashes forever.

So that's what I've used. But pipes to me look more. Appropriate un unless it happens to coincide with a lowercase L, in which case it looks sometimes like you've got two or three Ls next to each, other. So that's weird. But I didn't really, I didn't realize that obviously, back in the day when I started doing titles, I didn't realize that the pipe was gonna be read out by a screen reader.

but there you go. Avoid at all costs. Good, bit of advice. Yeah.

[00:09:07] David Waumsley: Yeah, exactly. I jumped onto it only recently thinking they look quite cool people do this, use pipes. I'm gonna use pipes. And now I realize that it could cause some accessibility problems. But just not only that, interestingly enough, Google also, and I've linked to a document where they say this, they say avoid vertical lines, but I don't think they explain it.

But there is a SEMrush, experiment that they did. A case study where they changed their, pipes for dashes and, it's not entirely conclusive, but there was a improvement on the visitors they had to the site for doing that, which isn't that interesting?

[00:09:44] Nathan Wrigley: Yeah.

[00:09:45] David Waumsley: So,

[00:09:46] Nathan Wrigley: you, not only is it not recommended for the accessibility side of things, but it also appears that Google etal are also giving it some negative weight.

[00:09:58] David Waumsley: I dunno why it would change things. it must be a visual thing. Perhaps people can read dashes, it makes more sense. I don't know. But anyway, according to their bit of research, so there's another benefit to doing that.

[00:10:12] Nathan Wrigley: yes. Still, I've gone off my points here. You're on keep title short and consistent across pages.

I suppose you covered

[00:10:18] David Waumsley: that a little bit already. Yeah, I, did, I jumped ahead and so I'll go on to the next one, which is keep the title near to the top of the head for quick loading because obviously if you are on a screen reader or even even if. we'll move on to that and how the order's important.

But if that comes in last, it can be very confusing If something's blocking your title coming up, you don't quite know where you are. And it's even worse for a screen reader, users who need to know where they've landed. So yeah, that's, a key thing. And it's not in the head, but it's worth mentioning that not setting the HML language attribute to something is a wagg fail as well.

Interestingly, even. The present stats on this, it's roughly, it, was amongst the top million sites. There is 15% of sites that don't have one still, which is quite incredible, isn't it?

[00:11:08] Nathan Wrigley: Yeah, that is interesting. I, again, not something because I'm a CMS user and kind of assumed that my CMS.

Doing all of this correctly, all of this is fascinating, and when we finish this episode, I'm going to go and, berate myself for what my CMS of Choice is actually doing.

[00:11:27] David Waumsley: No, it's doing, I think on the sites that I see with you. It is. Got it. And it's got the, interesting thing about that one is, so it, great Britain is the one that's been chosen for yours.

So gb is. it says English as the language, and that's all screen readers can deal with. They're not going to pick out particular accent for England, but you have got England with it.

[00:11:49] Nathan Wrigley: can I go deeper? Can I select Yorkshire Britain as well? It'll make, yeah, but it'll make no

[00:11:55] David Waumsley: impact on those people, but it

[00:11:57] Nathan Wrigley: should.

Okay. Moving on. UX page load. Yeah, I see you've got a dash there. Well done. No pie.

[00:12:11] David Waumsley: this is the interesting bit for me and this is why I thought it was its own topic. So there was a great talk by Harry Roberts, who's a, performance expert. He works on all with all sorts of big, companies. So he is done a lot of research and there's a really good, I've linked to it, the video there.

Where his talk is about getting your head straight and he demonstrates how important structure is, what the order you put things in your head really impacts on your page load. And I'm just gonna cover this quickly 'cause we'll look at it in the next video where I've got the sort of code really that's there.

But, I think the key points for is, that. firstly is that it's the biggest because HTML renders everything from the top of the page, line by line. It makes the head the biggest render blocking element on your page. So from the start, it's. Anything that doesn't need to be in the head.

He says shift out. So if you've got all these sort of trackers or even some CSS that can go in the body these days and any Java script that doesn't need to be there, get rid of it, get it out the head because that will speed things up. His other main point is, avoid things like imports and redirects to other third parties.

And you think where has to call out? Grab some information in there. I don't, there was a big debate, and I dunno if you ever fell on one side of this, about using Google fonts, whether you should, locally load them or whether you should be using their own CDN for this. And there was a lot of people argued.

That the CDM was faster than anything you would like. Yeah. In

[00:13:48] Nathan Wrigley: terms of speed, I was always swung. mo more recently I was swung just by the GDPR argument, not by the speed argument. So that kind of settled it for me. I didn't look at that. Again, it's like Google fonts. I, want to load those locally now just because the Germans are gonna come and get me if, if I don't.

And so that's, that was decision made and, I honestly, I'd forgotten that there was any kind of. Possibility that it would be loaded quicker. My expectation though, would be that if you loaded it from a CDN, given Google's might, and the fact that it's got edges everywhere, I would've thought that would have been quicker.

But it is another request. It's got a, it's got to be requested, then it's got to satisfy that request. but yeah, I don't know.

[00:14:34] David Waumsley: Yeah. according to Harry, no. really it all slows it down. and honestly I did a big for a long period actually, but. Using a page builder. And a lot of the people there thought it was faster with that.

And also, WP Rocket, which I used as a plugin, used to argue that it's better to use the CDN. Okay. And they used to pre-render that or, ahead of time. But no, in what all my experiments, it was the opposite. Local loading was always faster. So I think Harry's right on that one, but it's just Okay.

Interesting. And the other thing, this is the, I thought was the most interesting thing in this talk was that we should put synchronous JavaScript before synchronous CSS or really any CSS. And I didn't know this. And the perfect example is, and I would've done this, I'm sure, yeah, it's not true any longer, but used to get, the Google Analytics code used to be synchronously loading in the early days, the legacy stuff.

[00:15:30] Nathan Wrigley: Yep.

[00:15:31] David Waumsley: And it would always tell you to put that at the top of your head. Yeah. And you would go, nah, I'm not putting you, doesn't matter. Top. Yeah, that's right. I want the CSS first. You put it last, but what Heaves recognized out this, and I thought this is the most revealing thing, is that. It will block it because the JavaScript needs to know it.

It sees JavaScript, but it needs to know whether it refers to any CSS that you might have, which it might well

[00:15:56] Nathan Wrigley: do. Yeah.

[00:15:57] David Waumsley: So if you put the CSS first, it goes, hold on. We have to read the whole, just wait there. We have to read the JavaScript and then we'll come back to your cs. Yeah, so it, it blocks the whole thing, yeah.

Synchronous JavaScript and you before your CSS.

[00:16:10] Nathan Wrigley: that makes perfect sense when you say it out loud, but again, yeah. Not something that I had given much thought to. 'cause those, things are usually mysteriously hidden away and you don't bother looking at what the content of that JavaScript package might be.

but it does make sense. If it's gonna call some CSS, why not allow it to have access to the CSS because it's, it the JavaScript comes first. Yeah. Makes sense.

[00:16:34] David Waumsley: And the other thing, I think that was most revealing, but something that doesn't really affect me. But if you have these, CSP headers or content security policy headers, that restrict, where you can bring in things from, you restrict the sources that you, that a lot of people put them quite low.

and they would, according to his research, it would break that parallel preloading that you automatically get, so everything will simultaneously load at the same time. If it can do, if you see, oh, okay. And if you put this somewhere down the bottom, it breaks all of that happening.

so you need to put that right at the very, top. He doesn't mention it, but interestingly, I double checked it and it's actually one of the policies, if you're using a content security policy for security reasons, you need to put it as one of the first things in your head, not just for performance as well.

[00:17:29] Nathan Wrigley: yeah, so four important points, most of which I would completely have. Forgotten about and disregarded, therefore, but that's, none of that is hard to remember. Is it? That all makes sense. I'm never gonna be using the CSPs anyway. In all honesty, it's, and most of it, again, in all honesty, I'm letting, WordPress, the CMSI use handle much of this, but it all makes sense doing it that way.

Yep.

[00:17:52] David Waumsley: Yeah, there is. a quick little tool. I'll just bring that up over here, which is a little bookmark you can use that's been made by Harry, where I've actually got it in here.

[00:18:03] Nathan Wrigley: Yeah, I saw that. I, put it in as well and I had a quite, a very quick play. Did

[00:18:08] David Waumsley: you,

[00:18:09] Nathan Wrigley: let's just go

[00:18:09] David Waumsley: back to our site.

[00:18:10] Nathan Wrigley: What does it, yeah, you can click it there.

Now. You might have to reload it. I don't know.

[00:18:14] David Waumsley: No, I think you should come in there. yeah, its pointed out this isn't very revealing. It's pointing out that a blocking style sheet that we've got is the fact that I've. I've got a link to my style sheets here. It's actually a bundled together one rather than inline.

So there's a ongoing argument isn't about whether where you or when and where you should use inline CSS. And where you should interesting enough is quite interesting. Of course, I went to his site just so we can show Harry the person behind all of this. There is, and if we stick it on his, oh, look at this.

He's got black Mark here. His title is blocked by JavaScript. Oh. But of course. No, it's actually, I had a quick look. I thought it's, what's he doing then? He is actually got a little bit of JavaScript, which is measuring the performance of his head. So he's obviously Oh, okay. He's obviously doing some testing at the moment.

Yeah. He's, being very,

[00:19:06] Nathan Wrigley: thorough. Yeah.

[00:19:07] David Waumsley: Yes. anyway, so great little bookmark on that. I think maybe I need to refresh just, oh, we didn't need it. So

[00:19:13] Nathan Wrigley: that's ct, what's that called again? That was, yes, further down. It's,

[00:19:19] David Waumsley: you find it, you'll find it on CSS wizardry if you go to our site.

Anyway, the link is there. Yeah. dot com and CT will get that page up and then you can just add it to your bookmark there.

[00:19:31] Nathan Wrigley: Perfect. Oh, okay. And I'll read that into the audio. So the, this show is gonna be on no script show. Oh yeah. Slash 23, the numeral. So no script show slash two three. You'll be able to follow the, follow the links and get that one.

[00:19:47] David Waumsley: Anyway. I, thought that gives a great, as I've made the point here, there's lots of other things to talk about with speed, preloading stuff, speculative loading is something that we'll look at a little bit later and that, do you have any thoughts on the inline CSS? I've noticed that with the WordPress stuff.

There's been a move to stick a lot of your CSS in the head now in line.

[00:20:09] Nathan Wrigley: Yeah, and in all honesty, I've I've just deferred that responsibility to the CMS itself. it's, this whole show is so interesting to me just because of the fact that I've relegated almost every decision. To the CSS, and so I will have thoughts on it going forwards, but up until this point, the answer is basically no.

I haven't been doing any of that. I've just been using a theme, the author of whom I respect, hoping that they're doing all of those bits and pieces correctly. And again, with things like plugins hoping that they're honoring the this that we're talking about. But I'm sure that if I was to go in and inspect it.

Probably wouldn't be the way I want it. it's always been a style. did you say whether things should be in line or not?

[00:20:55] David Waumsley: Yeah, I just think it's been, yeah, I've always gone

[00:20:56] Nathan Wrigley: with a style sheet, to be honest. Yeah.

[00:21:00] David Waumsley: most of what you have hasn't because of the fact that the CMS is, and it's not just WordPress.

I say it's typical for WordPress, but also, we've used the 11 base blog for our site here. By default, I changed it. It, he was outputting it in line. and I've changed it. To go to a link. Which Go to a style sheet. yeah, Which is a render blocking thing. But I, think the thing is, the advantage of, inline is the fact that you stop that render blocking.

But the disadvantage is that every new page you go to after that, you haven't got it cached any longer. So it has to. Reload that from your inline. Whereas that's true. Yeah. Yeah. So that's your, if you think people are going to go to more than one page, then probably, you better, it makes sense

[00:21:49] Nathan Wrigley: to go with a resource rather than inline.

Okay.

[00:21:52] David Waumsley: Yeah. Yeah, I think so. Anyway, it's just. We won't get into that any further. let's move on to next thing. So UX design side of things. So yeah, there's an element of design that comes into our heads, even though users don't see it. We have fons and we have our metadata for our social networks, open graph and Twitter images or X images as they maybe call it now.

So there's a bit of news on that. So I thought this was really fascinating. It's really recent. It's only Safari 26.

[00:22:20] Nathan Wrigley: Yeah.

[00:22:21] David Waumsley: I didn't know this either. Yeah. Yeah. It's just in June and I think it's fully out now. And actually if you look, so they're supporting SVG Favicons, and actually if I just go to the link here, we'll notice, can I use these, right?

So globally we're at almost 78% now with this. And honestly, since I start, I put started this article maybe a couple of weeks ago. Yeah. And it's probably gone up. by 2%. okay, so obviously this,

[00:22:52] Nathan Wrigley: huh? Because of safari. 'cause of Safari 26. Yeah. So it's across the board now. Safari was the holdout. Now safari's come on board.

You're basically good to go. Svg.

[00:23:01] David Waumsley: Yeah. and the good thing about the SVD Fon is that you can have light and dark modes with it. Something you can't do with the,

[00:23:10] Nathan Wrigley: when you say you can do light and dark modes, does it not automatically do you have to. Predefine a light in a dark one, or does it render it differently if it detects that it's on dark mode, for example?

[00:23:23] David Waumsley: No, you'll need to put it, you'll need to use the CSS, prefers. That's it. That's it. Color scheme and have an alternative to switch to. But it means it supports that. Quite interesting. I'm just looking at the, can I use here? So it's actually a lot lower, 60, nearly 62% in USA and 64. percent in uk, but of course here in India we are way ahead of you.

Nice. 94%. I wonder why, what is it that we're doing differently? I think it's probably there are less users of, and I think this is where the hold off would be of, mobiles. With Safari on it. Less, apple products, I would guess. Okay. and nearly everybody's on the mobile, so Yeah. Got it. So supported there where I'm Okay.

Anyway. Yeah. So, we still need our ICO fallback. With that on our side, I've really just put a very simple one. you can really spend a lot of time, you can either embed, can't you, different sizes in that format. Yep, So it works in different, and I haven't done that. You've just gone for the one teeny tiny one.

A one tiny, yeah, because I think this is the way forward, but I think it's really fascinating. We'll look at the code anyway a little bit for the SVG icons, but I think it's really cool that you can now create your icon and within that SVG you can add in your preferreds color scheme and the. Device is going to swap.

and it's actually on our site here, but we'll show that I think in the video. the other thing, social media wise, yeah, a great little tool, that I like to use is meta tags.io, which allows you to check what you've got on your site. So I've done it on here and it shows you all the sort of how.

Your image might show on the different platforms. I like that. That's right. Yeah. you can generally get away. So this is the generic one on the about page that I've used. But actually what we're doing on our site is we're bothering the YouTube thumbnail. So when we put the YouTube video up, it's outputting on those episode pages that, but yeah, I think that's pretty cool that you can.

use if you put enough pad in around it. So you need a sort of rough Yeah. You just get away with

[00:25:39] Nathan Wrigley: one, can't you? If you just make sure that it's not too Exactly. I, it's just not bleeding to the edges unless it's just ordinary gradients or colors. Yeah.

[00:25:48] David Waumsley: Yeah, exactly, because Twitter's slightly different to Facebook, or Facebook is a little bit odd because it's usually a 16 to nine ratio, yeah. And that's what Twitter uses, but the other doesn't, anyway.

[00:26:00] Nathan Wrigley: do we still care about things like that though? What I mean is like, how is it that those platforms still have the sway that they have over this kind of stuff? I guess it's just because they are the way people are consuming things, but, although there's like a hotbed of people who use X globally, it's a tiny platform.

Form really compared to the likes of Facebook and Instagram and TikTok. But nevertheless, I guess they just, yeah, they set the agenda and they get to keep the, they get to keep the spoils.

[00:26:27] David Waumsley: Yeah. And if you've got the format, the two formats for, the open graph, it's gonna be used by all the other ones.

blue Sky and Slack and

[00:26:37] Nathan Wrigley: all those kind of things. On, my SEO plugin of choice in WordPress, it, just requires those two, it calls it Facebook and Twitter. and you just, and it gives you a demo much like you've just seen inside the plugin, and you can judge for yourself whether you've got the alignment wrong.

But mostly if you just have a little bit of a board around the edge of nothingness, then it, anything will work. You only need one. You don't need two.

[00:27:02] David Waumsley: Anyway. I put it down as a problem. I didn't explain that. Yeah. Just because you could have them missing, and I had it missing. I forgot the social media on somebody's site and they were going, oh, it looks really awful.

And of course what it does is it takes the first thing in the dom, which was actually a mega menu in our case, a tiny image in it. It was so I had to put a generic one in there. But, yeah. we'll move into that more. Let's talk about the. Technical, SEO. So just a little bit about what we might wanna include in our head.

we've, robots is probably something that we might want to have a met name of robots so we can control the. Search engines crawl.

[00:27:42] Nathan Wrigley: try to control no real control of that at all. But yeah,

[00:27:47] David Waumsley: you are onto something there. Let me just go over here. There is ours, sorry for those who are just listening, but you'll, you've got loads

[00:27:53] Nathan Wrigley: in there.

That's

[00:27:55] David Waumsley: interesting. I've just done it and, it'll be close to your heart here, but you'll see here that I'm disallowing. Claude Bot,

[00:28:02] Nathan Wrigley: Amazon bot. Oh, interesting. All the ai I'm trying do you for a minute imagine that they're gonna honor that. Do you think, for example, chat, GPT bot is gonna come along and go, oh, disallowed.

Yeah. Fine. We'll disallow it. That's fine. I don't know.

[00:28:18] David Waumsley: I've got that and I've also got robots written in their head as well, saying No AI as well. okay. These are my two things. It'll be fascinating to, I, I dunno if I'll know, but I, certainly do see. On a lot of my sites that it's used on a lot more server resources now.

Oh,

[00:28:34] Nathan Wrigley: did you see that CloudFlare have been taking steps, about this because they obviously don't believe.

That the declaration there, disallow, for example, chat, GPT or what have you, they're obviously not taking that seriously because they've got this, new thing where they're going, to basically drop traffic and they govern about 20% of the web. So they've got fairly sharp teeth, but, they're either going to tie them up in a kind of like an endless loop of content, which you know, is not real, but is.

Kind of, it's there, but it's not actually what they want to consume or they're just gonna drop the traffic unless you pay them. I dunno if you caught sight of any of that, but I definitely wouldn't be trusting these companies.

[00:29:17] David Waumsley: Yeah, I got it from your other show. I wouldn't have known about it.

Okay. Yeah, it did amuse me, but yes, same as you. I'm. I'm not sure if I want another big megacorp to help me with the problems of other mega corps,

[00:29:29] Nathan Wrigley: Yeah.

[00:29:29] David Waumsley: That's

[00:29:29] Nathan Wrigley: a good way of encapsulating it. Yeah. Okay. Yeah. Maybe Cloud Flow is our friend now, but who knows what they'll be in a decade's time.

Okay. Anyway, there we go. That was the robots one. Where are we next? Canonical.

[00:29:41] David Waumsley: Yes. Canonical. Yeah, it, which confuses me. This, oh, I've got robots twice on my list here, but that's, oh, that's okay. Yes. It should be so canonical. You've got two ways of ex exclude to avoid the duplicate content issue. And duplicate content issue isn't something you get penalized by with the search engines.

There's, it's just that for, you want to be listed for the right. Direction to that content, don't you? So C canonical tags are a good way, or the other way is to go with, and this is written wrong on my notes, so I'll change it. A MET data that's saying this content is no index or something. So you, yeah, So just to ignore it if it is a duplicate. So they're quite key things. I've got canonical working and it. To be honest, it's a bit of a mess. Maybe we'll look at it in the next, session. 'cause I have to put all this programming in to make sure that when we've got all these separate pages that I dynamically created with the system, that I had something that was changing my, data there to, read that out as a different page.

Oh gosh. Yeah. So it got, it can get quite complex. Probably It's a lot easier sometimes just to Okay. Say, index, and then the one I didn't even know about, It's just doing this research on their ones, the alternative language for X on that, for internet, again, it's another duplicate content thing.

you're supposed to really specify which language you're primarily in. Also. Otherwise, you can get duplicate content issues with that if you've got different languages.

[00:31:07] Nathan Wrigley: So for example, if a page is in, is once in Italian, once in English, once in Spanish, and what have you, is to declare it with this alternative language.

[00:31:15] David Waumsley: Yes, I think so. So you can end up with some problems there. Okay. And finally, this's, just the other one that we needed to put in, which is again, a link, alternative, which is leading to where your feed pages, if you've got RSS feeds, which we do in this, we do. there was something interesting I do think from the technical SEO side of things, and I, did a test.

I used, this was a deal about ages back because it's quite expensive. There's a web auditor, which is I remember that. Yeah. Yeah, exactly. And there is a, an alternative for partly free screaming frog's, SEO spider, where you can crawl your pages. So I did this. Recently, and because I didn't put forward slashes on some of my addresses in my head, I got.

So many 3 0 1 redirects, but I have, sorry, again, to those people who are viewing this, I did actually put, there is a link there that shows our results on this. So it's quite, useful to, to see

[00:32:16] Nathan Wrigley: where there are issues. sorry, was that a, an, was that a missing? Trailing forward slash at the end of the url?

Yeah,

[00:32:24] David Waumsley: so yes, no script show and often I've put that in the dynamic URLs without the trailing slash but our setup automatically goes to the trailing slash so when I put it in there, it's having to do this redirect every time. Okay. Got it. Which is obviously going to have some slight impact on the user because it means their browser has to do more work.

[00:32:45] Nathan Wrigley: I again, haven't given that enough thought, but I will give that enough thought. But it's one of those things that when you paste the URL without the trailing slash, it looks more human readable. So let's say you paste that link into an email or something like that where you know it's being consumed by eyeballs, then you have the intuition that it'll look better if it's not got a training slash, or at least I do.

But obviously then the browser has to do work to say, wait, no. Add it. Okay. Yeah. Good to know. Yeah.

[00:33:13] David Waumsley: our setup is to always have the trailing slasher, which I think is pretty much the same in most WordPress if you automatically put it in. Yeah. And it's probably taking care on that, but with me doing it myself manually.

Exactly. Yeah. I left them off and I create a whole bunch of issues here. But yeah, I think these tools are pretty good. obviously this. Premium thing, and I was lucky to get some deal earlier on, but it does a really good job of picking out all the sort of silly redirects that you can get as a source of your head.

there are some errors which are showing on here, but I'll just tell you that this is a bot error. So it's saying it can't find something, and it's also saying there's some broken links, but in natural fact, it's the bot, it's, CloudFlare protecting me. Oh, from, the bot crawling my email address.

[00:33:58] Nathan Wrigley: Okay. Okay. I can well understand why they're doing that. Yeah. Okay. Swings and roundabouts with CloudFlare today then.

[00:34:04] David Waumsley: Yeah. Yeah. So they're doing a good job there, but they are showing me errors on there, but that was, yeah. So we've tied it up our head a little bit now. Yeah.

[00:34:14] Nathan Wrigley: I've always had a fairly messy head, to be honest.

And, now I'm feeling as if I've had a qua. I've had a, I've had a smart haircut and a buffing up. No, that's really interesting. That's great. Just. For the people who are listening to this once more, if you wanna follow the bits and pieces that David has put on that page, it's gonna amend the few things I think probably that he said needed amending no script show slash 23.

And then in a few moments from now, David and I are going to record a, visual version where David goes through this in more detail on the screen, so less audio, more video, and you'll be able to find that. no script show slash learn slash 14 with a trailing slash I might add. but it looks better like that, so I'm leaving it like that.

So there you go. You'll be able to find that as well. So there'll be some, addendum to this content. Is that it? Have we done for this one?

[00:35:11] David Waumsley: Yeah. then, we'll, we're gonna look at the head now as a component in a bit of code that the way it's set up actually on our site. I just thought it's quite interesting what, Where the series might go actually. Yeah,

[00:35:23] Nathan Wrigley: yeah. Honestly, there was like, that's 1 0 1 basic stuff that we've just covered, and I knew way less than 30% of it. So

[00:35:32] David Waumsley: yeah, I was just, I, was flushing red all the way through reading this stuff, putting it together, going, oh my god. Basic, stuff.

[00:35:39] Nathan Wrigley: Okay, so in which case we will, we'll pause the recording there and, we'll see you next time.

If you're listening to the audio, if not, come and join us for the video. See you in a bit.

[00:35:48] David Waumsley: Bye.

[00:35:49] Nathan Wrigley: Bye.

Better HTML head tags

2025-07-15T00:00:00Z

Show Notes:

Following our chat with Paul Lacey on design systems we are looking at the head element on the No Script Show. How it is set up could be the start of our own design system. Key points:

Our site is on Github. You can reach head code here.
The site is created with Eleventy (11ty) and uses nunjuck templates.
We're creating small components containing links to code resources.
The aim is to include cut and paste snippets and quality checklists.

Resources

Transcript

[00:00:05] Nathan Wrigley: Hello there and welcome to the No Script Show. This is a video follow up from our podcast, episode 23 that was called Are We Right In the Head? You can find that at no script show slash 2 3 23. Here though we're looking at the code used in the no script shows, head tag and links for what we are showing over at No Script Show slash Learn.

Forward slash 14. So one four. I'll put that link on the screen in a moment. So if you are watching this on YouTube or something like that, you'll be able to get that. But, hello David. How are you doing? Hello? I'm good. Good.

[00:00:40] David Waumsley: yeah, we might as well bring the show notes up on this one straight away.

Okay. 'cause not many of them, we'll just go and look at our head here. in some ways. I think we're following up on that chat that we had last time with Paul Lacey on Design Systems, and we're trying to put something together that's a design system as we go through these components. And here I just thought I'd share this kind of early start of how we're chopping up this site so people can look at it and go, either take inspiration from it or find errors with it and let us know.

Okay, which is, it's more likely to be the latter, but. So what I've done is I've put our site, which is an Eleventy site on GitHub. So I'll just go over there and you can poke around in the code that we have. So our site was taken from the Eleventy base blog, and I've Been messing around with it since there, so lot's changed.

But if you go into, whether is that a link there to our repository and you go into, the include section into layouts and into partials, we'll see we've got a head, nun jugs file over here and. When you're in here, you can actually go in there and use their own editor, which I've done. So I'll go over to the page here and your setup might look slightly different 'cause you can bring in whatever extensions you like.

Okay. But this is a dark mode and this is what I thought we'll try and do with the, as we get into sort of these sort of components, you wouldn't think of the head as a component. 'cause it's not a seam. But I'm treating it like that and I'm thinking. With our other site that we have, which we've called the Intrinsic Framework, it's a jotting pad for bits of code that I might want to copy and paste, or as a way of checking that.

When I build new sites and do stuff. So I thought I would try and combine it and put it all in this one document here, into the section and then put links into it. as we were talking about in the first audio session on this, talking about heads, we were influenced by Harry. Robert's, talk, which was saying how you can structure your header.

So I've got a link here, so anyone can just go and follow the link here and bring up the details here that we've got here. Now, this will just be a. running document as somebody has someone kindly listened to our, episode on, accordions and we had a, an issue that I'd never solved in the CSS, which was about the little triangles on the details.

Details,

[00:03:22] Nathan Wrigley: yeah.

[00:03:23] David Waumsley: Yeah. And that you couldn't hide it from safari. And this person came back with a. The solution. So there was a

[00:03:29] Nathan Wrigley: way of doing it. Very nice. There

[00:03:30] David Waumsley: was, so the same is for anybody else who might wanna listen to this here. as we're learning as we go with all of this. So I've just put in here, I mean it's worth just taking a quick look because we skimmed over in the audio session about Harry Roberts talk.

There is the link so you can listen to him. It's about an hour long, I think. And there is this sort of, Guide here to what you might want. So I only mentioned the certain things that we use, but this is the exact order that you suggest that we put things in. So it includes other things that we, might not have mentioned where you might put pre connect, where you might put a synchronous JavaScript.

we've got none of that running in our site, where we might put the import. So there's all the order there and that's formed the basis of when I'm putting something in the head, I'll look at this first and go, which order is it going to go on? Where we're gonna put it in

[00:04:23] Nathan Wrigley: our head? I, suppose that's immutable as well.

That's not really gonna change over time. That document is it. what you see there is, gonna be until some major thing happens that's gonna be good for a decade or more.

[00:04:35] David Waumsley: I would've thought so. Unless, something changes in there. I, guess things are changing all the time. a lot of these pre connects.

I, I just wonder, I haven't got a policy yet, but I think with all the, I forgot what it's called. Synchronous loading. Is it called that you might remember I just mentioned

[00:04:53] Nathan Wrigley: you, are you talking about the CSF, the acronym of the. And No,

[00:04:57] David Waumsley: I'm talking about the fact that you can preload, pages.

Yes. I think

[00:05:02] Nathan Wrigley: synchronous loading was what we said synchronous. I can't remember. Let's go with that.

[00:05:06] David Waumsley: Yeah, it's the Google thing. It seems it's only in Google at the moment, but it might take off and that might change maybe.

[00:05:12] Nathan Wrigley: Oh no, you are thinking of. Speculative loading. That's the one. Yeah. Okay.

[00:05:19] David Waumsley: Yeah. Yes.

Speculative. I

[00:05:20] Nathan Wrigley: knew it was

[00:05:20] David Waumsley: wrong. Yeah. So that might change things like here, where you mark things up, but otherwise That's a good

[00:05:25] Nathan Wrigley: point. Yeah. Okay. Fair enough. Yeah. Yeah.

[00:05:27] David Waumsley: Yeah. And also, for those who didn't see the, those who did listen to the audio and listening to this, one thing I didn't mention is about schema markup.

'cause I was a little bit, because it's a kind of script in there, but I assumed it would follow. His rule that you generally put all your urgent stuff at the top of your head. At the top. Yeah. Yeah. Those three key things that we need, like the, the page title, that we, need something on our view ports over there and that we need a character set on the top.

And pretty much when we get to the CSS and the JavaScript, there's an order depending on how they load. But the one thing that I hadn't thought about, 'cause it's not mentioned in this talk, was about. Uses schema markup because it's contained in the script. Where does that go?

[00:06:12] Nathan Wrigley: Oh,

[00:06:13] David Waumsley: it, I, double checked it and, I assumed it would go in with your SEO, which should be, that's last, basically.

Okay. Unless it's the title. Everything that's SEO goes last in your head.

[00:06:24] Nathan Wrigley: Okay.

[00:06:24] David Waumsley: Yeah. and that's the case here, because it's not synchronous. Scripting as such, it's, it's not gonna hold anything back, so it can go last,

[00:06:33] Nathan Wrigley: on that. I'm just gonna quickly read into the podcast if you're, watching this, the, the audio podcast that we had the notes for that were at this url, so no script show slash 23 2 3.

I said it at the top, but I'll. Put it on the screen and then the bits and pieces for this one, no script show forward slash learn slash 1 4 14. Okay,

[00:06:54] David Waumsley: there we go. Yeah, so we're just following on there and I've put the key points that we got from this talk over here just as a quick reminder about the important things.

But yeah, his orders really useful. So that is, something that I've put in my document over here, as a way to link to it, just to refresh myself on it. But our own head, in some ways it violates, we were talking about before. I'm using Eleventy here, which allows you to bundle together all of these individual CSS files into one which I'm using here, and I'm using a link tag over here, which is doing that.

So there is an argument that you could use this and. The Eleventy Base blog actually does that. It outputs it by default as it into your head. Okay. The whole CSS goes there, which is interesting because according to Harry Roberts, you could, it could be CSS that you could put in the body in effect, but, as another place to put it, So that was the main thing. So this has structured the order of things that I've put in, but there were other things that we talked about in our audio episode, so I put some links up to this. So something on the fons here. and yeah, we

[00:08:05] Nathan Wrigley: talked about them being SV Gable, didn't we? Yes, exactly.

[00:08:09] David Waumsley: From Safari 26, which is only out in towards the end of June, I think 2025.

Anyone listening to this a lot later and. Because of this. I think it's a, real game changer in the sense that we can now have these SVG icons as I understand it. I dunno if you remember, there was a conversation I was having where I wanted to link to an SVG and put. prefers color scheme within that SVG and for the browsers to honor that.

So I didn't have to put that SVG in line.

[00:08:41] Nathan Wrigley: Yeah.

[00:08:41] David Waumsley: So I could change things. I don't know if this changes that, because it was the only browser safari that didn't do it. So I'm wondering whether we now have to put in line SVGs to build up, to have. It prefers color scheme. You had to, and maybe this is gonna be a change that I haven't looked into it, but I can show you this in action.

So anyway, let me just quickly go over this documentation. let's just have a look here. So there are a few things that we obviously want to still put in here that we've got our SVG that's the most important now supported up to. Roughly 78% of the moment increasing. I think as things change with Safari, we still need our fabric on ICO, which of course a fallback.

yeah. Supported by everything that goes back forever. we may want to include, something for apple touch screens, so ping on that one. I've done that and I haven't bothered with the progressive web app. Link on that one at all with ours. But the light and dark is quite interesting because this is literally the one we're using on our fon at the moment on here.

And just so I can show you it, as you can see within there, we've got, in the Fon we've put a style sheet on here, and then we've got a media query changing the bars and the brackets. Of our icon here.

[00:10:06] Nathan Wrigley: Yep.

[00:10:07] David Waumsley: Now, if you change our scheme here, this isn't working because there has to be a separate setup for this.

This is using,

[00:10:15] Nathan Wrigley: right? Because that's not the fcon. It's not, yeah,

[00:10:19] David Waumsley: it's, this is one of the most awkward things I think about light and dark at moment. We can't just rely on. Having preferred color scheme on CSS, we have to build something in separate to make that work. And we can add this in, but I haven't added it in for preferred color scheme.

Okay. So our is working on other attributes, but if I go, and actually I'll leave it here because I've got this little tool on here, which will change without me having to go into the settings I have. Oh yeah, you've got a little chrome extension.

[00:10:49] Nathan Wrigley: Yeah. Look at

[00:10:50] David Waumsley: that. Yes, I have. So I could see, it's working.

if I set my browser or device, you can see it's changing the colors here. So I think that's pretty cool. So that's pretty neat.

[00:11:01] Nathan Wrigley: yeah.

[00:11:01] David Waumsley: Yeah. So our Fon, which we're using on our site, I dunno if you can see, I'm pointing over here.

[00:11:06] Nathan Wrigley: Yeah, just about. Yeah.

[00:11:07] David Waumsley: Yeah. It's on there. But I needed to make it big. So you can see that there's a really good article actually, on Fons here, but it goes into real depth about, the kind of sizes that you might want for your ICO image.

And I haven't bothered with any of that 'cause I think it's. It's like the, it's some relic of the past, isn't it? it's hopefully it will be soon. I think we'll all be on s vg, so that makes sense. So anyway, it's just some little notes there on that. let me just go back to my head code over here.

Okay. And the next thing that was worth talking about was the social media. I've set up a page as well for that, on the intrinsic framework and just worth mentioning this, I think, Because it's quite a lot of code to have to put in. I think the simplest way, if you're just doing a brochure site, and this is what I've done on some sites where you're not expecting much to get shared on social media, maybe your about page, really, you don't need to replicate all of the options that you've got for open graph and Twitter where you know you're asked for your description and your titles.

If you don't have them, it's gonna take the site's title and description and use that anyway. So the only thing that we want to probably stop is it's showing the first image in the do or whatever image, the social media. because that could be any

[00:12:29] Nathan Wrigley: random thing.

[00:12:30] David Waumsley: Yeah, exactly. Which is inappropriate.

So really, as we talked about before, you could set up one social image if you put enough. Probably about 15% of us border around a, an aspect ratio image of about, 16 nine. 16 nine, something like that. Yeah. Yeah, exactly. And that's gonna work for all of them. I tend to put them, I think at the moment you, need, for sort of the best arrangement, you need something that's over 1200 pixels, but I just tend to use 1920 and use that.

Web P, it's so small, it doesn't make any difference that size difference. They're,

[00:13:10] Nathan Wrigley: they're so close. The Twitter one really just seems to shave a little bit off the top and the bottom. That's on a tiny bit off the side. The aspect ratio is such that if you just add a, like you said, 15% of just white space, for one of a better word, everything will be inside.

Both of them easily. Exactly.

[00:13:27] David Waumsley: I

[00:13:27] Nathan Wrigley: think it's, Facebook's the one that cuts it slightly short of it, and it's, oh, I thought it was the other way round. Okay. Yeah. Yeah.

[00:13:32] David Waumsley: I think it's that way round and it just, yeah. Shakes a little bit off the bottom so you can protect against that. But the full HTML I've put here where you can fit each of these, put your own unique titles that go for each of these.

Now I have, even though I've made this dynamic, I've put that in our head. But it's actually didn't need to be there 'cause it's just a repeat of what's in our default titles and description. But we could, I guess we could add. Hello Facebook user before them. Facebook. Yeah. Don't we just and then I've put in just of interest because this is the same code that's in the dynamic sort of nun jug stuff that I've set up for our site, which, I dunno how much interest that will hold, but I'll go over to, here and look at it 'cause it's the same and.

What we've done on this. And same thing could be done on WordPress. In fact, I'm thinking of replicating this in WordPress. The whole idea of this is that because I,

[00:14:29] Nathan Wrigley: nearly fell off my chair when I heard that in order. Yeah.

[00:14:32] David Waumsley: I just thought, it'd

[00:14:34] Nathan Wrigley: be probably a classic

[00:14:35] David Waumsley: theme 'cause it's, Yes. but yeah, doing exactly the same thing. And also what I like about this, because, something I was mentioning to you earlier is that you can put all these notes in there and they're not going to be outputted into the source code. So if I go to source code, you'll see it's all tightly packed over here.

But actually if we're looking at here, I've got these gaps. So as long as in nun jugs we use this comin system and put a little dash. Buy it takes away the space that it occupies so we can put in as many notes as we like in our system instructions. And so I quite like it. It's the perfect

[00:15:11] Nathan Wrigley: commenting system in that case.

Yeah, exactly. As much as you like. And it's never gonna appear in the

[00:15:16] David Waumsley: Exactly. So all my instructions, idiot. Do this in your head tag is basically, that's one I'm setting up trying to set up quality control and mine

[00:15:25] Nathan Wrigley: is usually the URL where I stole the bit of code that's about to follow it. I

[00:15:30] David Waumsley: write

[00:15:30] Nathan Wrigley: down the,

[00:15:30] David Waumsley: the url.

Yeah, it's basically the same really. I'm just linking out to where the stolen code that I'm putting in there. but yeah, there's quite an interesting conditionals go on here. It may not be so much of interest, but what we have going on here is that, We have something to say in here if what we're using is the YouTube's own thumbnail.

So when we finish this recording, it'll go on YouTube, we'll have a thumbnail with it. And instead of having to provide for social media, for other social media, our own image which we have to store, I'm simply just taking. The one that's already there with Google and output in it. So that

[00:16:13] Nathan Wrigley: little video ID inside the URL there becomes the video ID and thereby therefore, that makes that URL work.

Exactly. It's a web, image, wherever that destination is, and you just need to supply the video ID and the exactly drops in there like a merge tag

[00:16:31] David Waumsley: basically. So the page that we're looking on, the one where we put our notes for today at the moment will, because of the conditionals that we've got here.

So if I put in the video ID something I've made myself in my front matter for this page and given it right the id, then it's going to output the content and that image over here. If I haven't done that, there is another option, which we haven't actually used. But if I've got something which I've called a featured image that could be showing, That would also be showing on our page as well. And if not, and what's presently showing, if someone can see the show notes before we put the video, it will be showing our generic, one that we use for about and homepage,

[00:17:15] Nathan Wrigley: right? So the syntax there is, you've got the, video idea is the preferred way, but then you've got a fallback with your else if, or l if as it's described there, which is gonna be the featured image.

And again, you'll set that somewhere as. Possible fallback, and then if neither of those get us supplied, then it just falls back to some the OG image of the. Site. Yeah. Of the entire site. Got it. Okay. that's really, I like that. Yeah,

[00:17:41] David Waumsley: it's, yeah, so it's quite nice to be able to set these things.

So of course you can do the same thing we were talking as well, about, let me just go back over a few things. There are a few preloads that we've put in over here. one of those actually a little bit complicated unless you saw as. Setting this up before, but we haven't done anything about setting up the site.

But, with Eleventy, if the layout is one of the posts here and it's got the video id, the thing that I've set up, then it will preload that image here. So it on our pages, it shows quickly. So when we go to those episodes page, that image is coming in from Google. But I want it to preload as quickly as possible.

[00:18:24] Nathan Wrigley: So that's an, if without a fallback. That one to just, if it's there, great. Yeah. Do something. It's there, preload it. If not, just move,

[00:18:31] David Waumsley: chill out. Yeah, Exactly. And that's, the fonts are being preloaded, that's all. the SEO this, I mentioned this in the audio, that there's, it's, belt and braces really with this one.

So there is a robots, text file that's in there listing all of the. AI that we don't want to come. There was many. There was many. And there's this one which I've put in as well. I dunno how effective it is, but there we are. There's a canonical. I think probably I've covered that. Is there anything else that sort of No, that all seems eye on this, doesn't it?

[00:19:11] Nathan Wrigley: Yeah, no. If I'm following that through, that all seems about right. Yeah. I can't see anything that you scroll past that you didn't mention. So that was it. It was just a little, anyway, I

[00:19:20] David Waumsley: just thought it was probably worth just showing our own site and now I've put it public. I'll try and build little sections.

People can follow along and see and take inspiration or find, as I say, if they can find things that we can make better, then great.

[00:19:39] Nathan Wrigley: Yeah, please let us know. I, I think that's the shortest piece of content we've ever made of any kind. we're just over 21 minutes. What the heck? life is not normal.

Yeah. That's interesting. so just a quick reminder. Because I might as well get another minute out of this and get it up to 22 minutes. The, if you want to hear the podcast episode that goes with this, you can probably find it on YouTube as well. But here we go. No script show slash 23. Numbers two, three.

And then if you wanna find the, links, which David has just been demonstrating in this one. No script show slash learn slash 1 4 14. That's it. Is it is. Okay in that

[00:20:21] David Waumsley: I think we might take a small break. Just, we might not be back, because there's a few things that are happening where there's me.

Coming over to your country, Nathan?

[00:20:29] Nathan Wrigley: my country. That's right. Yeah. I very much feel the ownership of that country. It's a heavy burden. I do like to help the king out from time to time and, yeah, that'd be nice. And also you've got nice things happening in your life as well, which, maybe we'll get into at some point in a, an entirely different podcast series, or maybe not.

Thanks, David. Thank you. Take it easy. Bye

[00:20:51] David Waumsley: bye.

Are design systems worth it?

2025-07-09T00:00:00Z

Show Notes:

What do we mean by design systems?

A complete set of standards intended to manage design at scale using reusable components and patterns.

Nielsen Norman Group

A single source of truth that reduces design redundancy and accelerates the development process.

Figma

Who uses a design system?

Large sites that need consistency regardless of who’s working on them.
Solo designers who want to assemble websites quickly.
Dreamers? Realists? Organised people? Control freaks? Time wasters?

What makes up a design system?

Style guides.
Design tokens.
Component libraries.
Pattern libraries.

How do we get a design system?

Off the shelf.
Adapted from other sources.
Custom.

Potential benefits

Efficiency and cost saving.
Reducing tedious tasks.
Maintaining quality or reducing errors.
Reducing staff dependency through documentation.

Considerations

Long term efficiency in an ever-changing industry?
Where design consistency stifles creativity?
How do we build on the right foundations?

Transcript

[00:00:05] Nathan Wrigley: Hello there. For the last couple of episodes, we've been looking at components that make up a website. In doing that, we are building a library that we can refer to, particularly for the next time we build demo websites on the show.

This could be considered a part of a design system, but apart from knowing this is a hot topic, we're not sure what a design system is to try and unpack this, we're delighted to be joined once again by our friend Paul Lacey. He, unlike us, has actually managed to put some form of design system together for his own work.

apart from my usual, hello to David Wamsley. Hello, David Wamsley. Hello. I'm gonna also, yeah, thank you. I'm also gonna say hello to Paul Lacey. Lovely. Hello. Now that we've got the introductions out of the way, Paul, I just a second because our listeners, if they haven't heard a previous episode, they won't know who you are.

So I'm gonna put you on the spot. Give us your potted bio quickly, if that's all.

[00:01:01] Paul Lacey: you're correct to first of all say I've done some form of a system, so I'm glad you said that. also, I'm not a full, on expert in this. I'm much like yourselves just knowing about it, see and aware that I'm doing some aspects of it, interested how I can improve it myself, and looking to see where things are going.

And I know David does a lot more probably academic study of this sort of thing because when we talk, I know he's read books on it, which I haven't. And, but yeah, so what I am a web designer developer, probably started around 1999, I think it was. I've seen a lot of change from the, using, non breakable spaces for design for instead of, CSS.

So when I started, there wasn't really any CSS right at the beginning. There probably was, but we weren't using it at the beginning. Then CSS comes in and then the.com boom and burst and all that sort of stuff. And then I think we're still. We're still recovering from that now, just in terms of how the whole western world seems to think what web design is or should be.

And I think this whole design system thing is called because it's lays down some rules that if we all, if everybody got on board and followed it, it would make for much better websites, I think. And, but where we are, I think these days is that certain level of organizations are good at, dealing, implementing these things and running them because everybody's on board.

And then as you go down and organizations get smaller, you get to a point where, the web designers are on board with these sort of things, but perhaps not everybody else is. So it's a real challenge to figure out how you can have these systems in your mind and use them.

but there are lots of factors that can derail these sort of things. So I'm hoping that we might get to the bottom of some of that today. we might not even get as far of defining what all this stuff is, but we'll see.

[00:03:08] Nathan Wrigley: Yeah, indeed. So as is always the case, David has put together some show notes, which I'll share on the screen, but you can find them.

Oh that didn't work out so well. There we go. You can find them at no script show and then slash the number 2, 2 22. So no script show slash 22. Shall we should we pop that on the screen, David and crack on and I'll basic hand the bat on over to you at this point, I think.

[00:03:34] David Waumsley: Yeah, it's only basic notes so we can try and get some definitions 'cause.

Honestly, you say, I read some books on this stuff. I, when I read articles and I hear terms like design systems used in different contexts, I don't know what people are meaning by it. There's other things like, DI design tokens, I dunno what that means. And there's different definitions out there.

So I thought it'd be good to chat because Paul and I have had some conversations before. 'cause it's the holy grail to try and find some way, particularly if you're just working on your own, to efficiently create your own websites and backing out. WordPress days, we've always tried to get some starter website.

Anyway, let's go. I, put a couple of definitions up there, which may be Nathan, you'll need to read because I'm on a very small screen and I can't read what I've written. That's

[00:04:21] Nathan Wrigley: fine. Yeah. So again, I'm reading off the screen, no script do show forward slash 22, and the, headline for that is, are design systems worth it?

And so we're gonna begin by asking the question, what do we mean by design systems? There's a couple of quotes, which I'll just read out. The first one says, A design system is a complete set of standards intended to manage design at scale using reusable components and patterns. And I can, that's the Norman Nielsen or Nielsen Norman, I can never remember group.

and then a source. From Figma, the design tool, a design system is a single source of truth that reduces design redundancy and accelerates the development process. So I guess they're broadly similar in a way. Do you want me to read the other bits about the, who uses a design system, or should we dwell on the, what do we mean first?

[00:05:12] David Waumsley: Yeah, I, I like these definitions. I don't know about you, Paul, because they're, pretty vague. So under this definition, what you've been doing with the page builder that you've used, you've created this whole system to be able to put together websites through these kind of row templates, haven't you?

So you can do that and there's nothing there that would say, that's not a design system, I don't think. And you could argue even what we're trying to do at the moment, which is, it's interesting because our series that we've done before, I was model it on the idea of what you did.

Paul, in a way was thinking, okay, what I want to do is to have not necessarily row templates because I'm working much more with grid and, my page layouts might be different, but the fact that I thought I needed something so I could grab this bit here and have a header here to here about, a middle section, some, accordions and stuff like that.

As I've gone on, you realize for, us, that a component ends up being an examination of what the HTML and CSS options are when you are constructing something. It doesn't turn out to be something I can easily drag and drop in.

[00:06:28] Nathan Wrigley: So does that, when you say that, so obviously rows, we understand what that is.

That usually represents from the left to the right of the screen and it's a horizontal block of stuff. But a component is the, bits, if you like, that might sit with inside that. But are you saying then that the component, when you really get to it and you do this work over and over again, you realize that even that sort of definition and clarification doesn't work because it might be that you want to take out a little bit with within that component itself.

And so really what you are forcing yourself to do is forget how it looks, forget the bit that you could drag and drop onto the canvas for want of a better word. You are saying worry about the actual code that makes that up. That's the component. The ht

[00:07:12] David Waumsley: Yeah. we started ourselves trying to do the accordion and straight away we realized that where the accordion is used and what we expected to do, so we'd have to have a whole series of them.

So in terms of us getting some sort of design system was really a. But we're putting together something as part of our series, which ends up being nothing more than a few sort of bullet points about how this will work for accessibility, when this is appropriate to use, and not that is more useful than the drag and drop component itself, So it's been quite interesting, our own attempt to build a design system, which gets more naughty the. The more you get into it. But anyway, sorry. I, no.

[00:07:51] Nathan Wrigley: I'm gonna, I'm gonna keep this going if you don't mind. 'cause I think this is interesting because the word design by definition, I think is the use of the, I, at least in my head, I'm, imagining what I can see more than anything else, as in what is put on the screen.

And obviously you've got tools like Figma, that's their bread and butter, isn't it? Is what is the whole point of that tool is to create things that you can send to people and you can see it. But what you are saying is that for you, that definition, you've gotta atomize it a little bit further and go, into the code.

Because it might be that, okay, there is an accordion, you can see that's fine. But because of the various different ways you could use an accordion, it might not look the same each time. And design system already we're we've come against some trip wires because I'm thinking that's what you look at.

And it, and not really, that doesn't live up to the definition you've just described of code. So that's interesting. I think.

[00:08:49] David Waumsley: Yeah, it's quite interesting. If you look at the design systems, well-known design systems that are out there, like there is, the material design system by Google. there is, there's Nord Health there, there have a big design system, which is perhaps more about the look of things that you might bring in.

But then when you start to look at, I think interestingly there's been a move, if you look at the, there's design systems as well for the UK government, so there's one that will go with gov UK and is now the same with us as well. And when you look at those, they. There, there will be, there's elements about their own, but they're very simple.

their public sites have to be design-wise, quite simplistic. But there, when you look at it, it's often seems to be a lot more about the rules about how to make this particular thing accessible. it'll be, and it, gets much more closer to the component of the design system, if you like, is really the raw H two ML, Okay. More often or not.

[00:09:59] Nathan Wrigley: Yeah. Okay. That makes sense. Paul, do you wanna do any more on that before we move on to the next section?

[00:10:04] Paul Lacey: Yeah,

sure. The, definitions, I much prefer the n nng one with a complete set of standards intended to manage design at scale using reusable components and patterns.

just 'cause it just, It just gels with me a little bit better. I would like, personally in my life, I would remove the word complete and it would be a set of standards. And I, because it has the word intended, I like that. 'cause it's, saying that we're trying to do this rather than the, other definition from Figma.

I think that will definitely ring, will definitely vibe well with UX and ui, designers who use that Figma product. I think, this whole concept is a single source of truth that reduces design, redundancy, accelerates development of process, et cetera. I just, what comes to mind with all this sort of stuff is that the, whole concept of design system can turn a lot of people off immediately because it immediately goes, sounds technical and immediately sounds like, ex exclusionary to people who don't know what you're talking about as such.

So I'm thinking, when you take any of the companies that we might have mentioned, If anyone who's not a designer or developer and not thinking about the HML or these, global colors or variables and stuff like that, it's are we even part of this conversation? So if you take the actual, the end user audience, how can someone in the audience or the audience of a website contribute to a com conversation and feedback on the design system and how well it's used being used?

How can HR feedback on that? How can CEOs feedback on that sort of thing? So I quite like the NNG one because it's more open also, I know we don't have it up on the screen, but the, looking at the, a couple of those, design systems, David, that you highlighted. I really do the, Gov uk, the UK government.

design system. because it, it's accommodated everybody that needs to understand it. It's, given the code. It gives you the code snippets and it shows you what you should be doing on that level. But the way it communicates about its design system, patterns or components is in human language.

whereas the three of us might talk about, we need a design system for an accordion, what's the point of the accordion? whereas the UK government website tends to say things like, here is a, design system for when you need to get somebody's credit card details for them to pay a bill.

And then, so it gives you the kind of point of why you would even care about this. And so then the finance department is saying. Oh, this sounds good. So we've got a more efficient way to get the money from people who owe the money, or we also have included in that design system a way for them to, present to the user what to do if they have a problem paying this bill.

And so everybody's benefiting that, the different departments are understanding where, what the point is for them. what's in it for me in the finance department to be, to care about this design system that, Dan from head of Design was going on about in that meeting that I was falling asleep in.

so I really liked that because, and that this is maybe why, if you've struggled to get started yourselves, it might be because. why it might be easier for me is because I don't have to worry about the HTML too much because I've essentially made a decision to not care about it as much, which I know some, if somebody might listen to this and be like, what the heck?

what kind of professional are you? But essentially, I'm living in the world where I need to use WordPress themes and WordPress page builders, and a bunch of those decisions are taken away from me. So I'm straight into the point where I'm thinking about, I've got a decision, I've got two options at this point.

I can go straight into thinking about the elements that I want. So do I want a row, let's say with, a call to action in it and those sort of things? Or do I, do, I go into purpose led thinking, which is what I've been trying to do more recently. Essentially, it's the same stuff, but the, purpose again, of a pricing table.

So you start with the purpose and it is to present the. options and recommend an option to a user. So how do we present the options of our product and recommend which one is probably right for them? And if we think about it from that angle, then we've in, we've included into our design system, the point of the element or the pattern or the component, and then we work backwards from that.

And then eventually. You can take that, rationale of why you need this component and you can stop at the point that's comfortable for me, I stop at the point where I'm dragging these elements in and designing them in Beaver Builder. Whereas if you want, you can go further back and ditch that, aspect and get, and then go, we know the point of it, we know what the users want.

So now we know what HML tags we might need as opposed to just looking at some other, I'm not saying you do this, looking at some pricing tables and seeing what elements appear to be there and then coding those up. So you've always got, like the government, UK government website has, you've always got this design component or this component or pattern can, be measured as failing or SU succeeding because there is a mission for it as such.

So I dunno if any of that made sense, but that's, That's where the two strict ones, like the Figma one to me is, a, I'm reading it and thinking that this is less inclusive as the one above it from NNG because the NNG one is talking about its managing design at scale. It's reusing components and patterns, and it's intending to improve that process rather than be a kind of, elitist sort of set of Figma documents that nobody else understands.

And if you don't know, and if you come in as a designer to our team and you don't know what this is, gosh, what's wrong with you?

[00:16:34] Nathan Wrigley: Can I try to just encapsulate what you've just said, I think in one sentence? no, It's no. But in order to just clarify in my head. Yeah. Yeah, absolutely. So I think what you just said then would be something like this.

So we'd have a Paul Lacey quote on that page, and it would say something like, A design system is a text description of design of the purpose. Of design elements, visual design elements, which are reusable, scalable components and what have you. So it's, got that kind of description bit in text as the focus, like the Gov UK one that you were describing.

And yeah. And because you've described its purpose, you've made it more accessible to people who don't have a, a background in graphic design for want of a better word, because you've, explained what its point is on the page. Is that about right?

[00:17:26] Paul Lacey: Yeah, it means that you could have a conversation with the finance department that Informs how you should make this, these components and patterns that fit into your design system. like further down this document is probably some stuff about the ingredients of a design system. Like the finance department doesn't need to contribute too much about the brand colors. In fact, they don't need to contribute about that at all.

And they probably don't need to. I forget what it's called. There's, the components, the patterns, there's, the really little things. They're like the variables. What are those called? tokens. Tokens. So that stuff is to me, for the, brand and the design team to know that, green means go, red means stop.

Amber might mean, think about it, blue means information. they might make those sort of decisions based on the brand and, but the, actual HML elements that, so the HML feels that it's more of a, it's more of a human conversation with, the, stakeholders and then the brand element is more of an internal design, creative, side of things.

but yeah, I think Nathan, what you more or less said, is, probably a better definition just, for me because, I'm, I have to have conversations with clients all the time and I have to try and justify why I've done something and I can't just say, because Figma told me to, based on their amazing design system As such, no, no offense to Figma.

They know exactly what they're doing. but to make it c communicable to who? The people I'm trying to convince to not have a slider.

[00:19:14] Nathan Wrigley: David, should we move on? Or If you've got things to Yeah, let's,

[00:19:16] David Waumsley: yeah, we can actually, because we can widen it up. I think once we've covered some of the points we've put down here, so we've just quickly, who uses a design system? So I mean there's, I guess there's two different types in that sense.

There is the large sites that need consistency as they keep changing their website, regardless of who's employed at the time. So they need some. Set of rules, if you like, about how this, the styling and the content is added to a particular style to a site. And then we've got the, people like us, maybe were solo designers or maybe small groups and that who want quick ways to assemble websites and might use a design system like that.

And that's where you might, borrow something that's already existing out there. nor, or the material design or something from Google as a starting point, or effectively even as a lot of us do, we use a, it's not exactly a design system, but effectively it gets close to it. Something like Bootstrap becomes a design system tailwind, they become, even though they're CSS based, they become a sort of design system we can borrow, And then of course, and then the big question about design systems, and that's why you see a lot of debates about, you don't need a design system, you're wasting your time with it. And those people who say you absolutely do need a design system. And I think this is where you hear all these different conversations.

'cause everybody has a different idea about what that might mean to them. So you if you invest too much, you can invest. As I've done before, invested a lot of time trying to copy Paul and what he managed to do with his Beaver builder. I'm so sorry.

[00:21:01] Paul Lacey: I'm so sorry. We'll have led to nowhere.

[00:21:04] David Waumsley: No, but I'm just trying to do the same thing when we were both using the same page builder. Yeah. And I was trying to do the same thing as you, and you actually managed to get something that was useful, that worked for the jobs that you needed to do. I was envious of that when I started doing something in a similar way.

I got myself so caught up in. Sort of little elements. And the same thing has exactly happened in this series as well. When you get into components that I talk myself out of ever getting a system that works. but maybe one day I'll get there and it'd be very thorough and it will work for me, but it's quite interesting.

So I'm definitely in that. Gotta invest in the right thing for the job that I'm doing. I think you've balanced that, right? And I, that's why this interests me how, to do it for us

[00:21:50] Nathan Wrigley: anyway. Sorry, I'm going off a bit there. That's okay. No, that's fine. So this is, the section who uses a design system?

have we finished on that one? There's something

[00:22:00] Paul Lacey: interesting on that. I just would say like the large sites that need consistency, regardless of who's working on them. This reminds me of my old, company that imploded Dicky Birds. this is why you should listen to me. I such success.

but it reminds me, 'cause, myself and my business partner both had different roles. we were working with totally different clients. my. Business partner Piera was working with a major, car manufacturer. One, the, one of the biggest ones in the world. And that was like our, probably our biggest client technically.

And that was pretty much all he did, apart from a few other bits where he would contribute to some of the work I was doing. And I was working with SMEs and charities. And so we, we would argue actually when we collaborated on my projects, because his mindset was way more, long term than, mine. And I would be asking things of him that were borderline offensive to the way that he was learning to, he'd learned to work, working as kind of part of a team at Nissan because essentially he was, he became integrated in the team and was leading UXs and UIs and stuff like that.

So it was a lot of separation. In these things, there was a lot of, rules and you couldn't break the rules because if you did, you would be, someone would hold you to account. And it's interesting 'cause you've got those two first ones, large sites that needs con consistency. So we could say large companies or brands and then solo designers who want to assemble websites quickly.

but it's the lifespan of the design system for the large brand is basically infinite. It changes, but there's always a design system that is being used every single day. Whereas the web designers who are doing a client job, they might have a design system that's a lot looser than that, and they bring that design system into the job.

They do the job, and then the design system essentially semi-retire. And the designer hopes that if the client goes off with that website that they carry on and try to make use of the systems that were put in place there. In most scenarios, they possibly don't. And that's why you have websites that launch and then they just degrade over time and become stale, and they lose the, initial, effectiveness that they might have had on day one.

And so there's a lifespan that goes through these design systems that is very short with web designers. They have a drop in design system that doesn't use all the ingredients, but it helps 'em get the job done effectively and quickly then. Is gone. And the website just lives there. But with these big companies, the design system is part of every single decision.

And nothing goes on the website unless it passes the design system. So it is just, we would argue, because I would say things like, I need a design for this by Friday, and it might be Tuesday already. And he would be like, so what do you want? Do you want, are you gonna give the UX to the client first? I was like, no, we just need to give them the design.

And, I'd be, and I would be trying to, he'd be saying, we're skipping the stage. And I'd be saying, we're not skipping the stage. What we need to do is. Internalize that stage with our experience and just get it done and we need to use our experience to get the UX done. And he would say, no, we need to do the UX and get sign off on that before we're doing any design.

And I would be saying, we will get fired. So it just is the kind of the friction and just like none of us were wrong in this. I was just, we were just living in different environment and he was right actually. And, but I was looking after the wellbeing of a company surviving in a, world that doesn't appreciate design systems.

okay. Should we move? Yeah, let's move on. Yeah.

[00:26:11] David Waumsley: The next section, once largely, I've taken the main bullet points actually from an article that is, that I've linked to, which is the Nielsen Norman Group one. So it's basically there, 1 0 1 on what is a design system. I did add something extra to this, which is design tokens, which is a term that's banded about, but what makes up a design system.

So largely it's got style guides, design tokens. You could argue that they overlap with each other, component libraries and maybe pattern libraries. That might be one way of breaking these things up. does that sound right to you, Paul?

[00:26:45] Paul Lacey: Yeah. Do you know what, I didn't even know what design tokens was until I saw this a few days ago.

So I had to, I, understand what it is now. It's almost the technical layer between the brand guidelines or the style guide. So it could be like a CSS variable that is, saying, let's say a success variable. And that might be that the style guide informs that to be a green color highlighting.

So am I right about that? It's the,

[00:27:14] David Waumsley: yeah, I think it, it depends. I think the term comes from, I believe Salesforce and their own design system. And there's a particular, I think a name Gino and I've forgotten their name, who's, really championed that. And she would very much see those as separate to, a CSS variable, where other people might see it as akin to the same thing.

She would see it as, do you know, can I step back and just, talk about why I think. This is interesting or where it gets confusing. 'cause I would think 2014 was such a significant year for, revitalizing the idea of getting, so you've got this whole bunch of people. You had Brad Frost Atomic Design, which we talked about on this show, didn't we, Nathan before, which is, a way of thinking about how you build up a website out of Lego blocks, and at the same time you had reacts JavaScript component library appearing.

So you've got that whole way which you love your

[00:28:17] Paul Lacey: favorite.

[00:28:18] David Waumsley: Yeah. But these two things, without a doubt they influence, the future of things like Gutenberg for, WordPress. It was only in the next year when, Matt Mullen, we was talking about, blocks and the idea that JavaScript was the future.

So you've got that. At the same time, it was about the same year where you've also got this. Country thing going with, I think gov uk it was the year that they won the only design award, national design award for a website before for going almost the completely opposite way with their own kind of design system.

So I think a lot of, when we talk about it, we have different ideas. So people think it's made up of, we're, thinking of react when we talk about components, people think of react even though there's web components. Yeah. Which predate it. So there are, I think that's why a lot of our, disagreements on what we think that is.

But yeah, design tokens is a word that I hate using because in a way, I don't know what I mean by it. It, I think that they would see it as one of Brad Frost's, the smaller atoms that make up a section of a website. but style guides, and this is where I think we mix things up because I think style guides is something that could stay, couldn't it?

for a company for all time. When you try to realize those style guides, that's fine. They can be turned into CSS that you go by. But when it comes to the, there's a gap in here, I think, when it comes to the rest of the design, because you either take the view that you're making up with Lego blocks, these components, but then you're failing to see the designer as a whole If you work that way. and it's the same when you build pattern libraries. it's making an assumption that pattern will remain true for all time. Where I think we already know, technically this is very difficult as we see CSS particularly changing at the moment. it. the design system that I was working on, that you are working on is based around the fact that the only layout system we had for the web was Flexbox.

Now we have grid, it throws that out. Now we have container queries that throws it out soon. We are about to get into more things with, if statements where we might be able to program in all sorts of different types of arrangements for our website. So I do think, if you try to invest in a design system at the very technical level, it's very difficult at this time.

You could waste a lot of time, but style guides maybe are something that can remain in a company as you always use this particular color for your, your links and for your header and your photo or whatever.

[00:31:09] Nathan Wrigley: I'll just point out that if you, if you go to no script show slash 22, there's a couple of links on the what makes up a design system, section.

One of them links out to, the Norman Nielsen Group as an article called Design Systems Versus Style Guides. And the other one, heads off to Figma, docs Token Studio, tokens Studio for Figma. So there's a couple of links provided by David there if you want to explore further. Yeah. Okay.

Should we move on to the next bit? How do we get the design system? All right. Okay. Three options off the shelf, adapted from other sources or custom, I'm guessing off the shelf, is what most people are gonna use.

[00:31:55] David Waumsley: Yeah, I, I. I guess so. I dunno, we've always tried to build and in effect, what Paul's done and what I've always been trying to do as well, the same time was always a, to some degree off the shelf in the sense that we're, held to the platform that we, using there.

So we've got some restrictions that come with that. I do think it's interesting though, with things that change. I think with, when you get sonic off the shelf, you are trusting that company. So when you look at, there's been some huge errors with, material design. they totally broke the web's accessibility with forms.

They decided that placeholders were a great thing to do and you can remove your titles from your form. making forms terrible for ages. Same with Bootstrap. It decided, bootstrap, I think four or something. It decided that. They were unsightly to underline our links, effectively breaking the site for whole, breaking the web for a whole bunch of people.

So I do think, there is an issue when you look for off the shelf. Where can you, particularly as things change, particularly as we become more aware of getting back to the basis of the web, making sure that it is truly inclusive, that it does, look at accessibility. This is something that I think has grow.

It wasn't there so much back in 2014 when I think we had this resurgence of the idea that we could have great design systems. So I think now getting something off the shelf would be quite tricky unless, unless it was something I would get great ideas from, the UK Gov side or Gov UK side because you know that they, as a, they've learned the lesson that they need to make sure that what they put there serves everybody.

[00:33:50] Nathan Wrigley: so are you a bit more, so there's three bullet points there. again, this is for people listening to it off the shelf, adapted from other sources. And custom, David is your plan to do a bit of two in the hope of getting to three. So you're adapting from other sources, but doing it in a custom way. So

[00:34:07] David Waumsley: it'll be interesting to see what we build up if we actually end up with a design system.

'cause we're doing this series where we're looking at different bits of websites effectively, where, we started with the co word components, but it's bits and bobs of websites that we're talking about. next time we're talking, we're gonna be talking about the head as a component, something you don't see even on a website.

But I see it as a component because there are certain rules about how you might construct your head in your document. So I would, so I'm going there. Whether that turns into a design system, it is already for me because of the fact that I'm saying. Okay. I've got little notes in my, 11th at the moment, but it could be equally in a WordPress version of the same thing.

Little notes in this section where I put my head code and where I put certain things. So there is a sort of design system building up. But yeah,

[00:35:01] Nathan Wrigley: anything to add there, Paul?

[00:35:03] Paul Lacey: yeah, so off the shelf is probably, like David said, always a little bit tricky because off the shelf is normally a digital product type thing or something to that effect that is trying to help you get from A to B super quick.

And it has to promise certain things that make sense to the person who is trying to cut some corners to get somewhere quickly. So I think that's when, we've all lived in the WordPress world for quite a while and we're aware of the amount of templates you can buy or get for free, for different page layouts, row layouts, that sort of thing.

However, I, think that the most of the three of us. We have been exposed to all of those, bought a bunch of them, look, use the free ones. And then we still end up building websites with our own layouts. And we, it's, and we perhaps just look at those for design inspiration sometimes. I think, oh, that's quite a nice, but I'm not gonna actually use that row because it's got this problem, or it's not really, it, looks completely different than the rest of my raise, but I'll take some ideas from that.

And so I think that's one of the problems with design systems, off the shelf is not all of them, but, they can suffer from having a, an agenda that is based around them getting sold as opposed to long term solving the problem. Nothing wrong with that. It's, they do some good, but I just think that's why so many of them just don't, don't succeed perhaps. I know when you look at a lot of the template packs within WordPress, they have to, their agenda has to be bling. They have to appeal to the person who can't design, let's say, who needs to look like they can. And we'll be like, oh, that looks cool. I'll just grab that row.

And then, and that's why you see some absolutely horrendous websites that look like, do you know those, that those kids toys where you ma match the different head body clothes and, you can put like the, put a skirt at the bottom and then a top hat at the top. So you get this kind of thing that the, somebody just doesn't realize is a complete Frankenstein website.

so me, I'm probably doing custom to, but I. Using, using a system that locks me into how I have to use it. But I'm probably essentially trying to create my own ones that work for me. So I'm, eating my own dog foods, I think is it or whatever, but creating systems that work for me and then distributing them to a few other people.

Yeah. but I'm totally taking influence from other things that I see. for instance, within the WordPress space, I think one that does quite well is, I think there's a theme called Ollie. Is it Ollie? That's right. Ollie. That's

[00:37:55] Nathan Wrigley: right. Yep. Yeah.

[00:37:56] Paul Lacey: And they've had to work very hard to.

I try to reduce, I assume what they're trying to do is they've got a product and the big challenge they've got is that they, the system that their, website is built on is the Gutenberg block editor, which has tons of cognitive dissident for end users. So people go into it, hearing all the hype, and then they bounce off and then they go straight back to Elementor or something like that.

So Alias had to work very Ollie. the theme alias had to work, and the team now have had to work very hard to try to onboard customers who then they hope will find this totally usable. Make sense? Because the UX is very good in the templates that they provide. The onboarding is very good, and so they're trying to create like a good experience to stop people from bouncing back to elemental.

So when you look at their templates, you can see that they've put a lot of thought into it to try and stop people from failing at the first hurdle, compared to templates that you'll see elsewhere. yeah. My, just for, information, what it is that, when you've mentioned I'm creating things?

There's a number of systems that I've been creating. They definitely wouldn't tick all the boxes of the, hardcore elite, design system gurus. They'll be problematic in all sorts of ways, but there's probably three different levels of, that I've been doing. The one that I'm doing at the moment is for Beaver Builder, and it's because Beaver Builder has the ability to have global colors and variables and stuff like that now.

So I can now build a kind of wire frame type set that is built around purposes, like I said, on the government. Website. So the purpose of this route or this page is to achieve this and that, page will have patterns in it, and then it'll have patterns will have components in it that are all reusable and they are feeding their style from the style guide, for instance.

but mostly it's pattern libraries, I would say, and the component libraries are just natural to me to put into those. So that's one thing that's my favorite one because I really feel that'll be super useful to me, to use. So I know it'll be useful to other people. the other one is commercially out there not to buy, but it's with, it's for an agency who do a lot of websites within the kitchen and bathroom design industry.

So I created a design system, or you could call it a starter website. Essentially it could be called a design system. And that means that they internally no longer have to come to me every time they want to launch a website. I just deploy the system. And I've trained people who are not web developers and designers to build websites, and they are building whenever they've tried to do it.

Before this, they were building, Frankenstein websites that they thought look fantastic and their clients love too because they were letting their clients tell them what to do and everyone was happy and they got paid, but the customers weren't buying for the kitchens. now they're making, websites that look really cool and have a following all of the templates and are based on all the things that we learned for the last four years, developing kitchen websites, kitchen design company websites.

And they're able to deploy these websites in a couple of days. And now they're design systeming their content as well, if that's possible. so because they know now, okay, when we have a page that has a showroom is about the showroom, we have two things. We have a company that has one showroom or we have a client that has multiple showrooms.

This is how we deal with a company that has multiple showrooms. This is how we deal with a company that only has one showroom. So that will then mean that when they have multiple showrooms, there'll be a choice page, which showroom do you want to go to? And then that will lead to the page, which is the, this is a showroom page, which tends to be all about telling a story of how beautiful your experience is gonna be when you come in and have a coffee, rever us and sit down and have a look and try out the different appliances and blah, blah, blah.

so that's the second one. And the third one is a template set that is based on a content. Copywriting, copywriting framework. I won't say which one it is 'cause I probably get in trouble. but it's loosely based on, a copywriting framework. that basically is another in ingredient to these design systems.

So you've got the end use, you, then you've got, where does the words come from? And then you've got the design aspects. So I've mixed it up and I don't have one yet that is all three of these things, but that's where I'd like to work to at some point. But I think that's why if you really want a good design system, perhaps you start off the shelf for your inspiration and then start creating your custom one that is adapted from the things that you're learning.

Maybe that's the right way to do it. 'cause if it doesn't work, it's gonna be a total waste of time for everybody. There's a

[00:42:40] David Waumsley: bit of all three there, isn't it?

[00:42:42] Paul Lacey: Yeah.

[00:42:43] David Waumsley: it's really interesting what you're talking about. the thing you didn't mention is that StoryBrand?

[00:42:49] Paul Lacey: Yeah, that's the word I was trying not to mention.

'cause I think if you use StoryBrand, you were supposed to pay a license to StoryBrand. So I don't think it was that one David. Actually, I think it was something similar StoryBrand, but it was, I built a system that uses, an idea similar to StoryBrand in which is based loosely also on the, what is called the, pain agitation solution system.

Yes. Yes. So define the pain that the customer is feeling why they would want their product. agitate that a little bit. What is the problem that will happen to them if they don't do something about this? This doesn't have to be a negative thing. It can be that you are missing out on the amazing thing that can be the agitation and then the solution as you present.

the thing that you offer that takes, that turns 'em from the loser that they are, if they don't go with your product to the absolute hero that they will be if they buy it. And then you provide evidence of other people who were losers before they chose your amazing product and are now massive heroes.

so, I think some of the technical design systems, are design and code focused. And then when you hit the, when the rubber hits the road, you have end users and you have, how should we communicate to those end users? And that's why I think like a design system needs to be a bit looser and include end user goals, business goals, and a copywriting, direction.

Yes. What are you, what's the, what's the consistent tone of voice that you can have throughout this? And we've, StoryBrand, for instance, it's, always about making the end user feel like the hero. Yeah, so if, if you say, we're using StoryBrand, this design system, and here are our end user goals, then everyone can get on board who's involved, and you can even communicate it to a client.

I've found things like using StoryBrand or paying Agitation solutions super useful when I'm going into a Zoom meeting with five different stakeholders from a company who've all gonna have opinions, but I frame the whole meeting around, let's just do it like this. And then they all love it because they can all contribute to that and they can contribute to how we make the user feel like a hero.

They can all contribute to how we, I identify the pain that the user has got or the customer's got before they buy the product. And it really helps get people on board. And then when I show them a wire frame or a design using a secret design system that I've got for them, they see what they said reflected in the design rather than.

That, if five people are all disagreeing, when you show those five people the design, they're all gonna disagree on the design because they didn't see, each of them saw the thing that they disagreed about in there. I dunno where I was going with that, but, essentially it was the, I think you've gotta have an inclusive design system.

otherwise, you're not gonna get buy-in from the stakeholders that will need to sign off on it and make it work.

[00:45:50] Nathan Wrigley: Okie doke. I think that was a full investigation of that part, wasn't it? Should we, should we move on to the potential benefits? David, you ready for that?

[00:45:59] David Waumsley: yeah, absolutely.

Okay. Okay. I've just, I'll just jump in. I just thought that was quite interesting 'cause that's not Yeah. Definitely what you are describing. There is something that I think you need, this system, but it's not included in what, what the articles I look at say what makes up a no design system and that, a kind of copywriting system goes in your design system.

It's all part and parcel of the same thing.

[00:46:24] Paul Lacey: Yeah,

One of, one of the ones that are built is, yeah. Starts with that because a major problem for web designers and end user clients is tone of voice and how they communicate. So you could throw a load of call elements at a page that have got a fantastic design system in there, but, You might just be doing that based on that you thought it looked cool. so it, if you use a system like StoryBrand, it takes you, it tells you your top row should be, your top, line should be a, unique value proposition. your second line should outline in very brief bullet points, the key benefits.

The third line, the third row outlines the problem and possibly agitation in the same row. So you have this kind of, so I need to do a unique value proposition. What are my possible design patterns and components to do that? Yeah. And the obvious one is gonna be like a hero banner and then a design component of that is gonna be a heading, but it shouldn't just say the name of the product.

Like the design system, in my opinion, should include a. the, big heading isn't just a H one HML tag that's big. It is that HML tag should have a point to it, which is to convince somebody if they only read that one heading on the entire website before they decided to bounce or click forward, that it also told them the important thing.

So to me, like content and the end user goals is totally part of the design, but I don't see that included in a lot of the sort of more academic talking around design systems because it's, a design industry talking about it. So whereas, whereas I have to hit the, meet the rubber where it hits the road and deal with CEOs and opinionated marketing execs and cousins of the CEO or nephews and nieces and all that sort of stuff, and I have to try and keep them on track.

So that I don't retire from the project with an excuse if something came up because I've lost complete control. So I have to say, that's why I think, bringing some of those elements would be really useful to design. And I think gov the UK government does that to this extent. With, its, with, its the purpose of this one is this, they don't necessarily, they even give the content examples, because, especially for these more transactional sort of things that you should say this and these are the words that you can say, I think it's fantastic.

[00:49:03] David Waumsley: Yeah, no, I think that's a, fabulous site. And I think that the US have pretty much adopted this kind of thing. How, I my understanding is that the US kind of went more down the, whole react route and it lost money. I think there's a sort sense that when you are losing billions as they do, you, they've had to work.

In an agile way, and they have to work, to these kind of more fundamental systems that, start with a html first approach to everything, in terms of the technicals.

[00:49:36] Paul Lacey: Yep. I think this just highlights it. Just, stay on that reacting just for a second.

[00:49:42] David Waumsley: I

[00:49:43] Paul Lacey: think, this is possibly what you think as well, but it's certainly what I think is that as soon as the, concept of web components became tied verbally to react or similar, so it is like, what JavaScript library do you use to create your web components?

I was out of the conversation at that point. I, they, I was lost to it because I'm not really a JavaScript developer and, but I, but think how many other stakeholders downstream of. And not very good JavaScript developer are now completely out of the conversation of loss control. So it just made this, to me, this, and I think this is what W three C has identified, that, as soon as this kind of culture of JavaScript libraries got mixed up with design systems, it made, web dev high, highly skilled web developers, gatekeepers Yeah.

To, decision making. Yeah. And it seems that was the wrong way to do this.

[00:50:47] David Waumsley: Yeah. Going so high level really, that you lost it. And then, and I think now as we become more. conscious of accessibility and getting back to that web, that it should serve all people. That's its unique selling point above all of the mediums is the fact that anyone with a computer then can adapt it and get the same information.

It's truly inclusive and that got lost. When all your developers and all the people are thinking about JavaScript first they skip over to, then they find something to solve CSS maybe Tailwind that will plug in. That's a system that will work. And then, the last thing they're learning then is HTML.

And as we learn more, HTML doesn't cover us full accessibility. We need to learn a little bit of Aria to get there. And and I think that's where I like those kind of, like you say with the UK ones, because they have to start from that basis of inclusivity. Yep. So it builds up on those foundations.

[00:51:45] Paul Lacey: Yeah.

Their mix seems really, thought out. And, inclusion inclusionary, if that's a word. it is now. It is, yeah. It makes sense in my context. I think with the ARIA tags and the h, like you say, the H ml tags that get you to 80% and then the aria takes you over the line to truly define what this content is, as opposed to with the JavaScript route, which you sometimes can't even see the content behind the scenes, it's dynamically changing in the document.

[00:52:23] Nathan Wrigley: Yeah.

[00:52:25] Paul Lacey: and, it's, yeah. Yeah. Let's move on. Sorry. Okay. No, that's

[00:52:29] Nathan Wrigley: fine. That's absolutely fine. a couple of sections we've got left, so potential benefits and finally considerations. potential benefits have been listed out as follows. We'll just, I'll just read them out and then we can Yeah, you can explore them.

The potential benefits are as follows, four things Dave has listed. Efficiency and cost saving, reducing tedious tasks, maintaining quality or reducing errors. And finally reducing staff dependency through documentation. I suppose they're all fairly self-explanatory, but do we wanna open those up?

[00:52:59] David Waumsley: No, I think we'll go on to the considerations, which I think the next thing, there are benefits obviously, if you can have some sort of system that you, that's really what I feel like I'm trying to work out is a way of avoiding errors.

When you get into looking at everything I put on a website, I'm, I made the no script show one, and I'm, but going back on it, re correcting things as I go through this series on components here. 'cause I realize, oh, I forgot about this. Oh, yeah. It's it's getting built. but yeah, so I think there's something to have some documentation even for yourself that reminds you of when you do certain things, even if it is, as I say, what we'll do next time ahead of which you don't even see.

Hey, one thing that did cross my mind, with style guides and branding, I said earlier and I think this is open for question now. a company might need a, some, something might stay there in terms of a style guide and it might be a permanent thing. But I question this these days because we are moving so rapidly towards this idea of users choosing their own journey on the web.

light and dark mode is the one that's taking off the most that you even that isn't so true these days if we're moving forward with this idea that there are different presentations for different types of users, depending on their own preference of how they want to consume the web.

[00:54:33] Paul Lacey: it sounded like led into the first two points actually quite nicely.

[00:54:39] Nathan Wrigley: okay. So let's go through those then. Yeah. So the considerations, first of all, long term efficiency in an ever changing industry. Second one where design consistently stifles creativity.

And finally, how do we build the right foundations again, because it's your, both of you have significantly more experience. It's over to you.

[00:54:59] Paul Lacey: Can I say something about these? These actually, so David, your approach is. Much more resilient to point number one, long-term efficiency in an ever-changing industry where you are going as deep as the H TM L code and the aria.

So when this comes back to this whole lifespan of a design system, most of the systems I'm using should all page builders suddenly disappear. At least I can take some of the thinking and then apply it to HTML and I'll be one step behind you on the tech, but I can probably get there, in time, given time sort of thing.

but this ever changing industry, it's not even really the, the industry is like us, we are the people who make this stuff right. But to me, I think the, like the word industry could be interchangeable with, the, I dunno what the word is actually, but, so for, instance, web, currently we use website in a browser and that's how we look at it.

Or on a phone. And then content now is, can be fed into things like apple, newsreader, those sort of things. So basically some of the websites I would make would not farewell in some of these situations where content needs to adapt to a different device or something that isn't a web browser. Everything I'm doing is assumed that it is been consumed, probably on a web browser or a mobile phone.

Web browser. Okay. Yeah. whereas, I can totally see that, especially with ai. I know that this is controversial, topic as such, but if it gets to the point where you don't even really look at websites anymore. We spoke about this on the last one, I think, where you just say, Hey, where basically websites are made on the fly in some kind of, they're made in real time.

So when you ask something about, Hey, can you tell me about what's the best fender guitar from the JA made in Japan in the eighties? Chat. GPT will currently give you a kind of chat about that at the moment, but it's not an inconceivable that at some point it will create a custom webpage for you that you just look at as if that page had been made with pictures and videos and all that sort of stuff.

But it would, you would imagine it would need to be able to query its sources and see h TM L tags, find aria, attributes and stuff like that. And it would only really pull in that content where it was confident that it was the correct content because it could see how it was marked up. It's not gonna go to, one of my websites where a client has told me to put this over here and make this thing flying over there and then this popup comes up or something because it's just too much chaos and noise for a future device to understand.

So I think, The, gov website is perfect example again because you can see that those elements could transfer into other devices that we don't yet know that people want to use. So you could equally, they could plug an API into chat GBT for instance, and have you pay your, council tax straight fire, via chat EBT if you wanted to.

And I think that's where we'll end up going. That different systems will just be plugging into things and APIs and, the current SME and charity and nonprofit sector is gonna struggle with that because we're all stuck in that sector, both the clients and the people serving it like me in this relatively short term view of everybody wants to go to your website and a web browser.

So make a website for a web browser and when it becomes a problem, they'll ask me to make a system that works in chat GPT so they can, do you know what I mean? but we'll be playing catch up massively at that point. David, your approach of thinking about this HML structure. you might not have the content that chat, GPT or whatever system wants to pull in, but at least you'll have the structure correct.

That it can understand and interpret and know, oh, basically here's some prices of those guitars that you want and it'll put it in a component pricing table and it'll know to recommend this guitar and it'll have a pricing table, right? That isn't even from a website. It's just gone does this Mexican guitar, USA Fender and then the Japanese one recommended with a little tag on it, most popular for people who are thinking like you.

And it is presented as a pricing table with benefits and stuff like that. so I think that's I think that we'll see the ever changing to me is that everything's gonna be much more dynamic and on the fly using components and patterns that are marked up. I don't know.

[00:59:51] David Waumsley: Yeah, we would probably, That's, I don't like the idea that, that search engines are now providing the ai, I feel they are. It's broken, the deal with people, because at the end of the day, it's making us dependent on our content, stolen our content. Basically, AI is stolen everybody's work. And it's remarketed to us.

I don't know if it'll ever be able to. I think the more you get into, the skill of writing a website, I've only become more appreciative of this recently, particularly as you get into the accessibility, because there isn't. machine isn't gonna quite do it because it has to make d you have to make decisions about how you will label your aria or where you will label it a, according to your imagined audience for the content and the different circumstances that they might be in.

I find it hard to imagine that anything will automatically, do that. We'll be able to present random content and get that right, not if CloudFlare has got anything to do

[01:00:58] Nathan Wrigley: with it,

[01:01:00] Paul Lacey: because CloudFlare is, providing a system to block your website from AI bots. Yeah. Unless you pay. Yeah.

[01:01:06] Nathan Wrigley: It's like a paywall for

[01:01:08] David Waumsley: AI systems.

Yeah. It's just hot off the press. Yeah. Yeah. I mean we, we can, if there is a set of rules, but I think this is always where we want to go with design systems and it's even with ai, it's my thought on things at the moment. It's a very materialistic view of the world where you think that everything can be explained if we get down to a certain set of materials that we understand.

And obviously when we've got Jeffrey Hinton, the sort of godfather of AI now panicking about, general intelligence, as a reality, I don't know if it ever will be. Obviously it poses a threat to us. Depending on how we use it. This is another conversation here. Yeah. This is complete, yeah.

Ton of words, but it's in the same with the, design systems. I think, the idea that we're seeing certain things are making us feel like this is going to provide the solution. Like we're not far away from Google. That it can now grab the information and it's really useful in that, and now it'll be able to present it in a way.

I just don't believe that's ever going to be the case,

[01:02:16] Nathan Wrigley: in, the same way that in physics there's always this, there's always this rush to, there's always this idea that you'll get this grand unified theory. It feels a bit like that's what we're describing here, this grand unified theory of what the internet is and what design is.

And maybe it'll never. being

[01:02:34] David Waumsley: achieved. it's always a problem. And, for people like Jeffrey Hinton or Materialists who explain things, so they say, I can explain everything in science and this is how it works. And then you go, yeah, but okay, so I explain the body and you go, yeah, but why do I think, why am I conscious?

And they go, that's just, phenomenal. Don't worry about that. Forget that worry. We've solved it. The whole thing about having a conscious conscience is, or consciousness is, irrelevant to this conversation. And I think sometimes that's how you get, when you look at things scientifically, when you comes to the art of communication via the web, we start to think, it will serve the stuff, but will it really communicate with real human conscious beings?

And I never quite convinced, I always think that it's just a bunch of scientists thinking they're going to nail this. There's, a formula here.

[01:03:27] Nathan Wrigley: We will, we'll probably revisit this topic in two years time when our robot overlords have taken over. Yes. And, we will just be simulations because we've been scraped on the internet.

do you think we've achieved what we set out to achieve? Are we at the end of that episode, do you imagine? Or is there more to say? I think we're

[01:03:44] Paul Lacey: still confused as, as ever. Yeah. But, that's never, but we,

[01:03:48] Nathan Wrigley: that's never gonna change. Yeah.

[01:03:52] Paul Lacey: that's 'cause we're normal, people. But, the, that consistency stifles creativity on there.

Oh yeah. that's an interesting one to me. 'cause I don't think consistency ever does stifle creativity. I think, I think, just, mashing things up and throwing them all over a page isn't creativity. It's just, I. It just, it gives, it's like a, gaslighting version of creativity that some that, an end user doesn't appreciate, but the owner of the website appreciates more.

So it's, web design, consistency stage creativity. I don't think it starts create creativity. I think design consistency helps to get rid of, vanity aspects nicely. You can still be totally cre creative. You shouldn't just be, you shouldn't fail to be creative if you've got consistency. so I like that.

[01:04:52] Nathan Wrigley: That sounds like a great meme. Yeah. There you go. We'll probably parcel that off as the, as the, little, the bit that this episode goes out under. I will try to, I'll

[01:05:02] David Waumsley: try to make that happen. No, I think that's what you do quite well on it because of the fact that you've do got a design system where you've got row and they're spaced out in a logical way because you are using a lot of your own CSS to make sure that s space is consistent through it.

Yeah. And for users, there is a, certainly if you understand the, how people perceive space and what they mean to them, this, it drives us mad and we can tell a bad design because they've used the page builder and just drop something in and it's, half a centimeter off or something, how it was on the other page and it's jarring and we know this, and that kind of consistency helps us with our perception.

But I think sometimes that consistency in a different way, a consistency of doing things in a certain way, then leads to. as we can see with design, they, we might have thought we've got the perfect design in 2000 or something, and none of them look like that any longer. unless we're doing it for comedic effect, So we constantly change. So I think that's the problem with the design system. You build a whole load of layouts that you're going to use, and you just think these were just web layouts, then they don't, some, that's more interesting thing that you'll see in print and in other places.

[01:06:16] Nathan Wrigley: Okay.

I think I am gonna knock it on the head in that case. At that point. so that was episode number 22, or at least you can find it at no script show slash 22. You can head to the URL there and hopefully you will be able to find the relevant show notes there. it only remains for me to, to say thank you to, to Paul for joining us today.

Yeah, thanks Paul. I appreciate your, your contributions to the debate today. That's great. So we'll see you on the next one. Thanks guys. Yeah, you're very welcome. See you soon.