Website Launch Checklist: Top 7 Things To Do Before Going Live

We LOVE checklists. And while we know that launching a new website can be exciting, it can also be a stressful endeavor for anyone whether you are experienced or not. Instead of worrying about a handful of things that could go terribly wrong when launching your site, wouldn’t it be nice to have a handy checklist to reference before going live? You’re in luck!

We understand that most financial advisors have little or no experience with website design, which can make building your own site a very intimidating idea. Even if you have a basic idea of how the web works, it can often be expensive and time-consuming to undertake a website build on your own.

That’s why we developed the Twenty Over Ten platform not only with the end-user in mind but also the builder – you! Our intuitive CMS (Content Management System) gives you the tools to autonomously manage your website like a pro. It’s easy to use, user-friendly and packed with powerful features for beginners and experts alike!

Pre-Launch Checklist

Item #1 Add a Site Title

Your website’s homepage is by far the most heavily weighted page on your entire website. Therefore, it’s crucial you choose a standout title for your new website. The title of your website will appear in search results, browser bars and form notifications. We get it – coming up with a website title can be a scary thing to do. This is the first thing prospects will see when they land on your website.

Your website’s title is your brand. Be clear about the purpose of your website and take your time to develop a well-crafted site title in order to help your financial planning firm stand out from your competition. Choosing a good site title will also help tell visitors what your site is about and what they can expect to find once landing on your site.

ADDING A SITE TITLE:

Step 1: Access your “site settings” from the bottom of your sidebar.

Step 2 (uploading a logo file): Use the “upload logo” button to import a file. .svg, .png, or .jpeg filetypes are preferred.

Step 3 (Adding a logotype): If you don’t have a specific logo, use the “site title” tool and type in the name you want (keep in mind this will display as your logo on the pages within your website).

Step 4: If you use the “site title” tool, use the “logo font” tool to change the font of the logotype to match your desired brand.

Item #2 Add Page Titles

Title tags appear at the top of the browser that you are using, and it is important to both user experience and SEO. Adding and customizing your page titles will not only give site visitors more information but doing so can also help give search engines like Google more information about the pages on your site and the information they contain.

The title tag of a web page is meant to be an accurate and concise description of a page’s content. In the example below, “Cleveland, OH | Female Financial Advisor | Glass Financial is the title tag. From an SEO perspective, title tags should be formatted as such: Primary Keyword – Secondary Keyword | Brand Name. You can see where the firm is located, a keyword that describes the advisor or firm and the name of the business.

CUSTOMIZING A PAGE TITLE:

Item #3 Add Metadata to All Pages & Blog Posts

Meta descriptions explain to search engines and searchers what your site is about. Including compelling meta descriptions on your site can oftentimes be the determining factor if someone clicks on your site or not from the SERP (search engine results page), especially if you’re including keywords the searcher is looking for.

Twenty Over Ten client, Forward Thinking Wealth Management, has done a great job of including a meta-data description under not only their main title tag but also under the subheaders.

Here’s the catch and where we see most advisors slip-up. Metadata needs to be added to each page of your website. This includes main pages, landing pages, and blog posts too!

ADDING METADATA TO YOUR WEBPAGES:

ADDING METADATA TO YOUR BLOG POSTS:

Step 1: Access your “manage posts” from your sidebar (A icon).

Step 2: Select the blog post you would like to add metadata to.

Step 3: Scroll down until you reach the SEO description box and add your content.

Step 4: Your metadata should be a short 1-2 sentence description (rich in keywords) of the content appearing on that particular blogpost. After you have added the content of your choice, click the save button.

Item #4 Connect Forms

Do you have a form on your contact page? It’s important to fill each one out to make sure each field within the form is working properly. When you click submit or send, you should also verify that the correct confirmation or thank you page comes up. Lastly, check your email that you signed up with to make sure that your request was submitted successfully. There’s nothing more maddening for your site visitors than to fill out a form that does not work and as a business owner, you want to ensure you’re capturing those leads too!

ADDING CONNECT FORM DATA:

1) Rename Default Fields

Step 1: To edit the default field names for your form you’ll first need to be logged in and on the EDIT screen. From here navigate to the page(s) with your form on it and click on your page content to activate the editor toolbox:

Step 2: From here, select the </> icon from the editing toolbox:

Step 3: This switches to what we call the “Code View” of your page’s content. What you are looking at is the actual website code for this page. Within this code find where your form is located, it should look something like this:

Step 4: For each Field, there are two areas that you can change to customize your default fields. This will be the Label Text and Field Name of the field.

So, let’ say you wanted to change the “Phone” field to say “Your Phone Number”:

<div class="form-item">
  <label>Phone</label>
  <input class="form-control" name="contact[phone]" type="text" />
</div>

<label>Phone</label>

Which can be changed to:

<label>Your Phone Number</label>

Next, you’ll want to change the Field Name, look for something like the following:

<input class="form-control" name="contact[phone]" type="text" />

Within the field code, you’ll see the following:

name="contact[phone]"

The name of the field is within the [] brackets. So you’d change this to:

name="contact[your-phone-number]"

Step 5: Once you are done, click the </> icon from the top right of the code view to switch back to the visual editor and see your updated form!

2) Add Single-Line Text

A single-line text field is useful for collecting user-entered text for short 2-5 word answers (ie. company name, age, zip code, etc)

Step 1: To add this in, you’ll first need to be logged in and on the EDIT screen. From here navigate to the page(s) with your form on it and click on your page content to activate the editor toolbox and click the </> icon to activate the “Code View”.

Step 2: Within this code find where your form is located, it should look something like this:

Step 3: Each field is contained within this code: <div class="form-item"> ... </div>, so be sure you paste your code you copied above so that it falls before or after the other field’s code.

Step 4: You will want to change the Label Text and Field Name of this field, as outlined in the first section above.

3) Add Multi-Line Text

Multi-Line text fields are great for long-form questions.

Step 1: To add this in, you’ll first need to be logged in and on the EDIT screen. From here navigate to the page(s) with your form on it and click on your page content to activate the editor toolbox and click the </> icon to activate the “Code View”.

Step 2: Within this code find where your form is located, it should look something like this:

Step 3: Each field is contained within this code: <div class="form-item"> ... </div>, so be sure you paste your code you copied above so that it falls before or after the other field’s code.

Step 4: You will want to change the Label Text and Field Name of this field, as outlined in the first section above.

4) Add Select Dropdown

Select Dropdown fields are a great for long, predefined options.

Step 1: To add this in, you’ll first need to be logged in and on the EDIT screen. From here navigate to the page(s) with your form on it and click on your page content to activate the editor toolbox and click the </> icon to activate the “Code View”.

Step 2: Within this code find where your form is located, it should look something like this:

Step 3: Each field is contained within this code: <div class="form-item"> ... </div>, so be sure you paste your code you copied above so that it falls before or after the other field’s code.

Step 4: You will want to change the Label Text and Field Name of this field, as outlined in the first section above, but you’ll also want to customize the dropdown options available to your users. To do this, simply add/remove the following from the code you copy and pasted: <option>Option 1</option>

You’ll notice the first <option> is set up slightly differently. This is an optional default option to to tell users what to do, as noted by the disabled="disabled" and selected="selected" code. Feel free to edit the text for this option as well, or remove the option entirely.

5) Add Radio Buttons

Radio Button fields are another great way for showcasing single-answer options.

Step 1: To add this in, you’ll first need to be logged in and on the EDIT screen. From here navigate to the page(s) with your form on it and click on your page content to activate the editor toolbox and click the </> icon to activate the “Code View”.

Step 2: Within this code find where your form is located, it should look something like this:

Step 3: Each field is contained within this code: <div class="form-item"> ... </div>, so be sure you paste your code you copied above so that it falls before or after the other field’s code:

Step 4: You will want to change the Label Text and Field Name of this field, as outlined in the first section above, but you also will need to customize your radio button options Value and Display Text.

The Value here is what you see as: value="1", simply change the 1 to whatever text you want to show up in your email notifications. The Display Text is what you see as: Option 1, which shows right before the closing </label> tag. This is the text the user will see for this option, change this to whatever you’d like.

6) Add Checkboxes

Checkboxes are great for when multi-choice questions.

Step 1: To add this in, you’ll first need to be logged in and on the EDIT screen. From here navigate to the page(s) with your form on it and click on your page content to activate the editor toolbox and click the </> icon to activate the “Code View”.

Step 2: Within this code find where your form is located, it should look something like this:

Step 4: Each field is contained within this code: <div class="form-item"> ... </div>, so be sure you paste your code you copied above so that it falls before or after the other field’s code.

Step 4: You will want to change the Label Text and Field Name of this field, as outlined in the first section above, but you also will need to customize your checkbox options Value and Display Text. To do this, simply find the following within the code you copy and pasted:

The Value here is what you see as: value="1", simply change the 1 to whatever text you want to show up in your email notifications. The Display Text is what you see as: Option 1, which shows right before the closing </label> tag. This is the text the user will see for this option, change this to whatever you’d like.

Item #5 Add a Favicon

Favicon (short for favorite icon) is essentially a small icon associated with a particular website. Browsers that support favicons will typically display the icon in the browser’s address bar, in bookmarks and in the history as well. Favicon’s that are well-designed will typically match your firm’s logo or the theme of your website. Adding a favicon to your website gives visitors a quick way to recognize your website with a single glance.

Twenty Over Ten client, Fit Wealth Advisors has the “Fit” icon that pops up to the left when tying their name into the search engine.

ADDING A FAVICON:

We recommend creating a favicon that is at minimum, 16x16px in size. Within the Twenty Over Ten platform adding your own favicon is easy. When uploading your favicon please note that PNG or ICO filetypes are preferred.

Item #6 Add Analytics

Tracking and monitoring your website analytics is crucial and is the foundation of a performance-driven website. Google Analytics offers users a huge amount of data and can easily be integrated into your Twenty Over Ten website. If you don’t have a Google Analytics account setup you can set one up here.

ADDING GOOGLE ANALYTICS TO YOUR WEBSITE:

In order to integrate your Google Analytics account with your Twenty Over Ten website you’ll need your Google Analytics account number. The tracking ID provided by Google Analytics is a string of letters and numbers like UA-000000-2. This must be included in your tracking code to tell Analytics which account and property to send data to. The first set of numbers (-000000, in the example above) refers to your account number, and the second set of numbers (-2) refers to the specific property number associated with the account. Here are basic instructions on where to find your tracking ID within your Google Analytics account.

Item #7 TEST TEST TEST

We can’t say it enough – test, test, and test again! When your website is performing well, it will help grow your business exponentially. However, without the use of analytics and testing, you will never know how your website is performing and how to improve your site’s performance. Testing your website before launching is incredibly important in order to find any issues and fix any bugs that could potentially harm the user experience.

Rest assured our team is always testing, squashing bugs and improving our platform but there are some additional on-page items that we recommend our users review for quality assurance before launching your new website, such as:

• Links: We don’t think there’s anything worse than clicking a link that goes nowhere or takes you to a completely irrelevant page. Click on each link on your site to test and be sure they’re going where you intended them to go.
• Grammar and spelling: You’ve spent a great deal of time developing solid content for your website. Don’t let it go to waste by missing silly errors. After looking at your site for hours (maybe even weeks) on end it can be easy to miss errors. Consider asking a colleague or partner to take a look at your test site before launching to catch any spelling and grammatical errors.
• Look and feel: Step back and take a look at your images and blocks of content. Is there enough white space or does everything look smooshed? Make sure your spacing is adequate, your color palette reflects your brand identity and the overall styling is on-par. Additionally, make sure your website flows well. Most advisory firm’s websites have an average visit duration of just over one minute. Keep it simple and easy to navigate. There’s no reason you need to tell your message with more than five pages.