Design is important. Search engine optimization is important. So, how the hell do we get them to play nicely together?
The answer is that it takes cooperation from both sides. What most people don’t realize is that SEO and design already fit together fairly nicely. The challenge lies in communication and teamwork.
Let’s start by jumping into the minds of each role.
Designers: These guys are passionate about presenting clean, user-friendly designs. Designs that are visually engaging and easy to navigate. As the old adage goes, “Good design is invisible.”
SEOs: As on-page goes, these guys are focused on logical user flow, solid URL structure, optimizing page load speed, thorough content and good title structure, to name a few.
*Before we dive in, let’s settle one debate. Designers should always have the final say on any and all design decisions. This is because good designers are focused on the user, and user experience should trump an SEO strategy. Good user experience is sustainable and gives benefits to an entire site.
4 Key Areas Where Design & SEO Can Work Together
- Mobile Design
- Site Speed
- Internal Linking
Mobile design is more than just a nice little addition to your site. It can play a larger role when it comes to search advantages and user-centric design. As SEO experts and designers, we should always be focused on the user experience. Users are gravitating more toward mobile devices and even multi-screen usage. Having a mobile-friendly website is a must.
There are multiple ways to implement a mobile strategy. Forget the other options, and use responsive design. The biggest advantage of responsive web design is the use of single URLs. Single URLs are better for sharing, interacting, and linking to content. Not to mention, there’s less maintenance on your site because you don’t have two versions of every webpage (the desktop version and the mobile one). Responsive web design also negates the use of redirects to mobile-specific pages. This helps reduce load times and increase performance - a big benefit to SEO.
Tip: Responsive design is Google-recommended. Don’t just make a site responsive — focus on user-friendly responsive design.
Google has even started tagging mobile-friendly websites in search results. Google has never indicated mobile-friendly design as a factor in the ranking algorithm, but it pushes mobile design very hard. Consider the possibility that it could become a viable algorithm addition in the future.
Don’t Stop with Mobile, Stay User-Focused
Okay great, you’ve got a responsive site. Don’t stop your efforts there. Your everyday site, compressed down into mobile-friendly format, is probably a bit much to navigate and scroll through. You didn’t plan it, but it could frustrate your mobile website visitors. Google knows this, as they’ve preached user experience since before any of us wanted to listen.
But designers, SEOs, don’t just start hiding content on the mobile version of your site. We’re staying user-focused, remember? Users on mobile devices & tablets expect the same access to content and site functionality that desktop users receive. Work together to find a better way to restructure that content for the mobile screen. Make sure key actions of your site also work on mobile. So if a video is available on desktop, it should be on available on mobile. If visitors can make purchases from your website, don’t take away that functionality on mobile. Put yourself in the mind of a mobile user, and prioritize what’s most valuable. Users will thank you, and you’ll see deeper engagement from your mobile & tablet traffic.
Speeding up page load times is a sure way to better user experience. As we remember the user, we know mobile visitors are often on the go, and data networks can be shaky. Phones & tablets are getting better processing power, but still don’t match the desktop.
Designers/developers, this might be the most important area for you to focus your help with SEO because it’s more technical. Three key areas to focus here are lowering HTTP requests, smart image sizing and minimizing code.
Try to follow strict guidelines on image sizing. Oversized images require longer render times even if they’re restricted to a smaller viewing size. It’s good practice to only make images as large as they will ever be on screen. You can also save file size by compressing images or blurring background images that don’t need to be super crisp.
Standard SEO rule is that every page should contain a single H1 and H2. These are important indicators to search engines. You can have multiple headings H3 and below, but stick close to a hierarchy. This is not always easy for designers as headings are placed and formatted differently in different areas. Adding to that, SEOs sometimes need a page to have a different H1 without altering the targeted messaging.
On the Formstack site, we avoid direct styling of the heading elements and instead use classes which hold the styling. This allows us to place the H1 in our horizontal page name bar or in the main hero without lots of added page-specific CSS. This is the kind of flexibility, driven by an SEO need, that design can play a big role in. It also ties back into our last point of simplifying and minimizing code to improve speed.
Design’s weapon of choice is simplicity. Many times in larger corporate environments, simplicity gets lost in the agenda. When I see large company sites that pile on the links to their homepage, I cringe.
Using the Marketo website as an example, there are 225 total links just on the homepage. About 85% of those being internal links, which is good, but 225 links! Yikes! It’s good to take your powerful homepage and distribute its authority down the hierarchy of site pages. Just remember, you only have so much pie. Slicing 225 pieces doesn’t leave much to go around.
Marketo should not only cut down on links, but control that beast of a navigation. In the navigation alone, there are 93 links. That’s tons of above the fold link authority being distributed to many pages, resulting in less authority going to each page. I can almost certainly guarantee the designers were not in love with this gigantic navigation. This is just one example of how design and SEO can team up to present a case for both the user experience and search signals.
I hope you leave this article inspired by how design and SEO can work more harmoniously. I’d like to think I have a good vantage point on this relationship. I’m an SEO who also designs and codes. I’m always trying to think like an SEO, but also balance the need for logical design. I wanted this post to do two things:
- Highlight how design can play a big impact in SEO strategy and how designers can aid in that strategy.
- Remind SEOs that more is not always necessarily better, and that design & SEO have more in common than realized.
That’s a wrap.
Image credit: Pixabay & Canva