Website 102: How to build, test & launch your website

Hey baby cakes!

This post is the second in a 2-parter about websites. If you missed the first post in the series – Website 101: How to Buy a Domain, Pick a host and Content Management System – make sure you sign up for the free Hey Awesome Girl community to check it out. In it I share some recommended website hosts, pricing and links to resources for getting started.

Today we're going over how to build, test, launch your site – and what you need to know before you launch.

Because this experience will be different based on the host and content management system (CMS) you’re using, this post will focus more on the strategies and tactics that hold true for all platforms – And the workflow I use when creating a new site. 

Let's go!

How to build, test & launch your website

As a note, before you start actually building your website, I recommend using website wireframes as a guide to build your pages. If you're not sure what website wireframes are or how to get started with them – check on their free community resource: How to Wireframe Your Website.

But wireframes aside, when I’m starting a new website – no matter the platform – these are the steps that I usually take to build the pages.

Build Your Site:

• Set up your basic site information. What I mean by your basic site information is your website title and description and the basic SEO information associated with your website. For example, my website title is: “Hey Awesome Girl: Women Building Digital Empires” and my website description is: “Hey Awesome Girl is a creative agency focused on helping women work smarter, play bigger and live fuller lives. We help female creatives build brands, bucks, books, websites and worlds. We love dark chocolate, Box Heelers, and millennial pink. We laugh, curse and play every. single. day.” Typically you can update this information via the website settings section in your CMS. This information – the website title and description – is what shows up in search results for your website, so it’s important not to leave it blank.
• Determine if you’ll use a theme or build from scratch. All good CMSs have themes you can use to kickstart the development of your website. I don’t recommend you to build your website from scratch. Save time by starting with a theme. When you’re looking at themes for your website, think about picking a theme as you’d think about buying a house. When you tour a home, don’t get distracted by the colors on the walls or the photos in the frames, focus on the house’s bones. You’ll want to do the same thing when evaluating website themes. Look at the theme’s bones and structure. Based on your wireframes for your site, will the theme get you close to what you want your site to look like?
• Create placeholders for each of your pages. This is a personal choice, but I like to go ahead and make placeholder pages for all the pages I need to build. The reason I do this is because I like to see my workload. These pages don’t contain content at first, they just have the page title set.
• Convert your wireframes into page layouts. Once I have all my pages set, then I use wireframes to build the layout for each of my pages. I typically place and format the text first but use image placeholders for the images. By doing this, I’ll have a sense of how the content will work on the page and later I’ll come back and put images into the site that fit the flow of the page.
• Add images, patterns and visual features. Once I have my text formatted on each page, I’ll add images, patterns and other visual features to the page to give it depth. There are times when I’ll feel more visually compelled when creating a site, so I may start with images first and then do text.

Depending on your CMS, you may also have to build or adjust the mobile and tablet versions of your site as you build your desktop version. Or depending on your product or target audience, your main build may be the mobile version of your site.

Because I use responsive templates as a basis for building my websites, I typically check and adjust my mobile and tablet versions during the “Test” phase of development. However, it’s really best practice to check and adjust them during the build phase.

Test Your Site:

The point of the testing phase of your website development process is to make sure things work as you intended. Here’s what I do during the test phase of website development:

• Double-check to make sure my fonts, colors and spacing matches across my site
• Check all my website links and buttons to make sure they do what I designed them to do
• Test my site look and functionality (the way things work) on my desktop with multiple browsers (Chrome, Firefox & Safari) and on my iPad and my smartphone.

You won’t be able to test for every scenario in which your website will be seen but you can use some information to let you know which scenarios you should test for.

For example, I NEVER test my personal site on Internet Explorer. By checking Chrome, Safari and Firefox, I can make sure my website works on more than 70% of browsers worldwide without having to worry about the extra coding and updates often needed to get things to work “just right” on Internet Explorer.

Also, I prioritize checking the experience on mobile phones, because I know the audience for my “Hey Awesome Girl” brand is more tech-savvy/tech-interested and mobile-focused. Additionally, a big part of my marketing strategy is social media which is very mobile-driven.

Launch Your Site:

Once you have worked as many kinks out of your site as possible, next you need to LAUNCH IT!

Sometimes this is just hitting the “PUBLISH” button on your site. Other times you may need to reconfigure DNS records and point your domain name to your new website.

When it comes to launching your site, remember this: Done is better than perfect. There will ALWAYS be something you want to change or adjust on your website, don’t let that stop you from launching.

Your website is supposed to function as a 24/7 tool to help your digital business be more profitable. Think of it as an actual assistant. Having an active assistant that is good is better for your business than not having an assistant at all. So don’t let the idea of things being “perfect” (which is unattainable) keep you from getting things done.

Need more help with your website? Check out my resources this week that go with this blog post:

• Resource: How to Wireframe your site – FREE with your community membership
• UPGRADE: How to outline your site content strategy – Included with a PRO membership.

Best,