Web Design Archives - Bruce Clay, Inc. https://www.bruceclay.com/blog/tag/web-design/ SEO and Internet Marketing Tue, 05 Sep 2023 00:19:52 +0000 en-US hourly 1 How to Create a Mobile-Friendly Navigation in 7 Steps https://www.bruceclay.com/blog/mobile-friendly-navigation/ https://www.bruceclay.com/blog/mobile-friendly-navigation/#comments Wed, 23 Dec 2020 20:36:44 +0000 http://www.bruceclay.com/blog/?p=34762 We're officially in a mobile-first world. Google ranks your website based on your mobile content, relevance and user experience. Your mobile navigation (menus and internal links) contribute to all three.

The post How to Create a Mobile-Friendly Navigation in 7 Steps appeared first on Bruce Clay, Inc..

]]>
We are officially living in a mobile-first world. Google has switched to a mobile-first index — which means Google ranks your website based on your mobile content, relevance, and UX.

Your mobile navigation (menus and internal links) contributes to all three and must work for users and for SEO.

Good mobile navigation makes it easy for people to find what they need without bogging down page speed or cluttering the screen. Your mobile menu and other navigation links also need to keep PageRank flowing to the important pages that you want to rank well in search.

Site navigations historically included everything on a site in huge, multi-tiered lists. On mobile, that approach doesn’t work. It looks cluttered. It requires scrolling. And it causes your visitors to bounce away.

Bruce explains why mobile navigation decisions affect SEO and UX.

Make life easier for people visiting your business site on a mobile device.

Here are seven mobile-friendly navigation best practices:

  1. Keep mobile navigation short and sweet
  2. List the most important pages first
  3. Think of search as part of your navigation
  4. Make your navigation intuitive
  5. Be thoughtful about fonts and contrast
  6. Design for touch
  7. Design for the multi-screen mobile user

FAQ: How can I optimize my website’s navigation for mobile users to enhance user experience and SEO?

Note: All of the mobile navigation tips mentioned in this article equally apply to separate mobile sites, responsive design sites, and sites that dynamically serve web pages. If you’re not sure what that means or which mobile platform is best for you, read our Cheat Sheet for Mobile Design.

7 Mobile Navigation Best-Practice Steps for UX & SEO

Step 1: Keep Mobile Navigation Short and Sweet

Many mobile phone screens are only 720 pixels wide in portrait mode.

Designing mobile navigation means designing for a small screen size. With limited real estate available, there’s no room for clutter. Get right to the point, then cut the fat.

Keep your labels as short as possible while still communicating clearly. But also limit the number of options in your mobile menus.

Ask yourself, what links need to be included to help your user complete priority tasks? What elements from the desktop navigation aren’t relevant in the mobile environment?

To save your user from decision paralysis, we recommend you limit your mobile navigation to four to eight items on the top level. Your mobile navigation menu is not the place to link to every page in your site.

To keep it short and sweet, you may even consider adding a top-of-page logo that navigates to the homepage and leaving the Home button out of your navigation together (as on the BCI website below).

Mobile menu navigation on BruceClay.com.
BCI’s mobile navigation

Some mobile menus require multi-level navigation to aid user experience. This is more common with ecommerce websites. If you must go there, keep it as simple as possible. Don’t add more than one sublevel of drop-down functionality.

If your navigation must include more items, a vertically oriented navigation activated from a menu icon is the best option.

If your mobile user’s typical needs are very limited, consider using a static navigation that runs across the top of your design, as we see on the GameStop mobile site:

GameStop mobile view icons
GameStop uses static navigation across the top of its mobile-friendly view.

Navigation that requires horizontal scrolling probably won’t be mobile-friendly. Some sites have the resources to design a sleek image-based carousel type of interface, such as what Google uses for certain search results. That might be an exception but consider your audience.

Step 2: List the Most Important Pages First

Your website users don’t have a lot of time — or patience. How can you help them get to the right place faster?

To design your mobile site navigation, first think about the following:

  • What are your most important pages?
  • What are the top category pages outlined in your siloing strategy?
  • What are the most common actions taken by site visitors using smartphones?
  • What pages of your website most effectively satisfy a mobile user’s needs?

The answers to these questions influence not just which items go in your main menu, but also which links and calls to action you should put on each page.

You’ll want to keep your main navigation menu consistent throughout the site. It should point to the top four to eight landing pages (such as main category pages).

A short-and-sweet mobile nav is a win-win for SEO and your users. It preserves the flow of link equity to your most important pages while also helping users get around.

Once users arrive on a page, contextual links can move them to wherever makes sense. These links can be added within the body content of each page in a comfortable way.

For instance, a long blog post may have multiple sections and thousands of words. Have mercy on your mobile users — don’t make them scroll to find what may be pertinent to them. Some ideas:

  • Give anchor links at the top that jump a reader to the different sections below (as I did at the top of this article). This may also help search engines identify fragments of your content that answer specific search queries.
  • Show a TL;DR summary at the top of a long article. If readers want more detail, they’ll scroll down.
  • Include useful calls to action and links to related pages within the body copy where they make sense.

The mobile navigation model I’m describing — a short, consistent main menu coupled with contextual links that vary per page — actually supports siloing better than the massive structured menus of old. A parent only links to their children, maintaining a clear hierarchy and intuitive flow. Internal links allow PageRank to flow to topically related pages naturally.


This mobile navigation model — a short, consistent main menu coupled with contextual links that vary per page — actually supports siloing better than a massive, multi-tiered menu.
Click To Tweet


When it comes to mobile users, quicker is always better! It will take some work for you to make each page deliver the most appropriate navigation options. But you’ll improve user experience and, no doubt, your ROI by giving visitors a more direct path to what they need.

While we’re on the topic of “quicker,” remember that fast mobile pages make for a better user experience. Google announced that a page’s load speed can factor into your Google search rankings, so the building of streamlined navigation is a worthwhile mobile SEO service to consider.

You can test your mobile page speed with Google’s mobile speed test (or use our SEOToolSet®).

Step 3: Think of Search as Part of Your Navigation

Mobile users look at search as navigation, and you should, too.

Consider Amazon.com. On mobile, Amazon doesn’t even bother with the category drop-down menu (although it’s there under “Departments” if someone wants it). What’s prominent at the top of the mobile view is a simple “Search” box.

Even with its massive catalog, Amazon doesn’t expect users to navigate through menus to find what they need. Most of the time, customers just type in a product name and go directly to buy it.

The Search box is Amazon’s most mobile-friendly navigation option.

On mobile, your search box is often the most direct route to what a user needs.

Set it up and make sure it works well!

Step 4: Make Your Navigation Intuitive

Your customers work hard enough; navigating your site should not be work.

To make your navigation intuitive, menu language should always be written in a way that lets the user know what to expect. It should be clear what the item does if it’s a dropdown and exactly where it goes if it’s a link.

If you are using symbols to convey information to your users, make sure they are clear and conventional symbols. For instance, if your menu items drop-down, use an intuitive symbol like a plus sign (+) or an arrow (>) to let your users know that they can click to see more options.

Another best practice example would be using a magnifying glass to indicate a search feature.

If you are using a toggle menu, use three stacked lines — the icon highlighted in the example below — to help the user easily find your main nav.

REI mobile menu icon.
REI’s menu opens from a hamburger icon.

TIP: A hamburger-style menu icon like this may get more clicks if the word “menu” displays below it according to A/B testing. If your design has room, you might test this to see if it makes your mobile site more intuitive and increases clicks/conversions.

The goal is for your mobile navigation to make life easier by limiting thinking, scrolling, and clicking.

About Breadcrumbs in SERPs
It’s worth noting that since 2015, Google has displayed URLs in its mobile search results differently than it does in desktop SERPs. The change replaces a web page’s URL with a description of the page’s location in a breadcrumbs-like format. If this doesn’t scream the importance of siloing and a clear hierarchy, nothing does!

Now, rather than showing a page URL, Google’s mobile search results display a breadcrumb path beneath each title.

For example, mobile search results for “history of Google” include a Wikipedia result showing how the URL appeared in the past versus the current breadcrumb style:

Before and after URLs in Google mobile search
How Google’s mobile search result URLs have changed

TIP: You can control how your breadcrumb URLs appear if you add schema markup to the HTML on your pages. Refer to Schema.org’s breadcrumbs structured data for details and Google’s help file on breadcrumbs. (For more on this update and what it means, see our post-Google’s New Mobile Breadcrumb URLs: Making the Most of Your Site Name & URL Structure.)

Step 5: Be Thoughtful about Fonts and Contrast

Your website users shouldn’t have to zoom in to read any of the text on your mobile website, including the text within your navigation.

Tiny text that requires zooming creates a bad user experience, and neither your website users nor Google or Bing likes poor user experiences.

All of the text on your mobile site needs to be large enough to be read on a variety of devices without zooming. This principle needs to be a top priority that you consider as you build your mobile-friendly CSS (cascading style sheets) to control the appearance of text on various devices.

To make your navigation text easy to read, choose a font that naturally adds enough space to distinguish between letters and is tall enough to be clearly read in a menu.

Your font size and style also depend on your brand’s style guide and what fits your unique demographic. For instance, a young audience may not struggle with smaller or condensed fonts as much as an older demographic would. The way you handle formatting such as bullet styles, capitalization, margins, captioning, and so on should also reflect what’s attractive to your audience and comfortable for them to read.

Once you decide, set up your CSS and create a written style guide to keep your content consistent.

For designing the look of your mobile navigation, best practices can’t give you a one-size-fits-all recommendation. What’s important is that every word on your mobile site can be read easily without zooming. I recommend you perform user testing to see first-hand whether your font is tripping up users.

Also, make sure there’s sufficient contrast between your text and its background. WebAIM guidelines offer rules for color contrast (recommending a minimum ratio of 4.5 to 1). You can try their contrast checker tool to see how your text treatment measures up.

Google gives a few examples of what different contrast ratios look like:

Examples of text-to-background contrast ratios
Text needs contrast against the background for readability on a phone. (Per Google)

In addition, Google points out that “classic readability theory suggests that an ideal column should contain 70 to 80 characters per line (about 8 to 10 words in English). Thus, each time the width of a text block grows past about 10 words, consider adding a breakpoint.”

This tip applies to body text; consider a shorter maximum length for your menu options.

Not sure if your text is easy to read? Run your site through Google’s Mobile Friendly Test tool.

Step 6: Design for Touch

Tablet and smartphone users rely on touchscreens to get them around websites. While a pointy mouse arrow allows users to precisely select items in tight spaces, the average finger or thumb requires a larger target to press. Many users don’t hit a touchscreen exactly where they are aiming.

Google recommends building mobile pages with a minimum touch target size of 48 pixels with a properly set viewport (more on that later). And touch targets should be spaced about 32 pixels apart, both horizontally and vertically.

Mobile touch target diagram
Buttons and touch targets should be big enough to be mobile friendly. (Per Google)

Build navigation buttons with a target smaller than 40 pixels, and your user experience plummets. Visitors end up sloppily navigating to the category above or below the one they want.

Don’t frustrate your users!

Since people are so bad at hitting their tap mark much of the time, it can also help to incorporate touch feedback into your navigation. Your feedback could be a color change, a blink of color, a font change, or another visual cue.

Even if it’s subtle, this feedback can improve user experience by helping to reassure users that they’ve selected the right item. Take a look at the example below from Search Engine Land:

