CFCA gets an overhaul with a SportsEngine homepage makeover
SportsEngine's homepage makeovers kicked off a couple of weeks ago when we selected Colorado Junior Crew as our first winner of the contest.
Our team gave Colorado Junior Crew's homepage a tune-up in design and usability. One happy organization later, and we are 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.
FOLLOW ALONG
Check out our step-by-step transformation and learn some tips along the way to give your own 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 categories of content are located in one space and simply placed under the correct tab for easier navigation and a cleaner look.
Learn how to implement a tab element
News Article Layout
BEFORE:
When adding news articles to a news aggregator, a common mistake webmasters make is adding all the content of the article 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 for easy plug-in of images and a side-bar aggregator that lists similar articles for your visitors to read next. This provides a better experience for readers and is more appealing visually.
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:
By adding a “Quick Links” section to the top of the page (we used the Call to Action page element), visitors can quickly access important information. 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. Prior to the makeover, these “Club Notes” consisted of a single text box page element that was continually added to. We now have them each listed as a separate news article so they are easier to find.
Social Media
BEFORE:
Similar to news article creation, there are a lot of ways for organizations to promote their social media accounts on their websites. Using code elements, photos and page elements, social media references can be placed anywhere on a site. At first, Chattanooga FC Academy was using a combination of elements and manually plugging in URLs that directed out 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 makes it possible for automatic updates to take place while the formatting stays intact.
Learn how to use the social media page elements
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 address, directions, and status of the playing field. A finishing touch in this step included placing them all in a single layout container.
Learn about the weather page element
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 particular area of importance
-
Can add personal photos and messages that are most engaging for audience
BEST PRACTICES:
-
Use the one-third/one-third/one-third layout container
-
Use 2:1 ratio for the CTA boxes
Learn how to add CTAs to your site
LEARN MORE
Want to read about Colorado Junior Crew's homepage makeover?
About Andie Ostrowski
Andie Ostrowski is a content contributor for NBC Sports Next's GoMotion brand. She graduated with a marketing degree from the University of North Dakota, where she played Division 1 soccer and served on the Student-Athlete Advisory Committee. Today, Andie volunteers as a student mentor in conjunction with the Pancratz Business School Mentor Program.
