I’ve Heard That: The Designer’s Guide to the Galaxy

Speaker 1 (00:00):

Welcome to I’ve Heard That, the podcast from Hurrdat Marketing that discusses digital marketing trends, tips and more.

Meghan (00:10):

Hi everyone. Welcome back. I’m pumped for today’s episode. We have Ross, our SEO director and Max, our creative director. And we’re going to talk about The Designers Guide to the Galaxy. Because there’s so much… We’ve talked before about what you should not do. And now we’re going to dive into the deep end on what you should do. Because again, to please a search engine, we want to consider both end-users, really. The actual human searcher and the algorithm. So break it down for me guys. Where do you start?

Ross (00:45):

Yeah. So that’s a good question. Where do you start? Do you start with the design and then you amend that to fit the SEO? Or do you start with the SEO and then amend the design? It’s kind of a symbiotic relationship. Obviously the creative side of things can lead the process and often does. So yeah, we need to make sure the creative side understands what we want in terms of SEO.

Ross (01:09):

Obviously we don’t want to lead the design. That’s not our area of specialty. So we want to just make sure that we have that relationship where we have the education, we have the understanding. And just make sure that the elements that we required to have on the website are there and that they understand what they are, and how important they are and where they need to be.

Max (01:32):

Exactly. I think especially new designers getting started in their career, maybe don’t understand the importance of SEO. And I think Ross put it perfectly by saying it is a symbiotic relationship and… Everything that I do has SEO in mind. And I understand the basics of SEO and maybe a little bit more than the basics, but [crosstalk 00:01:57].

Max (01:58):

Yeah, not the advanced level that Ross does. I always defer to him and he always teaches me a thing or two about a thing or two. But usually a typical lifespan of a project… Most times when a client comes to us, they want a redesign. But SEO is important too, but really it’s how it looks. They don’t really care how the SEO works. It’s sort of magic to them. We’re here to say, “It’s not magic, there’s really specific rules that you can follow. ‘And it’s just good, proper web standards and good proper markup.

Max (02:37):

So what we’ve typically seen is we’ll design with SEO in mind, get it in a good spot. And then after that, site’s rolling for a couple months, we’re going to start refining from an SEO perspective. I think that’s a little bit more natural, with design leads first with SEO in mind. And then it’s followed by SEO leading first with design following suite and trying to accomplish both, making sure that we’re getting the SEO tactics and strategy down while making it look good and fitting it in with the site.

Meghan (03:20):

Yeah. Makes sense. So what are some of the elements or some of the top things that you tackle, when you’re considering both?

Ross (03:27):

So when we’re looking at the webpage, obviously 90% of what we do is not visible. What you see is the images and the layout and the words. But SEO is a lot more deep than that. So we have elements on the page that we need and we need those to be marked up correctly using the appropriate markup. So navigation, like the header and the footer, and then the actual body of the website as well. And within that, there are certain sections too, that also need to be marked up correctly. And we use things like CSS to style things, and we have to make sure that that is correct, and we’re using the appropriate styling in the correct way. So we link that to an external file with everything listed in that rather than having all of the styles in line, because that can make the page load heavy.

Ross (04:16):

When it comes to the navigation too, that has specific rules that we want to follow. We don’t want to bloat that with a lot of unnecessary things. So we try to keep that succinct, but in the same time we still want that to be user friendly. So it includes all of the elements that the user would naturally need to navigate around the website.

Ross (04:35):

And then when it comes to images and videos, they look great. But we also want to make sure that when we’re using those, we’re using the appropriate size images, we’re using a video that’s embedded that doesn’t take forever to load. We are not using those as backgrounds anymore, which used to be a prevalent style feature in recent past. [inaudible 00:04:54] did all ourselves, but with Google’s focus on page speed now, and the page experience, those kind of element are pretty heavy and on low times and ends up making the website a little laggy. So we now have to reevaluate how we use those elements and make sure that we, if we do use them, we use them in appropriate way.

Max (05:16):

Exactly. As a minimalist, as a designer, I really appreciate this turn. If we’re going back to KISS, Keep it simple, stupid. Which is a prevalent usability thing, or was in the early [inaudible 00:05:38] with Ross. And I am sure Ross remembers that mantra for everything back then. But we’re moving back towards web standards and things loading fast. And maybe you don’t need those 12 JavaScript libraries loaded up on your site. Maybe you don’t need a background video to get your point across, maybe you can do it just with some simple graphics and text.

Max (06:07):

And that’s not to say that you can’t have a great video on there. But what’s that video doing for you? Can it also help on your YouTube presence? Maybe it should live there. And it’s actually your brand related, specific video. And on top of that, we can do translation and closed captioning on there. So it gets a nice EDA presence as well, and then also helps SEO. So there’s a lot of things we can do… We’ve been loading up our sites with too much junk for probably too long. And Google’s making us do a course correction and I’m all for it. I think that’s great.

Meghan (06:51):

So you’ve mentioned Google has really shifted focus and it’s honing in on some things. Tell me about that.

Ross (06:56):

Yeah. So Google recent released an algorithm update that was solely focused on page experience. So that means how the users interact with the website. And that takes… The various [inaudible 00:07:09] is in terms of what Google’s looking at. And one of the major ones that it’s looking at is how the page itself loads. And it’s taking a look at how the different elements on page load and how they move around as the pages load.

Ross (07:21):

So what we don’t want to do is have elements that are jumping all around the screen because that makes for a bad visual experience. So we want to try and have things that load succinctly, in order so that we can see how the page is loading and elements are not jumping around. So one of the examples that I saw was a buy now button that was moving up and down on the screen as things loaded. So you could-

Meghan (07:50): [crosstalk 00:07:50] Chase it down?

Ross (07:51):

Yeah. You chased it down, but you if you clicked on the wrong button, you ordered it several times. Because it was moving around, you’re trying to click see more or open up the page itself, but because the way that it was moving around, you clicked on it and you ended up ordering it. And you could end up ordering it several times because you were chasing that button around. So it was a really bad experience on that page because there were so many elements that were loading around it, that it was forcing that button to jump around and you couldn’t actually click on it properly to do what you wanted to do. You ended up ordering that same element several times.

Meghan (08:23):

And that seems like a really horrible experience even with, besides ordering extra widgets. It seems like a terrible experience. I’ve been on sites that are loading in funny order. And you’re like, “Hang on.” And you’re trying to find what you’re looking for.

Ross (08:37):

Yeah. And it doesn’t have to be as extreme as ordering 700 pencils. It’s simple things like reading an article that you’re reading a paragraph and all of a sudden the paragraph disappears because an image is loaded or an ad has loaded. Then you have to go and find where you were on that page, because everything around it is loading and pushing things around. So we’d have to pay really close attention now to the order in which things are loading.

Ross (09:03):

Because people are interacting with the site. Everybody, well not everybody. Majority of people having a broadband connection, things are loading more quickly than they used to. And you’re used to having things served up in front of you quickly. So you are already engaging with that content as soon as things load on the screen. And if things are moving around, that’s going to create a really bad experience for the user. And like I say, if you’re reading an article and that paragraph keeps jumping around and you’re losing your place, it’s not going to be a great experience and you’re not going to hang around. You’re going to go back to the search engines and find the next article to read.

Meghan (09:36):

So that makes total sense when I put my SEO hat on, I’m like, “Cool. Just load everything from top down” Except for that does not make sense for a designer because obviously there’s different things that are more important. How do you balance that out?

Max (09:50):

It’s not so much designing it. You design it top down. It’s how… And for the listeners at home, it’s usually if you’re dealing with a WordPress site, it’s how your plugins are loading in. Are they loading in a version of jQuery? That’s a version behind what you have loaded in the head of your site. Is there a conflict there? And that’s trying to figure out which library to use. Which is causing elements on the page to not load quickly. So in a sense, it is designed in that you have to design for that failure.

Max (10:31):

And we’re starting to see that happen. It was funny Ross and I were talking how things just move in cycles. The headless CMSs, I think, are going to be a new thing. Well, they’re not a new thing, they’ve been around for a couple years, but definitely a move towards that. We already saw a movement towards flat file content management systems. Like [inaudible 00:10:54], Squarespace would be one of those that’s related.

Max (10:59):

Where basically the site is being… You could have a database tied into your site and all of your Ajax loading design elements or interactive elements. But then it gets basically outputted as static files that are then serve out via CDN, a content delivery network. I think we’re going to see a lot more attention paid to that and just caching in general to speed up sites. And that will help with that. That’s something where you can speak with your development team to work on that. Get that caching queued up, defer scripts that may be loading and render-blocking. That’s a term that if you need to talk to these people, that’s what you need to tell them. “I’m having some render blocking issues.” And that’s where that button keeps jumping around or the ad suddenly loads in. And that’s really frustrating. And you see those… You see that a lot in mobile and with Google being mobile index first, I mean, this is just more and more important.

Ross (12:11):

Yeah, definitely. And as max just said that with everything being mobile-first now focused, it makes design, I would imagine, a little bit more difficult. Simply because there’s so little real estate on the screen when you are using a mobile device, as opposed to when you had the desktop version, which you used to design for first, now you design for mobile first. So that makes things a little more challenging in terms of which order do you show things.

Ross (12:37):

Because then when it’s on a desktop, you can see that there’s three images that go across the screen there, and then there’s some text. But then how do you… How does that work in terms of the design process for mobile first? What order do those images come? Do you put some text between those images? And then that in itself can cause some of the loading issues we’ve talked about with things jumping around. So I imagine for you Max, that it probably doesn’t come across as being problematic to you because it’s something you do day in, day out. But how do you now approach mobile first design as opposed to the desktop first, how we used to do it a few years ago?

Max (13:18):

Boy, let’s see. I mean the biggest thing is just making sure things fit. That’s the most important thing. Specifically, the biggest gotcha is typography. Your headers, your H1s, your H2s, the ones that are a little bit bigger, usually. You have to fine tune those on mobile. To a certain extent you can set it a baseline to fail. But to really get the best out of that experience, you need to fine tune it for a mobile device. And you do that with simple media queries. The biggest thing I think we’re paying attention to right now is the WebP image format that is coming out from Google. Safari now officially supports it. Along with mobile Safari. And that was the big holdout.

Max (14:15):

WebP for anyone who doesn’t know, it’s basically a new image compression engine. So like JPEG compresses an image by stacking bites information on top of each other. Finding pixels that are similar together and grouping them together. WebP is a new algorithm that Google has produced that causes a tremendous amount of compression with almost zero lack of quality.

Max (14:47):

So this is an exciting game changer because the biggest problem we have, not just in design, I mean, even with desktop. Sure, you might be on a broadband connection, but with mobile first, especially assuming you’re on one or two bars and it’s 4G still not 5G, is keeping that page weight down. And that by and large, is images. And so we always shoot to get our images underneath a hundred kilobytes and try to balance the quality as best we can with that tiny of a weight. But it’s possible, and there’s some tricks that we can do around that. Now with WebP, we’re going to be able to see better, crisper images at a fraction of the weight that we’re currently getting with JPEG.

Ross (15:37):

Yeah. That’s great in terms of an SEO, because when we do an audit of a website and we look at the page speed elements that are weighing the site down. Nine times out of 10, it is images. And that’s the really big area that we could find those milliseconds to have the page load much quicker was to correctly compress those image files. And now WebP comes along, it’s a real game changer. Because as Max said, it’s a fraction of the size that we used to have when it was a JPEG or a PNG file. It was heavy because we have the broadband, we were using bigger images, more resolution, more pixels, and as such, they were much heavier. But now we have a really good compression engine in WebP. It’s Really allows us to keep the quality of those images at a fraction of the size that they use to be.

Meghan (16:34):

Yeah. And I think- [crosstalk 00:16:34].

Max (16:34):

Go ahead.

Meghan (16:35):

Oh, I was just going to say, I think this further exemplifies that you may have a new site and you may have redone… You may have redesigned your site six months ago. And it can be out of date, I hate to break it to you. And because there’s new tools, new technology, new best practice, new algorithm updates. That if you are one of the first to take advantage of that, this is how you build upon those bricks of best practice to get that edge. It’s not one big magic wand that’s going to put you at the top of search. It’s all of these little optimization tactics and best practice that we follow when we’re thinking through, “How do we combine SEO with design?”

Max (17:23):

Right. I’m just going to add too. With the images, it used to just be easy, you just load an image. And then our screens started getting a million times better. I’m sure [inaudible 00:17:38] with Ross, when we first started, we were still working on 640 by 480 screens. Back when we were really pretty poor. Now we’re at 2500, 1080p. That’s not even 4k. So it’s… And that’s kind of the baseline now.

Max (17:56):

So you used to just add the image, not a big deal. And then we got mobile devices and we’re like, “Well, this image is too big.” And so you had to do media queries. So basically work around that. And then, “Okay, now the desktop screens are all 4k.” Now we need another image and then Google penalizes you, if you have an image at this size and you’re shrinking it down to this size just automatically with responsiveness. So then we have another workaround that we have to get to. And so now with WebP, for example, we’re, we’re going back to just that simple image tag. We’re getting rid of all these workarounds. We’re not having to dynamically serve out different images for different scenarios, which just adds further code bloat and ways that’s paged down even further.

