Building a poker template
This is the first article in a series of niche templates I’m building. You can have a look at the finished template before we start if you want.
About the niche
Today’s topic is Poker sites. Poker, and card games overall, are hot these days and they are all over news. There are TV commercials for big international gambling sites even here in Sweden. Being in that kind of spotlight and receiving massive traffic must make those sites better than the rest, don’t you think? Let’s google for “poker” and have a look at the top 10 results (23 Jan 2006).
| # | Site name | Doctype | Validation errors | Layout method |
|---|---|---|---|---|
| 1 | Pokerroom.com | Transitional | 22 errors | Tables |
| 2 | Poker.com | Strict | 62 errors | CSS |
| 3 | Pokerstars.com | None | 48 errors | Tables |
| 4 | Pokerpages.com | None | 336 errors | Tables |
| 5 | Pagat.com Poker | None | 52 errors* | None |
| 6 | Worldpokertour.com | Transitional | 56 errors | Tables |
| 7 | Pacificpoker.com | None | 72 errors | Tables |
| 8 | Partypoker.com | Transitional | 22 errors* | CSS |
| 9 | Paradisepoker.com | Transitional | 1 error | CSS |
| 10 | Homepoker.com | Broken | 146 errors | Tables |
*) These sites required that we set a character set manually to even see how many errors there were.
What do we see up there? Poker.com and Paradisepoker.com do pretty well. Poker.com uses Strict doctype which means that their validation is stricter than the others, but 62 errors is still too much. Paradisepoker.com almost validates as Transitional which is a good thing compared to the other sites in the list.
Three sites use CSS for their layouts instead of tables. This is a good thing and they should be commended for it. However, that does not mean that they can’t be better. All three with CSS layouts overuse divisions and spans terribly, often making the page a mess without CSS turned on.
Does this guy do nothing more than whine? I hear you ask. Yes I do. What I will do is nothing special; any one of you reading this could have done it yourself. I’m going to build a simple HTML document mimicking the front page of a poker site. If you are planning to build a site like that (or even if you are the developer of one of the sites above), you should definitely keep reading. The idea with all of this is to make it easier for people to follow the standards.
I will only include the front page of the site but it won’t be hard to transform it to something simpler later on. Remember the purpose here: to show that it’s possible to combine logical markup, valid code and make it look just the way you want it to. We need some kind of content though, so let’s start with that.
Plan what features you want
The features for the template will be my picks of the top10 above. Let’s put some time on analyzing what features a decent poker site has.
The purpose of most of the sites seems to be to get people to play on their site. Most have some kind of client that is easily available from the front page and that button is the most important part of the page. Aside from that we need features to build a community around the game. Let’s pick a forum as our community builder. Beginners need to have somewhere to learn the basics and everyone might need support from experienced staff sometimes. To build a good community you might also need news of some kind, displaying the largest prizes might give the site more players. Finally, all respectable sites have some info about the company behind it and if the site is big, they have a search. We want to earn some money too so let’s add in a little advertisement. Sum this up in a list with descriptions.
- Play poker button: One big button telling people to click it.
- Beginners guide and support: Show on the front page that you don’t need to be a pro to play and provide a quote from a professional player that illustrates this. Link directly into the guide to show experienced users that there might be something there for them too. Add frequently asked questions to this part too. Give users somewhere to turn to if they have problems.
- News: Front page should link to a couple of top news and at the bottom have link to a dedicated news-page with more info.
- Forum: Users should feel that this is a site with lots of people. Link to the topics in the forum most posted in to show them just that. This site is live and kicking.
- Search: Search might be important both if you look for either a poker term or for a feature on the site. Add search for both the forums and the news here and let people decide which of them to search.
- About us: Trust is important if you want people to part from their money. Put a picture of the staff online and quote reviews and happy customers (Don’t fake this stuff. Never)
- Advertisement (Ads): Ads need needs to be marked up as what they are. We want users to click on the ads only if they like the service the advertisers are serving
We now need to transform this to HTML somehow. When you do this yourself, try to think as little about the color, fonts and such as possible. Focus on what content you want to show your users and build the HTML based on that.
On the next page we will get down to business and start coding. You want to see what I’m talking about don’t you?
Ronald Yau » Blog Archive » Building a Poker site with web standards ( 23 Jan 2006 )
[...] read more | digg story [...]
Velaluka ( 24 Jan 2006 )
Transitional is used more: maybe just to use depreciated HTML in strict?
These sort of sites are not made by webdesign pros that use standards but seems more developers that know some CSS and other.
Or maybe the templates are faulty?
Emil Stenström ( 25 Jan 2006 )
@Velaluka: I think you can blame templates in some cases. I know a lot of developers that I would like to give this tutorial to though.
Being valid Transitional is surely better than not being valid at all, it’s just that there’s no reason to use that doctype. As I say in my cross browser tutorial transitional can get you in troubles…
Velaluka ( 26 Jan 2006 )
“As I say in my cross browser tutorial transitional can get you in troubles…”
doctype switching?
box model IE?
Jeff Mackey ( 2 Feb 2006 )
Very cool tutorial. I look forward to additions in this series! Thank You.
Todd Currie ( 10 Feb 2006 )
Great study template, Tks.
Do you have a table detailing descriptor options and their effects? Some formats you use puzzle me
font: 80%/1.4em Arial
margin: 40px 40px 0 0;
margin: 2em auto 0;
list-style: none;
Tks again look forward to more learning.
Emil Stenström ( 10 Feb 2006 )
@Todd Currie: I skipped going over all the details in the last step. Here’s a short explaination of the four lines you pasted:
1) font Sets font-size to 80% of the users default and a line-height of 1.4em (I could have used 140% too, don’t know why I didn’t). Also sets the font-family to Arial.
2, 3) margin margin takes one, two, three or four values. I’ll write a short article about this in the future, stay tuned!
4) list-style removes the bullets on a list which makes them look better.
Jordan Stewart ( 2 Jun 2006 )
Hi. I’m a newbie to CSS and I’m just wondering what the reasoning behind using
#navigation legend, #navigation label, #navigation h2 {
position: absolute;
left: -10000px;
text-indent: -10000px;
line-height: 0;
}
is over using
#navigation legend, #navigation label, #navigation h2 {
display: none;
}
or
#navigation legend, #navigation label, #navigation h2 {
visibility: hidden;
}
Emil Stenström ( 2 Jun 2006 )
@Jordan Stewart: Good question. The reason is that screen readers are known to hide things with display: none, something that defeats the purpose of adding it in the first place. It’s a bit annoying but at least the workaround is not that hard.
Visibility: hidden; would not remove the element, it would still take up space.
Adam Zakreski ( 8 Jun 2006 )
When you chose not to display the legend and text for the search button, it appears you just used indent to push it off the left of the screen. Why did you do this instead of doing a {display:none}?
Great site it’s been really informative!
Travis ( 27 Oct 2006 )
The only problem I have with the layout is that when you drag the window size, the advertisement, nav bar, and the “4,379 people online part” move all over the place. How can one fix this?
Emil Stenström ( 28 Oct 2006 )
@Travis: Thanks for pointing that out. It has to do with the IE6 resize bug and I applied the fix to it. Does it work better for you now?
Emil Stenström ( 28 Oct 2006 )
@Adam Zakreski: I answered that in the comment above yours.
Karla ( 19 Mar 2007 )
How would you get started to build your own poker site?
Andrew ( 1 Jun 2007 )
it looks good, but if you make the text larger (eg if you have bad eyesight) it overflows its boxes. Is this is fundamental problem with the method/css?
Emil Stenström ( 2 Jun 2007 )
@Andrew: it has to do with me setting the height of the boxes to 200px. Change it to 10em instead and it should work better when zoomed. Thanks for reading!
Ronn ( 28 Nov 2007 )
Nice site, very nice tutorial. Only bug I can see in this whole thing is that it’s really unnecessary for theses sites to do almost any onsite optimization. The degree of offline optimization these guys do is remarkable. Check them out in backlinks, you will be surprised at how many people link to them.