ALL ARTICLES

The Anatomy of a High Performing B2B Website

Your website is never going to be perfect.

Sorry. I hate to be the bearer of bad news, but your website is never going to be perfect because there are no perfect websites.

There aren’t even finished websites… They’re ALWAYS a work in progress no matter how many times you tweak the colors or slightly change a design.

Since there is no such thing as perfection or done, we’re not going to be able to show you an exact formula for building a great B2B website.

We can, however, tell what we’ve learned building more than 200 websites over the past 10 years so you can maximize your chances of building a high converting website.

In today’s blog post, let’s take a look at key elements of a high performing B2B website.

Our list will include:

  1. Customer Driven
  2. Contains Social Proof
  3. Visually Appealing
  4. Easy to navigate
  5. Content Ready
  6. SEO Ready
  7. Secure

Let’s get to it!

Customer Driven

Chances are that you don’t know your customer quite as well as you think you know them. Before you install WordPress or write a single line of code for your website, you need to gain a truly deep understanding your customer personas.

By understanding who your customers are and what their pains are, you’ll be able to create websites that speak to the specific pains of your customers.

Check out ChartBoost’s website:

By taking the time to understand their persona’s, ChartBoost was able to build a website that:

  • Has consistent messaging
  • Speaks to a pain that mobile advertisers have
  • Directs users to take a specific action (Sign Up Now)
  • Offers users a relevant content upgrade

Download Your FREE Customer Persona Template

Social Proof

Have you ever signed up for a free trial of a product simply because a known industry expert gave a glowing testimonial?

I know I have.

That’s the power of social proof.

By showing site visitors that industry experts and giant corporations are using your tool, you send an almost subliminal signal to their brain saying “Hey Google is using this… it must be worth a shot!”

What types of social proof can I leverage?

There are a few types of social proof that we’ve found work really well.

 

Testimonials

A tried and true method of providing social proof is customer testimonials.

A simple and relevant testimonial from a known company or expert can speak volumes. Check out a testimonial for ChartBoost.

You may not know exactly who Ville is, but if the CMO of the company that brought me Angry Birds likes the tool, then I’m going to take it seriously.

 

Customer Logo’s

Sometimes referred to as Trust Icons, customer logo’s on your website can be an easy way to let people know about a few of the big brands that you work with.

The persona-driven site that the team at Grappos built show’s the names and logos of some of the biggest companies in wine.

 

Case Studies

A good case study that takes a deep and data-driven dive into how a piece of software or a service helped a customer get results is still one of the best forms of social proof.

B2B companies should leverage their biggest names and success stories to create engaging case studies.

 

Organization Logo’s

Is your company part of the Better Business Bureau? Are you PayPal certified? HubSpot certified? Maybe you were featured in TechCrunch?

You can use “Trust Icons” to help prove the legitimacy of your business

 

Killer Results

If your company has been getting killer results for your customers, you need to show off your stats.

Check out how McDonald’s has been doing this for 50 years

McDonald’s has been telling people for years how many people it has served as social proof.

Buffer does a great job of showing off their user count number similar to McDonald’s and combining it with some great logo’s

Visually appealing

The first thing people notice about a website is the look and feel. Buyers will not feel comfortable engaging with a website that doesn’t look professionally done.

So what makes a great looking website?

Relevant imagery

Images are a powerful element of any website.

They can galvanize your site visitors into following your mission, or they can turn your visitors off and make them bounce off your page in 3 seconds.

So you need to use your images wisely. Stock photography is a great and inexpensive option, but make sure they align with your brand.

Let’s take a look at how Grappos does it.

The imagery immediately gives the impression that Grappos is a high-quality, luxurious brand that happens to sell wine.

Every image transmits a subconscious message to your audience. Sometimes the result is not what’s expected. Achieving the right balance between images and copy on a website has been shown to increase conversions by 29%.

Easy Navigation

An easy to navigate website is paramount to building a high converting website. In fact, more than 75% of site visitors say that ease in finding information is the most important element in website design according to a recent HubSpot study.

There are two types of site users: browsers and seekers. Browsers will “wander” through the site, often working left to right across your top navigation. They are passively consuming information and want to be able to window-shop. Seekers are after one thing and want to get there as fast as possible. Your navigation needs to support both user styles.

Accessibility

It’s 2017.

If your website isn’t mobile optimized then you need to start to optimize your website right now. Over 58% of all browsing time is spent on a mobile phone or tablet in 2017, and your site needs to cater to these users.

Your site needs to be compatible with multiple browsers and devices, or risk losing out to forward-thinking competition.

 

Content Ready

“Content marketing is the only marketing left” – Seth Godin

Successful B2B brands are using content marketing to educate and nurture their prospects through the buyer journey.

Visitors may be coming to your website to check out your features, view use cases, or learn best practices. Engage your site visitors and feed them helpful content in the form of articles, webinars, case studies, and downloadable content upgrades.

