Beyond Responsive: Design and Development Trends for Adaptable Marketers

Posted by Carson-Ward

A friend of mine recently asked me to review and explain a series of site recommendations sent over by a well-known digital marketing agency with roots in SEO. We talked through the (generally good) recommendations for content and search optimization, and then we got to this:

"* Mobile accounts for 53% of your traffic. We recommend building a mobile-friendly responsive website. Google recommends using responsive design so that your site looks good on all devices, and it may help increase mobile rankings."

And that was it. A bullet point that says "build a responsive site" is like getting a home inspection back with a bunch of minor repairs and a bullet point that says, "Also, build a new house with modern specs."

We, as professional marketers, need to realize that this advice is not good enough. We're not helping anyone with broad statements that give no guidance on where to start or what to think about. Google might recommend responsive, but that doesn't mean it's the only option or that it's always the right option. Even if it is the right option, we need to have some idea on how to do responsive right.

If we're going to tell people to redesign their websites, we'd better have something more profound than a single bullet point on a 20-page document. Implying that "Google will reward you for responsive" and leaving it at that could do more harm than good. It also misses a tremendous opportunity to help clients build a great website with an awesome user experience.

It's fine if you're not well-versed in site architecture, design, user experience, and/or user intent. Just don't mention a gargantuan project like a site redesign if all you have to say is "build a responsive site, because Google."

This post is a look at how companies are handling the future of the web, for better or worse. My goal is to help SEOs, content marketers, and all other digital marketers to speak more intelligently about responsive, mobile, and other design and development trends.

Don't follow the crowd: you risk going full Windows 8.

We learned some important lessons about cross-platform design from the disaster that was Windows 8. It was a mess for lots of reasons – and yet I see the same people who mocked Windows 8 beginning to make some of the same mistakes on their websites. For those who never used Windows 8 in its early days, let me explain why it was so bad.

• "Metro" (or "Modern" or whatever) shunned navigation for modern simplicity. It featured big icons – and no clear way to do more than click icons. Desktop users hated it.
• There were a bunch of useful features and options most people never knew about hidden in sub-navigation. Windows 8 could actually do some cool new stuff – but few people knew it could, because it wasn't visible.
• Users didn't know how to do what they wanted. Menus and buttons were shunned in favor of bloated pictures of app icons. Common features like the start menu, control panel, and file search were suddenly moved to non-standard places. Thousands of people turned to Google every month to figure out how to do simple things like turn their computer off and run a search. That's RIDICULOUS.

A small sample of people asking Google to help them navigate a Microsoft product. Also interesting: Windows 7 has always had lower searches for these terms despite 4-5x the number of active users.

Now here we are, three years later, watching the web go full Windows 8 on their users. Menus are scaled down into little hamburgers on desktop. Don't do that! You're alienating your desktop users just like Windows 8 did. Users have to click two or three times instead of just once to find what they need in your menu. And don't kid yourself: You're not Windows. No one's going to ask Google how to use your site's nav. They're just going to look at result number two.

Let's look at an example of making the Windows 8 mistake on the web. Let's go big. Let's go Honda.

This is what happens when you take a design trend and try to force it on your corporate site without thinking about users or why they're coming to your site. What does this site sell? Dreams? Clouds? Stock images? The text on the page could be placed on almost any corporate site in the world. Honda has gone full Windows 8 on their corporate site.

Aside: I'm picking on Honda because I know they can take a beating here and keep running – just like my CR-V (which I love).

I'm obviously not a fan of the expanding mobile-style navigational menu on desktop, but Honda blew me away with an overly-complicated mess of a menu.

I understand the company makes major engines, boats, and aircraft parts. Having lots of parts to your business doesn't mean that each part deserves equal emphasis. Honda needs to step back and ask what users want when they get to the site, and realize that it's unfeasible to serve every intent – especially if it wants to maintain its simplistic design.

What about the competition?

Toyota and other competitors know most users visiting the site want to look at automobile options or find a dealer. Both Honda and Toyota have sites for racing, and both companies sell industrial engines. But Toyota understands that most users landing on Toyota.com want the consumer brand, and that racing enthusiasts will Google "Toyota racing" instead. There's also a link way down in the footer.

The exception to the rule of avoiding what I'm calling mobile-only design might be a design firm. Here's Big Spaceship's site. They're a design agency that knows more about web design than I ever will. It's a great site, and it's probably going to get them sales. Do not copy them. Don't imitate a design agency's website unless you are a design agency. I'm talking to you, Honda.

When a user visits a design firm's site, they want to see the company's skills. Design agencies like Big Spaceship are wise to immediately showcase and sell users on their design capabilities. In essence, the home page acts as a full-page product shot and sales page.