Meghan (18:44):

So put this on your list to top tier your development to develop.

Max (18:48):

It’s big. It’s here. We’re talking about it. We’re trying to figure out when to start rolling it out. We’ve had the opportunity to do it. There are plugins for the WordPress framework that will let you serve out WebP images to certain browsers but with the universal adoption. I think really the only thing holding it back right now is that there’s no easy way to export a WebP image from the main graphic applications yet. For like, I’m talking Adobe Photoshop, Affinity, [inaudible 00:19:22] Pixelmator. Pixelmator, might. I don’t know for sure, but I know Photoshop doesn’t. You have to run a command line tool to who install some sort of weird export pane to get it to work. And it’s just not there for your average designer to do it yet. Once that starts happening, you’re going to see a wide adoption.

Meghan (19:44):

You heard it here first. Any other elements or new things that we can be aware of, to be on the lookout for?

Ross (19:56):

Well, I think some of the elements that we used to use in terms of accordions or scrolls are now back in play again, because of mobile first. When it was a desktop first environment, Google wouldn’t actually pay attention to what was hidden behind those, when it was on the desktop site. But now it’s on the mobile site and mobile first indexing. We can now use some of those design features that we had before and actually benefit from them as opposed to before only what was visible on the screen was what the search engines would really take notice of.

Ross (20:33):

So now that we can have accordions and scrolls and other such design elements that everything that’s hidden behind a click or everything that’s hidden behind an accordion is actually now taken into consideration. So it opens up a lot more in terms of how we can display FAQs, for instance. Or some e-commerce information that might not necessarily be-

Meghan (21:04):

Yeah, like products back info, [crosstalk 00:21:06] things that you don’t need right in front and center.

Ross (21:08):

Yeah. You can now have all of that on the page. But it can be hidden behind a click or behind an accordion or one of those design elements and still be part of the algorithms taking notice of it too, for ranking purposes. So it does open up a lot more SEO for designers, because they can now use the full gamut of options. Whereas before it was only the information that was visible that was taken into account.

Max (21:35):

And that’s a good example too, of when Ross and I collaborate is specifically FAQs. When you go, “Okay, I got six Ross, what do you think? Is this worth an accordion? Or a toggle? Or should we just list this out?” Those sort of things. I always default to what Ross thinks, and then I can make anything look good. It’s just a balance of what’s right for the end-user, what’s right for SEO and balancing all of that. It’s like Ross says, “It’s never one thing that tanks your SEO, but it’s a lot of things.” You have to pick and choose sometimes and just try to figure out the best user experience.

Ross (22:22):

Exactly. It’s not always a one size fits all. Every website is different. Every website has different content and different elements on the page. So one site might have an accordion. One might have all of them listed out fully. So it’s just nice to be able to have those options now. So if we do have a page that’s got a lot of content on it, we don’t need to then ram a lot more content on the page itself. We can actually make the page look nice and use those design elements to include those features on there, but they don’t necessarily have to be prominently living visibly on the page.

Meghan (22:53):

I feel like at this point, everyone’s probably got their phone out and testing them [inaudible 00:22:58]. What are some tools that users can use or to assess where they’re at in some of these user experience… Or measure their user experience, how people are using their site?

Ross (23:13):

Sure. So Google Search Console, a free platform that Google has that anybody can sign up for. Actually it has the page experience, algorithm results built into it. So you can check how your content layout shift is scoring and the other elements that Google’s looking at. It’s right there, and it’s free. So you don’t have to pay for it. You don’t have to download a brand new platform and pay several hundred dollars a month for it. It’s free. It’s right there.

Ross (23:37):

There’s different other tools like the PageSpeed Insights tool that just move to schema.org. That’ll also give you some of those insights to mainly more about the schema elements that you have on the page, but that too can help you identify things that are slowing your website down if an element is broken.

Ross (23:55):

But certainly within Search Console itself, there’s a lot of information that can really help you identify what things are slowing your page down and where you can make improvements, where there are errors, where there are warning. So it really is… And up to you to go and get this it’s free. There’s no excuses not to have your Search Console account up and running. It can connect through to Google Analytics. So you can see some of those metrics in there. But certainly I certainly suggest going and sign up for your Search Console account, if you don’t already have it. And if you do have it, go in there, have a look and just see how your site’s performing

Max (24:34):

