Viewing entries tagged
website design

Comment

How to Write an About Page for your Website that Makes an Impact

Bold & Pop : How to Write an About Page for your Website that Makes an Impact

Raise your hand if you’ve settled on the about page of your website or put off redoing it because… well, it is hard AF to write about yourself sometimes! Girl, we have been there. Here’s the thing though, your about page is SO dang important -- even more so if you’re a service-based business. Not only is it where you showcase why you’re credible and more info on your business but it’s a place where you can really highlight your personality and why people would want to work with you. And spoiler, people want to work with people who they feel like they have a connection with! Tackling our own about page was on our to-do list this year, so now that we got it done (and survived) I’m spilling tips to help you crush yours too!

Your tone of voice is everything!

Your about page should speak to your target audience. Plain and simple! This page is literally dedicated to telling others who the heck you are, what you do, and whyyy they should be banging on your door to work with you. So before you do anythingggg and start nailing down the nitty gritty of what you want to include, you need to sit down and think about who the heck you’re talking to.

If you work with fun, outgoing go-getting women then make sure your copy reflects that! You’re not going to catch their eye by writing a blah boring bio… snoozefest. Instead, consider writing catchy fun headlines that will draw them in and make it more conversational like you were new friends getting to know each other over some coffee. Kind of like how I’m doing in this blog post! On the flip side, if you work with larger corporations or in an industry that is a little more formal, then writing punchy, fun copy probably isn’t going to cut it. Know your people and make sure your tone matches what they’re looking for! And if you don’t know who your people are yet, because you’re just getting started, then write for who you want your people to be! When we started Bold & Pop we knew our brand was going to be bright, colorful and happy! And while we work with clients with all sorts of design styles, one thing we wanted to make sure shined through is that we’re fun and positive women who just want to support our clients — so you’ll notice our copy reflects that!

Hash out the details

While your tone of voice is actually going to be what draws people in, you also need to make sure your page actually has some meat! When Mallory and I were working on our about page revamp we did an outline of different things we wanted to highlight including different facts, like how long we’ve been working in the industry, types of clients we’ve represented, where we went to college, press outlets we’ve been featured in — all of that legit credibility stuff. We also thought about some different fun traits about our personalities that we wanted to highlight too. Like I mentioned, your about page is somewhere for people to get to know you and start to feel a connection with you — before they actually know you. So think about this, every detail you provide is another chance for you to be relatable (or just interesting) to others. Oh you’re big into country music? ME TOO! You went to college in Oregon? I love Oregon.. Now of course you don’t have to list everyyy detail about yourself but ones that make sense to highlight open up those touch points for others to connect on.

Break things up

On top of outlining some of the key details, another helpful tip is to think about how you want it structured. There’s no wrong or right way to do this, but we knew we wanted to section out different parts of the things we wanted to touch on. Plus, with people’s attention spans forever decreasing, breaking sections up with graphics and/or photos will make the user-experience a lot better. You want to give people lots of good info, but you also don’t want them to feel like they’re reading a novel on your life. By breaking things up, you can still include lots of details without it feeling overwhelming.

I recommend doing this by starting with the content sections you want to include and think about fun ways you could highlight some differently. For example, we knew we wanted to have an introduction that let people know who we were and a high-level background of our experience so that they knew exactly what we did if that’s as far as they read. From there, we then wanted to include our Co-founder story of how we met and started working together because it’s kind of a funny story, and then we went into our individual bios, then after that we decided we just wanted to have another fun section with more personal details on our personalities. To break things up but also be able to cram in a lot of metrics about our Bold & Pop careers, we created a ticker animation feature that showcased some of those metrics without having it in paragraph form. We also added a slider image with photos/graphics to highlight some of our personal interests to break things up a bit.

Writing an effective about page is all about connecting with your audience, highlighting why you are as awesome as you are, and make the experience of doing both one that is easy and enjoyable! Hopefully you’ve found these tips helpful. Feel free to pop over to ours to see the final product and as always drop any questions/comments you have below!

P.S. Exciting news! We launched the free #GoingBold Facebook Group and would love for you to join us! Come on over!

Comment

1 Comment

SEO Setup Guide for Your Squarespace Website

Bold & Pop : SEO Setup Guide for Your Squarespace Website

One common misconception of Squarespace is that it’s not good for SEO (search engine optimization). That’s a big ol’ lie. You just have to know how to optimize your site properly, just like with any platform! We know SEO can be a complicated topic and really confusing so we’re giving you a step-by-step guide to help you optimize your site so you can rank higher and higher on search engines pre- and post-launch!

Backend Setup

There are several things to update in the settings area on the backend of your Squarespace website prior to launching (if you've launched and haven't done this, don't worry! You can still go in and update now). This includes:

  • Your Business Name

  • Site Description

  • Search Engine Description

  • SSL Certificate

  • Page Titles and SEO Descriptions

Business Name: Chances are you have a logo that you’ll be using on your website but you also want to fill out your Business Name under the business information. If you do have a logo, you’ll want to also consider adding some keywords after your business name. Because you have a logo, these won’t show up on the actual website but it still gives search engines some keywords to crawl right in your website name.

You can edit your business name by going to Settings > Business Information > Business Name

Example: Bold & Pop | Social Media, PR, Branding and Website Design

Site Description: Depending on your template, this may or may not show up on the website but this is a great place to give a succinct overview of what your brand offers. Make sure you include the essential keywords in this section.

You can edit this by going to Settings > Basic Information > Site Description

Search Engine Description: This description is what is used in the search results of search engines like Google. In one or two short sentences, describe your business here. (You can also use the same description as the site description to make life a little easier.) Again, make sure to include essential keywords so these are front and center for search engines to crawl. 

You can edit this by going to Settings > SEO > Search Engine Description

SSL Certificate: Google has announced that SSL-secured websites may receive a minor ranking boost so you want to make sure you have this enabled. Luckily, Squarespace makes this insanely easy and offers free SSL certificates for all Squarespace domains and third-party domains connected to a site.

To make sure this is enabled, go to Settings > Security & SSL > Choose Secure option

Page/SEO Titles and SEO Descriptions: Every single page on your site now allows you to update the SEO titles, page titles, navigation titles and page descriptions. Here’s how these break down:

Bold & Pop : SEO Setup Guide for Your Squarespace Website
  • SEO titles: These appear in search results and are indexed by search engines.

  • Page titles: These are only available on some templates but these can be longer than navigation titles. If there's no SEO title, the page title displays in search results instead.

  • Navigation titles: These are the titles that show up in your navigation. It's best to keep these short, like "About" or "Contact."

  • SEO Descriptions: Similar to your overall site description and search engine description but these are specific for each page on your site. These will display under the corresponding page in search results so make sure to keep these short, relevant, and descriptive.

You can find page titles and descriptions under each page’s settings (pictured above).

Headers

If you didn’t know, Squarespace produces pages with clean HTML markup that is indexable by search engines. This means there’s no need to add <h1> and <h2> tags in HTML. All you have to do is select a Heading style, and those tags are created for you.

Most of the time you’re going to use these Heading styles to highlight your key points on your website and these should include keywords. These headers are prioritized as important pieces of information (in order of Header 1, Header 2, Header 3, and then body text) when search engines crawl your website so you can see why having keywords in these is so important.

Pro tip: If you have a blog, your blog titles are categorized as Header 1 so make sure those are descriptive and include keywords!

Bold & Pop : SEO Setup Guide for Your Squarespace Website

Image Filenames

In Squarespace, images contain proper <alt> and <title> tags, improving search engine indexing. All meta tags for pages and <link> tags for RSS feeds are automatically generated in Squarespace and image descriptions are converted to <alt> tags. Because of this, you need to make sure you give every image on your website a filename.

You can find this right under where you upload the image. It says it’s an option which means it’s often overlooked but SO important for SEO. As with everything else, you want to make sure you include keywords but make sure the filename also provides an accurate description of what the image is (this pops up if the images doesn’t load).

We like to structure our filenames as Company Name :: Keywords/Description

Unlike most of these other SEO tips, this is something you may need to continue to do on a regular basis. If you decide to change an image or add a new one, you need to rename or name those images each time. This is especially important if you have a blog or shop that you update regularly.

Pro tip: This is also the text that is pulled if someone pins an image or graphic from your website to Pinterest! 

Connect to Google Analytics

So how in the world do you know which keywords to optimize? Good news is you can connect your site to Google Analytics and it will pull in the search terms people actually use to find your website!

This will be really important for your ongoing SEO strategy so we highly recommend doing this and checking the keywords on a monthly basis in your Squarespace Analytics.

If you need help connecting your Google Analytics, here’s a guide.

Submit Sitemap to Google

The great news on this piece is Squarespace automatically generates and links a proper sitemap.xml, which enumerates every URL and image metadata on your site with proper priority for perfect indexing even if you use a Javascript-heavy template.

So while Squarespace does this automatically for you, you still need to submit your sitemap and verify your website with Google. Luckily, this is also super easy and Squarespace provides a step-by-step guide.

  • How to verify your site with Google Search Console

  • Once you verify your site, you can click the option to submit a sitemap. Basically your sitemap can be found at http://www.yourdomain.com/sitemap.xml. So just enter the sitemap.xml into the space provided and submit!

And there you have it! A lot of little steps but all very easy and doable to help boost your SEO. If you want to learn more about the other built-in SEO features Squarespace offers, check out their overview.

Pro tip for ongoing SEO:

While taking care of all of these backend SEO pieces prior to launch is always a top priority for us, we also always suggest adding a blog and updating it regularly. This gives search engines fresh content to crawl on a regular basis. Trust us, this is not an opportunity you want to miss out on. Consistently blogging has probably been one of the biggest pieces to boosting our SEO.

If you decide to add a blog or if you already have one, there are plenty of steps to take to make sure your blog post is in tiptop shape before you hit publish. Luckily, we have a whole checklist for you in our content upgrade library! Sign up here or below to get access with our super duper top secret password.

P.S. Exciting news! We launched a free #GoingBold Facebook Group and would love for you to join us! Come on over!

1 Comment

Comment

2019 Website Trends: Micro Animations and How to Do Them

Bold & Pop : 2019 Website Trends: Micro Animations and How to Do Them

If you haven’t noticed having an interactive element to your website has become increasingly more popular over the last few years. And we’re here to tell you this trend isn’t going anywhere anytime soon!

Luckily, you don’t have to go crazy when it comes to adding these interactive elements. Think banner slideshows, rotating testimonials, hover animations, and our new favorite… micro-scroll animations! This is where an element appears on your screen (slides in, floats up, bounces in, etc.) as you scroll through the site. Having an interactive element like this on your website keeps the user engaged and actually helps improve their user experience as well!

Keeps the User Engaged:

Our eyes are naturally drawn to movement meaning that elements appearing upon scrolling is more visually interesting than static text and images. This means your website visitor’s interest will be held longer as they continue to scroll further down your page.

Improves User Experience:

Along with keeping users’ engaged, scrolling animations can help direct your website visitors around your website. These animations can help draw attention to specific sections or key content on the page. It’s almost like giving your visitors a map of where they should go next while on your site, but in a fun and interactive way! For example, you may have static text and the animation piece is when a “Read More” button appears as users begin to scroll. Their scrolling indicates that they have finished reading and are now ready for the next action on the site (the “Read More” button). This helps provide them with easy navigation throughout the site and ultimately, a positive user experience.

So what do micro-scroll animations look like?

There are a lot of options out there but here are a few examples:

Fade In

Slide Up

tada



Cool! How do I add this to my site?

First thing you need to do is add the below code to your sitewide code injection. To find this, go to Settings > Advanced > Code Injection and then copy and paste this into the header code injection.

<!--Micrco-Scroll Animation Code Injection-->

<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Next up, you need to add a code block to the page you’d like the animation on. (Pro tip: Make sure this block is below what you’re animating or it won’t work. We typically add it to the bottom of the page!)

Once you add the code block, copy and paste the below code into the block. You then need to change the spot where it says #block-name and className. Block name is the block ID so you can target that specific content block to animate. If you don’t know how to find this and you use Chrome for your browser, add this extension.

Then to change the className, you want to head over to this site. Here you can see the different types of animation options available. Once you choose, the className is literally just the name in the dropdown you chose (case sensitive!).

So you’ll simply add the #block-name and className to the code in the code block then hit save!

<!--Code Block-->

<script>
$('#block-name').addClass('wow className');
$('#block-name').addClass('wow className');
$('#block-name').addClass('wow className');
$('#block-name').addClass('wow className');
$('#block-name').addClass('wow className');
</script>


<!-- Duration -->
<script> $('#block-name').attr({'data-wow-duration':'1s','data-wow-delay':'0.4s'}); </script>


<!-- Init. script -->
<script>
       new WOW().init();
</script>

If you want to add more lines than the 5 provided (or you have less than 5), just add another (or delete the remaining):

$('#block-name').addClass('wow className');

at the end before </script>.

If you want to have the same animation for all, you can just add the #block-names all in the same section. For example, it would look like:

$('#block-name, #block-name, #block-name').addClass('wow className');

in that particular section of the code.

And last but not least, if you want to change the timing of your animations, go to the section that says <!-- Duration -->. You’ll add the #block-name again and then you can adjust 'data-wow-delay':'0.4s'. For example, it would look something like:

<script>
$('#block-name').attr({'data-wow-duration':'1s','data-wow-delay':'0.4s'});
$('#block-name').attr({'data-wow-duration':'1s','data-wow-delay':'0.5s'});
$('#block-name').attr({'data-wow-duration':'1s','data-wow-delay':'0.6s'});
</script>

This will change the timing of when your animations float onto the page (like the examples we provided above).

And there you have it! Simple animations to make a BIG impact on your Squarespace site!

If you add this to your site, we’d love to see! Drop a link to your site in the comments!

P.S. Exciting news! We launched the free #GoingBold Facebook Group and would love for you to join us! Come on over!

Comment