Menu Search
Jump to the content X X
The Smashing Book #5

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. new Smashing Book 5 features smart responsive design techniques and 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 7
Sports Illustrated’s website is part of CNN.com8. 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 Illustrated9

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 Magazine12
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 Magazine13

Fox Sports14
The Fox Sports website is part of the MSN15 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 Sports16

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


CBS Sports22
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 Sports23

Yahoo! Sports24
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 Sports25

Onion Sports Network26
Satirical news website The Onion27 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 Network28

Golf Digest29
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 Digest30

Teams Link

Baltimore Ravens31
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 Eagles32
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 Eagles33

Seattle Seahawks34
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 Seahawks35

Oklahoma City Thunder36
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 Thunder37

Wellington Lions38
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 Lions39

Atlanta Falcons40
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 Falcons41

Athletes Link

Kobe Bryant 42
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 Bryant43

David Beckham44
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 Beckham45

Teddy Baldock46
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 Baldock47

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 0854
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 0855

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 60
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 Basketball61

Nike Soccer62
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 Soccer63

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 2366
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 2367

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 Sports72
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 Sports73


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
  58. 58
  59. 59
  60. 60
  61. 61
  62. 62
  63. 63
  64. 64
  65. 65
  66. 66
  67. 67
  68. 68
  69. 69
  70. 70
  71. 71
  72. 72
  73. 73
SmashingConf Oxford

Hold on tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Oxford, on March 15—16, with smart design patterns and front-end techniques.

↑ 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

    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

    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

    GO EAGLES! :)

  9. 9

    Very nice websites

  10. 10

    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
  21. 21
  22. 22

    what an interesting list…..I really love Kobe Bryant and David Beckham website.

  23. 23

    Hello, I understand that you were writing an article about sport websites in the USA, but I think that a few examples from Europ would be a fill up to the article. If you would go to this link or this one,0.html , You’ll see that the design style for sport webpages is a bit diffrent in Europ. Have a nice day ;)

  24. 24

    Didier Drogba’s website is cool too !

  25. 25

    Christopher Anderton

    April 5, 2009 12:54 am

    Well. I think most of the sport sites (US mostly) listed are a nightmare. Too much content or to “flashy” and have bad typography. But that’s me.

  26. 26

    Thanks !

  27. 27

    One interesting thing to note is how many really high-profile individual athletes have really poor personal websites. Kobe Bryant’s is a favourite of mine especially when you go and look at Tiger Woods’ or Roger Federer’s sites which are horrendous at best.

    I’m a professional athlete myself and a webdesigner and it pains me to see how not many athletes have really seen the value of the web for more direct customer marketing potential.

    Anyhow, there’s some more discussion about this and a showcase gallery of just individual athletes’ sites I made here –

  28. 28

    Also check out an alternative sports site from the standard football, basketball etc. link

  29. 29

    You left out Yahoo! Eurosport…

    Their live feeds are amazing, and beautiful.

  30. 30

↑ Back to top