Web Design and SEO: Getting the Best of Both Worlds

Guest post by Raul Harman

When putting up your website, there are two major factors to keep in mind – your target audience and search engines.

To rank high in the SERPs, you will want to create a light, information-based, and keyword-optimized website that meets Google’s needs.

On the other hand, your website is your first impression. You need to focus on the UX aspect, ensuring that your site provides seamless user experiences and brings value to your visitors.

Logically, the SEO and design elements are constantly intertwining. You just need to know how to merge them together.

Build Intuitive Site Structure

Your website structure is one of the first things you need to consider when designing your website. It gives Google the opportunity to crawl your site better, provides your website with site links, and increases the overall user experience. Here is what you need to know:

• Strategize your website hierarchy before you even start designing it. Try to keep it logical and simple – there should be between 2 and 7 categories only. Also, reduce the number of subcategories and balance them. For example, if one category has 15 subcategories, the other one should also have 15 subcategories.
• Align your website hierarchy with the URL structure. Use the right keywords and real words to make your URLs both search engine- and user-friendly.
• Use a shallow-depth navigation structure. By making sure it takes no more than 4 steps to reach every page on your site, you will prevent your pages from being buried deep into your site.
• Work on a logical internal linking structure. Internal links spread link juice from one page to another, help you establish information hierarchy, and let users navigate your site easily. Every page on your site should contain a link to and from another page from your domain.

Think Content-First

Which comes first – chicken or egg? Website design or website content? Even though many website owners focus on website design before creating any content, that’s not a good approach. It’s just like asking an interior designer to stylize your apartment before even buying it. Website content provides a designer with a wider context and helps them align UX and SEO.

Now, content-first is not the same as text-first. In the age of AI, users expect you to teach them something new in an engaging and exciting way. Your content needs to address their needs across different stages of their buyer journey. No matter if you’re creating content in-house or hiring a digital marketing company, always diversify your content strategy. Every piece of content should address the right audience, based on their buyer journey stage.

• The awareness stage. This is where a customer gets to know your brand and products. They will go to your PR section, read your blog posts, visit your “about” page to learn more about you. At this stage, you should focus on understanding the common problems they face and address them through your blog posts, comprehensive FAQ pages, highly informational guides, videos, and webinars.
• The consideration stage is when a customer compares your content, products, and prices against your major competitors. To get them to choose you over them, you need to focus on creating practical content that highlights your benefits. These could be case studies, product demonstration videos, straightforward user guides, and product information.
• The conversion stage is when a customer decides whether they will finalize a purchase or become your lead. This is where social proof like user-generated photos, testimonials, online ratings, and reviews may work. Also, free trials, free consultations, and any other form of incentive may speed up the onboarding process.

Speed Up your Website Pages

Page speed remains one of Google’s most significant ranking factors. After the introduction of the 2018 Speed Update, it has become a critical ranking factor for mobile searches, too. The reason why page speed is that important to Google is obvious. It impacts user experiences and directly determines your lead generation and customer conversion efforts. For example, did you know that most of your customers expect your page to load in less than 2 seconds?

Now, to check your page speed, you should use Google’s Page Speed Insights that will tell you everything about your website speed. It provides a website, tells you what optimization tactics you’ve already perfected, and provides a list of potential optimizations you should consider to get your website to 100%.

So, what are some key steps to take when making your website faster?

• Reduce the size of your images.  If you’re using WordPress, one of the fastest ways to compress images is to install a plugin, such as Smush Image Optimization. If you don’t use WP, then are many tools that will dial down the image size significantly and yet, maintain its high quality. Some of them are Kraken.io, Imageoptim, and TinyPNG.
• Use browser caching. Browsers cache massive amounts of information. Therefore, when a user comes back to your website, their browser won’t have to reload the whole page.
• Minify your HTML, JavaScript, and CSS. The process of minification includes removing irrelevant duplicated data without impacting the way a browser processes the code. This also includes fixing the code, formatting, and shortening the code.
• Use Accelerated Mobile Pages (AMP). This is a project rolled out by Google a few years ago. Its role is obvious – helping mobile pages load almost instantly by lots of unnecessary content.

Pay Special Attention to Mobile Users

With the growth of wearable technologies and voice search, mobile search is on the rise. Statistics say that almost 60% of all online traffic in the U.S. is driven through mobile devices. Moreover, mobile experiences determine user experiences and their purchasing habits. Namely, 52% of online customers would bail the shopping cart after the negative mobile experience.

The importance of website responsiveness in this mobile-first era can also be seen through the Mobile-First index that was rolled by Google in 2018. Google now indexes the mobile version of your site.

To improve the mobile-friendliness of your website, you first need to test it using Google’s Mobile-Friendly Test. If there is room for improvement, here are a few easy steps to take: to check how friendly your pages are to mobile users.

• Make it responsive – ensure that your design elements resize and adapt to the user’s device.

• Create consistent user experiences. Online users may want to start their search on their laptops and then smoothly switch to their smartphones. And, you need to make this transition simpler. Google says that 63% of online users expect consistent experiences every time they visit a website.
• Avoid popups content on mobile devices, as they increase user frustration.  Google introduced a soft penalty for so-called “intrusive interstitials”. Worse yet, popups distract users and increase their frustration.
• Use larger fonts and buttons. Bigger buttons are always better. For example, Apple suggests that the button size should be at least 44px x 44px. As for fonts, choose legible types and make sure they’re at least 14px.
• Replace your navigation bar with a hamburger menu. It saves you space and, at the same time, contains all relevant website categories.
• Optimize forms for mobile devices. Reduce the number of fields and create single-column forms. Another option is to break the form up into multiple steps and include progress bars to keep users focused.

Contextualize Website Images

Even though Google is getting smarter each passing day, it still does not understand visual content. It uses the textual context behind the image when crawling your website. Therefore, by optimizing your images for Google, you will boost the visibility of your visual content and its exposure in the image search results.

• Give your images straightforward and informative names. They should describe what your image is about. For example, “red flower vase” looks better than “IMG00036.” Also, there is no room for keyword stuffing.
• Write descriptive alt tags. Namely, if there are any problems rendering your website photos, a browser will display your alt text. So, add keywords organically and make sure the text describes the context of the image.
• Choose the best image format. Given that images determine your page size and load times, be careful. Now, given that it has the smallest file size and that image quality remains high, JPEG has won the hearts of many website owners. However, PNG is a better option for graphics, text, and drawings, while GIFs are perfect for your moving visuals.
• Leverage lazy loading, meaning that your JS elements will load asynchronously. According to Google, if your page has lots of visual content below the fold, lazy loading will boost user experiences significantly by loading these images “either as needed or when the primary content has finished loading and rendering.”

Over to You

From these examples, we can conclude that SEO and web design go hand in hand. The way your website looks and feels directly impacts user engagement and conversion rates. In this way, it affects your organic rankings. On the other hand, without a solid SEO and content strategy planned in advance, a designer cannot know where to start when building your site. Only by creating an SEO-friendly website from the very beginning will you be able to bridge these gaps and increase your overall online presence.

Author’s Bio: My name is Raul, editor in chief at Technivorz blog. I have a lot to say about innovations in all aspects of digital technology and online marketing. You can reach me out on Twitter @Raul_Harman