Mobile menu color-change touch feedback on SearchEngineLand.com.
Color changes show which menu item is touched on SearchEngineLand.com.

If you are using multi-tier navigation, it’s also important that you make sure your drop-downs are activated by touch — not mouseover. Clearly, hover navigations work just fine in the desktop experience, where hovering is a possibility. But they leave mobile users stuck.

Another touch-friendly option is to design a supplementary navigation that uses images and exaggerated graphic buttons. This type of navigation can be a great homepage asset that gets your visitor headed in the right direction quickly.

Graphic buttons example
Vintage clothing site RustyZipper.com uses large graphic “button” with text labels for mobile-friendly navigation.

It’s important to note that graphic buttons like these should only be a supplemental option used alongside a toggle navigation or a static top navigation. You need to have a consistent navigation that the user can access at the top of every page.

While you may be able to include this graphic navigation at the bottom of your mobile pages, it’s not optimal or practical to use these big graphic buttons as your primary navigation. And always consider the load-time performance impact of images and buttons.

Be Careful with Popups
You also want to avoid intrusive interstitials — those popups that monopolize the screen when a visitor clicks through from a search result. In January 2017, Google rolled out an intrusive interstitial penalty for mobile search, which may grow in importance when intrusive interstitials get rolled into Google’s Page Experience update.

Per Google, “Since screen real-estate on mobile devices is limited, any interstitial negatively impacts the user’s experience.”

intrusive interstitial popup example
Example of an intrusive interstitial popup (credit: Google)

Be careful to use interactive forms and popups courteously. Some best practices for these include:

  • Apply a delay or time interval between views so you don’t annoy your visitors.
  • Reduce the amount of screen space your element covers.
  • Try a bar or box that scrolls in from the bottom or side.
  • Avoid covering the middle of the mobile screen or obstructing your navigation elements at the top.
  • Let no be no. If a user closes a form, don’t display it again within a reasonable period of time (perhaps a week later).

Step 7: Design for the Multi-Screen Mobile User

Chances are good that interested visitors come to your website using multiple devices over a short period of time.

To help them feel confident they’re in the right place, it’s smart to give your mobile and desktop sites a consistent visual theme.

Your mobile and desktop navigation, however, do not have to be — and sometimes should not be — identical twins.

While the colors, fonts, and themes you use for your mobile and desktop navigation need to be consistent to reinforce your branding, the similarity may end there.

Your mobile navigation needs to help users navigate around your website and accomplish tasks. Consider the content your smartphone users need and the tasks they are looking to accomplish, and then build your mobile navigation specifically for a smartphone user.

  • What mobile-specific calls to action need to be built into your navigation to aid user experience?
  • Does it make sense to include a “Call” button or a store locator?
  • Can a mobile user easily find essential information like your address, directions, phone number, hours of operation, or other facts?

Remember: Space is limited, mobile needs are unique, and on-the-go patience is minimal.

Because website visitors will use a variety of devices and screen sizes, specify a viewport using the viewport meta tag.

Meta viewport mistake on mobile screens
Websites need a scalable meta viewport for correct display on smartphones.

Common mobile mistakes include having a fixed-width viewport that doesn’t scale for all devices or assuming too wide of a viewport, which forces users on small screens to scroll horizontally.

Mobile-Friendly is Customer-Friendly

Creating a mobile-friendly navigation means creating a customer-friendly navigation that gets your personas moving in the right direction right away.

If you build an intuitive navigation that is easy to use, your website users will be headed toward conversion happiness in no time. Build a navigation that is frustrating or confusing, and they’ll be headed back to the search results and straight toward someone else’s website.

To keep your inbound visitors smiling, follow these best practices to make your mobile-friendly navigation:

✔ Short and sweet whenever possible
✔ Easy to read
✔ Task-oriented
✔ Prioritized with what’s most important listed first
✔ Accessible and placed consistently across all pages
✔ Clear, straightforward, and expected
✔ Vertical if scrolling is required (never use horizontal scrolling!)
✔ Easy on the eyes
✔ Finger-friendly
✔ Fast

Be a leader — share this post with friends or colleagues who are as interested in UX as you are. For more resources like this one, subscribe to our blog.

EDITOR’S NOTE: We regularly update this article for the Bruce Clay Blog.

mobile-seo-and-design-checklist

FAQ: How can I optimize my website’s navigation for mobile users to enhance user experience and SEO?

Mobile website navigation optimization involves a delicate balance between simplicity and functionality. A cluttered navigation menu can overwhelm users, leading to higher bounce rates. To streamline navigation, prioritize essential menu items that guide visitors to your core content. Implement collapsible menus or a well-designed hamburger menu to preserve screen real estate while providing access to secondary sections.

Smooth transitions between pages are equally vital. Slow-loading pages can frustrate users and negatively impact SEO rankings. Compress and optimize images to minimize loading times. Leveraging lazy loading ensures that images load as users scroll, enhancing both speed and overall performance.

The concept of “thumb-friendly” navigation holds paramount importance in mobile design. Given the limited screen space, ensure that buttons and interactive elements are appropriately sized for easy tapping. Extensive forms or intricate actions can be off-putting; simplify them to encourage user engagement.

Structured data markup is a potent tool often overlooked in mobile optimization. Implementing schema markup enhances your website’s appearance on search engine results pages (SERPs), providing users with quick access to relevant information. Rich results, such as breadcrumbs, ratings, and product information, can significantly improve click-through rates.

Prioritize a responsive design that adapts to various screen sizes, ensuring a consistent device experience. Regularly test your mobile site’s performance and user experience, and adapt as needed.

Step-by-Step Procedure: Optimizing Mobile Website Navigation for User Experience and SEO

  1. Audit Current Navigation: Evaluate your website’s current mobile navigation structure to identify pain points and areas for improvement.
  2. Prioritize Content: Determine your core content and essential menu items. Streamline the navigation menu to focus on these key elements.
  3. Implement Collapsible Menus: Integrate collapsible menus or a hamburger menu to conserve space while providing access to secondary content.
  4. Ensure Fast Loading: Optimize images for the web and implement lazy loading to enhance page loading speeds.
  5. Design for Tapping: Make interactive elements, buttons, and links thumb-friendly in size to facilitate easy tapping.
  6. Simplify Forms and Actions: Streamline complex forms and actions, reducing friction and encouraging higher user engagement.
  7. Utilize Structured Data: Implement schema markup to enhance your website’s appearance on SERPs and drive click-through rates.
  8. Responsive Design: Develop a responsive design that adapts seamlessly to various screen sizes and orientations.
  9. Test Across Devices: Regularly test your mobile website on different devices to ensure consistent performance and user experience.
  10. Monitor Analytics: Monitor user behavior and engagement using analytics tools to identify further optimization opportunities.
  11. Optimize Page Speed: Continuously optimize your mobile site’s performance by minimizing code, leveraging caching, and using content delivery networks (CDNs).
  12. Focus on Intuition: Design intuitive navigation that anticipates user needs, making information retrieval effortless.
  13. Use Descriptive Labels: Use clear and concise navigation menu labels to enhance user understanding.
  14. Breadcrumb Navigation: Implement breadcrumb navigation for easy backtracking and improved user orientation.
  15. Regular Updates: Keep your website’s mobile navigation up-to-date, reflecting any changes in content or structure.
  16. Mobile-First Indexing: Be aware of Google’s mobile-first indexing, where the mobile version of your site is prioritized for ranking.
  17. User Feedback: Gather user feedback and integrate suggestions to refine your mobile navigation strategy.
  18. Optimize Images: Compress and optimize images to balance visual appeal and loading speed.
  19. A/B Testing: To determine the most effective design, perform A/B testing with different navigation layouts.
  20. Continuous Improvement: Mobile optimization is an ongoing process. Stay updated with industry trends and adapt your strategy accordingly.

The post How to Create a Mobile-Friendly Navigation in 7 Steps appeared first on Bruce Clay, Inc..

]]>
https://www.bruceclay.com/blog/mobile-friendly-navigation/feed/ 59
How to Set Up a Basic Conversion Testing Strategy https://www.bruceclay.com/blog/how-to-setup-a-basic-conversion-testing-strategy/ https://www.bruceclay.com/blog/how-to-setup-a-basic-conversion-testing-strategy/#comments Thu, 18 Jun 2020 15:59:43 +0000 http://www.bruceclay.com/blog/?p=16914 For many of us, conversion rate optimization (CRO) can seem like a complicated venture. Many people aren’t even sure where to begin. While each business might find the testing process needs to be tailored to the company and website, the following is some basic insight into how to create a CRO strategy for your company.

Read more of How to Setup a Basic Conversion Testing Strategy.

The post How to Set Up a Basic Conversion Testing Strategy appeared first on Bruce Clay, Inc..

]]>
AB testing illustration.

For many of us, conversion rate optimization (CRO) can seem like a complicated venture. Many people aren’t even sure where to begin. Though each business might need to tailor the testing process to their company and website, the following is some basic insight into how to create a CRO strategy for your company.

If you’d like to start with an overview of CRO, read A CMO’s Guide to Conversion Rate Optimization.

Phase I: Strategic Research

The first step in any project is always research. For conversion testing, this includes things like:

<>Analytics Data Mining

  • Determine baseline traffic volumes, top landing pages, bounce rates, exit rates, and traffic sources.
  • Understand current conversion rates for the site.

Competitive Data Mining

  • Examine other sites in the same competitive niche, and see what elements are missing from your site.
  • Are you competitive with other sites in terms of offerings and pricing?
  • Are your competitors taking the right action for their audience?
  • Do competitors follow best practices?

Establishing a Sales Funnel

  • Create a map of the overall sales funnel based on the outcomes of the above two steps. This will be used as a reference document throughout the testing process.
  • Some sites may have multiple goals for their visitors. In those cases, it would be appropriate to have multiple different Funnels.

Determining Target Page and Testing Method

  • Based on the outcome of all the steps mentioned above, determine the best page to target for testing.
  • Based on analytics findings, also determine whether testing should be A/B or Multivariate.

In deciding your priority for testing, consider using the following order:

  1. Pages that are already performing to some degree
  2. Pages with the highest volumes of traffic
  3. Pages near the beginning of the sales funnel

Phase II: Creative Development

For A/B Split Testing

  • Develop a series of redesigned “recipes” for the entire targeted page (different ingredients that go into a variation), taking care to include differences between each recipe (typically about three different designs).
  • Traffic is split randomly, but equally between the different recipes, and visitor actions are recorded.
  • Low volume of traffic is required on the targeted page due to the low recipe count.

For Multivariate Testing

  • Develop a series of redesign recipes for specific elements on the targeted page, taking into consideration how elements may interact with each other.
  • Traffic (users) shows all possible combinations of targeted elements randomly but equally, and visitor actions are recorded.
  • High volume of traffic is required on the targeted page due to the high recipe count.

Phase III: Testing

We recommend using the Google Marketing Platform (formerly known as Google Website Optimizer) to facilitate A/B split and low-level multivariate testing. For multivariate tests on larger scale sites that will require an excess of 50,000 recipes, some of these options may be suitable solutions:

  • License more robust software from a third party (e.g., SiteTuners)
  • Develop an in-house suite with more robust capabilities than Google software provides out of the box.

In my experience, Google is usually able to provide actionable results after approximately one month of testing. Results may come in more quickly for sites with larger volumes of traffic or may take longer for sites with smaller volumes of traffic.

Phase IV: Reporting

Once you are satisfied that substantial results have been obtained, it’s time to generate a findings report.

The report should detail what was changed, how it was changed, why it was changed, and then deduce why the performance increase was achieved. Also, you should report on the estimated lifetime value of increased conversion rates based on the winning version.

Creative Development Tactics: Navigation

Outlined below are a few steps that can be taken to quickly test navigation elements, should the need exist on a particular page:

Heat Mapping

  • Site overlay feature in Google Analytics can provide insight as to where people are clicking.
  • Use software to predict visual attention patterns without the need for an actual sample demographic. For example, a heat mapping type of software like HotJar or an eye-tracking program such as Attention Insight can help you analyze behavior on a page.

Flow Charts

These can help to identify areas that are cumbersome within navigation:

  • Outline all current possible navigation steps (aka, task analysis).
  • Simplify the task flow, on paper, wherever possible.

Analytics

  • Top landing pages (content overview) report can give insight as to what navigation features are being used most frequently.
  • Navigation analysis report provides more details as to how effectively the navigation funnel is performing.

Heuristic Evaluation

  • Requires multiple participants (three – five people).
  • Among the quicker methods for spotting usability issues in any navigation system.
  • Participants are controlled and do not interact with each other.
  • Controller has the opportunity to explain navigation, which ensures context-relevant reports from participants.
  • Controller can note unrelated issues as well, as they are brought to light during the evaluation.

For more information, check out this classic research article on how to conduct a heuristic evaluation.

Happy testing, everyone!

This article was originally written by SEO analyst and CRO specialist Scott Fowles. It is now maintained by BCI staff.

FAQ: How can I effectively implement a Conversion Rate Optimization (CRO) strategy for my website?

Conversion Rate Optimizing (CRO) is an invaluable strategy to maximize the potential of any website. CRO is a process that adjusts websites so as to convert visitors into paying customers; an essential tool for online businesses.

Understanding the Basics of CRO

Before diving deeper into CRO, it’s essential to understand its fundamentals. CRO is a systematic way of improving user experience by analyzing behavior and making data-driven decisions. Start by understanding your website’s goals, defining key performance indicators (KPIs), and setting achievable targets.

Identifying Key Elements

To effectively optimize your website for conversion, you must identify and address its weak points. Conduct thorough usability testing, analyze website traffic using tools like Google Analytics, and gather user feedback to pinpoint areas that need improvement. These insights will be invaluable when crafting your CRO strategy.

Actionable Insights for CRO Success

  1. A/B Testing: A/B tests provide an effective means of comparing headlines and images across websites, providing valuable data-driven insight into user preferences. These experiments give you the power to make data-informed decisions based on users’ behavior and make the best use of user information.
  2. Mobile Optimization: With more people browsing websites via their phones or tablets than ever, optimizing it for mobile can increase conversion rates significantly.
  3. Page Load Speed: Slow-loading pages can deter users and lead to high bounce rates. Optimize your website’s speed by compressing images, minimizing HTTP requests, and using a content delivery network (CDN).
  4. Clear Call-to-Actions (CTAs): Make your CTAs prominent, concise, and action-oriented. Use contrasting colors and persuasive language to guide users toward desired actions.
  5. User-Friendly Forms: Simplify forms and reduce the number of fields users need to fill out during the conversion process. Each additional field can increase abandonment rates.

Continuous Improvement

CRO is an ongoing process. Regularly monitor your website’s performance, analyze the results of your tests, and adapt your strategy accordingly. Stay updated with industry trends and user preferences to remain competitive in the ever-evolving digital landscape.

By implementing these strategies and consistently refining your approach, you can boost your website’s conversion rates, enhance user experience, and ultimately achieve your online business goals.

Step-by-Step Procedure: Implementing a CRO Strategy

  1. Define your website’s goals and set clear KPIs.
  2. Conduct usability testing and gather user feedback.
  3. Analyze website traffic using tools like Google Analytics.
  4. Identify weak points and areas that need improvement.
  5. Implement A/B testing for different webpage elements.
  6. Ensure mobile optimization for all website pages.
  7. Optimize page load speed through various techniques.
  8. Create clear and compelling CTAs.
  9. Simplify and streamline user-friendly forms.
  10. Monitor website performance and test results regularly.
  11. Adapt your CRO strategy based on data and insights.
  12. Stay updated with industry trends and user preferences.
  13. Continuously refine your CRO approach for long-term success.

The post How to Set Up a Basic Conversion Testing Strategy appeared first on Bruce Clay, Inc..

]]>
https://www.bruceclay.com/blog/how-to-setup-a-basic-conversion-testing-strategy/feed/ 6
7 Newsletter Thank You Page Examples That Got It Right https://www.bruceclay.com/blog/newsletter-thank-you-page-examples/ https://www.bruceclay.com/blog/newsletter-thank-you-page-examples/#comments Tue, 11 Jun 2019 14:05:48 +0000 https://www.bruceclay.com/?p=66953 Don’t let your newsletter thank-you page be just an afterthought. Here, let’s look at seven great examples of companies thanking new subscribers.

The post 7 Newsletter Thank You Page Examples That Got It Right appeared first on Bruce Clay, Inc..

]]>
Thank you pages for purchases get a lot of attention. There are lots of articles about how to handle that last step in the shopping experience. After all, a good thank-you to a customer can reinforce branding, upsell products, and further retarget buyers.

Newsletter thank-you pages, however, receive a lot less attention. There aren’t many how-to articles devoted to them. And web designers don’t give them much notice.

But how about the person who signs up for your newsletter email list? That thank-you page is an opportunity to leave a new subscriber with a positive feeling — or a missed opportunity.

Don’t let your thank-you-for-signing-up page be just an afterthought. Here we’ll look at seven great examples of companies thanking new subscribers.

Consumer Reports Weekly Newsletter Thank You Page

Consumer Reports newsletter thank-you page.

What Consumer Reports does right:

1. Welcome the subscriber by name.

The reader feels welcomed with an informal “You’re all set!” and a thank you that calls them out by name. This reinforces the person’s budding relationship with the brand.

2. Use eye-catching and relevant images to reinforce reader’s newsletter choice.

In addition to personalizing by name, Consumer Reports confirms the reader’s choices using bold images with captions. This lets the reader know, at a glance, that they’ve subscribed to content that will be interesting to them.

Here’s an idea: Review your image assets. Can you pick some that match your topics to enhance your thank-you message?

3. Link to current, directly related content.

“Preview” links let the reader get immediate access to what they’re looking for. In this case, they can view last week’s newsletter for their selected topics.

Don’t worry about an algorithm showing a three-year-old “related” article to your new subscriber. Link to the most recent publication and you’ll always show the latest content. The reader can be assured it meets their needs — and engage more with your site, too.

4. Indirectly collect demographic information.

Did the subscriber click to see the previous money newsletter but not the previous car newsletter? Getting an idea of a subscriber’s relative interest in those two topics can help you segment your email list.

Think about it: Track the links on this page. Then you’ll see how much traffic the thank you page drives to your on-site content.

If your thank you page is not on your own website, you can add UTM codes to the links for tracking. (Here’s where you can learn how to build tracking code into your links.)

Car and Driver Newsletter Thank You Page

Car and Driver thank you.

What Car and Driver does right:

5. Show a clear summary of what the reader selected.

Car and Driver shows the subscriber an image of the newsletter with some eye-catching images. The “Read More” link encourages the reader to stay on the site and consume content they might be interested in.

6. Have great timing for offering related content.

Where else can a business get a new subscriber with a single click? Even better, one who is already in a funnel? On the thank-you page, of course!

The site has all the person’s information already loaded. So adding another newsletter subscription here is easy. If the reader does click to subscribe to one of the other newsletters presented, another subscription offer is shown (signing up for special offers or perks, for example).

Barbecue Bible’s Up In Smoke Newsletter Thank You Page

Barbecue Bible confirmation page.

What Barbecue Bible does right:

7. Offer the subscriber a surprise.

The signup form was for the “Up In Smoke Newsletter.” It didn’t promise a bonus offer in exchange for an email address. So the special offer comes as a surprise — a meaty 85-page ebook of recipes and tips in the reader’s choice of formats. There is even a link to FAQs in case the reader isn’t sure how to get the bonus.

8. Make navigation options and items for sale visible.

Barbecue Bible doesn’t let the subscriber preview the newsletter. However, they offer related products (in a variety of price ranges) to buy. The full site navigation is also present so that the user can find other interesting content on the site.

It’s a missed opportunity making your thank you page look like an isolated landing page.

Give the subscriber a way to continue engaging with you! The Car and Driver example above does this with selective options. But just leaving your navigation menus in place gives someone a chance to do more on your website.

Note: For the sake of space, the surrounding site navigation has been cropped from the following examples.

Dogster.com Newsletter Thank You Page

Dogster thank you page.

What Dogster does right:

9. Emphasize conversion optimization best practices.

This page could be in a textbook on conversion optimization.

There is an attractive image looking toward the text the subscriber should read. A low-commitment “Give Dogster Magazine a Try” button offers an upsell. And the styling of this page matches the design of their print magazine (see below).

You’ve probably done your research and know what appeals to your customers. You should get the most use of that research. Use it consistently on as many pieces of the site as you can.
Dogster magazine has consistent styling.

King and Prince Resort Email Thank You Page

King and Prince email signup.

What King and Prince Resort does right:

10. Suggest tagging photos on Instagram.

Some newsletter confirmation pages suggest that the reader visit the site’s social media accounts after signing up.

This resort’s page also encourages the reader to use an Instagram hashtag for a chance to be featured on their account.

Business Insider Email Newsletter Thank You Page

BI thank you page with offers.

What Business Insider does right:

11. Give prominent user feedback.

Right at the top, the page confirms the newsletter subscription went through. This simple feedback is an obvious but essential part of a thank you page.

12. Match the Website’s Style.

Additional products are offered for the highly motivated subscriber. But there are no flashy cars or credit cards here, which matches the site’s tone. The images instead show a variety of devices.

Business Insider recognizes that their readers want to consume information when they’re on the go, on assorted devices.

HTC Newsletter Thank You Page

HTC thank you for subscribing.

What HTC (cable/internet provider) does right:

13. Combine friendly and professional.

The envelope image offers a smile and helps convey to the reader a non-stuffy attitude. Yet it doesn’t go overboard on the humor. The welcome and message let the visitor know what to expect in their email.

14. Include strategic persona building.

HTC asks for a small amount of information to get you to sign up. Then on the confirmation page, it offers options to tailor your newsletter subscription with the incentive of a surprise on your birthday. It’s a gentle way to get more information while making sure the new subscriber is getting relevant information (and not too many emails).

More Best Practices

15. Use a double opt-in signup.

Savvy companies use a double opt-in to ensure that they’re growing their email list with real people who want what they offer.

You can tell your reader that they will receive an email, and that they’ll need to confirm their subscription.

16. Noindex the confirmation page.

Make sure people aren’t leaking into your conversion funnel at the wrong stage.

You don’t want someone to find your thank-you page from a search engine. This is a problem if you have your thank-you page set as a conversion goal in analytics since you don’t want someone visiting it without having converted. More importantly, it’s a bad user experience to go straight to “Thank you for subscribing!” when the visitor hasn’t.

You can keep the page out of the index with a meta robots “noindex” directive.

17. Don’t ask for a new signup again on the thank-you page.

Many sites have a pop-up encouraging the visitor to sign up for their newsletter. By default, this form pops up from every page — even right after the visitor just signed up for the newsletter!

To avoid this, note the URLs of your thank-you pages. Then configure your pop-ups to not launch on those pages.

18. Make it clear the visitor successfully subscribed.

Many sites redirect the visitor to the homepage. Or they display a single, easily overlooked line of text that says they have subscribed. Instead, welcome the visitor and let them know they did complete what they wanted to do.

19. Proofread.

Even though these pages do not have 2,000 words of text, they still need review. Make sure there are no spelling, grammar or style errors.

Applying these newsletter thank-you page best practices can help your business build a great relationship with your customers. A little extra care can keep the positive feeling going between the reader and your brand.

Go ahead and share this article with your content team and others!

The post 7 Newsletter Thank You Page Examples That Got It Right appeared first on Bruce Clay, Inc..

]]>
https://www.bruceclay.com/blog/newsletter-thank-you-page-examples/feed/ 44
How to Implement AMP (If You Really Must): A Quick-Start Guide to Accelerated Mobile Pages https://www.bruceclay.com/blog/how-to-implement-amp/ https://www.bruceclay.com/blog/how-to-implement-amp/#comments Tue, 19 Feb 2019 19:59:27 +0000 https://www.bruceclay.com/?p=63364 Both searchers and search engines want webpages to be lightning fast. So it’s no surprise that page speed is a ranking factor in Google’s search algorithm.

Using Accelerated Mobile Pages (AMP) is one way to speed up your webpages for people using mobile devices. But you should only go to the time and expense of implementing AMP if it's the best solution for YOUR site ...

The post How to Implement AMP (If You Really Must): A Quick-Start Guide to Accelerated Mobile Pages appeared first on Bruce Clay, Inc..

]]>
lightning fast

Both searchers and search engines want webpages to be lightning fast. So it’s no surprise that page speed is a ranking factor in Google’s search algorithm.

Multiple studies have shown that page load time also heavily impacts a site’s bottom line: conversion and revenue.

Using Accelerated Mobile Pages (AMP) is one way to speed up your webpages for people using mobile devices.

AMP can present additional benefits: appearing in the AMP carousel in Google search, and offering a better experience to searchers.

AMP search results in Google
Google marks AMP results with a lightning bolt. Some SERPs include an AMP carousel that a user can swipe through.

Is AMP Right for Your Site?

Originally, the AMP solution was intended for media sites. Google wanted to help news stories come up almost instantly from the search results.

Over time, AMP has spread to other types of sites — particularly advertisers, ad-technology platforms and e-commerce sites as well as publishers.

Who is AMP for? diagram from AMPproject.com
Google recommends AMP primarily for these types of sites. (image credit: AMPproject.com)

Today, some websites do benefit from implementing AMP. Retailers and many others use AMP to serve landing pages fast. And ads in this format have a better chance of being seen.

If you’re looking for a way to make your webpages faster, then AMP may be right for you.

You don’t need AMP at all for webpages that are responsive and fast enough already. Google’s Gary Illyes has said this publicly. And I explain why in this video clip.

What are alternatives to implementing AMP?

  • Content Delivery Network. CDNs work by bringing the heaviest resource files on a site closer to the end user. Less distance to travel means faster delivery, so your pages display more quickly on a mobile device.
  • Fully implemented HTTP/2. The HTTP/2 protocol speeds up data transport on the web. So if your market has 4G or 5G internet speeds and your website is HTTP/2 enabled, then you probably don’t need AMP at all.
  • Progressive Web Apps technology. PWAs can make your website behave like a native mobile app. We have written about these before (see What Is a Progressive Web App).

Here’s a story to illustrate that HTTP/2 statement.

One of our consulting clients, a U.S. company, converted several thousand of its webpages to AMP. Four staff members worked for five weeks to complete the project.

The result? Their AMP pages displayed slightly faster to mobile searchers. But the website’s rankings and traffic were unaffected. In hindsight, their time and effort would have been better spent creating new content.

The AMP solution makes the most sense in countries/regions with slow network speeds. For example, our Bruce Clay India office has helped implement AMP for some clients there with good results.


You don’t need AMP at all for webpages that are responsive and fast enough already.
Click To Tweet


If you believe AMP is right for you and you’re ready to start, I’ll outline the basic first steps.

How to Implement Accelerated Mobile Pages

To implement Accelerated Mobile Pages for your website and track results, there are three basic steps:

  1. Create the AMP page template.
  2. Roll out the AMP pages.
  3. Track with analytics.

We’ll look at each step in detail below, and I’ll also link to AMP documentation for more info.

Once you have decided which parts of your site should be AMP’d, here are the basic steps to creating, publishing and tracking AMP pages.

1. Create the AMP Page Template

The first step in implementing AMP is creating a webpage template.

AMP integrates with many different publishing platforms. You can view the list in AMP’s Quickstart guide and choose your content management system to get more details.

You can build AMP templates from scratch. Or, you can convert existing HTML pages into AMP format. The documentation gives information on all of the options.

Pointers for creating an AMP template:

  • When creating a page template for AMP, ensure that it meets AMP specs. You can find guidance on HTML format and more at the AMP specifications page.
  • When styling the page, you won’t have JavaScript at your disposal. Include as many custom <amp*> tags as you need to make the layout look good. That includes using responsive images, video and audio (see AMP replacements for details).
  • Keep it simple. After all, the point of AMP is to have a clean, stripped-down webpage.
  • Include some sort of navigation to your domain on each page. You can link from a logo, image, or text. Because AMP pages are served from a Google cache, giving searchers a link is essential to try and keep them on your website.
  • If you need to keep ads on your webpages, then you must migrate them. Use the amp-ad component. If you cannot use <amp-ad>, then do not include ads in your AMP templates. (You can read more about advertisements on AMP here.)
  • Finally, validate the AMP page. Just one error or warning will keep the page out of the AMP cache. So validation is a crucial step. Check out this page for common validation errors.

This video produced by the AMP Project explains how to validate pages:

2. Roll Out the AMP Pages

I like the idea of testing one or two types of pages from your website on AMP first. Ideally, include some pages that rank so that you can see if Google is serving the AMP version in mobile search results.

Depending on your site’s crawl rate, it could take a couple of days before Google finds, checks and indexes the AMP version of the page.

Let the rollout run for at least one month (longer if you can do it). As long as your pages are getting traffic, you’ll build enough data to ensure that rolling out AMP sitewide is worth it.

3. Track with Analytics

You’ll want to track the performance of your AMP pages. Since AMP analytics will be different from normal Google Analytics, read this guide to understand how it works.

You can track pages via in-house or third-party analytics. Many analytics vendors have built-in configurations for amp-analytics.

You can use amp-pixel for simple tracking and amp-analytics for everything else.

Technical recommendations as you’re setting up tracking:

  • Make sure to use the canonical URL and other variables to define what should be recorded. This is essential to understanding any traffic increases or decreases due to AMP.
  • Use the extraUrlParams attribute in amp‐analytics to add a query string parameter to the canonical URL like “type=amp” or something similar. This will make it easy to differentiate AMP pages from normal webpages in analytics, or to create a custom segment if you need to. This way, you can compare total traffic on pages before and after the AMP launch.

Side Note: How Accelerated Mobile Pages Work

If you’re wondering how AMP pages can possibly appear to load instantly, it’s because they are optimized differently than a regular webpage.

Below I’ve summarized optimizations that AMP does to reduce the amount of work a browser must do to display a page. (See the full list on the AMP Project site.)

Here’s what the AMP process can do:

  • Execute asynchronous JavaScript only – It doesn’t wait for big files to load.
  • Size resources (such as images, ads and iframes) statically – The browser knows exactly how the page will be laid out from the start.
  • Don’t let extensions block rendering – The page doesn’t have to wait even if there are extensions coming.
  • Keep third-party JavaScript out of the critical path – Things like ads are restricted to sandboxed iframes.
  • Allow inline CSS only – Bloated CSS files don’t delay the page.
  • No HTTP requests until fonts start downloading – Keeps fonts efficient.
  • Minimize style recalculations – All DOM reads happen up front to lay out the page.
  • Only run GPU-accelerated animations – The graphics processing unit handles visual animations (transform and opacity), reducing strain on the CPU.
  • Prioritize resource loading – The most important resources (above the fold) get downloaded first.
  • Load pages via prerendered content – Above-the-fold content may be available even before a user selects it, so it appears instantly on click.

This video explains how AMP speeds up webpages:

Concluding Thoughts

AMP is one way that you can speed up your webpages and offer a better experience to mobile users.

If you’re ready to amp up your webpages, follow the basic steps in this article and the AMP documentation to get started. You might even be able to attend one of Google’s AMP Roadshow workshops (see worldwide schedule here).

But my advice for most sites is: reconsider.

Unless it is critical to your business, please do not implement AMP.

The time you invest converting your webpages to a different format could be better spent creating good content that will serve all of your users.

If you’re interested in learning more about mobile optimization practices, then be sure to have a look at these mobile SEO services available to you!

I invite you to share this post. Please subscribe to our blog to get future new posts delivered for free to your inbox.

The post How to Implement AMP (If You Really Must): A Quick-Start Guide to Accelerated Mobile Pages appeared first on Bruce Clay, Inc..

]]>
https://www.bruceclay.com/blog/how-to-implement-amp/feed/ 30
The Competition-Busting SEO Strategy No One Is Talking About: Siloing Your Site https://www.bruceclay.com/blog/seo-siloing-for-competitive-advantage/ https://www.bruceclay.com/blog/seo-siloing-for-competitive-advantage/#comments Tue, 17 Jan 2017 12:00:28 +0000 http://www.bruceclay.com/blog/?p=41929 What if I told you that the way most websites are structured is completely wrong for search marketing?

And then what if I told you that there was a proven way to structure your website to:

• Boost its relevancy for search engines
• Drive more organic search traffic
• And gain a massive competitive advantage?

Let me tell you more …

It’s an SEO strategy that’s been around for a while, yet the majority of brands — even bigger brands — aren’t utilizing its power to improve their site’s rankings, relevance and usability.

You’ll gain a competitive advantage as I explain in this post:

• Why website architecture is the key to making your site relevant to the search engines.
• How the organization of your content positions you as a subject matter expert and creates a good user experience.
• Case studies that show the power of website architecture for SEO.

Read The Competition-Busting SEO Strategy No One Is Talking About.

The post The Competition-Busting SEO Strategy No One Is Talking About: Siloing Your Site appeared first on Bruce Clay, Inc..

]]>
What if I told you that the way most websites are structured is completely wrong for search marketing?

And then what if I told you that there was a proven way to structure your website to:

  • Boost its relevancy for search engines
  • Drive more organic search traffic
  • And gain a massive competitive advantage?

Let me tell you more …

seo siloing for competitive advantage

It’s an SEO strategy that’s been around for a while, yet the majority of brands — even bigger brands — aren’t utilizing its power to improve their site’s rankings, relevance and usability.

You’ll gain a competitive advantage as I explain in this post:

  • Why website architecture is the key to making your site relevant to the search engines.
  • How the organization of your content positions you as a subject matter expert and creates a good user experience.
  • Case studies that show the power of website architecture for SEO.

Website Architecture: The Wrong Way

It may or may not surprise you that the majority of website designers and developers are not skilled in search engine optimization.

Yet, these are the folks who are in charge of designing your website.

And the design of your site, from the code to the layout to the architecture, impacts your SEO strategy.

So why aren’t more brands building SEO into their website from the start? Simply put: no one is really talking about SEO during a website launch or redesign.

Most brands today design their sites like brochures, focusing on colors, look and feel and high-level business objectives.

Topic-focused content organization is overlooked. The problem with that is it doesn’t create subject matter expertise in the search engines’ eyes.

If you were a search engine, which of these would you rather show to users?

The garage without order or the garage with a clear focus?

disorganized garage

organized garage

Our job as website publishers is to help the search engines better understand what our business is about.

To do that, we have to hit the mark when it comes to look and feel and colors, but also content depth and organization. Google’s algorithms are getting smarter, but they still need a lot of help.

To better understand that a business is about X and has subject matter expertise about X, you need to create a cluster of organized content around X versus just mentioning it in a few words on pages randomly throughout your site.

And by the way, doing this will help you in a RankBrain world, where the machine learning AI system is working hard to match a search query to the best possible website.

Website Architecture for SEO

OK, now let’s talk about the right way to structure a site for SEO.

We invented the concept of siloing for SEO 17 years ago and have taught and written about siloing ever since.

This is something you should consider when you’re launching a new website, redesigning an old website or trying to implement a more powerful SEO strategy.

Organizing your website’s content, through directory structure and links, in a way that conveys subject matter expertise to search engines is an SEO methodology I devised years ago, and it’s called siloing.

Siloing is organizing a website’s content by heavily queried themes to make it clear what topics a site is about.

Put another way, siloing attempts to take a website with disjointed areas of focus and make sense of it by organizing the content.

Why is this important? A disorganized site doesn’t clearly convey what it is about. So a disorganized site can negatively impact your search rankings, and thus traffic.

When you organize your website content by topic or theme, search engines can see that you have sufficient content around Topic X, and that you are probably a relevant choice for a query on X.

Remember, one of Google’s key recommendations is to have a site with a clear structure and information-rich content.

Here’s an excerpt of Google’s recommendations from its Webmaster Guidelines:

  • Create a useful, information-rich site, and write pages that clearly and accurately describe your content.
  • Think about the words users would type to find your pages, and make sure that your site actually includes those words within it …
  • Design your site to have a clear conceptual page hierarchy.

Siloing: What You Need to Know

Siloing is a highly technical and strategic SEO process. I won’t go into the technical details here, although you can find them in this guide to SEO siloing.

Instead, I’m going to share with you the guiding rules of siloing, so that you can consider it for your own website.

Siloing starts with sufficient website content around the topics and ideas that are crucial to your business.

In SEO-speak, your site needs to have lots of content that uses your target keywords.

Let’s look at an example. Say your website sells power tools. A website with disorganized focus may cover all the types of power tools on one page.

A website that has siloed its content might instead organize the various types of power tools it sells like this:

example of siloing hierarchy with power tools

And by the way, each one of those pages represents a primary target search keyword and mentions the keywords common to their own themes.

This is not only a way to create a more streamlined user experience for your visitors, but also a way to tell Google that you are an expert on the various categories of power tools you sell.

That’s because there’s a clear hierarchical structure that makes it easy for search engine bots to crawl and understand the relationships and focus of topics.

In its simplest terms, here are the steps for how to do siloing for SEO:

Step 1 to siloing is knowing your keywords.
Step 2 is understanding how people search.
Step 3 is having ample content.
Step 4 is organizing topics and supporting topics hierarchically.
Step 5 is using internal links to connect related pages.

All of these pieces are critical to establishing your site as an expert.
The technical implementation instructions for SEO siloing are outlined here.

But now, let’s look at some results, shall we?

The Power of Siloing: 2 Case Studies

Siloing is a foundational component of our SEO services, and clients see powerful results.

Let’s look at a couple examples of real client results now.

Understand that the siloing strategy in these cases didn’t exist in a vacuum. There were other SEO-driven revisions that occurred along with the website architecture edits and internal linking of siloing. However, it is our experience that every SEO tactic is amplified once siloing is in place.

Case Study No. 1: Manufacturer of Custom, Specialty Home Construction Parts

This client came to us due to a link penalty from Penguin. But they also wanted us to migrate their site from a .net domain to their Unix-based .com, and from a custom CMS to WordPress. We found this to be a perfect opportunity to silo their content.

For this engagement, we did the following:

  • Link pruning
  • Physical and virtual siloing
  • Reorganized navigation
  • Internal contextual linking to related pages
  • Breadcrumb linking
  • Targeted anchor text
  • On-page title tag and meta description optimization

Here are the results:

  • 107 percent increase year-over-year (YoY) organic traffic, from around 9,000 visits per month to around 20,000 visits per month
  • 30,000 additional organic visits YoY in Q4
  • 90 percent increase in tracked online revenue YoY
  • 88 percent increase in number of transactions YoY
Q4 2015 vs Q4 2016 YoY organic search traffic
Siloing supported a 107% lift in organic search traffic from Q4 2015 to Q4 2016. Click to enlarge.

 

Case Study No. 2: Insurance Plans and Easy Enrollment Website

This client had a new domain with very little content. They needed to identify the top keywords to target and the supporting content that would help them reinforce their primary keywords. Site architecture and internal linking structure would need to be established.

Here’s what we did:

  • Physical and virtual siloing
  • Reorganized navigation
  • Internal contextual linking to related pages
  • Breadcrumb linking
  • Targeted anchor text
  • On-page title tag and meta description optimization

And here are the results we saw:

  • 327 percent increase YoY in Google organic traffic, from around 2,000 visits per month during Q4 2015 to around 10,000 visits per month during Q4 2016
  • 19,000 additional Google organic visits YoY in Q4
Q4 2015 vs Q4 2016 YoY organic Google search traffic
Siloing supported a 327% lift in organic Google traffic from Q4 2015 to Q4 2016. Click to enlarge.

Start Siloing for a Competitive Advantage

Siloing can be the most powerful tool in your SEO arsenal, and yet many brands aren’t even aware of it. Talk about a competitive advantage to siloing adopters.

If your website needs a boost in relevancy and a lift in organic search traffic, siloing your web content and organizing your link structure is just the thing to do that.

Tell me your own siloing experience in the comments.

Would you want to discuss more about how you can be helped? Let’s talk.


This article just scratches the surface of the most powerful SEO tactic, siloing. Send your technical search marketing team to SEO training with me to learn how to do it for your business.

The post The Competition-Busting SEO Strategy No One Is Talking About: Siloing Your Site appeared first on Bruce Clay, Inc..

]]>
https://www.bruceclay.com/blog/seo-siloing-for-competitive-advantage/feed/ 24
What is a Progressive Web App & Who Should Be Using It? https://www.bruceclay.com/blog/what-is-a-progressive-web-app-pwa/ https://www.bruceclay.com/blog/what-is-a-progressive-web-app-pwa/#comments Thu, 01 Dec 2016 18:32:11 +0000 http://www.bruceclay.com/blog/?p=41725 According to Google, progressive web apps are the next big thing for "delivering amazing user experiences on the web." In the same vein as AMP (accelerated mobile pages), PWAs are causing digital marketers to rethink the way they can design and deliver their sites in a mobile-first world. Website owners and designers need to be paying attention. So just what is a progressive web app? It's an all-in-one solution for web developers to create a single version website/app that can be delivered across all devices and works like an app but without the hassle of distribution through an app store.

Are PWAs right for your site? Read What is a Progressive Web App and Who Should Be Using It?

The post What is a Progressive Web App & Who Should Be Using It? appeared first on Bruce Clay, Inc..

]]>
According to Google, progressive web apps are the next big thing for “delivering amazing user experiences on the web.” In the same vein as AMP (accelerated mobile pages), PWAs are causing digital marketers to rethink the way they can design and deliver their sites in a mobile-first world. Website owners and designers need to be paying attention. So just what is a progressive web app?

what-is-a-progressive-web-app-pwa

What is a Progressive Web App?

It’s an all-in-one solution for web developers to create a single version website/app that can be delivered across all devices and works like an app but without the hassle of distribution through an app store.

A progressive web app, or PWA, combines the best of a website and the best of a native application. It’s a type of hybrid app. If a user comes to your PWA-run site, then they’ll get the mobile version of your site, but faster.

With a traditional hybrid app, like the Amazon app, the user’s interactions with it are built into the phone as an app, but the data collected is from the web. Here’s where a PWA is different. A PWA launches a browser to do the same thing. With the introduction of service workers (the scripts running in the background of your browser) and other technological advancements, browsers are more sophisticated than ever. They can do things on your phone that previously could only be done through a native app. This means you don’t have to publish the app in the app store. The barrier to entry of downloading an app is no longer an issue for your users.

As a developer, you no longer have to program different apps for different devices, nor deal with special screen sizes. You can invest your time and resources into designing a PWA. If you have to make a mobile website, you might as well just use a PWA. It’s well worth it.

Talking PWAs with Cindy Krum

My longtime friend Cindy Krum, the CEO and founder of MobileMoxie, is a PWA guru. I wanted to get her take on how far in the future the mass adoption of PWAs looks to be. Here’s what she had to say:

Lots of big companies are already testing PWA code and integrations on their sites. Lyft, Mic, Washington Post, Flipboard, The Weather Channel and more have already launched beta PWA sites for testing. Google has already published some PWA development guidelines for SEO, but I think the update may depend on how aggressively Google and other influential companies promote PWAs.

Google has also been hinting at cross-over between AMP and PWAs, using AMP to make PWA’s work in Safari, so there may be some new iteration of AMP that makes AMP enabled content available in PWA format. The PWA news viewer already behaves a lot like a PWA. My guess is that in the next year, we will see some of the more agile and cutting edge companies take their PWAs out of beta, and making them their main sites, with or without the influence of AMP.

It will be interesting to watch more widespread adoption of PWAs unfold. As with anything new, of course, it can sometimes be hard to get clients to adopt bleeding edge technology. Here’s how Cindy is getting her clients on board.

Cindy: The main recommendation is to try it out. You can add a service worker and an app manifest to any existing website. It is not enough to get the full benefits of a PWA, but it is enough to learn how easy or difficult the integration will be for your company. In our case, we developed an app manifest in five minutes, and a service worker in 90 minutes.

Making web-apps indexable tends to be the harder part of the equation, but that is true with or without the PWA elements. Web apps are hard to index because developers don’t always include URLs for state-changes in the web app.

For the immediate future, PWAs are something to be aware of, and if you’re able to, start working into your testing and planning cycles. There are no guarantees it’ll be the go-forward structure and remain supported by Google forever, but you don’t want to be left behind. There are practical upsides to PWAs that are worth considering regardless of how long it takes this to be a mainstream approach.

The post What is a Progressive Web App & Who Should Be Using It? appeared first on Bruce Clay, Inc..

]]>
https://www.bruceclay.com/blog/what-is-a-progressive-web-app-pwa/feed/ 21
All-In-One Mobile SEO & Design Checklist https://www.bruceclay.com/blog/mobile-seo-checklist/ https://www.bruceclay.com/blog/mobile-seo-checklist/#comments Wed, 23 Nov 2016 21:15:13 +0000 http://www.bruceclay.com/blog/?p=34200 The mobile user experience really matters to Google. Proof:

• As of 2015, more searches are performed on mobile than desktop, meaning mobile is the main device used worldwide for the majority of online browsing time. Google has been strongly emphasizing the mobile-first perspective ever since.

• In April 2015, Google made a pre-announced update to the algorithm that ranks mobile search results. A website's mobile friendliness officially was dubbed a confirmed ranking signal for mobile search rankings.

• In late 2015, the Google Quality Rating Guidelines were updated with screenshots from the perspective of mobile devices.

• In November 2016, Google pre-announced an update to its search index, moving to a mobile-first index. This means that Google uses your site’s mobile version in ranking calculations.

• And this coming January 2017, sites that show an intrusive interstitial in the transition from a mobile search result to the content clicked will not rank as highly in Google results.

Google is optimizing its users' mobile search experience and webmasters must be in lock step.

Consider this checklist your mobile SEO go-to resource.

Read The All-In-One Mobile SEO & Design Checklist.

The post All-In-One Mobile SEO & Design Checklist appeared first on Bruce Clay, Inc..

]]>
The mobile user experience really matters to Google. Proof:

  • As of 2015, more searches are performed on mobile than desktop. Mobile is the main device used worldwide for the majority of online browsing time. Google has been strongly emphasizing the mobile-first perspective ever since.
  • In April 2015, Google made a pre-announced update to the algorithm that ranks mobile search results. A website’s mobile friendliness officially was dubbed a confirmed ranking signal for mobile search rankings.
  • In late 2015, the Google Quality Rating Guidelines were updated with screenshots from the perspective of mobile devices.
  • In November 2016, Google pre-announced an update to its search index, moving to a mobile-first index. This means that Google uses your site’s mobile version in ranking calculations.
  • And this coming January 2017, sites that show an intrusive interstitial in the transition from a mobile search result to the content clicked will not rank as highly in Google results.

Google is optimizing its users’ mobile search experience and webmasters must be in lock step.

Consider this checklist your mobile SEO go-to resource.

mobile-seo-design-checklist

If you’re already on board and optimizing for mobile, jump to the section that best suits your needs. If you’re new to the game, start from the beginning and use this checklist as a start-to-finish guide.

Table of Contents

  1. Choose a Mobile Platform
  2. Optimize Mobile Sites for Crawling and Indexing
  3. Optimize for Page Load Speed
  4. Optimize Design for the Mobile UX
  5. Implement Analytics to Track Mobile Conversion Goals
  6. Optimize Your Content for the Mobile Experience
  7. Test Often and Optimize User Experience

1. Choose a Mobile Platform

There are primarily four varieties of mobile page strategies: responsive design, dynamic serving, separate mobile page and Accelerated Mobile Pages (AMP).

For both mobile and desktop searchers, Google is looking to rank web pages that show high relevance, trust and great user experience.

Remember, to rank for a target query Google needs to deem your web page the most relevant and “least imperfect” option for that query.

While your desktop-optimized web pages may be incredibly relevant, if your code does not allow for your content to fit the smartphone experience, Google recognizes this as a poor user experience. A poor user experience means your website gets further from “least imperfect” and your rank drops further down the SERP.

Since ranking high in mobile search results needs to be a priority, building a dynamic or separate mobile platform for your content needs to be a priority as well.

You have options for how to display your content for the mobile user agent and visitor: responsive design; dynamic serving; a separate mobile site; and Accelerated Mobile Pages (AMP).

The solution — or combination of solutions — that’s right for you will depend on many factors including development resources, conversion goals, mobile keyword research versus desktop keyword research, and persona behavior.

To figure out which mobile optimization strategy is best for you, we recommend reading:

2. Optimize for Crawling and Indexing

When optimizing your mobile platform, don’t forget about your technical SEO best practices.

If you skip the technical SEO on your mobile site, search spiders may have a hard time discerning mobile-specific content from desktop-specific content, which can create a bad user experience in both the mobile and the desktop experience.

Remember the basics: search engine spiders need to be able to discover, crawl and index your web pages in order for them to rank.

In other words, if a search spider cannot find and access your site pages, your site cannot rank.

To help search bots crawl, index and differentiate (if they are different) your mobile site pages, make sure you:

  • Create a mobile XML sitemap with a <mobile:mobile/> declaration after each URL listing.
  • Submit your mobile site and your mobile XML sitemap to Google Search Console.
  • Never design your mobile site using pop-up windows or lightboxes that cannot be discovered through a sitemap crawl.
  • Make sure to implement rel=canonical, rel=alternate media and Vary: User-Agent HTTP Header tags as needed to tell Google when it should deliver a desktop version of your web page and when it should deliver a mobile version.
  • Make sure to allow the Googlebot and Google Smartphone user agents to access your site.

3. Optimize for Page Load Speed

This is very important to both the user and the search spider!

According to the PageSpeed Insights portion of the Google Developers help site, Google prefers above-the-fold content to render in under a second on a mobile network.

Anything longer than a second, they say, can result in a poor user experience. The idea is to get users interacting with the page as soon as possible.

On the user experience end: According to Google and Strangeloop, 85% of mobile users expect sites to load at least as fast as desktop sites. So improving mobile site speed needs to be a goal.

To help get your mobile sites loading faster make sure you:

  • Focus on mobile image optimization to reduce load times.
  • Follow the page speed optimization recommendations outlined in the Mobile Analysis portion of the Google Developers PageSpeed Insights resource.
  • Use front-end optimization strategies, such as mobile-optimized caching, to address mobile performance issues and get mobile pages loading faster.
  • Regularly check your page speed using the Google PageSpeed Insights analyzer.

4. Optimize Design for the Mobile UX

In the context of mobile optimization, design describes the elements of the web page the end-user sees, and user experience (or UX) describes the experience that design creates for the user, how they interact with elements on the page, how the elements on the page make them feel, whether the site is easy to use or frustrating, etc.

Google wants happy, satisfied searchers, so user experience is a huge priority for the search engine. Create a bad above-the-fold user experience and expect your site to rank somewhere far from Page 1.

To really send home the importance of why mobile UX matters, consider this comment by a Google representative:

“According to our studies, 61% of users are unlikely to return to a mobile site that they had trouble accessing from their phone. That includes sites that use fonts which are illegible on mobile, or sites where users have to zoom in or pan around excessively.”

Straight from Google. More than half of your inbound traffic is unlikely to return to your mobile site if they are met with a poor user experience. This means serious loss in conversion, as well as loss of mobile rank.

To get your web pages designed and optimized for UX, we recommend starting with these considerations:

Read Google’s 25 Principles of Mobile Site Design to learn what Google considers “mobile site design best practices.”

Consider how your buttons look, feel and function:

  • Are you using Click-to-Call buttons?
  • Is your logo a button that makes it easy to get back to your home page?
  • Are your buttons finger friendly?
  • Have you placed your most important CTA button above the mobile fold?

Consider the UX of your mobile site search:

  • Is the site search visible above the fold in your mobile design?
  • Can you add filter elements to make searching your site on a mobile device easier?
  • Did you make sure it’s impossible for search filters to return zero results?
REI-mobile-search-filtering-2
The REI mobile site makes it easy to filter search results.

Is your mobile experience optimized for task completion?

  • Can your forms be simplified?
  • Can login requirements be simplified? Can users purchase as a guest?
  • Are your menus working for the user? Can you simplify them? Would your pulldown menu work better as toggle menu?
  • Would a third-party payment service make paying with a mobile device easier for your end user?
  • Do any of your forms or other windows open in a pop-up window or lightbox? If yes, fix this. Pop-up windows and lightboxes are bad for UX and SEO.
  • Does your user have to pinch, scroll side to side or zoom out to see your web pages? If yes, fix this. The Google representative quoted above specifically referenced a user having to “zoom in or pan around excessively” as an example of bad user experience. Your mobile platform should deliver web content that is sized to fit mobile devices.

5. Implement Analytics to Track Mobile Conversion Goals

It’s not a new concept. How can you understand where your web pages are succeeding and failing if you’re not tracking activity with analytics?

Don’t overlook this important step on your mobile platform to show ROI in exchange for buy-in and budget.

Make sure to:

  • Implement analytics across your mobile site.
  • Develop intelligent mobile- and conversion-centric metrics that give insight into how your personas are interacting with your web pages. Remember to look at micro-conversions and device-specific bounce rate.
  • When possible, define your mobile goals early then build mobile web pages with a task flow that makes conversion easier for the user.
  • Remember desktop rank and mobile rank can differ greatly. Page one in mobile SERPs tends to include significantly fewer organic results than desktop SERPs, and the keywords your personas are using to search for you in the desktop experience are not necessarily the words they’re using in mobile. Make sure your mobile stats are coming from true analysis of mobile SERP activity.
  • Make reporting easier by setting up a custom mobile campaign dashboard.
  • Monitor mobile site speed in Google Analytics by navigating to Content > Site Speed.

6. Optimize Your Content for the Mobile Experience

I won’t say “content is king” one more time, but I will say content really matters. Content is the means by which your users get to know you, your products and your services. Thoughtful content is truly key to conversion. Plus, without strategic content you can’t optimize your web pages for keywords, which means your web pages can’t rank in the desktop or mobile experience.

When approaching content creation with an eye toward mobile optimization think:

  • Is your content resonating with mobile users? Don’t set it and forget it. Instead, keep on adding and testing content types and measuring the corresponding mobile tracking variables.
  • All mobile content is not created equally. What works and reads well on one device type might not work at all on another (think smartphone experience versus tablet experience).
  • Is your content easily read without excessive scrolling or zooming? Are your digital assets – images, videos, navigation, etc. – easy to see without scrolling or zooming?
  • Are you calls to action front and center? Can you place a call to action above the fold?
REI-Find-Local-Buttons-Mobile-UX
Here, the REI mobile site uses a “Find in store” button to optimize for local UX.
  • Can your content be optimized for local? For instance, can you include the stock of product available nearby like REI does?
  • 62% of keywords have different ranks between desktop and mobile. Have you done mobile-specific keyword research? Are your mobile users using search phrases that are very different from the phrases your desktop searchers are using? If yes, consider using dynamic serving to deliver mobile-optimized content to your mobile users.
  • Are your meta tags optimized? When appropriate or necessary, are they optimized specifically for mobile?
  • Social content is mobile content. Are you integrating your search, social, video and mobile campaigns?

7. Test Often and Optimize User Experience

So you picked a mobile platform, designed your mobile pages with user experience in mind, and created mobile-optimized content. Great! Now… is it working?

Does it look like you intended it to look? Is Google seeing it how you think Google should be seeing it? Are all the usability features you built into your web pages actually working for your users?

Don’t set it and forget it. Mobile optimization is all about testing and retesting over and over again.

While testing is the final step in our checklist, remember that testing isn’t like putting a fork in it and calling it done. As an optimizer your work is never done, instead you should consider it “done for now until it’s time to test again.”

When testing and retesting your mobile web efforts, make sure to consider these factors:

  • Have you tested on a range of devices using an emulator, or a series of actual devices?
  • With each website release, the configuration needs to be checked.
  • Are you testing your UX using real people that represent your personas? Have your friends and family test your site.
  • Have you recently run your mobile-optimized website through the Google PageSpeed Insights tool to glean insights about user experience and site speed? (Don’t miss the User Experience section of the SiteSpeed Insights tool!)
  • Google will add snippets to mobile SERPs warning searchers when the website they see listed may yield a sub-optimal user experience. Warnings include “Uses Flash” and “May not work on your device.” Have you checked to see whether your site is being amended with Google warnings in mobile SERPs?

