Imagine my surprise when Damir sent me an IM how come you have not commented on the new F1 site. The current site is almost fantastic. It finally uses a decent amount of screen real-estate. It has normal columns with just the right use of whitespace in between. Design is clean with the right amount of speed spiciness, navigation is understandable and well organized. Underlying code is XHTML Strict and the whole layout makes heavy use of CSS.

They have not stopped with technicalities and graphics – the content is a-must-read. I spent half a day reading through Hall of Fame articles. Gerald Donaldson writes with so much passion and wit that I couldn’t stop grinning every second paragraph. It’s passages like this that drives you to explore the site and look for more:

He affected an aura of bravado and cut a dashing figure to match. With his flowing moustache, untamed mane of long blond hair and swaggering walk he resembled a swashbuckling pirate who might plunder and pillage for pleasure. He used his car like a sword, swinging it about ferociously, cutting a swathe through the corners, kicking up dust, grass and tyre smoke and carving great chunks of time out of each circuit.

(On Keke Rosberg, 1982 F1 champion)

This section alone is a prime example of copy-writing being the important part of the overall site quality, just like good design and technical fluency.

Web site is not perfect and there are some stuff that could be changed, but I don’t want to nit-pick – I’m gonna read the rest of the Hall of Fame articles instead.

One theme I hope developers notice here is interoperability. The team understands how big an impact differences between browsers (and previous versions of IE in particular) have had on developers in terms of wasted time, frustration, and (in some cases) limiting the experience that they deliver to users. We want to deliver a big step forward in real-world interoperability for developers with IE8, and standards are at the core of our approach. This topic deserves a lot more than just this paragraph; expect more soon.

To read something like this on IE team blog page makes me warm in heart. With the previous announcement that IE8 will push the standards as hard as it can (and Microsoft certainly can) this is genuinely warming. The amount of cursing I do regarding IE7 is several orders of magnitude less than what I do with IE6. I genuinely believe IE8 will be a pleasure to test and develop. Yes, I’m hoping on the hype bandwagon, full speed. IE developer center is an active place as it was back in IE4 days, when Microsoft was in its best days.

There are three main points that trouble me with IE7, listed by annoying factor.

z-index positioning contexts: I will test and re-test my z-index tutorial in IE8 and update it accordingly. This is the single most infuriating quibble I have left with IE and the main reason I still have to use IE7.css under conditional comments.

Another issue I’m looking forward to check is does IE8 support :after and :before in line with other browsers, so at least float clearing will not be an issue anymore. min-height:0 does the job in IE7, abusing the content box expanding bug. Speaking of which…

Third issue is exactly that: if the content I have in particular box can’t fit in it, it should stick out and overlap the neighboring content; it should not expand the whole box thus destroying my lovely float-based layouts.

If these things are done properly…man, would I be a singing web developer then.

http://alistapart.com/articles/beyonddoctype

There must have been thunderous complaints that Microsoft received from big enterprise clients. I do not see what else would drive them to look for a solution like this.
I read it twice and still can’t decide is this good or bad. On one hand, it is a way to prevent urgent evening calls from clients that some customers are reporting site is not looking ok. In the past, I frequently stated this is not a problem for me, but I can understand that it is not something everyone would accept.

It saddens me a bit that cleaning up the web will not be a viable future at all. If IE8 has gone fully standard-oriented, I assumed that in 8–10 years majority of web sites on the Internet would be standard-compliant. It might still be that way…

At least the basis (IE8, FF3, Safari 3) would be good.

“ć” is letter. Maybe not in Latin1, but certainly is in Unicode.

This is far from first time that I have issues like this. I recently bought the promo bundle on macupdate.com and entered the same letter in my last name, which gave me 12 serial numbers based on “Aleksandar Vacić” because it converted the letter into HTML entity.
To PayPal’s credit, at least they don’t allow this to happen so I don’t have to see a display as ugly as this:

This also happened when I bought TopStyle Pro few years ago, through eSellerate.

What is it with these web sites?
Are they all based on decade old code snippets, before the wide spread use of Unicode and UTF-8? How can any current website allows itself the luxury of not using Unicode, in this era of globalization?

Amateurish, to put it mildly.

Thus, I’m not a guy who would be a customer of CardroomSupply.com nor I can give you a review on the goods and services they provide.
What I can review is the web site through which all these beauties are sold. Full disclosure: this is payed review through ReviewMe.com service.

Overall layout

When I first opened the home page, my eyes were first drawn to…FHM logo on the right. Yep. It’s the biggest, most impressive visual on the top of the page. Somehow I doubt this is a desired behavior of the potential buyer. This would better be placed in the left sidebar, at the bottom, and with a bit subdued colors.

Second thing I saw is the “free shipping” and the phone number, which is good. Whenever I’m shopping, having contact/order number close-by is always a boon. If I see a product I’m interested in and I need more information, I don’t want to leave that page to be able to see the contact number. This is the best thing on the whole web site.

Link list in the top middle requires mental push to actually read it. It’s written in all caps (which is considered shouting in online communication) and all the links are very close to one another. Almost the same thing is repeated in the navigation in the left sidebar, and there is little difference between them. Why two?
Recommendation: decide do you want a top or left-hand navigation, and use the other space for other purposes — like moving the “free shipping” + phone number part to the top.

Home page as a whole is a bit of a mess…Apart from mentioned FHM logo which really stands out, other graphics are all pretty much the same, all look visually equivalent. Thus my eyes simply glided from one feature offer to another, not really stopping at anything. Instead of having 3+3 boxes in the middle and 2 best offers on the right, I would recommend to have best offers to be as wide as both central and right column and a distinctive background and then to have the other offers below, grouped in two or three boxes with different visuals.

The actual product page is fine, apart from the fact that product name header is small with dull gray color. The shopping cart widget is good, with clearly shown price and nice big “add to cart” button.
What is really needed here are much larger product images. I really hate the Amazon-induced stereotype that when you click on “larger image” you get something like 50–100% larger image. Amazon sells millions of stuff from 1000s of sellers. Here you sell your own products — why don’t offer a 2000x3000 (or vice-versa) versions, professionally shoot (the given larger images show compression artifacts), so I can really look into it. Give me detail close-ups too. If I’m willing to pay a $1000 for a poker table, I would certainly appreciate an ability to see it more closely and from different angles. And since I’m deliberately clicking on it, it does not really matter what size those images are — I will wait until they download and use that time to read more from the product page.

Informations

Contact us page is bland with huge “check order image” which looks rather childish. This order check feature is actually a really desired feature considering the fact that cited delivery times can be in weeks. As such, this feature should be prominently placed at the top of the all pages (especially home page), along with phone number.

About us page is again very bland. It should have more images, quotes from magazine reviews, possibly links to videos — either from TV reviews or videos shoot by CardroomSupply. In the YouTube internet of today, bandwidth is a non-issue. Info tab and About us should be merged.

I also found a strange link at the bottom — for poker tips. This is the only article of this sort that I have seen and somehow looks like thrown in. It does not fit.
Such articles are great SEO tools — if you have a bunch of them you can draw links to your site from all kinds of places. This in return gives you better page rank and better findability on search engines.
However, if you want to do that, do it properly — create a whole sections for it, give it a link in the top navigation and publish new stuff. The more the merrier. If the content is good, then people will start linking to it on their own.

Technical impressions

Being a firm supporter of semantic and valid markup and CSS-based designs, immediately upon opening the home page I noticed signs pointing to outdated code. Here is lower part of the sidebar in IE6 and Firefox:

While this does not necessarily has anything to do with coding, it is almost a rule to see this kind of problems on pages using invalid markup. If things were properly coded, there is no way that central column and sidebars would overlap like that.

Validating the home page yields 87 errors, but the number itself does not gives full scope of markup problems.

First, there is no charset defined, at all. It’s not a given fact to what will browsers fall back. This is just one line of code, either client or server side and there is really no excuse for not including it. DOCTYPE is incomplete HTML 4.01 Transitional — adding just the URL would be enough, although I would recommend striving for at least 4.01 Strict.

The real scope of the markup problem is revealed when looking in the source code. There is script block being placed inside the HTML element, but before the HEAD element. This is Yahoo shopping code and at first I thought maybe this is a fault of the Yahoo. It seems unlikely given Yahoo’s recent YUI stuff, but I went to Yahoo! Shopping home page anyway, randomly checked few stores and have not seen this repeated. What I have seen that many stores have just as like-1996 markup, which is very sad.

The code is an old-school (sic!) tag soup, with over-bloated markup practically screaming for clean up. For example, this list of links at the top:

is coded like this:

<table border="0" cellspacing="0" cellpadding="0">


<tr>


<td align="right" valign="top" class="introlinks-cell"><a href="http://www.cardroomsupply.com/pokertables.html" class="introlink">POKER


TABLES!</a> <a href="http://www.cardroomsupply.com/cardtables.html" class="introlink">CARD TABLES!</a> <a href="http://www.cardroomsupply.com/playingcards.html" class="introlink">PLAYING


