Inbound Marketing Blog by protocol 80

9 Steps: How to Make a B2B Website from the Ground Up

Written by protocol 80 | August 03, 2024 // 1:01 AM

The internet is full of business websites, all with their unique strengths and weaknesses. Some have pages that promise new content but haven’t been updated in *cough* years, some are VERY slow to load, and most sadly aren’t optimized for mobile devices.

If your website is one of these – or if you’ve identified other issues that require a total site overhaul, it’s time to learn how to make a B2B website from start to finish. If this’ll be your first website because you’re a startup or just emerged from the Stone Age, welcome aboard too!


Before We Dive In: How’s Your B2B Website Strategy Looking? 

Hopefully, you’ve already established your website creation strategy and are armed and ready with:

  • Brand guidelines
  • Market, competitor, & keyword research
  • A general idea of who will do the work

Once you get the background and basics out of the way, you start building your big idea, brick by brick.

How to Make a B2B Website in 9 Steps

Use these nine points as milestones in the website project process: 

  1. Determine goals & scope
  2. Assign roles
  3. Create a sitemap
  4. Design 
  5. Write
  6. Evaluate performance & SEO
  7. Test links, pages, etc. … and address issues
  8. Launch (but don’t leave for vacation)
  9. Complete post-launch punch list

1. Determine Project Goals & Scope

Some projects are facelifts; others are total overhauls. Is your website design or redesign project simply a transfer from platform to platform? Or is it a complete redesign? Does it land somewhere in between the two?

All stakeholders must agree on what you hope to accomplish with the build. How will it tie into your big-picture business goals? The new website should help you get closer to meeting those goals.

Once everyone’s in alignment, set a budget and timeline for the web build so its costs don’t become a runaway train. To do that, put the exact scope of the project in writing. Scoping factors include:

  • Site size: Estimate the number of pages you’ll need before launch. This means considering everything from landing pages to the privacy policy to a custom 404 error page.

  • Content/media: Audit whether any SEO-ready written content exists and is ready to be air-dropped into a new design. If not, your copywriting team will need to gather product/service knowledge and write the content. Likewise, see what your company has in the way of images and videos. If you don’t have anything high-quality and recent, you’ll have to pay for a media specialist and/or stock photos.

  • Website technical level: Will your site include fancy features like price calculators or sophisticated chatbots? Those take time and money to develop, test, and troubleshoot.

  • Launch: How fast do you want this all done? You’ll need a team big enough to accommodate your deadline. Remember, it’s not a rule that every nonessential page must be complete before you launch the site. You can save website development costs (for now) by preparing an MVP – “minimally viable product” – for launch, with the expectation of adding more features later.

(Note: All sites require some maintenance on a regular basis post-launch, even if you don’t add new content.)

2. Assign Roles

Divvying up web project responsibilities is deceptively tricky, especially if you wait too long to set them in stone. Actually, you might want to upgrade to steel for this one.

Consider these important roles and potential bottlenecks:

  • Who will be the main liaison between stakeholders and those doing the actual work? 
  • Who will provide hard assets (like product photos) and soft assets (like product knowledge)? 
  • Who will provide logins for all necessary tools and platforms?
  • Who will review the work – and, if multiple people, who has final say?
  • Who will handle DNS changes for the site?

Some areas of making a website are complex and must be done carefully – even the copywriting. Choose your people wisely, whether in-house or outsourced. Hold them accountable.

3. Sitemap

Whether this is v1, v2, or v152 of your website, lay out a sitemap from scratch.

A sitemap is the “blueprint” that lists all pages on your site, and how they connect to one another. If it manifested itself in physical form right before your very eyes, it’d look like a flow chart or family tree.

A more tangible comparison is the main navigation bar you see atop most websites. However, your sitemap should go deeper than that menu and include all pages you want for launch.

