Websites that marketers and other stakeholders are being asked to create are more and more complex, and at the same time, generic templates are on the rise. On The Kula Ring, Jeff White talks to Carman Pirie about how marketers can move beyond the aesthetics of the web build to thinking holistically, considering how information is organized and ensuring it meets accessibility requirements.
Common Mistakes Marketers Make When Building Websites Transcript:
Announcer: You’re listening to The Kula Ring, a podcast made for manufacturing marketers. Here are Carman Pirie and Jeff White.
Jeff White: Welcome to The Kula Ring, a podcast for manufacturing marketers, brought to you by Kula Partners. My name is Jeff White, and joining me today is Carman Pirie. Carman, how are you doing, sir?
Carman Pirie: I am doing fantastic, Jeff, and look, I’m really, I’m excited about today’s episode, but I suppose I should ask how you’re doing before we get into that. I mean, it would be nice.
Jeff White: Yeah. I’m looking forward to today’s episode and I am doing well. I am feeling good. It’s sunny outside.
Carman Pirie: We have to get the requisite exchange of pleasantries out of the way.
Jeff White: Yes. Yeah, and weather-related ephemera. Yep.
Carman Pirie: Yeah, it reinforces our Canadian nature, I suppose.
Jeff White: The qualifications we all carry.
Carman Pirie: Indeed. Well, let’s just jump right into it for folks today, because what I… We’re using the weird COVID pandemic time to release episodes that are just really frankly conversations between you and I on various topics, and for today’s show, what I thought would be cool to do, and thank you for agreeing to it, is that… Well, frankly, I think I come at marketing and being a marketer in a similar way to a lot of marketers that we work with. Not to say that they’ve been involved in politics and all those foolish things that I’ve done in my past, but more that a lot of people arrive in a marketing role, and they don’t have a deep technical background. They don’t show up as a designer and a web developer. But you’ve actually, you were a designer and a web developer long before you were really a marketer.
Well, I just… I’ve spent way more than a decade now learning from you on this, and I just hope that what we can do is try to if possible kind of say, “Okay, for the marketers out there who know enough about the web to be dangerous, but maybe don’t know enough that they need to,” how do they need to think about? How do we kind of evolve that thinking? At least that’s what I’m hoping to accomplish today if that’s doable.
Jeff White: It sounds good to me, and thanks.
Carman Pirie: No, not at all. Well, look, let’s… I guess the fact of the matter is you know this space at a deeper level than most, and have been at it for longer. But why don’t we maybe let our listeners know how long that is, and kind of give you some… Let’s do some gray hair justification here. How long have you been building for the web?
Jeff White: Oh, man. Built my first website in 1993 or 4, so it was before Netscape was even out. We were still using Mozilla, the original Mozilla. Or sorry, no. Not Mozilla. Oh my God. NCSA Mosaic. Yeah. Anyway, a long time.
Carman Pirie: I think I was annoying my first-year college roommate right about that time, trying to use his Pentium, or 486, Pentium 2, I don’t know. Anyway, I didn’t know anything about computers, and he was kind enough to let me use his, and I certainly wasn’t building websites. I was just happy to be using WordPerfect I think at the time.
Jeff White: I mean, it was a strange time, because I only got my first ever computer in 1992. It was a Macintosh LC II. It cost way too much money, and it was one of those pizza box ones, the tiny little thin ones, but it maxed out at 8 megabytes of RAM. No, no. Sorry. 10, but you had to put 12 in it to get 10, but it couldn’t address the last 2 megabytes. Megabytes, not gigabytes.
Carman Pirie: You had to put 12 in to get 10.
Jeff White: Yeah. It was really unfair.
Carman Pirie: So, you’ve been at it a while.
Jeff White: A little while. Yep.
Carman Pirie: And so, and I know some of the mistakes have changed, and some of them haven’t over time, but I guess what are the… Let’s start by trying to put it into kind of buckets, if you will. What are the buckets or categories of mistakes that you often see marketers make as they begin to consider building for the web?
Jeff White: I think one of the most underlying and foundational mistakes that people make is not thinking, and this one actually goes all the way back to then, because really when I got into creating things for the web, it was really all about trying to understand the web, or a website, I guess, as a system for communication. And I’ve always been about this idea of communicating very cleanly, and effectively, and trying to design things that are built the way that users expect them to be.
So, I think some people might accuse me of having a very German or Swiss modernist kind of style, but that’s because I love these underlying grid systems that power very complex pieces of digital communication, and give you the opportunity and ability to create lots of different types of displays of information. So, having an ability and an easy way to quickly categorize content, to have multiple columns on the screen, to have a grid system that expands and contracts depending on what device you’re looking at the site on, as well as having a system in place that you can build on for lots of different page types that still has kind of an underlying consistent theme, no matter if you’re looking at a home page, or a product description, or a checkout process, or whatever. Everything kind of feels like a cohesive whole.
And I think that’s one of the things that a lot of marketers maybe miss, is that they maybe focus a little too intently on the micro specifics, and they don’t necessarily pull back and think of the site as one big living entity that is going to need to continue to evolve and change, and have enough of a system in place to power that, but not so overwhelming that it feels completely stark and basic.
Carman Pirie: So, is it that… Basically, I think what I’m hearing you say is that to the untrained eye in evaluating a website design, a marketer may be more inclined to just evaluate it almost just aesthetically? Does it visually please me? Probably more advanced marketers, one would hope, would at least say, “Does it meet brand guidelines in some way, shape or form?” But you’re saying very few take the next layer of understanding to say, “Do I understand it and can I evaluate it as a design system versus a page?”
Jeff White: Yeah. I think that’s absolutely… and you’ve always been very good at taking what I’ve said and turning it into something people can understand. But yeah-
Carman Pirie: Important to know your role.
Jeff White: Yeah, exactly. So, I think it’s really about kind of being able to take that 10,000-foot view of it, and say, “Okay, I see that we have the brand guidelines, or mandated color scheme, or on-brand photography,” or whatever those elements are, but also kind of just understanding there’s something going on underneath of that, that gives it structure, that gives it the ability to host all kinds of different sorts of information. And I think it’s difficult even for designers to see that, and I think one of the biggest problems that we have just as an industry in general is that there’s not as much training in this side of things in the typography and all of that as there used to be.
I was lucky to go through school at a time when I was trained by German immigrants who had moved to Canada and helped kind of bring that Swiss modernist style to Canada, and North America more broadly, and kind of learned that first and then began to apply that design theory to the web, to this new interactive medium, and here we are 25 years later, and we’re increasingly tasked to build more and more complex sites. The underlying code systems are better than they ever were. I mean, when you and I met 10, 12 years ago, mobile wasn’t even a thing then, and now we’re having to build sites that look great, adapt well, convert just as many visitors, sometimes more, on a 4-inch phone screen, just as well as they do on a 15-inch laptop.
Carman Pirie: I’m really glad that you brought up the point about designers kind of also struggling with this a bit, at least especially new designers. Well, because I’ve witnessed over a decade of you mentoring design talent, many of whom I think you would very much acknowledge are maybe better illustrators than you are. You’ve always told me you can’t draw for… I won’t say what you actually say.
Jeff White: Oh, man.
Carman Pirie: So, while you were mentoring design talent that may be very far ahead from the point of view of what they can do from illustration or whatever, it has seemingly always been the case that you’ve needed to infuse that talent with this kind of thinking, and so it’s not just marketers that don’t get it. We shouldn’t just beat up the marketers. Frankly, it’s pretty widespread.
Jeff White: It is, and you know, I think that there’s still a lot of opportunity for design schools. I mean, that’s an entirely separate topic. We could have three or four podcasts about the shortcomings of design institutions, but I think there’s a real opportunity for design schools to be infusing digital skills into their students, and getting them excited and ready to take on the digital challenge that they should all be undertaking, because it’s a much greater career path. But like I said, that’s a whole entirely separate discussion.
Carman Pirie: I may be interrupting you, but let me just kind of, I want to know are there any shortcuts? Of course I want to know that, but I guess for our listeners who are trying to be better at how they evaluate a web design, and I guess what are the pointers, or what are some of the guide posts that you might say are out there to say, “Here are some things that might be at least an indication that the design you’re evaluating is heading in the right direction, or at least has some level of systems thinking behind it.”
Jeff White: Well, I think if you’re looking at say a home page, as an example of a design as you’re moving into a design, web design project, how well does it scale from a single column like you might see on a phone, through to desktop screen? How well does it manage information? Is there a hierarchy of information? Does it kind of tell a story as you move down through the page? Does the design draw your eye from usually being in a left to right reading, top to bottom society, we certainly kind of start, the eye starts in the top left and kind of moves out from there, which is why the vast majority of websites actually have a logo in the top left, because it’s the first place that Western society looks, so it’s a sign post or a marker of whose site it is or what it is.
Does that information flow from that area? Does it make a lot of sense? Are there obvious visual relationships between what’s happening further down the page and what’s happening up at the top of the page? So, are there alignments? One of the things that makes it really easy to tell when someone is a bit more amateur at this is everything is just kind of, while it looks like it might be in columns, if you look where they go vertically, it may not be the case that they’re all aligning in the exact same place, which kind of creates that consistency, especially as home pages get really long and other content pages get really long. One of the comforts that people have as they move down through those pages and the things that help them understand is is there a hierarchy of information, and are there vertical and horizontal alignments that make the placement of all of the different page elements consistent as you move through?
It doesn’t mean that every site has to have the same grid system as every other site, not by a long shot, but what it does mean is that you have to have a platform with which to structure that content and information as you move through the page. And it really all kind of stems out of that top area within the site, and one of the most important things, and one of the hardest things to get right, as you know, when we take on a new web project, one of the first things we do is develop that information architecture. And really start to try and understand the site map of the content, and understand how it’s going to impact how future products are going to be added into that system, how new page types might be added into that system, and how are people going to understand it as they use that navigation to move through the site?
Carman Pirie: So, I’m gonna kind of steal two things there. One, and this is really, maybe it’s a really weird way to talk about it, but remember those old 3D paintings that were like in the mall back in the ‘90s or whatever?
Jeff White: Oh yeah, yeah, you’d stare at them and then eventually, hopefully, something would become clear to you, but it almost kind of made you sick as your eyes shifted focus?
Carman Pirie: Yeah. Yeah. Exactly. So, that’s exactly the experience that I’d have when I’m looking at a design that one of the team is presenting, and then they kind of… I’m gonna sound very amateur here, but they click the selection within Adobe XD or whatever, that allows them to show the grids underneath, what they designed.
Jeff White: Yeah.
Carman Pirie: It’s like so when the grid appears, it’s like my eyes adjusting to one of those 3D paintings. Oh! Okay! That’s why this lines up. So, in some ways I would say if you’re a marketer evaluating a website design, try to… If you look at it, can you see that grid underneath? Can you see kind of what… I think we typically use a six column layout, don’t we, Jeff?
Jeff White: … 12.
Carman Pirie: 12? Oh, there you go. That tells you what I know.
Jeff White: The main reason that you’d use 12 is because it’s divisible by so many different ways of breaking it up, so it could be a three column grid, a four column grid, a six column grid, a 12 column grid, a two column grid. That’s the reason why we use a system like that, is so that it can allow for lots. And I mean, that’s one of the nice things about that, is that a well designed grid system gives you so many different opportunities to kind of shift and change where that content sits that it shouldn’t feel stale or boring as you move through it.
Announcer: Are your digital marketing efforts bringing in too many junk leads? Stop wasting time and distracting your sales team. Account-based marketing can help give your marketing strategy the laser focus on qualified buyers that you need to increase your pipeline velocity, close more deals, and grow your business faster. We’ve created a sample manufacturing ABM plan to help you get started. Download the sample manufacturing ABM plan at bit.ly/sampleABM. That’s B-I-T.ly/sampleABM.
Carman Pirie: And I’m gonna say that the extra bit of advice I would give marketers is to ask the designer, I guess think about something that you may want to add to the site six months or a year out, and just ask them where that would live, and you’d probably get a pretty… If it’s been thought about, and that information architecture’s been properly thought out, there’s going to be a rational answer to that question. And if it hasn’t been thought about, that person’s going to stumble for the next two to three minutes in trying to explain their way out of it.
Jeff White: Yeah, and I mean basically, in a lot of cases, at that point, that answer is going to be, “Well, we’ll redo the navigation when that time comes.” And that should be an indication that they’re really not considering how that navigation, how that architecture is built to grow and scale.
Carman Pirie: All right, all right. What else do we get wrong? Let’s diagnose marketers a bit further. What else do we want marketers to know about creating for the web?
Jeff White: Well, I think there’s a number of different things, and I’d like to get into a bunch of areas that will help marketers better understand what it is that they’re creating and what they need to think about. So, obviously I don’t want to dive too deep into search engine optimization, but I will say this, that a well-structured site that has been built appropriately for end users is inherently also good for search optimization. We often see a real boost to on-page organic search growth whenever we deploy a new site, just because of the way our sites are structured, the way that our code is written, and the hierarchy that we use to separate out headlines, subheadlines, and content, and other elements that are on the page. That actually helps quite a lot.
Carman Pirie: And so much of that hasn’t… I mean, the best practice around that has not changed in a very long time, and people just continue to ignore it.
Jeff White: Yeah. Yeah. No, and how many sites do we look at that still don’t have an H1 tag on the home page? Or an appropriate title tag? So, I mean yeah, I guess the fundamentals are still the fundamentals for a reason, because some people are still missing them, but it’s certainly the case that good SEO… What’s good for the user of the site is going to be good for Google, as well, as it turns out.
And one of the other things that if it’s good for the user is going to make the site good for search, as well, is building the site with accessibility in mind.
Carman Pirie: Yeah. That’s an area that just so many people miss. I’d love for you to kind of unpack that a bit for listeners, because I think there’s a lot for people to learn there.
Jeff White: Yeah, there really is, and I’ve been on this train for a while, harping about the importance of accessibility, and as we know, there are a number of lawsuits going down in the U.S. about this kind of thing, and I think it could be the case that you could say, “Well, if you don’t have an accessible site, you’re opening yourself to a lawsuit.” And technically, that is correct. There is legislation in the U.S. that makes you at risk if your site is not available to people with hearing, sight, other types of cognitive disabilities, as well, and there is a scale for this, as well. There’s what’s known as the WCAG, or Web Content Accessibility Guidelines, that lay out exactly what you need to do with a website in order to make it fully accessible, and these are big, long documents, but the important part to take away from it is that anything that you can do to make a site more accessible for users who have a disability, you’re also, again, making that site very well search optimized, and you’re also building a site that is going to have very well thought out and clean code as you go through it.
And there’s a number of different things to consider here, so the first is that all of your navigation should be available to do via keyboard, so if you look at a site that’s been properly optimized for accessibility, and once the page loads, if you hit the tab key, you should get a little hidden link that will appear that will say jump to main content, and that’s so that people who are using a screen reader can actually have their screen reader skip over all of the extraneous content at the top, the navigation and other things, and they can get straight to the actual content of the page. Or if they hit tab again, it’ll take them and walk them through those navigation links in an order that actually makes sense.
And this is why that information architecture is so important, and why you want to get away from very generic terms, like products, services, things like that, and start to use the actual category names for the kinds of products that you might manufacture if you’re a manufacturer, or other things that are going to be more descriptive. Again, those are positives for search and it also makes it easier for somebody who may be using a screen reader to understand what the categories of the site are without having to drill down deeper and deeper and deeper.
Carman Pirie: I always say it’s like people have a… You go to a website of a large, multinational manufacturer, and it fails basic accessibility tests, and it’s kind of like going to their headquarters and there not being a wheelchair ramp, as an example, and the head office isn’t accessible to those with disabilities. I mean, it would be the same thing, which of course they would never do.
Jeff White: No, and it’s the same law, actually. It’s the Americans With Disabilities Act that controls both the web and your physical plant.
Carman Pirie: Exactly. But they’re not being malicious about it. It’s just that they don’t know. And something that comes back to I think what you said right at the start of this conversation, that the websites that people are being asked to create, the web platforms that we’re building are getting more and more and more complex, and simultaneous to that, it seems like more and more people are trying to find the easy way out and just buy a cheap template.
Jeff White: Yep.
Carman Pirie: Which almost never has a level of systems thinking to it to actually think about it as a design system versus just something aesthetically pleasing, and certainly almost never takes into account accessibility requirements.
Jeff White: Yeah. I think that’s accurate. I mean, there are templates out there that do champion accessibility, that do provide very customizable grid systems to enable you to have that depth and breadth of content. The problem with them is that when you purchase a template, it has to be designed for any eventuality, which also means that you’re getting all kinds of extra junk code in there, and potentially a bunch of plugins, especially in the WordPress space, in order to achieve those things, and you don’t end up with as fast or as good a quality of site that may impede you in the future, just because of all the extra code that’s in place there. Makes debugging more difficult, for sure.
Carman Pirie: I’ve got at least 30 more questions, I think, but then I’m also looking at our time, and thinking this might be a lovely place to end today’s episode, and maybe just save some of those 30 for another episode.
Jeff White: We can certainly do that, yeah. I mean, there’s certainly lots more to accessibility than keyword navigation and working with a good quality template, or building your own, rather, and there’s plenty of other things we can discuss, as well.
Carman Pirie: Indeed. Well, thank you for sharing this today. I think… I know, look, and I certainly am not just blowing sunshine. I can say that I continue, a decade on, to find your knowledge in this incredibly helpful to me, and I know that our listeners will have learned something today, so thanks so much for sharing.
Jeff White: Thanks. Appreciate it, mate.
Announcer: Thanks for listening to The Kula Ring, with Carman Pirie and Jeff White. Don’t miss a single manufacturing marketing insight. Subscribe now at kulapartners.com/thekularing. That’s K-U-L-Apartners.com/thekularing.