Build a great blog design

The goal of your blog is for your visitors to digest your content. So you want to design your blog to make reading as painless as possible.

This means have clear typography with a high contrast between the color of your text and the background color.

Ensure that your responsive design also carries over to your blog. Ideally, your text will automatically resize for visibility and readability, your images will scale, and your reading experience will be smooth.

The team at AutoPilot has this down to a science:

Their mobile optimized blog is readable and easily digestible.

Don’t restrict content to blog pages

If you’re only putting your content on your blog pages then you’re missing out on thousands of opportunities for visitors to view your content.

You can include content on your persona focused solution pages, feature pages, and even your home page.

See how CloudCheckr does it:

 

SEO Ready

If you want to drive thousands of visitors to your website for free consistently, SEO is still the best long-term traffic strategy. Even with offline campaigns, paid acquisition, and social media

campaigns, a huge percentage of your new site traffic should come from organic search.

On-page SEO

This consists of optimizing critical elements of your page for the search terms and phrases you are targeting. The most common elements include headings, sub-headings, body copy, image alt-tags, links, and anchor text. Without these elements, search engines don’t know what to rank your site for, and competitors will consistently beat you to Page 1.

Technical SEO

The unseen parts of your page are some of the most critical for search optimization. Title tags, meta descriptions, mobile optimizations and page speed are site elements that you can’t see but will sink your SEO traffic in a heartbeat. Don’t know what a robots.txt file is? You will when it stops search engines from finding your site, costing you 80% of your traffic.

To ensure that your SEO strategy is sound, make sure that you think about your SEO strategy from the start of your web project.

 

Security

Not focusing on security when building your website can be a critical mistake. We’ve faced all of these attacks, helping our clients fend off issues and maintain continuity. We’ve found that the best approach to security is two-pronged.

Begin Well

To create a good result, begin with the best base. Use the most up-to-date version of WordPress and carefully chose the plugins that you need.

Carefully scrutinize your plugins to ensure you know the security impact and long-term maintainability of each of your plugins.

Secure websites will utilize a professional web hosting service to manage the OS and supporting systems like AWS.

For the best performance and security, we recommend utilizing a Web Application Firewall like CloudFlare or Incapsula in front of your web layer. This will help prevent attacks like a DDOS from ever reaching your infrastructure.

Manage Securely 

Once you get to launch, you’ll need to monitor and patch security and performance at the system and application level to maintain the highest levels of security. This means continuously updating WordPress’ core software and supporting plugins.

 

Remember to always be testing

As we said at the beginning of this post, there are no finished websites.

These best practices are great starting points that you can use to optimize your website, however, always carefully track your conversions and test your ideas. It’s up to you and your marketing team to find the winning combination for your visitors.

Download Your FREE Customer Persona Template

ALL ARTICLES

Takeaways from WordCamp Fayetteville

The next time someone asks me, “What’s so great about WordPress?” I’ll be able to quickly and confidently reply, “The Community”.

Except this time I won’t just be talking about the hundreds of developers that contribute to the core every day, or the ever-vigilant forum moderators, or even the avid members and users across the globe. This time I’ll be talking about the real-life collaboration of passionate WordPress “activists” that make the community what it is. I’ve used WordPress to design, build, and manage websites for years, but wasn’t until my first WordCamp that I feel like I really get it.

WordCamp Fayetteville 2015

The Sessions

I attended WordCamp Fayetteville with my fellow UpTrender and WordCamp veteran, Tammy Hart, which we kicked off with a Friday night VIP dinner and meet n’ mingle. Organizers and attendees had a chance to break some bread and some ice, and speakers introduced their topics. We all indulged in some good food and drink before a full day of Saturday sessions.

I left my TARDIS at home so I wasn’t able to catch all of the awesome speakers, but I’ll recap a few highlights from the ones I attended.

Designing and Building Modular WordPress Themes

Tammy Hart

This was one of my favorite presentations, and not just because Tammy is one of our own UpTrending developers, but because she brilliantly presented on how we use a slick little plugin called ACF to create unique page layouts in WordPress more efficiently. We’ve battle tested this on a number of sites, including our own.

Tammy Hart WordCamp

Some key points from her session:

  • Building unique and flexible custom page layouts is easier than you think
  • ACF Pro allows you to create unique field data and reusable content modules for various pages
  • Drag n’ drop content sections give non-developers (clients, content writers, etc.) an intuitive solution for custom page layout and individualized content structure
  • Writing elegant code and adhering to modular file structure keeps your code extendible and easier to maintain over time

Modular Themes Code Snippet

View Slides

Customizer? I Barely Know ‘er!

Sky Shabatura

Aside from just getting points for the most kick-ass title, Sky provided some great insights on the somewhat underutilized Customizer feature in WordPress. He walked through some of the core features added to the Theme Customization API in 4.0, including a bunch of additions and improvements to the UI, new built-in Customizer controls, and some even more recent enhancements.

$wp_customize->add_control(new My_Custom_Control( $wp_customize, 'my_setting', array( 'label' => 'My Custom Control', 'section' => ‘my_section', 'choices => array( 'one' => 'choice one' 'two' => 'choice two' ) ) ));

Here’s a few things I learned about in Sky’s talk:

  • How to add new panels, sections, and settings to the Customizer
  • How to create a custom control class by extending WP_Customize_Control
  • Live settings preview can be automated without page refresh using JavaScript
  • Menu Management (formerly available as a plugin) is now merged with the core in 4.3

View Slides

 

Additional Customizer Resources:

https://developer.wordpress.org/themes/advanced-topics/customizer-api/
https://codex.wordpress.org/Theme_Customization_API https://developer.wordpress.org/reference/classes/wp_customize_manager/
https://make.wordpress.org/core/2014/07/08/customizer-improvements-in-4-0/

Baking in the SEO

Sean Morrison

Sean stepped us through a great use case for website optimization, using a number of tools to take a client’s site from a 55% Google page speed rating to a 90% and a load time of under 2 seconds. He touched on critical factors in site performance, such as selecting the right hosting provider, leveraging a content delivery network, and improving overall page speed.

A few key takeaways from Sean:

  • Add expires headers for common static file types by modifying your .htaccess file (and if .htaccess makes you squeamish try this plugin)
  • Remove query strings from static resources (and yes there’s a plugin for this too)
  • Use a caching plugin like WP Super Cache or W3 Total Cache to improve page load time
  • Some nice tools exist for optimizing images like Kraken and WP Smush
  • BJ Lazy Load will save you some valuable bandwidth and is degrades gracefully (so it’s totes Google compliant)
  • Managed hosting solutions can be worth the investment when it comes to speed, security, and uptime
  • Using a good CDN like Cloudflare makes a pretty big impact on performance

View Slides

 

Additional Page Speed Resources:

https://gtmetrix.com/
http://tools.pingdom.com/fpt/
https://developers.google.com/speed/pagespeed/insights/

Design Thinking & Going Pro

Daniel Herron

Coming to WordCamp I was hoping for an impactful and inspiring design talk, and Daniel Herron hit the mark. He shared some of his personal strategies for being a “pro” designer, and common snags in the creative process. His beautifully designed preso and engaging speaking style left us exhilarated and wanting more.

Being-Surrounded-Daniel-Herron-1024x576

“Find someone who is doing what you wish you could do and get obsessed.”

Some points I loved in his talk:

  • Good designers are problem solvers, a great case for this is The Elevator Problem
  • Whether it’s good or bad, we are constantly surrounded by design (we also learned of Daniel’s loathing of microwaves)
  • If you’re not careful as a designer you can become immersed in distractions, which become oppressive. Disconnect, put on headphones, and find your creative sanctuary
  • Be aware of feature creep and avoid becoming overwhelmed by too many options (true on so many levels, like controlling user flow)
  • Seek out inspiration in various forms: books, podcasts, music and mentors
  • Learn to say no, so people will trust you when you say yes
  • Make progress … every single day

View Slides

 

Additional Design Resources

http://signalnoise.com/442788/podcast
https://archive.org/details/DesignOfEverydayThings
https://www.skillshare.com/

Responsive Live!

Tom Hapgood

This was a really great intro to responsive web design techniques, and had a lot to offer for all levels, from newb to RWD master. I particularly enjoyed the brief demo on some of the features of flexbox.

Some of the takeaways:

  • The three main ingredients of RWD are fluid grids, flexible images, and media queries
  • The distinction between adaptive vs responsive design is important (breakpoints defined at explicit device widths vs natural fluid layout that responds at any viewport size)
  • Using ems (instead of px) for media queries allows designs to be resolution independent
  • Flexbox offers some great advantages over a traditional fluid grid approach: More efficient layout for dynamic container sizes and source ordering flexibility

View Slides

Protect Yo Self or Wreck Yo Self

Sean Borsodi

Sean gave an in-depth presentation on the introduction of the WP REST API into the WordPress Core, and the inherent security risks.  He also explained how to how to access data securely through the API.

  • The new API offers a way to fetch or manipulate data from your WordPress site
  • RESTful development helps the client speak to the server with the same HTTP verbs you might already be used to: GET, POST, PUT, DELETE, etc.
  • There are multiple ways to securely access an API: Cookie, Basic, OAuth, and HMAC with HMAC being considered impossible to invert
  • The WP REST API is planned to be fully integrated into core in WordPress version 4.4 in December 2015

View Slides

 

Additional API Resources

https://www.getpostman.com/
http://v2.wp-api.org/
11825741_10205265334577139_2089356109565615650_n

Props

I want to extend a special thanks to Eric and the organizing committee, and of course all the volunteers, speakers, and campers for making awesome events like this possible. For more info on WordCamp Fayetteville check out the website, or their Facebook and Twitter pages.