Now, how do you decide what pages to prioritize including?

  • Your data: A website that’s up for any length of time will receive feedback, even if it’s indirectly in the form of traffic and lead metrics. If you have existing data, see where users are spending the most time.

  • Similar websites: Whether they belong to archnemeses or peers you admire, other successful sites in your industry can clue you in to what matters. Look for recurring features, pages, and categorization methods.

  • Pain points: It *pains* us to say it, but many B2Bs are good-hearted but forget to show that in their digital marketing. Prioritize any pages that might solve pain points for your buyer persona – i.e. a hub of helpful engineering resources.

Navigating a Good Website Layout

Naturally, a finished map will help inform your website’s main navigation bar, as well as any secondary menus. 

The best B2B website designs are simple, yet direct. Create menus that give users a logical direction to find the information they seek.

The main navigation should have obvious (or at least intriguing) labels identifying the top, core pages. From there, the dropdown columns should include a list of your main industries, product categories, services, or whatever’s relevant to that “vertical slice” of the site.

4. Design

 

How to Create a B2B Website That’s Scalable

You might offer a satisfactory website user experience (UX) today, but what works now might not in 3 years. Time will pass, and web users’ expectations will evolve.

As you choose a website host, theme, and templates, keep scalability in mind. Your CMS (content management system) should provide the opportunity to scale your site alongside your business as it grows. Think of features that might not be doable now (i.e. payment processing), but you might want to add later – if your platform can handle it.

Choosing a platform has a big influence on the design process. If you choose to work with HubSpot CMS, there are benefits (the novice-friendly editors) and drawbacks (the sticker costs). Likewise, if you choose WordPress, there will be benefits and downsides (like having to add several plugins to reach full functionality).

Design work also includes choosing a theme. Remember that it's best to work with off-the-shelf templates, to avoid wasting time troubleshooting or trying to come up with something you like from scratch. A master template also makes it easier to visualize the design of several different pages at once, rather than having to come up with a layout for each page separately. 

When starting a B2B website from scratch, you may appreciate a collaborative design tool like Figma for laying out the bigger design elements. Having a visual representation can make getting approval easier, and from there it’s not a big jump to implement the design on the actual pages.

There’s nothing wrong with getting inspiration from external sources at this point. If visual design isn’t one of your strengths, lean on experienced web designers or take a look at other B2B website examples. If you have a graphic designer on-staff, they can put their head together with the web designer to brainstorm the most user-friendly way to showcase your products and services

Next, drop in media assets to give the pages curb appeal. Your site should look polished and trustworthy, but don’t spend too much time on snazzy videos and collages – it’s your message that matters most. Make sure the formatting looks OK on both desktop and mobile.

5. Write & Build

 

Start at the Top? Not Necessarily

Once you have a template in mind and the core design elements you want to see on each page, it’s time to start adding content and images. 

Start with an important page, but not the homepage. This provides a better segue into structuring the pages and how deep you want to get into details on each layer of the site. 

Your homepage is your virtual storefront, and as such it can bog down the whole project if you fret over perfecting it at the get-go. Working on pages with a specific focus, like “Services/Capabilities” pages, can get momentum rolling more quickly. After that, you’ll already have most of the info and style cues you need for the homepage.

UX and organization applies to individual pages and their text as well. There are pieces you must put in place before you build and publish a website.

Remember that small detail about needing “SEO-ready content” for your B2B website strategy? It’s actually a big detail, from your product descriptions down to the “tags” Google’s search crawlers use to understand each page’s hierarchy and flow. 

To increase your odds of reaching buyers, identify a primary keyword for each page you build. This should be the term you want that page to rank #1 for in Google Search. Every page should have a different primary keyword, except in rare cases.

As for SEO tags, each page needs:

Location

Tag Type

Function

Off-page

Page/SEO title

Hyperlinked title that appears in search results; should attract attention and include keyword to some extent

Off-page

Meta description

Promotional blurb below page title; should clearly state what the page contains & the value it'll provide the user

On-page

H1
header

The page’s headline; should include main keyword

On-page

H2
header

Like book chapters -- makes copy more organized and scannable. At least one should include the main keyword

On-page

Alt
text

Appears in place of images when pages are loading slowly or user has vision impairment. Should plainly state what’s in the image and include main keyword

 

That’s the skeleton. Now you transplant the beating heart into the page – your team’s masterful writing!

Assign written copy – not too short, not too long – to the appropriate page. B2B website copywriting is a whole other animal, but here are some basic tips:

  • Make your customer – not you – the hero of your story.
  • Show, don’t tell.
  • Include links to related pages, creating an interconnected "web" that keeps users engaging with your site longer.

This segment of the build typically takes the most time and collaboration. The fewer people invited to review the work, the better. (Trust us; it just gets messy and super-inefficient.)

How to Get Leads From Website Pages: CTAs

The cherry on top – or, in this case, usually the bottom – is the call-to-action (CTA).

A CTA is a graphic, button, or text link that encourages the visitor to do something. Visit another page, schedule a demo, or contact you for a quote – these actions can be the tipping point between curious onlooker and closed customer. Without CTAs on your website pages, how will you collect new email contacts to nurture?

Build CTAs targeted to different stages of the marketing funnel. Rome wasn’t built in a day – not everyone is going to head to your Contact Us page on their first visit. However, if you successfully nudge someone to fill out a form to subscribe to your newsletter or download a whitepaper, you’ve successfully influenced their process. Now your brand is lodged in the back of their mind. 

6. Evaluate Performance & SEO

Content is created and edited, and the pages seem to be finalized and ready for viewing by your target audience. Now is the time to evaluate and make sure the SEO is up to snuff: 

  • Do all the pages have a primary keyword you want it to rank in Google for, with secondary keywords mixed in?
  • Is there a custom meta description for each page to entice users to click on your Google search result??
  • Are the page titles and URLs clear, relevant, and keyword-inclusive?

This final review of SEO may turn up opportunities to include keywords on a page that doesn’t have them, or to beef up a keyword that was mentioned but not fully optimized. 

 

7. Test Links, CTAs, etc. … and Address Issues

To win over a user, think like a user. Navigate through the website as your target buyer might – or ask some people outside the office to be your experimental guinea pigs.

If the experience goes well, move on to making sure it works well:

  • Use a site-performance tool to verify that there are no broken links.
  • Test the submission forms. Figure out who should be getting the notifications that a form was submitted so that they can begin tracking or nurturing the lead. 
  • Test any unique or complex modules (i.e. a pricing calculator) to make sure they put out accurate responses.

8. Launch (No, You Can’t Leave for Hawaii Yet)

If the site is ready to go live, you can adjust DNS settings as necessary. This behind-the-scenes work takes time and care. Not everyone has a grasp of how this works, so bringing in an expert to handle this aspect of the website transition is nothing to be embarrassed about. 

Once the settings are complete, the domain can take hours to begin showing the new site, as Google has its own timeline for the process. 

Make a final sweep of all text and functional elements. Separate any problems the team finds two buckets: major issues that need a fix before launch, and non-critical issues you can address afterward.

Launch the site earlier in the week. If you launch at 2 p.m. Friday and the site breaks an hour after everyone leaves for the weekend, you’ve done a bad thing.

9. Complete Post-Launch List

You’ve launched a site – congrats! While you may think you can breathe that sigh of relief, you’re not quite done yet. Any site will have a few tweaks to make after launch. 

Some elements that worked correctly in draft mode might look or act wonky on the published version. Or, you might get feedback from someone that gives you a new idea for a service or resource page. Either way, there is bound to be a new list of (hopefully minor) changes to make before you can consider the site complete.

A post-launch honey-do list is a great way to gather feedback and prioritize potential improvements.

Now You Know How to Make a B2B Website … Right?

Learning how to design and make a B2B website takes time and effort. The investment will be worth it – take your time, and get it right.

Start by seeking clarity on how the website will tie into your business goals. From outlining the scope to making sure your messaging resonates with the right people, you truly need to start “from the ground up.”

Applying the above steps will ensure the Google algorithm doesn’t leave your website in the dust – while boosting the human experience as well!

If you’re still learning how to improve your B2B website, check out this additional free resource: