NBA Playoffs bracket: How’s it work?
Here’s a quick rundown of how my NBA Playoffs bracket automatically updates itself, and how it is designed.
First, my little PHP script goes and checks out the NBA standings over at ESPN.com. It grabs the team name (Detroit Pistons,) team slug (det,) that team’s conference seed, wins and losses. So then I make a list on the Playoffs page of all 15 teams from each conference. They are listed according to the order they appear in the standings. Of course this page is made up of 100% valid XHTML 1.0 Strict.
Using the wonderness of CSS, I use a background image to display the bracket/tree, and then absolutely position each list item in the correct spot. Only the top 8 teams in each conference are displayed, the rest are hidden from view but are still there if you View Source. I then replace the text of each team with their logo (again with CSS.) All of this happens automatically, and not by me, by the page itself.
There are two links at the bottom: One to show/hide the Seedings for the playoff tree, and one to show/hide each team’s record. This is done with quick and easy Javascript.
The comments link directs people to the associated WordPress post where they can leave a comment.
Finally, my latest addition shows the progress of the current NBA season. This is done by PHP, which divides the number of days into the season we are by the total number of days in the season as a whole (somewhere within Oct. 29, 2007 and Apr. 17, 2008.) I made a little chart to display in the background to show some benchmarks/milestones (the correct term escapes me right now.) The graph expands thanks to a CSS “width:” property.
And that’s it. Absolute magic, I know. When the playoffs start, I’ll be adding wins and advancing the logos along the playoff tree just like I’ve done ever since 2004. And I’m always looking for suggestions!
In answer to your question to Jason regarding content, having the individual teams linked to their sites at ESPN would be great or even the series matchups in the bracket linked to the ESPN site for that series. I love the bracket though and am glad to find it so easily – first result in google.
Hey, have you ever thought of making a Hockey Bracket?
@sd: I did have the logos linked to their ESPN pages during the season, I’ll add that back in. I’m not sure why I took that out!
@Scott: I have thought of doing other brackets, but I want to be careful about going too far or spreading myself out with this. We’ll see how it goes but I appreciate all the suggestions and comments!
I think that you should keep this bracket but also keep a stating bracket. People like me like to start from the begining, and they might also write a different way than just arrows. So you should keep this bracket, but also have a starting bracket with just the teams that started.
I love your bracket the best one i’ve found simple and yet so awesome!
I wish I had PC bracket making skills like you!
I love the bracket on your site – best one I’ve found. Will you add a symbol (question mark or something) with scroll over to identify date/time/location?
reference post #36. I meant a symbol to indicate the next game in the series with scroll over to indicate date/time/location.
your bracket is awesome. the numbers are MUCH better! great job!!
the numbers versus the arrows look a lot better and save the next question of which games were won.
@Mike: A starting bracket is a good idea. I will consider adding that in future brackets. Thanks so much for the suggestion.
@lakerlover, Craig and nick: Thanks a lot for the comments. I appreciate it!
@matt: I will consider doing something for this. What do you think is best? I’m thinking of maybe a grey number (ie. number 2 for game 2) in line with the team that is hosting the next game. Would that make sense? It might not. What do you think? I wn tto keep things as simple and uncluttered as possible.
The numbers are so much better! so much, it makes sense too! Great Job Dude!
Forgot to mention that the link to the score for the game with the number …..ingenius… actually it just should be like that, ya know?
Regarding the numbers/arrows:
I think the numbers are uglier, personally, but I think it’s more of a necessary evil than anything else. It certainly helps information-wise, and that’s what the page is for, no? Sacrificing aesthetics is just necessary sometimes, I suppose. :(
These numbers are much better than just having the arrows. You are able to see how the momentum was carried throughtout the games. Thanks
Hey Brad, I’m the same Mike as the one who “Posted April 24, 2008 at 8:56 pm”. There seems to be another Mike here so I just want you to know you are speaking with two different people :)
Well, I just wanted to leave another reply about the numbers instead of the arrows thing.
I think it was a lot better with the arrows. Everything was a lot more clean and it looked simple. The numbers seem to clog it up and take away from that “clean look” it had before.
Well, that’s just my opinion though.
I think you should keep the numbers, since it is useful data for the bracket, but have it as a “Show/Hide” feature like you do for the seedings. That way you can keep it with arrows by default for the “clean look” and then a simple click at the bottom will show the “more detailed look” with the numbers for those who need it.
I think that would give it the best of both worlds.
Yes, I think it is much better way to have it. Because if you want to just glance at it you dont have to put your curser on the arrow to see what game they won or not. Thanks, very nice job!!
Love the bracket. Looks great with the game numbers!
I use IE6 and was offended when you called it ancient (ok, no I wasn’t). I’m a web developer and I find most users still prefer IE6 than IE7 for many reasons. As a developer, I have to fix alot of cross-browser issues (which gets very annoying). Anyway, the PNGs are basically grey as you probably know. The answer to that transparency problem is here:
http://support.microsoft.com/kb/294714
A simple style attribute to those images will fix that problem in IE6.
Enjoy these awesome playoffs!
The numbered wins shown on the brackets is a great idea. Two thumbs up!
hey love the website but i prefer the green arrows
I like the new numbers. Now if there was just a way to indicate whther the game as at Home or Away.
Just realized about the link affiliated with the numbers. Great job! You’ve got it all figured it out. ;)
I googled “NBA bracket 2008 play-offs” and yours was the first to come up — I can see why. Very impressive – intuitive and easy to figure out. Love the graphics and the numbers.
Well done!!!!!!!!!!
Great website! I’m surprised nba.com doesn’t have something like this.
About the arrows: Why make a decision? Just do both. Have arrows with numbers in them.
Thanks for all the great comments, everyone. I’ll try to respond to everyone…
@lakerlover, Juan, Bob Webber, Ben Shoemaker, Mike, eric, Parker, and Marisa: Thank you for the compliments. I’m glad you’re enjoying the bracket!
@Jesse Gunsch: I agree that is not as clean looking as the arrows. It’s more of an experiment at this point than anything. I’m glad I’m getting a lot of feedback and perhaps I can find a slicker way of displaying wins.
@Mike: I agree a show/hide might be useful for the numbers. However, that’s another click that people have to make. Maybe it’s not a big deal, though. I will definitely consider it.
@Marco: I am definitely familiar with IE6, IE7 (and the upcoming IE8.) I am a web developer myself and the reason people prefer IE6 over IE7 has mostly to do with the browser interface itself, or they are using it to browse to websites that don’t support standards, which would work much better in a more advanced browser. I know all about the PNG fixes for IE6, but I’m tired of putting in the extra effort to support a browser that should have been retired long ago. Especially when an upgrade has been available for years in the form of IE7 (not to mention even better browsers like Firefox, Safari or Opera.) I appreciate the tip but unfortunately support for IE6 will be tentative at best.
@quan: Your suggestion is interesting. Maybe I can make up an arrow or some sort of sleeker looking icon that shows the number as well. Or perhaps hovering over an arrow will display the number. Looks like I’ve got some work to do!
Love the green numbers! I follow the Cleveland Cavaliers, so I was clear on their games, but the other matchups did get confusing when reading the agate type in the newspaper. I’ve very grateful for your site!
I like the numbers!!!!!
Maybe you can add the times/dates of the next games?? It would be helpful to have all the info on one page rather than having to go onto another website. THanks!!!
Brad,
I’m 7 yrs old and I check your bracket every day. I think it is cool. I like the numbers better than the arrows. I think the Pistons are going to win.
Stephen
This site is great and easy to understand. I like the numbers that you put up instead of the arrows. The new way is more informative then the arrows.
Keep up the good work!