Menu Search
Jump to the content X X
Smashing Conf San Francisco

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

Showcase Of Beautiful Sports Websites

We recently showcased beautiful websites from the fashion industry1, and in response to reader requests, we’ll do the same thing here for sports websites. This article showcases the most beautiful website designs from the North American sports industry, including ones for news, teams and leagues, sports apparel and more.

As in any industry, sports websites have their own trends, as you will see below. However, because the websites showcased here fall into a number of different categories and serve different purposes, not all of the trends we discuss will be relevant or applicable to all types of sports websites.

1. Large Photos
Many of the best sports websites include a lot of images and photos, and many use large photos in the background or a featured area. News websites obviously include a lot of smaller photos to accompany current stories, but team websites and sports apparel websites in particular often rely on large photos as a prominent part of their design.

2. Colorful
Naturally, team and league websites are typically very colorful and highlight their official colors. Apparel and product websites are also frequently colorful.

3. News Area
Even websites that aren’t news-focused, such as team and league websites and those of individual athletes, typically contain recent news items on the home page. As more sports fans turn to websites to get their news and stay up to date on their favorite players and teams, news and blog sections provide an opportunity for easy communication with few barriers.

4. Featured Content Area
News websites of course have certain sections in their layout for headline news, but even team and league websites now provide content in feature areas of the website. In many cases, this featured content area works in conjunction with the news headlines mentioned in the previous point. Most of the featured content sections have a slider or similar effect that moves readers from one featured item to the next. Most also allow the user to override the slideshow effect and control what content is shown in the featured area.

5. Network
Many of the leading sports news websites are part of larger networks. You will see many of them pointed out in the news section. Sometimes the sports section of the network is on its own domain, other times it is part of the main news website’s domain.

Showcase Link

Let’s look at a number of exemplary websites from the sports industry in several different categories.

News Link

The ESPN redesign a few months ago drew a lot of attention from sports fans. The front page features less content than some other major news websites and aims to improve the user experience with improved navigation to different sections of the website.


NBC Sports4
The NBC Sports website is part of MSNBC.com5, and it shares a similar look to the MSNBC front page in terms of layout and style. In this case, the familiar MSNBC header is replaced, but the side navigation and content area are much the same.

NBC Sports6

Sports Illustrated
Sports Illustrated’s website is part of CNN.com7. Like many sports news websites, Sports Illustrated has a scoreboard section at the very top of the page for games in progress or recently finished. SI uses a grid-based layout to present information from many different sports and leagues on its front page.

Sports Illustrated

TSN, Canada’s sports network, has a typical news-style layout. Naturally, much of the content features ice hockey news and information. Content for various sports and leagues is available via the main navigation at the top of the page.


ESPN the Magazine
ESPN the Magazine has it’s own website that is part of the larger ESPN website. The home page includes links to recent stories from the magazine, and the content area is a bit cleaner in design than many news websites.

ESPN the Magazine

Fox Sports10
The Fox Sports website is part of the MSN11 network. The website includes a lot of content but does a pretty good job of keeping it organized. A drop-down navigation menu includes links to many specific pages for each sport or league.

Fox Sports12

Deadspin, the sports arm of the Gawker Network14, has a design that will look familiar to visitors of the other Gawker websites, such as Gizmodo15 and Lifehacker16. Featured items are shown at the very top of the page, and the main content area includes excerpts to additional items.


CBS Sports18
The CBS Sports front page includes information on a variety of different sports and leagues. The design uses a light color scheme of blues and white.

CBS Sports19

Yahoo! Sports20
Yahoo! Sports has a news-style layout, with navigation to sports and leagues at the top of the page. Unlike on some other sports news websites, the Yahoo! scoreboard is located in the sidebar rather than at the top of the page.

Yahoo Sports21

Onion Sports Network22
Satirical news website The Onion23 uses the Onion Sports Network for all of its sports stories. The Sports Network’s front page has a grid-based layout, like The Onion’s main front page, but with much less content. Navigation above the content leads to news on particular sports, as well as to other sections of The Onion.

Onion Sports Network24

Golf Digest25
Golf Digest Magazine has a news-style layout for its home page. The website includes information from the magazine, as well as golf news and blogs from experts.

Golf Digest26

Teams Link

Baltimore Ravens27
The Baltimore Ravens of the NFL have a large background image of a sky scene that works with the team’s purple and black color scheme. The home page includes a large featured content area that slides from one item to the next, and the user can manually click to slide to other content.

Baltimore Ravens

Philadelphia Eagles28
The Philadelphia Eagles of the NFL have a similar featured content area with different execution. The Eagles’ design has a dark-green splatter on a lighter-green background.

Philadelphia Eagles29

Seattle Seahawks30
The Seattle Seahawks of the NFL use a background image of the football stadium that includes a little bit of the city’s skyline as well. The photo has a blue tint to match the blue and green color scheme. Unlike many of these other team websites, the main navigation menu is not a drop-down.

Seattle Seahawks31

Oklahoma City Thunder32
The Oklahoma City Thunder of the NBA has a website that stands out from the other websites of NBA teams. The layout is not typical and features a large photo corresponding to a recent headline. The bottom of the page includes navigation to team information and news.

Oklahoma City Thunder33

Wellington Lions34
The Wellington Lions, a rugby team from New Zealand, have a dark website with a rough, textured background that resembles a torn-up field. The home page includes a slideshow of photos of the team.

Wellington Lions35

Atlanta Falcons36
The Atlanta Falcons of the NFL have a website that has a red background with black and dark gray throughout. Like other team websites, this one has a featured content area with large photos and links to current news and items of interest.

Atlanta Falcons37

Athletes Link

Kobe Bryant
Kobe Bryant’s personal website features promotion of his products, including those from Nike. The home page has a blog-style news section with info on Kobe and the Lakers. The website also includes forums and a members-only section.

Kobe Bryant

David Beckham38
David Beckham’s personal website has a dark design. The home page includes a large photo of David and recent news items. The news items contain excerpts from his blog posts as well as information relevant to his career.

David Beckham39

Teddy Baldock40
Teddy Baldock, a boxing champion from the late 1920s, is profiled on a website set up by his grandson as a tribute. The website includes information about Baldock’s career and life. The design has a dark background, some texture, and photos from his career.

Teddy Baldock41

Sports and Leagues Link

The front page has a news-style layout featuring content on all aspects of the NFL. The website features the league’s familiar red, white and blue color scheme.


UEFA (European football association) has a news-style website that includes plenty of content on the front page. At the top are links to versions in several different languages.


The FIFA website has a featured area for the most recent football news and headlines. It includes content on the sport around the world, and the front page has interactive content, such as polls and reader comments.


Xperience 08
Extreme Sports Festival Xperience 08 has a nice grungy design that has been showcased in a number of Web design galleries. The design features a textured paper background. From the home page, you can access information on the various sports that are part of the festival.

Xperience 08

Apparel and Equipment Link

You would expect a design with some edge from a company that focuses on snowboarding and skateboarding. Burton’s website delivers by sporting a number of different large background photos (refresh the home page to cycle through them).


The Nike home page serves as a gateway to divisions of the company, such as Nike Basketball and Nike Soccer (also showcased here). It also links to product information and the online store. The home page features a background photo of a football field.


Nike Basketball
Nike Basketball’s website has a huge background image of a wood floor from a basketball court, and a large photo of Kobe Bryant is currently featured on the home page. The website, of course, provides information on the company’s products, but it also includes information on the players who Nike sponsors, as well as training videos that teach you signature moves of some of the NBA’s best players.

Nike Basketball

Nike Soccer
Like the Nike Basketball website, the Nike Soccer website also features relevant products, information on players who Nike sponsors and training content, including videos. The design stays in line with the other websites in Nike’s network.

Nike Soccer

The Adidas home page has a bunch of different photos. Hover over one of them and it expands, revealing navigational options relevant to it. Links to the main product lines are available in the navigation menu at the top of the page.


Jumpman 23
Jumpman 23, Michael Jordan’s division of Nike, has a large random image in the center of the design. The user can click on arrows to slide to the next or previous photo. Navigation at the bottom of the screen expands on hover.

Jumpman 23

