Skip to content Skip to footer

Web Design & SEO in Sync

Web Dev and SEO in sync

In our 4 Steps for Growing Your Online Business article, we mention Web Design as step 1 and Search Engine Optimisation, or SEO, as step 2. However, in a perfect scenario, these two steps are done in unison, which sadly, is not always the case.

Whilst developers are concerned with the visual aspects of the website – banners, moving text, styling – SEO marketeers are more concerned with how the functionality will impact rankings. Sometimes, the two don’t marry up.

When designing your new website, it’s important to give equal priority to the SEO as the website design. Often however, design can be prioritised over SEO, leaving it to the end of design & build, which may have a detrimental effect on your site’s performance. Therefore, giving SEO equal prominence, including E-A-T factors (Expertise, Authority, Trustworthiness), will benefit performance in the long term, as well as how accessible the website is to users. SEMrush released a great article about the Google Quality Standards (EAT and YMYL) and what they mean for search.

Here are some common design features which might impact your site’s organic performance, and how they could be adjusted to incorporate SEO fundamentals.

Banner Images

A large banner image on a service or product page can look smart, but it takes up a lot of space above the fold. Additionally, if the text is a part of the image itself, it may be inaccessible to those who use screen readers. They won’t be able to understand the context of the page, especially if there is no alt text added to the image.

SEO Compromise

Adding a heading and a short paragraph about the product or service within the banner is a great way to avoid wasting space on the page. You could also add a CTA, such as “Buy Now” or “contact us” (or whatever you want your users to do) to keep important links in the eye line of the user. Ultimately, you want to ensure that the user gets all the valuable information above the fold. This will help to keep them engaged and may decrease your bounce rate.

News Pages

News pages are a great place to host content, but a basic template might be difficult for users to navigate. When blogs, guides, company news, and FAQs are all bundled together, it makes it harder for users to find what they are looking for.

SEO Compromise

Filtering is a great way to split apart content by intent. A ‘nice to have’ would be individual pages for each type of content – /blog/, /guides/, /faqs/, /news/ – each linked to from a resource hub. However, if this is outside of your budget, tagging each post will improve usability, and adding a simple filtration functionality at the top of the page will allow users to refine the content to suit their needs.

Pop-Ups and intrusive interstitials

Not only can constant pop-ups be annoying, but they can also have a detrimental effect on your site’s performance. Google’s core web vitals signals mean that websites could be penalised for pop-ups that negatively impact the user experience on a website, particularly on mobile. This includes content covering pop-ups, large banners, and full-screen ads.

SEO Compromise

If your pop-ups are necessary for gathering customer data or sharing offers, there are ways to make them less intrusive. This includes:

  • Timed pop-ups – they will only appear if a user is engaged with your site for a certain period of time
  • Non-intrusive banners – small banners at the top or bottom of the screen are an alternative, as they don’t cover any information on the page
  • Minimised chatbots – for customer service purposes, you can minimise chat functionality, either on the bottom or side of the screen, allowing users to find it if needed
Digestible Layout

It’s often the case that simple blog templates can structure the copy as a wall of text. This is not good for usability, as people with dyslexia or visual impairments can find it difficult to read. If you don’t have the budget for a custom template, there are ways around this.

SEO Compromise

The best scenario is for the developer and SEO marketeer to work together at development and discuss the requirement and potential a plugin, such as DIVI or Yoast SEO, which will allow you to structure your pages using blocks, headings, and a wide array of different functions. This way, you can break up the page into a digestible format, as well as adding imagery, pulling through relevant blogs, and linking to your social media profiles.

Blue Sword Process

As a digital marketing agency with more than 10 years of experience under our belt, we understand how important it is for web development & design and SEO to work together. We also practice what we preach and our SEO team works very closely with our web design & development from the initial stages of each project.