CARDS!</a> <a href="http://www.cardroomsupply.com/pokerchips.html" class="introlink">POKER CHIPS!</a><br>


<a href="http://www.cardroomsupply.com/tehota.html" class="introlink">TEXAS HOLDEM TABLES!</a> <a href="http://www.cardroomsupply.com/dipota.html" class="introlink">3 in 1 TABLES!</a> <a href="http://www.cardroomsupply.com/tabletops.html" class="introlink">POKER TABLE TOPS!</a></td>


</tr>


</table> 

Just look at it — it’s the simplest possible link list. There is absolutely no need to use anything but A elements for it:

<p class="introlink">


<a href="http://www.cardroomsupply.com/pokertables.html">POKER TABLES!</a>


<a href="http://www.cardroomsupply.com/cardtables.html">CARD TABLES!</a>


<a href="http://www.cardroomsupply.com/playingcards.html">PLAYING CARDS!</a>


<a href="http://www.cardroomsupply.com/pokerchips.html">POKER CHIPS!</a>


<br>


<a href="http://www.cardroomsupply.com/tehota.html">TEXAS HOLDEM TABLES!</a>


<a href="http://www.cardroomsupply.com/dipota.html">3 in 1 TABLES!</a>


<a href="http://www.cardroomsupply.com/tabletops.html">POKER TABLE TOPS!</a>


</p> 

You can see that class="introlink" which is placed on each link is now put on the parent element, thus instead of a.introlink {} one can use .introlink a {} and achieve the same thing with less code.

Further, to save precious download bytes, there is no need to repeatedly use site name in the links — just use absolute paths:

<p class="introlink">


<a href="/pokertables.html">POKER TABLES!</a>


<a href="/cardtables.html">CARD TABLES!</a>


<a href="/playingcards.html">PLAYING CARDS!</a>


<a href="/pokerchips.html">POKER CHIPS!</a>


<br>


<a href="/tehota.html">TEXAS HOLDEM TABLES!</a>


<a href="/dipota.html">3 in 1 TABLES!</a>


<a href="/tabletops.html">POKER TABLE TOPS!</a>


</p> 

And there you go — in few simple steps we have much cleaner code for maintenance.

Almost every bit of the code can be put through the same analysis and clean up and it will come up better, and smaller. I could go on and on (like: none of the images has required alt attribute) but I think this is enough.

Closing words

My warm recommendation would be for this to be given to a professional HTML/CSS coder for a complete overhaul and to a interface designer for adjustments.

I have browsed a lot through the pages and from what I could see these poker tables look really sturdy and beautiful. They deserve a much better presentation.

I’m at the Thistle city Barbican hotel, thus if you are attending the conference and staying there, let me know so we can have a few drinks.

My brother Damir is coming from Sweden and I’m certain the conference would be a great experience. I’m really looking forward to meet more people.

A certain interface was previously built in a hurry and HTML code was littered with plenty onclick="somefunction()" code. I re-factored all of that so that handlers were added on DOM.load; however, there was one nasty feature left in the code.

I had a table of 6 rows and button which that says “Add line”. Adding lines is easy: create the whole table row HTML on server, fetch that with XHR call and do tbody.innerHTML += sRow. Actually, this was the code I used for IE and as soon as this is done, all the previously set event handlers went missing. Like they never existed.

Bottom line: changing innerHTML property removes all late-bound event handlers and script on that piece of the page.

Solution was to get off my lazy fingers and type in proper DOM calls: insertRow and insertCell. Clean code and no browser branching. :)

3x less bytes to download, but I believe more importantly — 10 HTTP requests now, 2x less than before. 6kB HTML, only 1 .js file and only 1 .css file. And none of the old functionality is lost. If there is anything lost, I did not use it then.

One could call this perfect. Great work.

Apart from the fact that I much too often see this:

If you can point me to the save button, you’re my hero. Clicking on input box and hitting Enter key does the job, but that’s not the point. And this happens after quite a while:

1.42min to get that shit of the screen? 231kB for a popup that should open instantly and allow quick bookmark save? Note, I have 512kbps ADSL connection

I really dig the interface. Really. But it wears off after a while and I just want to use the app. If you can’t rewrite it to be smaller, remove it completely. It does not matter that it looks like a glitch in the cache system — it would not even be a possibility of the glitch if it was simpler.

prototype.js, script.aculo.us & co. — nice and dandy and all, but please ditch it. It’s over-bloated I-want-to-be-everything-for-everyone library that long ago went past the point of being usable for a public website.