Anything Worth Doing Is Worth Doing Right

Hunter S. Thompson wasn’t thinking of mobile website optimization when he said “anything worth doing is worth doing right.”

Yet there’s no better quote to emphasize not only the importance of mobile SEO, but more so the importance of effective mobile SEO; of not just optimizing for mobile, but optimizing the right way for mobile.

Times are changing and the way that people use and access the internet is changing, so we as marketers need to be changing the way we think, analyze, create, package and deliver content.

How are you optimizing your web pages to make sure they are mobile ready?

For more information on how to optimize your pages for speed and mobile SEO, we recommend these resources:


Let us help you drive and track traffic to your website with a mobile-first SEO strategy. BCI’s services are tailor-made to match your business goals and audience. Let’s talk more about growing revenue through digital marketing.


This post was originally published by Chelsea Adams on Oct. 29, 2014, and updated on Nov. 23, 2016.

The post All-In-One Mobile SEO & Design Checklist appeared first on Bruce Clay, Inc..

]]>
https://www.bruceclay.com/blog/mobile-seo-checklist/feed/ 81
Infinite Scroll & SEO: Do They Mix? https://www.bruceclay.com/blog/infinite-scrolling-seo-risks/ https://www.bruceclay.com/blog/infinite-scrolling-seo-risks/#comments Thu, 06 Aug 2015 21:00:24 +0000 http://www.bruceclay.com/blog/?p=37461 Infinite scrolling is the process of loading content when the user brings it into view, i.e. when the user scrolls or clicks. Infinite scrolling is great for:

• User experience, as it can lead users to content they might not have otherwise discovered
• Time on page, as users theoretically read longer
• Reducing above-the-fold content load time

However, infinite scroll carries risk for content indexing and ranking, and may even decrease user interaction on the site.

Read on to discover what infinite scrolling is, the potential SEO hazard it poses, the problems Etsy encountered when it added infinite scroll, and why our recommendation is to proceed with caution.

The post Infinite Scroll & SEO: Do They Mix? appeared first on Bruce Clay, Inc..

]]>
At a recent SEO training, I met a webmaster who excitedly told me that he was going to soon be implementing infinite scroll on his website. LATimes.com’s indefinitely scrolling articles immediately popped into my head and I told him that was awesome … and then I wondered why we don’t use infinite scroll on our own blog or site. So I sought out our SEO Manager Robert Ramirez’s search engine optimization advice when I returned back to the office.

He agreed that there are benefits to infinite scrolling, noting that it may improve:

  • User experience, as it can lead users to content they might not have otherwise discovered
  • Time on page, as users theoretically read longer
  • Load time of above-the-fold content

However, infinite scroll carries risk for content indexing and ranking, and may even decrease user interaction on the site.

Infinite Scroll Stop Sign

Read on to discover what infinite scrolling is, the potential SEO hazard it poses, the problems Etsy encountered when it added infinite scroll, and why our recommendation is to proceed with caution.

What Is Infinite Scroll?

First, a definition. Infinite scrolling is the process of loading content when the user brings it into view — an image, a video, or content won’t load until it needs to load, i.e. when the user scrolls or clicks.

Note: Technically, infinite scrolling is not actually infinite — it’s seemingly infinite. Take Twitter for example — spend a day or two continually scrolling, and you’d eventually reach the end of tweets.

Infinite Scroll in the Wild

Social media sites such as Twitter, Facebook, Google+ and Pinterest all use a variation of infinite scrolling. Infinite scrolling is also used on media sites such as LATimes.com and ESPN.com — when one article ends the user literally scrolls right onto another one. Infinite scrolling is also used on product pages for some ecommerce sites.

How Infinite Scroll Can Hurt SEO

Any time you implement JavaScript-enabled features, you run the risk of making it harder for search engines, like Google, Yahoo and Bing, to crawl your site’s content.

Last year, Google Webmaster Trends Analyst John Mueller summed up the problem on the Google Webmaster Central Blog:

“With infinite scroll, crawlers cannot always emulate manual user behavior—like scrolling or clicking a button to load more items—so they don’t always access all individual items in the feed or gallery. If crawlers can’t access your content, it’s unlikely to surface in search results.”

In order to be crawled, each article or page of products must have its own natural crawl path, i.e. an individual URL that is linked to within the site.

For those who are sold on infinite scrolling, the ultimate search engine optimization advice comes from Mueller’s must-read “Infinite Scroll Search-friendly Recommendations.” Here he outlines the steps for how to implement infinite scroll while still having content that stands to be indexed.

infinite-scrolling-seo-risk

Infinite Scroll Is Good for User Experience … But Not Always

In theory, infinite scroll will keep your users scrolling through content on your pages, but sometimes the infinite scrolling backfires. Because people aren’t necessarily conditioned to scroll rather than click, they might find the experience awkward and/or overwhelming. Consider this takeaway from a recent Nielsen study:

“There are psychological consequences to endless scrolling that can hurt the user experience as well. For task-driven activities, infinite scrolling can feel like drowning in an information abyss with no end in sight. People who need specific types of information expect content to be grouped and layered according to relevance, by pages. Web users don’t mind clicking links (e.g., a link to the next page) if each click is meaningful and leads them closer to the desired goal.”

Etsy: A Cautionary Tale

The popular handmade and vintage item marketplace site Etsy implemented infinite scroll in 2012 and the results were less than positive. Users clicked and favorited fewer items. They also bought fewer items from search. Etsy users didn’t like the change, and, accordingly, Etsy removed infinite scroll from the site. Etsy’s formal principal engineer Dan McKinley held that infinite scroll can have a positive impact, but that site owners should work to understand the people using their websites before making such a big change.

Bottom Line: Proceed with Caution

While we acknowledge that infinite scroll can provide a fresh user experience, we don’t use infinite scrolling on our own website because we don’t think it’s worth the potential SEO risk. If you or your client are interested in implementing infinite scroll, we’d advise you to make sure your pages are indexable and point you toward Mueller’s clear-cut guidelines. Pay close attention to your KPIs after implementation, perhaps survey visitors about website satisfaction, and always track the effect of major design and user experience changes.

The post Infinite Scroll & SEO: Do They Mix? appeared first on Bruce Clay, Inc..

]]>
https://www.bruceclay.com/blog/infinite-scrolling-seo-risks/feed/ 3
How to Design a 404 Error Page that Saves a Sale https://www.bruceclay.com/blog/404-error-page-design/ https://www.bruceclay.com/blog/404-error-page-design/#comments Tue, 06 Jan 2015 17:01:20 +0000 http://www.bruceclay.com/blog/?p=34923 Whatever baby wants, baby gets. Unless baby mistypes a URL -- then baby gets a 404 error page.

So, what do we do? Turn adversity into opportunity, of course!

I like to think of the 404 error page as your damage control page. Your customer just tried to go to a page on your website, and now they are faced with disappointment. The 404 error page greets them immediately at their peak moment of disappointment – what a perfect opportunity for you to tell them you could care less with a machine-generated white-screen error message. Said no one ever. This is your time to deflect those bad feelings and offer a solution that inspires positive feelings!

Follow these five steps to create a custom 404 error page that makes your customer feel like you’re there for them, even when your content can't be.

Read How to Design a 404 Error Page that Saves a Sale.

The post How to Design a 404 Error Page that Saves a Sale appeared first on Bruce Clay, Inc..

]]>
Whatever baby wants, baby gets.

Unless baby mistypes a URL or tries to navigate to a bookmarked page that was moved or retired in 2012. In that case — regardless of what she wants — baby gets a 404 error page.

When baby gets a 404 error page and not what she wants, there’s a good chance she’s going to be confused, annoyed, or frustrated. Nobody likes it when baby doesn’t get what she wants…

So, what do we do?

Turn adversity into opportunity, of course!

I like to think of the 404 error page as your damage control page. Your customer just tried to go to a page on your website, and now they are faced with disappointment. The 404 error page greets them immediately at their peak moment of disappointment – what a perfect opportunity for you to tell them you couldn’t care less with a machine-generated white-screen error message. Said no one ever. This is your time to deflect those bad feelings and offer a solution that inspires positive feelings!

Follow these five steps to get on your way to creating custom 404 error pages that make your customer feel like you’re there for them, even when your content can’t be.

Five 404 Error Page Design Tips that Keep Visitors On-Site

1. Keep It Branded and On-Brand

Keeping your 404 page branded means your 404 error page should make it clear that the visitor is still on your website. This can mean keeping your custom 404 error page within the template of your website – complete with standard top and footer navigation – or, simply making sure to include a logo if you build a custom 404 page outside your standard template.

And oh, what a difference a logo can make. Compare the three examples below: a standard machine-generated 404 page, a custom page outside the website template, and a 404 message built inside the standard website template.

branded-404-error-pages
A standard 404 error page, a custom page outside the website template, and a 404 built inside the website template.

The second two options approach the 404 error page in very different ways, but both make it clear which website you’re on. In the first one, there’s no logo and no clues; who knows? Which experience do you want your users to see?

Keeping the 404 error page on-brand means every word and image you use accurately represents the personality and tone of your brand. If you are a serious brand like The New York Times, keep your messaging professional and straightforward. If your brand voice is conversational and appreciates a good laugh here and there, your 404 page can be a good time to toss in an ice-breaker joke. Whether or not you apologize or say thank you also falls into your brand voice guidelines. Only you know how much formality and silliness your brand voice allows. Figure it out, and follow it to a T. Always.

keep-your-404-on-brand
Make your 404 page on-brand. Is your brand serious like the example on the left, or silly like the brand on the right?

2. Acknowledge What Happened

Your visitor was looking for a page, and what they’re seeing isn’t that page. Help them understand what happened by telling them what happened. You can do it with your own spin, but do tell them there was an error and that – for one reason or another – the page they are looking for cannot be found. You can choose whether to mention the “one reason or another” like Adidas does in the center example below (“maybe it’s moved, or maybe the URL is incorrect”).

404-error-pages-tell-them-what-happened
Each of these 404 error page examples tells it like it is. Help your visitor understand where they are by telling them their content cannot be found.

3. Thwart the Back Button by Showing Your Personality

When a customer is dished up a 404 page they are going to be surprised; they were expecting one thing and they are seeing another. It’s inevitable. Whether this is an annoyed surprised or a pleased surprised is up to you (and your web designer). 404 error pages are rarely seen, so why not use your brand personality to make this rare occurrence memorable in a good way?

Consider:

  • Using an on-brand image to visually engage the visitor. With the right image, you may even be able to turn your visitor’s inconvenient “this is annoying” moment into a fun Easter Egg that makes him/her like you even more.
on-brand-images-2
Your 404 error page is a great time to show your personality.

 

  • Use your headlines and body copy to make the exchange feel more human. It’s often much easier to accept an apology from a fellow human than it is to accept an access denied notice from a robot.

Use-human-language

  • You know that awkward moment at dinner when someone just needs to break the tension with a joke? This tactic works wonders on 404 pages as well. Nobody likes being disappointed; including an on-brand joke on your 404 page is a great way to break the “something went wrong and you didn’t get what you want” tension.

404-error-page-joke-examples

4. Do the Best You Can to Serve the Customer

“Focus on the user and all else will follow.” Wise words from Google with deep-seated truth. Your visitor lives in a cyber world where they are surrounded by endless purchasing options; if they try to buy some shoes on your website and your website offers a “Page Not Found” dead-end, then they have no choice but to use the back button and head toward someone else’s online shoe store to make their purchase. Unless you can use your 404 damage control page to offer resources that help them find what they need, or discover new options they never knew they needed…!

