This article originally appeared on SMPS Boston’s website.
by Danielle Diforio
2020 is a great time to reflect on the past decade and look ahead to the decade to come. Change is the only constant we can be sure of. We will need to constantly adapt to new technologies and norms, as will your firm’s website, which often acts as the hub of all marketing efforts.
That said, here are my top five ways to incrementally improve your firm’s website for 2020:
- Calls to Action (CTAs)
- Impact Statements
- Hover States & On-Page Animation
- More Engaging About and Career Pages
- Long Scrolling Pages & Sticky Navigation
Calls to Action (CTAs)
Product websites have mastered the art of impactful calls to action, but many professional service firms still struggle with how to effectively apply calls to action to their websites.
Checklist for Adding Website CTAs:
- Identify the page(s) that warrant a CTA (such as pages with high visitation or unique or targeted content)
- Consider where the reader is in their visitor journey
- Determine the desired next action you want the visitor to take
- Craft a clear message for the call to action
- Implement the call to action so it will be seen at the appropriate location (top, bottom, sidebar, etc) and time (always on-page, timed delay, on scroll, on exit, etc.)
Call to Action Examples:
Obermayer’s blog posts have a variety of CTAs to help increase engagement:
- Subscribe to the blog
- Optional, sticky call to action with a customizable message on each blog post
- Share post via social media or email
- About the Author block including links to the author’s bio, LinkedIn profile, and to read more posts by that author
- Read Next for other related articles
The sticky sidebar CTA is the most noticeable since it stays on the screen as you scroll down the page. Obermayer typically utilizes these CTAs to encourage site visitors to contact a specific attorney who is an expert on the blog post’s topic.
Calls to action can also appear as pop-ups with a variety of trigger options (pages visited, time on site, etc.). Pop-up and sticky CTAs have higher click-through rates because they are more noticeable, but there is a fine line between mutually beneficial and annoying CTAs. Always add CTAs to your site thoughtfully.
If you want a prospective client to read one thing on a webpage, what should it be? Impact statements are generally large text near the top of a webpage that succinctly summarizes what the page is about in a client-facing manner.
Service Page Example: Immediately below the main page title, “Data Management & Visualization,” the impact statement is set in a large point size for easy skimming on any device.
Project Page Example: Tighe & Bond’s project pages include the project name and quick project highlights at the top of the page, but the marketing-driven impact statement, “Making Great Water Even Better,” appears at the start of the body copy.
Bio Page Quote Example: Impact statements can also take the form of personal quotes.
Hover States & On-Page Animation
Many advances have been made in the way sites appear as you interact with them. Often, subtle changes to text, photos, and graphics occur as you mouse-over or scroll.
Hover States: Hover states help reinforce what is and is not clickable on a webpage. Text links often change color, are underlined or marked in another fashion when you roll over them. Clickable images often zoom in or have a color overlay added or removed. See examples of hover states on LPA|A and Environmental Partners.
On-Page Animation: When you first navigate to a page or scroll down a page, you may see text and images fly in. When used judiciously it can make a site feel very modern, but too much motion can slow down sites and give some visitors feel motion-sick. See a subtle example on Juna’s team landing page when you first scroll down the page.
More Engaging About and Career Pages
Dry, text-only About and Career pages are out. In a competitive marketplace, firms are revamping their sites’ About and Career pages to be more engaging. The first step is to revise the text to be scannable and more interesting by adding headlines, call-outs, and quotes. The next second step is to add more visual content such as videos, photos, icons, stats, and timelines.
About & Career Page Examples:
- Sanborn Head About Page and Careers Pages
- LPA|A About Pages
- Edelstein About Page and Careers Pages
- DRA About Page
- Kennedy Jenks Careers Pages
Long Scrolling Pages & Sticky Navigation
Remember when all the most important information needed to remain “above-the-fold” in web design? That is a distant memory. As we consume more content from our phones and tablets, scrolling has become a reflex-action. Long scrolling pages are not new, but they are becoming more popular again fueled by our scroll-happy habits and improvements in site navigation. Sticky sitewide navigation and sticky on-page jump navigation significantly increase the usability of long scrolling pages by making it easy to jump to other pages of the site without scrolling back to the top or to another section of the current page.
Horizontal Sticky Main Navigation Example: Site visitors can easily jump between pages in the site’s main navigation which sticks to the top of the browser window.
Sticky On-Page Navigation Example: The long scroll on the content-heavy product pages makes these pages more attractive and easier to process. For anyone looking for specific content on the page, the on-page navigation sticks to the top of the browser window to make it easy to jump down the page to the desired section of information.
For other site improvement ideas, see the 2019 site suggestion list including advanced site search, GDPR, web accessibility and more.
Danielle Diforio is accounts manager at Clockwork Design Group.