(image credit: Flickr)

Search optimization and engaging design always seem to be at odds. Things like banners and graphics that designers love often conflict with SEOs' need for crawlable content. However, this doesn’t always need to be the case. In fact, if you include various SEO requirements within the initial design mockups before a site’s launch, you can comfortably fit the needs of SEO and design together just like puzzle pieces.

It all begins with the initial wireframe.

What are wireframes?

(Image credit: Flickr)

Wireframing can be anything from a low fidelity sketch to a fully designed (but non-functional) user interface. These mockups allow designers to share their ideas without committing too much time and effort, which allows designers to iterate and reiterate quickly and easily so the needs of various members of a team can be established and addressed before launch.

This, of course, includes the SEO professionals.

SEO is a complex field with a lot of emphasis on site architecture, so it’s no stretch to say it should be included as a primary concern in the initial design process. In a post from way back in 2008, Moz community member, Amplified-media, described the process of building a wireframe specifically for SEO purposes. He noted that he created SEO specific wireframes in order to describe to clients the ways in which internal navigation, metatags, and content could be optimized. Certainly, we’ve come a long way in both the design and SEO worlds in the last 8 years, but this is still solid strategy.

Wireframes allow designers to plan user flows and overall aesthetics, while they allow developers to concentrate on the functionality of a website. For SEOs, wireframing can help you plan optimized on-page elements as well as opportunities for generating leads, conversions, and interlinking. Wireframing can even help you prepare your keyword analysis for each page.

Let’s take a deeper look at how you can begin implementing your SEO strategy during the wireframing phase.

Content first

(Image credit: Pixabay)

Web design is defined by the content it’s presenting. Oftentimes, a designer is asked to produce a mockup without any clear notion of the ideas it’s supposed to convey. There have been times when our product team has gone forward without bringing every key team member to the table. Once, my team went through the entire development process but realized near the end that the SEO needs weren’t accounted for: Keyword length exceeded character limits; there wasn’t enough content; and we were forced to include SEO haphazardly where we could fit it.

Obviously, this wasn’t an ideal strategy, and the launch had to be pushed back.

To get ahead of this problem, we’ve altered our approach. Now SEO professionals are always at the table during the ideation phase. And we also collaborate during the wireframing phase. We write our text first. Then we add headlines, taglines, body text, and determine keywords before a wireframe is ever presented. Only then do we hand over to the designer to see what they come up with.

If you’re following this model, keep in mind that it’s an iterative process. Don’t be surprised if you’re asked for rewrites or to compromise on length. Or, alternatively, you can go low fidelity and present the designer with a content outline. Give them the bare bones of your ideas for the text and give them suggestions on how to present it.

The point is to collaborate. Letting designers know ahead of time that SEO isn’t going to be a roadblock to what they want to accomplish aesthetically. This is if they’re involved in the conceptual discussions at the beginning of the process.

The same goes for UX designers. Let them know that usability is important to SEO as well.

Potential problems and quick fixes

(Image credit: Pixabay)

In a recent article, Justin Taylor describes some of the so-called discrepancies involved when designing a website that’s optimized for both search and users. Mainly the fight is between the need for text (SEOs) versus imagery (designers). He mentions some great fixes for this problem such as:

• Webfonts rather than graphics
• Expandable content blocks or “divs,” which reveal hidden text in response to a mouse click
• Mouse-overs which are animated content blocks that reveal text in response to a mouse hovering over the block

These are all fantastic workarounds that address the need for aesthetics and allow for crawlable text to be included on page. I highly recommend you take a moment to check out Justin’s article because it’s extremely thorough.

During the wireframing process, all an SEO needs to do in order to have workarounds like the ones mentioned above included in the design is be present at the planning table, and then to let the designers/developers know that these strategies could meet everyone’s needs. As I mentioned before, collaboration is the key.

The nonexistent conflict between design and SEO

(Image credit: Pixabay)

SEO is too often treated as an afterthought, subsidiary to design, development, and usability. If you can frame SEO as something that can be most useful when implemented concurrently with the other concerns in the planning phase, then you can minimize any potential conflicts between team members.

“Conflict” is a keyword here because there is a persistent myth that SEO always runs counter to the needs of both visual and UX designers. This is patently false. Design and SEO can work very well together in most circumstances.

I’ve had specific experiences explaining to project managers s that search optimization is only going to enhance the usability of a page. My go-to example in this situation is that of headline creation: I point out that the whole purpose of search spiders parsing each page is to emulate the way users evaluate content. That means headlines need to clearly and quickly communicate exactly what the content is about. This serves both ends and usually establishes the point. There are of course numerous other examples that can be used to disprove the supposed UX/SEO conflict.

Flat design, for instance, is an immensely popular trend that meshes perfectly with SEO efforts, mainly because of the minimal size of flat illustrations. Whereas high-definition photography can slow down a site’s loading time, flat illustrations are light and quick to load.

Navigation is another point of intersection for SEO and design. Interlinking from the homepage to subpages offers an SEO boost and when artfully implemented it can also be engaging to users. Visual hierarchy and headings are likewise close bedfellows. Using web fonts instead of graphics for banners, CTAs, and other text elements mentioned above can allow you to create linking and meta-tagging opportunities.

Conclusion

Success must be planned for, and success requires careful collaboration planning from start to finish. Adding SEO considerations late in the design process can make your designs look off-kilter and your SEO seem patchworked. Moreover, if the site feels wonky to users, your bounce rate will go up and all your optimization efforts will be for naught.

That’s why implementing an SEO strategy during the wireframing phase is so important.

What are your thoughts for using wireframing to bridge the gap between SEO and UX considerations?