Mobile SitesThe rapid rise in mobile and social media radically altered the game for college athletics websites. Today, responsive sites deliver a consistent user experience regardless of device. Sites integrate social media alongside traditional long-form content.

We analyzed the design of 129 official websites from across the FBS. These 12 stood out.

 

Armyhttp://goarmywestpoint.com/

Army Athletics’ official site manages to present a host of information without appearing cluttered. The tight color palette of black, gold and gray works to unify the overall presentation. A lack of external advertising, save for a small row at the bottom of the site, contributes to the clean look.

Parallax scrolling effects give the site a dynamic feel. Dropdown menus are clean and legible. The mobile version of the site continues the organized, almost spare look. Overall, a no-nonsense aesthetic perfectly aligned with the brand’s DNA.

. . . . . . . . . . . . . . .

Colorado Statehttp://csurams.com/

The official site for the Rams doesn’t fall into the “stack of boxes” look that afflicts many desktop site designs. The sticky, main navigation menu sports a dynamic center with the circular Colorado State logo downsizing as the user scrolls.

A stylized mountain motif mirrors the classic Colorado license plate. CSU’s mobile design employs a large carousel of lead stories right at the top.

. . . . . . . . . . . . . . .

Georgiahttps://georgiadogs.com/

With full-width photos dominating the design, Georgia’s official site relies heavily on the quality of the lead image rotation. The sticky main navigation menu is translucent and resides prominently at the top. Side navigation buttons do intrude at times on the layout.

The lead rotation can be switched to a multi-visual layout with the click of an icon. One caveat? Georgia’s site actually works better at 75% zoom in the browser.

. . . . . . . . . . . . . . .

Illinoishttp://fightingillini.com/

A long-time leader in web design, Illinois Athletics’ official site shines with a clean, well-organized layout and smart details. The Illini enjoy the option of a grid presentation in the lead rotation. Headline text remains legible with drop shadows providing contrast against background images.

Sticky menus are positioned at the top and bottom of the site with ready navigation and quick-link icons. Overall, consistently-sized elements aligning on horizontal lines bring a calm order to the layout.

. . . . . . . . . . . . . . .

Marylandhttp://www.umterps.com/

Maryland’s ubiquitous flag motif unites the Terps’ official site layout. The design feels relatively expansive in the browser window with the absence of any sticky menus or intruding elements. The schedule carousel is a highlight with the central event larger.

There’s plenty of “designed” space integrated into the layout allowing Maryland to deliver high-quality feature graphics. Dropdown menus are high-contrast, extremely legible and feel crisply responsive.

. . . . . . . . . . . . . . .

NC Statehttp://gopack.com/

NC State maintains one of the cleanest official sites in college athletics. External advertising is virtually nil. The classic wolf logo at the top converts to the traditional NC State logo on scroll. Menus are large and legible with plenty of white space.

This site doesn’t feel like the designers tried to cram everything on the front page. Sticky bars top and bottom do eat into the viewing area on smaller screens. The mobile site has a similar clean and well-spaced design.

. . . . . . . . . . . . . . .

Oklahoma Statehttp://okstate.com/

The web home of the Cowboys doesn’t look or operate like any other college site out there. A full, lead story image forms the background of the site while headline link, logo and main menu float in the bottom third of the screen.

Here, the menu rises up on mouseover. The layout is clean and crisp as users scroll down. Elements aren’t mashed together and there’s plenty of room for content to breathe.

. . . . . . . . . . . . . . .

Oregon Statehttp://osubeavers.com/

The second OSU on our list also sports a unique look. Oregon State resides in the “Best College Town in the Pac-12” and the branding line is right there, front and center. It’s never obscured by lead stories.

Three “action” dropdown menus for tickets, store and development encourage fans to immediately support the Beavers. The main menu mirrors the mobile site icon. Parallax scrolling effects complement this dynamic design.

. . . . . . . . . . . . . . .

Syracusehttps://cuse.com/

Few desktop sites adopting a mobile-first look pull it off without appearing disjointed. Syracuse fills the screen with a clean top bar and lead story images arranged in a concise block.

Uniquely, the site’s main menu slides in from the side with expand and scroll functions as you explore deeper. Syracuse utilizes icons instead of text for standard sport links like roster, schedule and headlines. We should also highlight the site’s concise URL. Count ’em, just four letters.

. . . . . . . . . . . . . . .

Texashttps://texassports.com/

The Longhorns’ website has a professional, high-tech feel. White and light gray dominate the layout with touches of burnt orange indicating important elements. The main menu has a trick burnt orange line that extends across the page right on dropdown. Individual links pop with reversed backgrounds. The unique social media display floats above a faint Longhorn logo. Click a platform and content shifts. Pretty slick.

. . . . . . . . . . . . . . .

Washingtonhttp://gohuskies.com/

One of the first programs in college athletics to prioritize overall brand over latest headlines, UW’s site has always been striking. The latest design presents recruiting-worthy visuals in the lead rotation. Individual features and marketing initiatives are arranged in a clear hierarchy below. External advertising is confined to a single gray strip in the footer.

. . . . . . . . . . . . . . .

Wisconsinhttp://uwbadgers.com/

Are you noting a trend here? Wisconsin’s site is clean with fine detailing. Video features are integrated between marketing visuals and program branding. The Badgers’ site feels crisply responsive with plenty of fast rollover transitions. Overall, the site presents layers of information without overloading the user. External advertising is integrated into the design.

. . . . . . . . . . . . . . .

Thanks to the athletics staff working hard behind the scenes to connect fans with the teams they love.

Jason R. Matheson