Large Newspaper Website: Viability of using HTML5 Today

[kerns]

I have a project on the horizon that will require me to re-write the front-end of a large newspaper's website. I'm currently on the fence about using HTML5, or I should say, the degree to which we can use it. The problem is this.

Newspaper websites are large and super complex, especially in Scandinavia. Their front pages regularly weigh in at between 5 and 15 mb (or more) in size, contain a lot of embedded flash, cross domain scripting, and are just in general very (very) long and client intensive to parse and render.

This makes using something like html5shiv - or for that matter, anything that crawls the DOM in an effort to appease IE sort of out of the question.

So the options so far go something like this:

A) Continue with a standard like XHTML 1.0, wait for the next revamp in 3 years (when IE9 is over 70% of the IE install base) to roll out a true to form HTML5 version.

Strengths: We know our XHTML implementation will work, no surprises.

Weaknesses: Could it be less search engine friendly? Other drawbacks? Not sure.

B) Begin using the new HTML5 structural elements (article, aside, etc.) today, all the while nesting them in parent DIV in order to comply with IE8 and below.

Strengths: Could offer a quicker path to HTML5 when the time comes. Gets the publishing system and developers up to speed on working with new structures and formats-

Weaknesses: Could go horribly, horribly wrong.

C) A third way - I don't know what that could be, that's why I'm asking for advice.

If you have any experience with this dilemma, an idea or an opinion about how to proceed, I'm all ears. Thanks.

[kerns]

Just thought I'd try bumping this question once, see if I can get more input from the community on this still relevant question. Any input would be appreciated.

[JAB Creations]

I say test the features that you think you need in the browsers the site's visitors use. Never do or use something simply for the sake of doing or using it.

[kerns]

Worth noting that there is something of an education that needs to take place with front-enders on a large team, that getting them to adopt HTML5 will take time (they are not passionate CSS nerds), so the sooner they get exposed to some of the new ideas and ways of thinking about dividing content, the better.

That is not a very user-centric reason for doing it, but it was a thought.

This is also a code base that they will have to live with for 3+ years. Internet Explorer 10 could be with us before they redesign. So there is also an idea in future proofing to some degree.

I have a feeling what we'll end up with is a compromise that is talked about in many of the HTML5 books I've read - where we switch to the HTML5 doctype, and use section and article as class names on DIV elements. Perhaps a good way of looking forward without completely cutting the cord (?)

[JAB Creations]

In regards to using HTML5 elements like menu or section I think it'll barrel down to if web designers can apply styling (maybe only XHTML?) and if the element causes styling issues in older though still widely used browsers (IE 6/7). Well designed browsers should ignore things they can't interpret and have forward thinking programming such as styling all elements. I haven't tried testing the browsers myself though I think it would be an interesting project.

[boblet]

If you’re worried about the performance of the HTML5 shiv, the best thing to do would be to do some performance tests and see if it really makes a difference on IE6 etc. I suspect not that much.

However without that info I’d agree with your suggested third way: following the spirit of HTML5 if not the letter. Base your code on the HTML5 spec, just only use the elements available to you in XHTML 1.0 or whatever you standardise on. This gives you the semantic benefits of *thinking* in HTML5, plus a more detailed spec and better validator to use.

Set up a snippet to automatically generate the sectioning element fill-in div together with a closing comment:

Code: Select all

<div class="article">
…
</div><!-- /.article -->

(using /.article as shorthand for ‘closes a div the the class “articleâ€