Blu-ray.com's CSS and HTML Suggestions

[teekay101]

Okay, I'm really afraid this post is going to come across as mean, but I'm really just trying to give feedback. For some reason, yesterday I was compelled to look at the source code for this website, and I was astonished with what I saw.

Basically, the entire site is using outdated tags and outdated HTML/CSS design practices. The site is very bloated as a result. Here are some examples:

The entire stylesheet is in a <style> tag on the page. I'd strongly recommend it be moved to an external .css file and linked in. Every page I load, I have to reload all the css... whereas if the css was external, it would load once and be cached.

The <center> HTML tag has been depreciated and shouldn't be used any longer. The modern equivalent is either "text-align:center" for centering text (inline elements), or "margin:0 auto" when centering divs (block level elements).

Tables are never needed as presentational elements anymore. What I mean by this is that tables should only be used for "tables"... real tabular data like the printer-friendly list of Blu-Rays in my collection with columns. <table> is used literally everywhere on this site for positioning and aligning, and it's bad practice. Not only because it's unnecessary, but because it ends up bloating the code. (Note that the printer-friendly page actually uses a number of tables when it needs only one... not sure why this is.)

Alternating between the "bevel" class is not necessary to create lists or tables with rows of alternating background colors! Basically, CSS can be setup to automatically do this using "pseudo-classes. Here's an example:
HTML:
<ul class="test">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
CSS:
.test li:nth-child(odd){background:#ECF0F5}

...and just like that, you have alternating background colors! So, basically you're now able to remove all instances class="bevel" everywhere on the site (which appears all the time!) and you've drastically reduced page size.

I strongly recommend someone start rolling in some changes to these problems... more so to reduce the server load on blu-ray.com. Pages are probably twice as large in bytes as they need to be.

I'm experienced with modern HTML/CSS, so if whoever works on the site wants a free consultant to look over things or give further suggestions, I'd be more than willing to help out for free. I love this site. Also, I'd strongly recommend taking a Lynda.com course on modern HTML/CSS techniques if you really want to learn a lot.

Hopefully I don't come across as a self-righteous ass here... I really am just trying to help you guys reduce server load!