One caveat, as a designer that gets sent the errors. When you do sign up for Google Search Console, everything that Ross said is absolutely true. It’s a great product. You may get mobile errors. Give it a week. Just wait. Sometimes, and I’ve noticed this over the last year, Google has a hard time rendering from mobile. And it does affect the CLS a little bit. But if you test the URL and it’s test feature, it’s fine, but you’re still getting an error. It usually clears out at a certain point. But all I’m saying is, it’s usually three mobile things. It’s elements are too close together link. target’s not big enough. There’s another one. There’s usually three of them that all of a sudden roll in don’t panic, give it a week, come back in and see if it’s working and odds are, it’s probably fine.

Max (25:37):

But you run into a lot with responsive design sites, just for whatever reason. And it could be a render block. And that could be something that you could have your developer look into. Something might be blocking the render and causing Google not to read that right at the time, even though your designer swears up and down, it was built responsive and mobile first, that could be the issue. Just tying it back to the render block.

Ross (26:05):

Yeah. And I think that’s a good point to raise that a lot of the information in Search Console tends to be three or four days behind the current date. So if you have just made a change to your site and you’re checking it that day or the next day, it probably hasn’t seen it yet. [crosstalk 00:26:18]

Max (26:18):

Don’t sit there and hit refresh.

Ross (26:20):

Yeah. It does have a two or three day delay, sometimes more. So as Max says, give it a week-

Meghan (26:26):

Breathe.

Ross (26:27):

Yeah. Breathe, give it a week. [crosstalk 00:26:29] and you’ll be fine.

Max (26:31):

And like we just said, none of those issues are going to tank your site. It’s not going to be that big of a deal to fix. And if you see that it’s like, “Whoa! It’s affecting 400 pages on my site. Oh my gosh.” Well guess what? It’s probably something global. It’s probably something in your main navigation that you can easily fix once. And that takes care of the issue with everything else. So just don’t panic. It’s usually… It’s going to be okay.

Ross (27:02):

Yeah. And that’s a good rule for life in general. But good for SEO and design, don’t panic. Nothing is going to happen overnight.

Meghan (27:11):

Yeah. This is sharpening your sword. It’s a long play.

Ross (27:14):

Yes. Yep. Nothing happened over. [crosstalk 00:27:17]

Max (27:18):

The other thing I was going to add too, was if you want to just see how your site’s going, I will sometimes test with a VPN on my phone and just go into another country and start loading the site up. And that can… I Can see pretty quickly if I’m having an issue where something’s not rendering right. Or some piece of code that’s messing the whole thing up. I mean, it happens. We’re so used to good quality, high speed internet here, try another country. It’s not as good. And that can help you figure out if you’re having any issues that maybe you haven’t seen yet.

Ross (27:58):

Yeah. And that’s a very good point. Especially as Max mentioned earlier, the CDNs, the content delivery networks. They have locations across the globe. So if you have a website that’s signed up using one of those services, it really helps to level the playing field for countries that don’t have such good infrastructure. Because having to send the query from say, Indonesia to America, it can take that a little bit longer. We’re talking milliseconds, but it can be longer. But if there is a CDN server within that locality, it’s going to be that much quicker.

Meghan (28:32):

Yeah. It feels like snail mail [inaudible 00:28:35]

Ross (28:34):

Yes. So if you have your content spread across a content delivery network, it means that there’re going to be points across the globe that where [inaudible 00:28:41] people can actually pull it down from as close to them as they can be. Instead of having things, as they used to be just served on one server in somebody’s basement in Michigan and every query had every-

Meghan (28:57):

Had to go all the way to Michigan.

Ross (28:57):

Exactly. So now that using the CDN, it means the… A cache of that website is there, it’s available and it’s pretty close in terms of locality.

Max (29:08):

Everyone’s got a basement server horror story, if you-

Meghan (29:13):

That sounds like the start to horror story.

Ross (29:14):

Yeah. That that’s a whole another podcast.

Max (29:14):

Yeah. That is a whole another podcast.

Meghan (29:15):

Awesome. Guys well, thank you so much for joining me. Everyone remember to like, rate, review and subscribe. We have new episode, and new guests twice a month. New episodes coming out every other Wednesday. So make sure to join us next time. Thanks again, Guys.

Ross (29:33):

Thank you.

Max (29:34):

Thank You, Megan.

Speaker 1 (29:35):

I’ve Heard That is a part of the Hurrdat Media Network. For more information, follow Hurrdat on Facebook, LinkedIn, Twitter, or Instagram, or visit hurrdatmarketing.com

Speaker 5 (29:44):

A Hurrdat Media production.