Sports apparel company Reebok shows a large photo on its website. Navigation to specific collections and product lines is at the top of the page and to the left. The navigation at the top brings up multiple options on hover that show photos instead of text to indicate where the links point to.


Products Link

The home page of sports drink Gatorade has a dark background, with product photos that cycle from one to the next. The user can control the slider, and, on hover, each product takes on color. Clicking on the products leads to pages with more information.


2K Sports56
Video-game maker 2K Sports has a wood background in its design. The home page has a large video area that currently promotes a new baseball video game. The main navigation includes drop-down links to each of 2K Sports’ current games, as well as all kinds of content for video-game lovers, such as tournament events, forums and a store.

2K Sports57


Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52
  53. 53
  54. 54
  55. 55
  56. 56
  57. 57

↑ Back to top Tweet itShare on Facebook


Steven Snell is a Web designer and blogger. In addition to maintaining his own blog and writing for a number of other top design blogs, he also manages an online shop that offers premium graphic design resources.

  1. 1

    samuelson pl

    April 4, 2009 6:50 am

    Amazing stuff!!! Thanks. Samuelson pl

  2. 2

    Nice resourceful collection, good inspiration for future sites.

  3. 3

    Great to see.. I just got commissioned to do a sports site for a tennis club.. so this gives me some ideas

  4. 4

    Felipe Caroé

    April 4, 2009 7:18 am

    Praise be the lord I never have to make one :P

  5. 5

    Nice showcase! Love some of these websites, Jumpman 23 always has something new an interesting on it!

  6. 6

    Nice Round-Up… Some more information can be added.. Still a quality showcase. Thanks Steven for sharing.

    DKumar M.

  7. 7

    David Hutchison

    April 4, 2009 8:01 am

    As a hockey fan I’m biased, but I think the imagery and layout of is fantastic.

  8. 8

    Travis Lehman

    April 4, 2009 8:11 am

    GO EAGLES! :)

  9. 9

    Very nice websites

  10. 10

    Brian Temecula

    April 4, 2009 8:21 am

    I don’t really like sports, but I do notice that sports websites tend to be really nice, and I think a good reason for that is that they have lots of content, and great photos to incorporate into their site. It’s hard to have a website that is worth anything without those two things.

  11. 11

    Burton and Gatorade get my votes! Great collection though

  12. 12

    I guess u could also check out ESPN Brazil website. It’s pretty good, have a brand new IA and it’s easy to use, also shows a great design – look for some inside pages with a big photo bg. The work was made by one agency of Isobar’s group.

  13. 13

    Glad TSN Made it.

    Does anyone else hate navigating Nike sites?

    Oh yeah, and should be on the list, ESPECIALLY with now.

  14. 14

    One I like is the CFL’s Calgary Stampeders: – Its original, against the grain, great photography, etc…

  15. 15

    Great article as always, as both a Smashing reader and sports nut this was a great saturday treat.

    I would have to disagree with ESPN being on there. It looks nice, and the home page is nicely layed out, but IMO the do an awful job organizing the content and having an easy to use navigation. If you try to use the site frequently, you will most likely find it is simply not that usable.

    CBS sports on the other hand seems to organize everything much better. I find myself using their site more than any other sports site.

    As a Baltimore Ravens season ticketholder, I loved seeing them make the list. I have always thought the graphics people do a great job, and the theme of the website carries over into other marketing material and on to the Jumbotron on gameday.

  16. 16

    For once I have to disagree with some of the contents published here. Looking at the “News” section there’s really only two or three designs which is pleasant to look at, and also user-friendly and those would be ESPN, Onion Sports Network and maybe ESPN the Magazine. The others just tries to fill the first page with all the content that the entire site has to offer, which only makes things all bloated out and really terrible to look at and even worse to actually use.

    Other than that I must say it was a quite nice roundup, and it’s always interesting to see the differences between sites of different categories (sports, news, design etc.).

  17. 17

    really useful stuff… thanks a lot…

  18. 18

    Good list, although should really be on this list after their recent redesign.

  19. 19

    The Thunder is the best one to me. They’re all overloaded with way too much information and the simplicity of their site with the single, eye -catching image, feels like the best approach.

  20. 20

↑ Back to top