I've seen SEO/Design/Marketing agencies create what are essentially design-only websites, and then wonder why no one is interested in their SEO services. I've seen product companies use a logo + hamburger menu + massive product image layout and have problems selling anything but the product featured in the first image. That's what you get for copying the cool kids.

It only makes sense to show one thing if you only do one thing. Good design in Amazon's case is very different. Amazon has millions of products, and they don't want people clicking through categories, choosing the wrong ones, and getting lost or frustrated. The search function is key with a mega-site: thus the not-so-pretty search bar on every Amazon page.

Align your users' intents with nav items and landing page content. Show them how to browse or search your goods and services without making them click unnecessarily. Keep browse-able items to a manageable level, and make sure you have a simple click path to things people want to do on your site. Look at how Medium aligns intent with design.

Simplicity works for Medium posts: the user wants to read the post they've landed on, and the focus of the site's design is on reading the post. Medium will hold off on getting you to read or share more until you're done reading. Most of those calls to action are at the bottom of the article. Now look at the home page.

Smart. When someone lands on a post, they want to read the post. So show them the post! When someone lands on the home page, their intents vary. Give them options that aren't hidden behind a hamburger menu. Show them what they can do.

Figure out what your users want to know or see, and build those elements prominently into the site. Don't blindly copy web design, or you risk following Windows 8 in alienating your core users, especially on desktop.

So how do you know what your users want to see?

1. Run on-page surveys

One of the best ways to figure out what people are looking for is to ask them. Don't continually annoy people with popups, but if you're just starting out it's worth gathering the information up-front. Ask people what they're looking for when they visit your site. We use Qualaroo, but there are lots of simple tools that can be implemented quickly.

If you already know what people are looking for, you should make sure you know what their primary considerations are for buying. Does price matter to them more than power or quality? If price matters most to your buyers, price should be featured prominently in the design.

2. Use split tests to understand intent

There are lots of reasons to run split tests, and the focus should usually be on conversion. The problem is that sometimes we focus exclusively on which version converted better, and forget to ask why.

We use Optimizely, and it's awesome. We also keep a log of test results with our pre-test hypothesis, pages tested, a link to results, and why we think it won. Then we try to think about the implications if we're right about our conclusion.

• Where else might we be making the mistake of the losing version?
• What other pages are impacted if we're right about what our users want?
• Is there content we can create to solve the users' problems? Are there key pages or explanations that are missing?

It's a little bit dangerous to over-apply a single test's conclusions on the whole site, so this usually leads to more testing. After three or four tests you might be ready to make moderate changes without running a split test, allowing you to move on to the next big test.

3. Look at in-market segments

Try to figure out where your users are mentally by looking at in-market segments. Don't mistake in-market segments for what users are trying to buy. Instead, use it to understand what else the user has been looking at. Here's a site we work on, for example:

So what is this telling me on our home services site? What do real estate, employment, hotels, new cars, and home furniture have in common? These are all things people need if they're moving. If we're smart about it, our site should have messaging and navigation options clearly intended for people who are moving. Maybe moving guides would be a good content idea. These are all opportunities that go unnoticed if we're only focused on what people want to buy.

Some sites are going back to mobile sites, and that's okay

It's been said that Google "likes" responsive design and will reward responsive sites with higher search rankings. I disagree on that second point. Google likes sites that give the user what they want, regardless of the technology used.

Yes, Google has recommended responsive design. So do I, but I do so because it's by far the easiest multi-device approach to maintain and the hardest to completely mess up. That doesn't mean it's the only way, and that does not mean that Google will penalize a site for providing a superior mobile experience in a different way.

There are lots of benefits to mobile sites. On some sites the intent and behavior of mobile users is different enough from desktop users that it justifies creating a mobile-specific experience. It's also compatible with the goal of a fast-loading site.

Responsive sites are generally much slower to load, according to a report from The Search Agency.

You can and should make your site fast with responsive, but there are a host of reasons most responsive sites end up slower on mobile. Both dynamically-served sites and mobile sites naturally lend themselves to building with speed in mind. A mobile-specific site can also offer an experience that is ideal for the user intent at that time.

This past July, Cindy Krum talked about "mobile intent" during her Mozcon presentation. It might sound like a buzzword, but it's true that mobile users are in a different spot. They're not looking to compare as much. They want to either buy quickly or get some quick details on the product.

If you're thinking about doing a mobile site, make sure you have lots of people ready to build it out correctly and maintain it. Don't underestimate the dev time it will take to make the entire site work. You'll need SEOs who know how to set up rel tags and ideally make sure the mobile site has an identical URL structure. You'll need lots of QA to make sure all your page types are being served correctly.

Some SEOs will say that a mobile sub-domain or sub-folder is worse for SEO because links to one won't count as links to the other. Nonsense! That's what the rel="canonical" and rel="alternate" tags are for. Just like fretting over non-www 301 redirecting to the www version, these are things that made a big difference at one point, but are no longer as essentially important as they were. Google is smart enough to understand what's happening – unless you don't implement them correctly.

Responsive design is still a better option for most companies, but there's no reason to be dogmatic about it. There's a reason Google gives you three options. A mobile site can work for larger companies, and is often the best option for mega e-commerce sites.

Web development continues to evolve – including JavaScript libraries

JavaScript usage is place where the SEOs are often guilty of giving dated advice. SEO should enable great content to appear to more people in more searches. SEO should not be used to restrict useful content creating tools unless absolutely necessary.

Traditional SEO wisdom has always been to avoid putting any content into JavaScript that we want the crawlers to see. This is outdated advice for websites in 2015. Libraries like React and Angular can be amazing tools. They're full of features, fun to use, and can make your website feel faster and more responsive.

If Google wants to reward a positive user experience, and if JavaScript can help site owners provide a stellar user experience, then SEOs should embrace JavaScript. Rather than lobbying against any JavaScript on the site it's time to get a little more sophisticated in our approach to help the team use their tools correctly.

React and Angular can definitely make your dynamic content more fun to use, but they also make heavy use of AJAX-like client-side execution, which Google doesn't really understand (yet). Developers and SEOs should be aware of how to make it work.

Making AJAX Google-friendly could be its own post. In fact, there are already several great posts. Google also has some great guides – make sure to check the linked resources, too. One small warning: there's a lot of outdated info out there on the topic.

• Google: Guide to AJAX crawling for webmasters and developers
• Google: AJAX FAQ
• Google: Making AJAX applications crawlable
• Built Visible: The Basics of JavaScript Framework SEO in AngularJS (Also good for other frameworks)

You can get around a lot of the nitty-gritty technical SEO using things like Prerender or V8. Try to find a tool that will automatically generate a crawlable version while using AJAX. Communicate with your developers to find a solution that works with your setup.

A humbling example

As I said, it's important to make sure that you communicate with developers before construction begins. I'll use a painful recent experience as an example. We just built a react-based tool that helps beginners estimate how much internet speed they need. It immediately redirected all visitors to a URL with a hashtag and the rest of the survey is behind a hashtag. And none of the text could be crawled without client-side execution.

Oops.

We built an awesome tool, and then hid it from Google. Someone fire the guy who missed that… just don't tell anyone it was me. We used React.js here, and it was a blast. We've also received great feedback from users. The lesson here is not to avoid React and AJAX. The lesson here is to communicate SEO requirements to the developers early. The fix will be done soon, but it took a lot longer than if I'd done my due diligence beforehand.

Understanding Google-friendly JavaScript implementation is the job of every SEO. Other digital marketers should at least be aware that there's a potential problem and a technical solution.

I love interactive tools that are fast and useful. SEOs should be facilitating the building of things that are awesome. That means helping find solutions rather than lobbying against an entire toolset that's widely used on the modern web.

Don't forget About indexable apps

Google can now index and rank apps, and they have some decent guidelines on how to do it. It's possible that app-based companies with an exclusively mobile client base don't even need a traditional website.

Most companies will still want to build and maintain websites, but be open to the idea that a responsive site might not be the best option for a small mobile game developer. The right option might instead be to add links to content and discussion and then support deep linking within the app.

Even if app-only isn't the right option, consider that content within apps could be a more engaging medium for people who have already installed the app. For example, a discussion board for players of the game might work better within the game app itself. It could definitely feel more engaging and immersive if users never have to leave the app to ask a fellow user a question or rant about the latest update.

Final thoughts

A site might look awesome when you shrink and expand the window while presenting the design to the c-suite, but if the real decision makers, the users, don't know what a cheeseburger menu is, you're not going to sell very many stock photos of earth. Responsive design is a great option – often the right option – but it isn't the only option. Hopefully this post can help get some thoughts started how to do responsive right.

I'm absolutely not saying that responsive is dead. My point is that if our advice drifts into design and development we should be able to give more concrete advice. Don't just build websites that respond to screen size. Build websites that respond immediately to your customer's needs.

Sign up for The Moz Top 10, a semimonthly mailer updating you on the top ten hottest pieces of SEO news, tips, and rad links uncovered by the Moz team. Think of it as your exclusive digest of stuff you don't have time to hunt down but want to read!

from Moz Blog http://ift.tt/1PpnA3p
via IFTTT