Look back at how CFCA's homepage makeover with a SportsEngine helped promote their organization.
When SportsEngine's homepage makeovers kicked off in 2016, we selected Colorado Junior Crew as our first contest winner.
Our team gave Colorado Junior Crew's homepage a tune-up in design and usability. One happy organization later, we were excited to announce Chattanooga FC Academy, out of Chattanooga, Tennessee as our second winner of the homepage makeover.
Chattanooga FC Academy already had professional-looking graphics for its background and banner, in addition to a lot of valuable content for its readers to consume right on the homepage. Our team jumped in to enhance the academy's homepage layout and functionality.
Check out our step-by-step transformation and learn some tips to give your website a little more star power before the season hits.
Tab Element
Before:
Originally, CFCA had multiple sections on its homepage that hosted a pool of articles ranging from player spotlight stories to coaching resources. This had the potential of making it difficult for visitors to find exactly what piece of content they were looking for.
After:
By implementing a tab element, all different content categories are located in one space and simply placed under the correct tab for more straightforward navigation and a cleaner look.
Learn how to implement a tab element
News Article Layout
Before:
When adding new articles to a news aggregator, a common mistake webmasters make is adding all the article's content to the preview text field (see sidebar). Doing this limits flexibility with the article layout.
After:
An easier way to do this is to use a news article template that allows easy plug-ins of images and a sidebar aggregator that lists similar articles for your visitors to read next. This provides a better experience for readers and is more visually appealing.
Learn how to add a news article to your website
Quick Links
Before:
When looking through Chattanooga FC Academy's homepage, we noticed a lot of important items that were sometimes in hidden places, making it hard for people to find exactly what they were looking for.
After:
Visitors can quickly access important information by adding a "Quick Links" section to the top of the page (we used the Call to Action page element). A specific link we added to the "Quick Links" was "Club Notes." This link references all of the previous emails that have been sent organization-wide. Before the makeover, these "Club Notes" consisted of a single text box page element that was continually added. We now have them each listed as separate news articles, so they are easier to find.
Social Media
Before:
Similar to news article creation, there are many ways for organizations to promote their social media accounts on their websites. Social media references can be placed anywhere on a site using code elements, photos, and page elements. At first, Chattanooga FC Academy used a combination of elements and manually plugged in URLs that directed to their social accounts.
After:
A couple of best practices to follow when it comes to social media are:
1. Entering your social account information in one location, the admin control panel. This will allow the info to reflect throughout the entire site.
2. Using the Social Media Links and Feed Reader page elements for social accounts is easier than embedding code into the code element. This allows automatic updates to take place while the formatting stays intact.
Learn how to share your website content with your social media accounts
Weather & Venue
Weather and venue status sections are important for many organizations, especially if the sport is typically played outdoors. Chattanooga FC Academy originally had multiple custom weather elements, including the current weather, 7-day forecast, and Doppler radar, all in code form. It also had a venue section that minimally listed the field name and current status.
Benefits:
First, by using our weather page element, we added a single source of weather instead of embedding code from multiple weather reports. We also added a venue element for each facility, complete with the address, directions, and playing field status. A finishing touch in this step included placing them all in a single layout container.
Learn about the weather page element
Learn how to embed google maps into your website
The last two steps we took in the Chattanooga FC Academy makeover are repeats from our last homepage makeover but important enough to reiterate. Below you will find a couple of bullets as reminders about why these are both significant game changers for your website:
Connected Sponsor Footer Bar
Benefits:
-
Saves time by only needing to update sponsors in a single place
-
Gives your sponsors more space to be highlighted
Best Practices:
-
Use the SportsEngine template and simply build to your liking
-
Use vector images over bitmap for higher quality
-
For even more flexibility in design, use a text box for a heading and add the link to your sponsor's website. We recommend images in separate page elements
Learn how to connect your sponsor footer bar throughout your website
Call to Action Upgrade
Benefits:
-
Helps direct visitors to a particular area of importance
-
Can add personal photos and messages that are most engaging for the audience
Best Practices:
-
Use the one-third/one-third/one-third layout container
-
Use a 2:1 ratio for the CTA boxes