Think about the needs of your personas; what are their needs?

  • Make an educated guess about what they were trying to accomplish when they landed on this error page and offer some links that help them accomplish that task. This can save sales, turn disappointment into satisfaction, and help keep bounce rate low(er).

404-error-pages-that-serve-users

  • Add a search box and a link to your sitemap to make it easier for them to find what they need on their own.

404-error-pages-search-option

  • Make it easy for them to contact you if they need help.

404-error-pages-contact-us

5.  Serve Yo’self! Ask for What You Need and Funnel Conversion

Your 404 error page is your damage control page, but it is also your opportunity page. Remember, we’re striving to turn adversity into opportunity, here! Think of this page as an opportunity for you to keep the ball rolling… and why not tilt the ramp so the ball rolls strategically toward one of your conversion funnels? Always keep the user first, but there’s no reason to assume that customer happiness and conversion completion are mutually exclusive.

For instance, if one of your conversions is lead generation, why not offer a link to your free demo page, like Hubspot does? (See example below.)

Hubspot-404
In this example, Hubspot does a great job strategically directing their 404 traffic toward three conversion goals.

The key is to tell them what you want them to do. If you want them to shop women’s clothing, give them a link that says shop the women’s section – don’t send them to the home page where they might get lost or distracted. Notice in the Land’s End example, below, that they give you links to shop women’s, men’s and kid’s, or home goods, but they don’t mention heading to the home page once? Their conversion goal is clearly to increase sales in their top four categories.

landsend-404-crop
Land’s End uses their 404 error page to direct traffic toward four strategic shopping categories.

The 404 error page is also a good time for you to ask them to help you solve the problem. Error pages are delivered when something goes wrong. Sometimes it is user error (a mistyped URL, for instance), but other times is a hidden website error (a moved, removed or broken page). By landing on your 404 page it’s likely your visitor just discovered an error on your website; use this page as an opportunity to ask them to send you an error report. Make sure to include a link that makes it easy for them to take action.

404-page-report-errors
These three 404 error page examples ask visitors to report errors.

On the flip side, make sure you don’t tell them to do something you don’t want them to do – like “return at a later time.” You want them to stay put.

404 Errors are Inevitable: Be Proactive!

The world is an imperfect place. Screws fall out all the time, URLs are mistyped and – as much as you try to prevent it – web pages get moved, removed, or even broken. Since error pages are inevitable, I vote we take the proactive route and create the best darn damage control pages possible.

Since every brand is different, there will never be a one-size-fits all model for how a custom 404 error page should look. Instead, marketers should use the five steps outlined in this post as a guide to create a custom 404 error page experience that represents their brand, serves their customers, and supports their conversion goals.

The post How to Design a 404 Error Page that Saves a Sale appeared first on Bruce Clay, Inc..

]]>
https://www.bruceclay.com/blog/404-error-page-design/feed/ 13
SMX Boot Camp: SEO Friendly Web Design (#smx #14A) https://www.bruceclay.com/blog/seo-friendly-web-design/ https://www.bruceclay.com/blog/seo-friendly-web-design/#comments Tue, 01 Oct 2013 21:59:02 +0000 http://www.bruceclay.com/blog/?p=28103 Ah. This is a good one. In this session Shari Thurow (@sharithurow, Founder and SEO Director at Omni Marketing Interactive) will be showing us how to create search engine friendly sites that can be read and indexed by search spiders, but are also equally appealing to human visitors. A great resource for those dealing with, ahem, I mean… highly respecting the feedback of web designers who aren't convinced you can have SEO friendly web design without compromising user experience.

Yay for SEO and UX working together, and yay for educating entire teams on the value of both! Let’s go.

Read more of SMX Boot Camp: SEO Friendly Web Design.

The post SMX Boot Camp: SEO Friendly Web Design (#smx #14A) appeared first on Bruce Clay, Inc..

]]>
Ah. This is a good one. In this session Shari Thurow (@sharithurow, Founder and SEO Director at Omni Marketing Interactive) will be showing us how to create search engine friendly sites that can be read and indexed by search spiders, but are also equally appealing to human visitors. A great resource for those dealing with, ahem, I mean… highly respecting the feedback of web designers who aren’t convinced you can have SEO friendly web design without compromising user experience.

SMX East 2013 SponsorYay for SEO and UX working together, and yay for educating entire teams on the value of both! Let’s go.

About Shari Thurow – She’s the (wo)man when it comes to SE friendly design. Been doing this since 1995. She is a designer and a developer; good technical resource.  Web usability and UX professional since 2002.

There’s “no other field where there is more swearing than website usability” says Shari. (CA: I love this and agree.)

All of the recommendations is this presentation are based on data!

Findability has three areas:

Browsing
Searching
Asking social network

When you are UX testing a website you’re not testing the person, you’re testing the website.

We’re playing a game now.  It’s called “Is this website SE friendly or not. “

Shari says our brains (male and female) are wired to think three things:
Can I eat it? Will it eat me? Can I have sex with it? (So if you are a restaurant, you better make sure your website shows food!)

The Mayo Clinic is a site that does extraordinarily well in regards to SE friendly web design.


Things you need to know:

1) Designing a website for people who use search engines

2) SE Friendly design is NOT designing just for obtaining SERP ranking. Don’t want to focus on technology-centered design.

3) Grant access to desirable content

4) Limit access to undesirable content (IE: Duplicate content)

5) How you place words and graphic images on your website – how you physically arrange things – tells SEs what you think is important. If it’s important SEs assume you’ll put it higher up on your page.

Google is not going to like you; Google is not going to subscribe to your newsletter; Google is not going to add a pair of ski Googles to cart. Google and Yahoo and Bing are trying to figure out what searchers want and give it to them; so YOU have to figure out what they (the humans) want and give it to them, too.

 

5 Rules of web design: Make It….

1)   Easy to read

(legible, scannable, understandable, makes sense in search listing. Can people read it?? Can people read it ON A SMARTPHONE?)

Content needs to be easy to read, and easier to scan.

 TEST! Is this easy to read?
WEB DESIGN IMAGE

No!

Be careful about using Grey. A lot of people don’t recognize grey as clickable.

Don’t format your clickable and nonclickable text to look alike. This is a bad user experience and for SEs this looks like spam.

 

2)  Easy to navigate

(People scan before they read;  can humans understand your content as well as technology?) All clickable text should look clickable, all not clickable text should look NOT clickable.

Easy to navigate answers the questions: Where am I? Where can I go? How Can I get there?

Make it easy for people to decide which link to click on. 

web design  - clear links

Be careful about putting navigation in the “Banner blindness” zone

Apple Germany and Apple UK = really good examples of navigations that rock.

TEST: Which site navigation is easier to read?

Web design - Navigation readable

 

Types of site navigation schemes (from most to least SE friendly)

Text links
Navigation buttons
Image maps
Menus (form and DHTML)
Flash

Expanding and collapsing navigations (The ones that show the + and – sign) are the WORST for Search Engines).

Flyout menus have the most errors; dropdown menus tend to have the least amount of errors.

MegaMenus tend to lose up to 20% revenue! If you NEED to do a MegaMenu, the FoodNetwork has a good example that is SE friendly and user friendly.

If you give people too FEW choices, it ticks off users. But if you give them too MANY choices, they are also ticked off because they don’t know where to begin. You want something in between; that “in between” you will feel out with testing.

[Having trouble condensing your MegaMenu? Hire an information architect; that’s what they do. It’s called a “card sort test” and there’s two types; open and closed. You need both of them.]

If a site navigation scheme is NOT search engine friendly should you not use it? NO! USER EXPERIENCE FIRST! If your users like to use the navigation, use it, but make sure to include text links as well.

Always try to have some form of text navigation on your website.  A fat footer can be really helpful WHEN DONE RIGHT.

Really big websites need to have a site index as opposed to a site map.

 

3)  Easy to find.

Before people can interact with your website they have to find your website.

If you don’t want people to notice something, put it in the lower right hand corner of the screen. People are less likely to look down there.

After arriving people don’t mind clicking through pages as long as they feel like they are making progress.

 

4)  Consistent in layout, design and labeling

This is how SEs are able to determine the “aboutness” of your website. Layout/design/labeling communicates trust…

5)   Quick to download

There’s actual download time and perceived download time. The latter is more important than the former. If people get their keywords validated they will regard the download time as good; if they don’t get what they want they will perceive the time as slow.

Perceived download time depends on context:

web design - download time context

 

How Search Engines Read Websites

  • Index text
  • Follow links
  • Measure popularity
  • Accommodate searcher goals and behaviors

Are people saying the same or similar things about your website as you are saying about your website? (This is where inbound link and “link building” is very important.)

Web design - seo

Searcher goals are HUGELY important! Does your searcher want navigational, information (63-80% of SE queries), or transactional  (24-24%) queries. Shari calls these “Go, Know or Do”  goals.

web design - intent

 

What kind of text should you use on your website?

Primary Text – ALL Search Engines read and use to determine relevancy

  • Title tags (spell out your abbreviations in your title tag if there is room!)
  • Body copy
  • Text at the top of the web page
  • Text In and around hyper links

Secondary text – SOME search engines read an duse to determine relevancy

  • Meta tag content (VERY important for video optimization)
  • Alt text
  • Domain and file names

Primary text items are more important than secondary text elements. Make sure to place keywords in your titles, visible body text, anchor text , meta tags and ALT text.

 

These are all no nos:

Web design - no nos

Mobile

Mobile users read! (shocker!)

WEb design - Mobile

Do not assume responsive design is necessarily Search Engine friendly! Websites designed for mobile have to follow the same 5 rules for web design (covered above) as desktop websites.

Responsive design works well for some types of websites (a resterautn for instance), but most sites need to have a mobile-specific website created (IE: The Mayo Clinic website)

Responsive design DOES increase the download time of a website. Count the numbers of images; the number of scripts – those both bog down mobile websites.

Popularity component

Social signals and popularity are both forms of validation. The idea is to get a quantity of quality links.  

When you are logged in, Search Engines remember click popularity and adjust your SERP results based on that.

WEB DESIGN - Social

 

Some other random mishmash

Read this book! Emotional Design by Donald Norman

“I don’t expect you to KNOW everything, I just expect you to have an AWARENESS.”

Search engines don’t read punctuation marks

Right column should be at least 200px wide (if it’s less than that people tend to ignore it because they think the column is ads)

People tend to look three or four inches from the top of the screen; this is why the H1 is incredibly important.

Generally 7-12 FAQs per page is ok; after 16 it gets really hard to scan (which is a bad user experience.

People are going to decide to scroll during the first initial few seconds based on what’s visible. Which is one reason why it’s important to get the most important information above the fold. (Beyond the fold, Shari doesn’t recommend the page being longer than 2.5 screens.)

A lot of people ignore “banner blindness” ads (in the first 200px of the page)

FreeDictionary.com = bad ad saturation and placement
Mayo Clinic and ABC News = great ad saturation and placement

 

Search Engine Visibility  = Shari’s book. Read it for more information on getting a PDF to rank.

 

The post SMX Boot Camp: SEO Friendly Web Design (#smx #14A) appeared first on Bruce Clay, Inc..

]]>
https://www.bruceclay.com/blog/seo-friendly-web-design/feed/ 7