SEO and Web Design Should Go Hand in Hand

Don’t blink. You’ll miss a new trend in website design.

You know the online customer experience is as important as anything in your marketing mix. You have the tools to make your website whiz-bang wonderful and you’re not afraid to use them. Should you?

You don’t want to drive search traffic away

Sure, parallax design, auto-loading video and a seemingly non-stop array of tasty technologies can help make your website look cool. The question we’ll examine here is:

Which website design trends become uncool when evaluated through the robotic eyes of search engine?

Understand, I want you to continue making your website a better place to engage and inform visitors and begin the process of doing business together. That said, I encourage you have a handle on how some of the new and attractive web design options affect SEO. Less success with search means less traffic, which reduces the number of prospects you’ll be able to impress.

Mobile must come first

The day has come (or it’s coming in April) where Google indicates to the searcher whether your website is or is not mobile friendly. We’ll have to wait to see how seismic the shift might be for ranking results, but simple logic would suggest sites deemed not mobile friendly will get less traffic from mobile users.

 

Of course, in some industries—and certainly in specific demographics—mobile usage dominates. The trend continues to rise. Suffice to say, you’d be wise to make mobile a priority and assess mobile issues first.

Google prefers mobile friendly sites

Google’s not only making a new move toward mobile, the search engine leader has put in the effort to help guide you. A dedicated section of the Google Developers site now offers a giant opus on how to correctly configure your site for mobile. It explains there are three ways to get your mobile on.

 

Responsive design—

The preferred approach to mobilizing your site is to employ responsive design. Essentially, responsive aims to serve the same content on the same URL to all users. If your site is identified as responsive, it’ll earn the “mobile friendly” designation. Happy search engine. Happy user. Happy brand. Responsive is the way to go.

Some words of caution before we move on…

Simply plugging a responsive theme into your CMS may or may not be 100% effective. The approach is cheap and easy, but often, packaged themes aren’t coded correctly. Various elements on a page—buttons, images, fonts—may not be as mobile friendly as you’d expect. The resulting problems aren’t likely to affect search, but they could decrease the quality of the user experience (which ultimately is a ranking factor).

 

Separate mobile websites—

A mobile website generally presents the same content as its bolted down brother, but via a different URL. Generically speaking, the domains look like:

MySite.com vs. m.MySite.com

To optimize the “m.” correctly you need to place a meta tag on each version of each page, so (in code) you’re saying, “Hey Google, there’s an alternative mobile version of this page and it lives at this URL.” Then, on the mobile URL, you need to place a tag saying, “Hey Google, this page is canonical to—or has the same content as—this page on the desktop site.”

To serve different types of users, you may even have multiple mobile sites. If so, expect more optimization tasks. Google prefers the one-to-one mobile-to-desktop approach, which is why responsive is preferred.

 

Dynamic content serving—

With this approach you deliver different content on the same URL. This requires an added hint to Google coded in the HTTP Header.

Why consider it? One practical answer is you might have a lengthy home page that serves you well on desktop, but want to truncate the content for mobile visitors.

The dynamic content serving approach is a much more complex method of serving mobile content. It’s acceptable to the search engine and will earn a mobile friendly designation. Proceed with care (and not without a mobile search pro by your side).

 

Will Parallax paralyze your rank?

As website design trends go, none is hotter than parallax. You may not know it by its name, but you've experienced the effect. As you scroll, the foreground and background move at different speeds creating an interesting feeling of depth.

Parallax pages don’t actually create SEO challenges. One-page Parallax sites do.

See, attracted by the technology’s novelty, and perhaps recognizing extensive scrolling doesn't repel people the way it might have in the pre-smartphone era, brands often create single-page websites. While this isn't necessarily a no-no, it will hinder your ability to do well with search.

One, you’ll no longer have the website structure search engines depend on for crawling. And two, from a keyword perspective, all your search magnets reside on a single URL. All your eggs rest in one basket.

Parallax has evolved fast and does indeed present a pleasing effect. But be aware, many parallax designs are poorly executed and create poor user experiences, which again, is a strike on your SEO.

Poorly optimized Parallax design

Attractive? Yes? Optimized for search? No. Parallax pages often create user-friendly pages, which are no friend to search engine. The WebPageTest.org tool indicates the page’s host flunked a speed test.

 

You’ll also want to be wary of your load time, especially for popular pages such as your home page. Web pages done with parallax, typically load slowly. To optimize performance, look into caching methods, compressing images, or minifying JavaScript or CSS files.

In my humble opinion, parallax is a smart play for specific pages that actually take advantage of its tricks. Telling a sequential story is one example. I've seen a number of infographics that are immersive because of the parallax scrolling. Otherwise, I’d avoid it. The short term “thrill” doesn't trump the long-term benefits of search rankings.

 

How bad do you need that tag?

Another trend, which is more about marketing than design, is the excessive use of plugins and tags. While each plugin is likely to have a compelling reason to be used on your website, you must consider the page-load trade-offs.

Social sharing plugins are rampant. And they’re smart. Obviously, you put a lot of effort into creating content and want to make it easy to share. Take care to select the more efficient plugins and test them. Many pages load painfully slow because of the time required to make calls to outside services.

Also, consider which pages are worthy of share buttons and bars. Is a blog post? Of course. Is a contact page or form? Probably not.

Poorly placed sharing buttons

ShareThis is a good tool for executing share buttons and bars, however a web page on their site provides an example of placing share buttons where they serve no purpose. The MozBar tool demonstrates the share buttons are ignored.

 

Plugins designed to monitor your site and collect data are notorious bandwidth hogs. Keep in mind, more tags go into the code and every tag you place on a page will make the page load slower.

Get Google Tag Manager, a free tool designed to give you the power to create and update tags for website and mobile apps. The tool offers features including user automated error checking and a debug console for verifying tags before they’re published. It also features flexible tag firing enabling you to create custom rules to help capture only data you’ll actually value.

 

Overdoing design?

Though technology is advancing, giving designers and developers more room to experiment with images, animations and effects, they must be handled with care.

Before junking up the UX and causing speed issues or allowing levels of complexity to get in the way of connecting people with the information they seek, ask yourself what purpose your design “upgrade” will serve.

An example I want to cite is the now common approach to presenting large amounts of content by integrating progressive loading. This trick relies on loading content with AJAX.

AJAX presents the search engine with crawling issues. On the development side, you need to know how to dynamically change the URL via a parameter and handle the parameter correctly, thereby properly directing the crawler.

Another trend is big video. No question, online video marketing is big and getting bigger. Its benefits for click-throughs, engagement and conversion are well documented. However, I’m speaking about video that is helpful.

Are large video files that run in the background as wallpaper helpful? They’re not. They can be distracting and tend to load slowly. Should you put this effect into play, you then need to test how it runs on a mobile device or set up your mobile site to exclude it.

 

Think twice

Whether it’s a trend or a misunderstanding of how important user experience actually is, far too many websites are pretentiously fancy. The simple truth: simple is better. Just because you can tap design tools in the interest of trendy, doesn't mean you should.

Your first thoughts are likely to inspired by a good idea… How can we add this function? Will this or that tactic make for a more exciting visual experience? Can we use this effect or tool to increase the wow factor, engagement and sharing?

Then think again.

The question forefront on your mind should be about the SEO implications, with a special emphasis on mobile. And of course, while the real priority is always the user, that user needs to find your website, visit it and stick around long enough to get something useful from it.

Don’t chase them away with tricks that detract from the actual utility of your website.

Are you designing a new site? Do you have questions about your existing site? Drop us a line to see how we can help.

Categories: