So the new threads page is going to be all HTML5 goodness, and one of the requirements is that it should look good on a small screen as it does on a big screen.

This means that the tables for layout have to go. They just do not work as on the small screen it forces scrolling of the window, and really the content should have flowed to fit the screen.

So here's what it's going to look like in ASCII art:
[CODE]
Thread Meta StartedBy LastPost

+=============================+===========+===========+===========+
| | Views | Started | LastPost |

• Thread Title +===========+===========+===========+
  | | Forum | Author | Author |
  +=============================+===========+===========+===========+
  
  

+=============================+===========+===========+===========+
| | Views | Started | LastPost |

• Thread Title +===========+===========+===========+
  | | Forum | Author | Author |
  +=============================+===========+===========+===========+
  [/CODE]
  
  

And when viewed on a mobile this should happen.
[CODE]
Thread

+=============================+

• Thread Title +
  +=============================+
  | Views | Forum |
  +=============+===============+
  | Started | Author | <-- This row will be "display:none" for mobile
  +=============+===============+
  | LastPost | Author |
  +=============+===============+
  [/CODE]
  
  

The challenge is:

How do I lay out the first one using

Pft, I'll do it myself then:
[code]

Thread Title

<div>Views</div>
<div>Forum</div>

<div>Started</div>
<div>Author</div>

<div>LastPost</div>
<div>Author</div>

I'll implement it tomorrow... it's a bit late now.

So that's another thing broken on the new site... best disable it so you can't see how bad it will look until tomorrow night.

BQ is all talk...

^Too busy a day to be on the forum.
The thread title should really use a header tag, not just a div. H2 or H3 etc, depending on the other headings on the page.

Also, I've not read much on HTML5 yet, but are there semantic HTML5 tags to identify the author, in the way that the q and blockquote tags in HTML4 can be paired with a cite tag?

Is metaCol an adequate classname? What does it tell a human about the content therein? Would a name such as "lastpost" be more meaningful? Could you lose the classname altogether and use inheritance to apply the CSS?

If the data is heading>content then is it actually an evil presentational table or is it a perfectly acceptable data table? Is table the right markup? If so then as long as there is a thead with th cells in and a tbody with tds in then it's fine. If not, then consider markup that will pair the column headings with their contents such as a definition list (dl/dt/dd). Is there an HTMl5 tag that would be better than a dl?

As far as the CSS goes a blank rule such as "float:;" is asking for trouble. If you don't want it to float then use "float:none;"

BQ is all talk...

Also, I've not read much on HTML5 yet, but are there semantic HTML5 tags to identify the author, in the way that the q and blockquote tags in HTML4 can be paired with a cite tag?

I think so too.

BQ is all talk...

The jealousy of one who colours things in for a living.

Also, I've not read much on HTML5 yet, but are there semantic HTML5 tags to identify the author, in the way that the q and blockquote tags in HTML4 can be paired with a cite tag?

Turns out there isn't, despite the addition of article and time tags they didn't think author tags were any use. So use a table or a definition list, as appropriate.

Right, I've answered my own questions and this is my markup. Now I understand what the content is doing, I've changed my mind about a couple of things. It was very late when I first read this and replied.
I've used spans inside divs and lost the classnames - this allows much smaller HTML.
I've given the headings H2 tags. and assumed there will be an H1 higher up. This adds semantic meaning and makes the HTML shorter. HTML5 does not restrict you to the HTML4 nested H1-H6 model, but until we know what search engines and screen readers do to

<title>Untitled Page</title>

<span>26,282 views. <a href="#">387</a> replies</span>
<span>in <a href="#">Bikes and Bits</a></span>

<span>Started <time datetime="2009-03-12">12 March 2009<time></span>
<span>by <a href="#">Skully</a><span>

<span><time datetime="2010-09-28T10:44:00Z">One minute ago</time></span>
<span>by <a href="#">Teenslain</a></span>

<span>26,282 views. <a href="#">387</a> replies</span>
<span>in <a href="#">Bikes and Bits</a></span>

<span>Started <time datetime="2009-03-12">12 March 2009<time></span>
<span>by <a href="#">Skully</a><span>

<span><time datetime="2010-09-28T10:44:00Z">One minute ago</time></span>
<span>by <a href="#">Teenslain</a></span>

Time is just going to be 2010-09-28 14:21 across the board. vBulletin doesn't provide both the formatted value and the raw, so I've opted just for the raw. The scope of the current work is constrained to not changing anything in the PHP code no matter how small a change it would be. I'm only doing templates and CSS.

Inside posts, For quotes we can use

and tags. Huge markup saving and semantic win.

For thread pages I was considering that the

tag might be appropriate, but I'm not sure whether for the whole thread, every post or just the first post.

Every post is going to have the article tag.

BlueQuinn, your code doesn't work in IE7 and lays out strangely in other browsers, especially as it does strange spacing things when in the mobile view.

I've carried on tweaking my one with the exception of taking your .clearfix thing for IE7. Though part of me wonders whether I care about anything pre-IE8 as the numbers are low for 7 and very low for 6.

Anyhow... this is what I'm going to go with:
[code]
<!DOCTYPE html>

<title>Untitled Page</title>

Hello

World


[/code]

Implemented.

Needs a few tweaks, but works well.

Still need to nuke the header for it... and need to put more space around the thread title.

I'm sure you won't but don't leave those anonymous "hello world" text bits there :-)

I didn't actually test on anything but Firefox - the perils of doing stuff when you're meant to be working :-). I imagine it wouldn't take much to have it work in all browsers. If I was in control of the HTML output I would dispense with the floats and replace them with inline blocks. But you need to eliminate white-space between tags to make it fit, as white space in inline and inline block elements is rendered, which can cock up the layout.

Whilst I would dearly love both browsers to die, (and MS to dump their codebase and make IE10 with webkit) if it doesn't take too much effort to support IE7 (and it shouldn't) and IE6 (which will be more of a PITA) then you have nothing to lose by supporting it. All those > descendent selectors in your CSS won't work in IE6, and I can't recall but maybe not IE7 either. Replace them with simple child selectors (i.e. spaces) and you might find your CSS works just as well, but now also works in IE6. IE also has buggy handling of multiple class selectors, such as .threadbit.dark, which you might be able to avoid by choosing another rule to select it with. Also // is not a CSS comment - use /* comment */ Finally, IE9 is supposed to support HTML5 so you need to make the conditional comment that loads the html5shim only trigger for IE8 and below.

Once the work is done you could save yourself a final few HTML bytes by removing the clearfix class from the HTML and add matches to catch whatever (e.g. .threadbit) you need to clear floats. Best done at the end, with a find-replace, as you're going to need it in a few places probably and it's useful while developing to have it as a separate class.

Velocio, can I make a couple of suggestions that will make the code leaner.

  Forums
  <nav>
    <ul>
      <li><a href="index.php?">Forums</a></li>
      <li><a href="forumdisplay.php?f=3">General</a></li>
      <li><a href="forumdisplay.php?f=4">Rides &amp; Races</a></li>
      <li><a href="forumdisplay.php?f=6">Bike Polo</a></li>
      <li><a href="forumdisplay.php?f=10">Bikes &amp; Bits</a></li>
      <li><a href="forumdisplay.php?f=12">Mechanics</a></li>
      <li><a href="forumdisplay.php?f=13">Travel</a></li>
      <li><a href="forumdisplay.php?f=15">Miscellaneous</a></li>
      <li><a href="forumdisplay.php?f=16">Help</a></li>
      <li><a href="forumdisplay.php?f=30">Announcements</a></li>
    </ul>
  </nav>
  <br class="clear">
</section>

float:left; 
...

<h2>Forums</h2>
<ul>
      <li><a href="index.php?">Forums</a></li>
      <li><a href="forumdisplay.php?f=3">General</a></li>
      <li><a href="forumdisplay.php?f=4">Rides &amp; Races</a></li>
      <li><a href="forumdisplay.php?f=6">Bike Polo</a></li>
      <li><a href="forumdisplay.php?f=10">Bikes &amp; Bits</a></li>
      <li><a href="forumdisplay.php?f=12">Mechanics</a></li>
      <li><a href="forumdisplay.php?f=13">Travel</a></li>
      <li><a href="forumdisplay.php?f=15">Miscellaneous</a></li>
      <li><a href="forumdisplay.php?f=16">Help</a></li>
      <li><a href="forumdisplay.php?f=30">Announcements</a></li>
</ul>

Re: blog. Go for it.

Re: header vs h1 from the perspective of bytes... I really don't care about the number of bytes of HTML.

The HTML is gzip'd and if you understand the compression algorithm you'll know that every instance of is no larger than the same number of instances of

... gzip will replace all instances of either with a token. So for delivery it makes no difference at all. For the browser to parse it similarly makes no difference (complexity of the parse tree does, but that's to do with nesting and not the size of the tag name).

I think it's a false economy to prematurely optimise out every last byte. And I believe that there is a benefit to having HTML5 native tags in that currently Google appears to be giving SEO credit to sites that are implementing native HTML5 and using HTML5 tags. This is probably based on some calculation on their part that sites that are investing in HTML5 are fast moving adopters and it reflects an investment of some kind that implies a good site. Google have tons of such criteria, speed of server responsiveness is another, as is the use of microdata formats (rather than RDF).

This all means that I see no technical advantage in optimising the number of bytes of HTML, and I see a potential SEO advantage in not doing so.

The only place I care about number of bytes is in the HTTP and TCP headers. Those are uncompressed and don't benefit from gzip. So you'll see on the new platform (due about 2 months after the new design) that cookies will be stripped from all image requests and things like that. I'm going to apply optimisation where it matters. In the HTML it doesn't matter.

The only optimisation to the HTML that will happen is white-space and comment stripping. The template system inserts a ton of white-space which as you can see on LFGSS I nuke. The new theme will run on LFGSS and so will also benefit from white-space nuking.

geeks

Better than being a nerd.

Dork

Dork wins:

So a dork is a stupid nerd?

^true.

Good point with regards to GZIP. It's been a long time since I read what it actually did :-)

With regards to the HTML optimisation Reducing the actual number of tags is still going to help isn't it, so things like removing

The point still stands with regard to the other markup issues from a semantic standpoint:
all those

Producing a Venn diagram to illustrate geekyness places you where on that diagram?

Google image search. Everyone's doing it.

Pwned...