Warp6 and HTML5

The Warp6 template and system markup is completely HTML5 based

Apr

Last week we highlighted the new Warp6 framework and the new styles feature. This week let's start with something we are very proud of: Warp6 is fully packed and enriched with HTML5 and CSS3 goodness!

The template markup is now completely HTML5 based and we updated the entire WordPress, Joomla 1.5 and 1.6 system markup which is now also rewritten in HTML5. We also use a lot of CSS3 and CSS 2.1 selectors which we couldn't use back in the days when we supported IE6. Now let's take a closer look at the details of the newly polished markup.

Template Layout

The first thing you will notice is the new, clean HTML5 Doctype and the changed header elements.

<!DOCTYPE HTML>
<html lang="en-gb" dir="ltr">
<head>
	<meta charset="utf-8" />
	...
</head>

HTML5 introduces several new semantic HTML elements to represent logical sections of your content like article, aside, section, footer, nav, header, hgroup, nav and more. This new set of HTML elements makes it much easier to structure the template layouts and it becomes a lot more semantic which is great for search engines! We make proper use of all these new HTML5 elements in our template and systems markup. If you want to learn more about HTML5 a good start is HTML5 Doctor or Dive Into HTML5.

Unfortunately all Internet Explorer versions older than IE9 don't support those new HTML5 elements. They don't print and render CSS on these new elements. We solved this by using the common solution html5shim. This JavaScript makes older Internet Explorers recognize and style the new HTML5 elements as well as make them printable.

System Markup

A great amount of time we spend on updating different system markups for WordPress, Joomla 1.5 and 1.6. As you already know from our Warp5.5 templates, the markup and CSS classes are the same for each system. This is awesome because it simplifies things and lets you develop cross-platform themes easily.

For example we use article, header and footer elements in the blog view. One thing we want to mention is the new HTML5 time element which unambiguously encodes dates and times for machines but also still displays them in a human-readable way.

<time datetime="2011-02-11" pubdate>11 February 2011</time>

The pubdate attribute indicates that the time element is the date the article was published. This is also great when you think about search engines.

Not only the blog markup is build with HTML5 but also the complete system markup. This includes for example the WordPress comments and widgets as a well as all Joomla components and modules. We also make use of other HTML5 features like the placeholder attribute for the Ajax Search and Login forms. Of course we added a JavaScript solution for all browsers who don't support the placeholder yet.

CSS3 and CSS 2.1 to the fullest

Warp6 is the first major framework release since we dropped support for IE6. So you can imagine how eagerly we waited to develop a new CSS foundation for our templates. Everything is rewritten from scratch and we utilized the full power of CSS 2.1 selectors as well as all the shiny CSS3 stuff. Of course we had progressive enhancement and graceful degradation in mind. The next blog post will take a closer look on our new powerful CSS framework.

CSS3 PIE

If you think of CSS3 you know that Internet Explorers 6-8 lack support for any of these new features. This is why we included the awesome CSS3 PIE into Warp6 by default. CSS3 PIE makes old Internet Explorers capable of rendering several of the most useful CSS3 decoration features like rounded corners, soft drop shadows, gradient fills and more.

Conclusion

Warp6 provides clean and lightweight HTML5 template and system markup which is styled by a brand new CSS framework. This allows you to create cutting-edge themes which can easily converted across different platforms like WordPress and Joomla. Next blog post will focus on the new CSS framework.

Comments (24)

ominx

| #

Sounds gread, i can't wait

reply
manolis.kasapakis

| Profile | #

awsome! :)

reply
Geeks on the Beach

| #

Thank you, Yoo!
We're all about SEO, clean markup, semantics and building shiny things. This feature set ticks off most of the items on our nerdy wishlist. Can't wait to start playing.
Good job!

reply
bigfrontdoor

| Profile | #

Is it nearly May 1st yet !!??

reply
bojan.popic

| Profile | #

Looks very promising!

reply
Shortykun

| #

That mobile function is what was missing the most from your templates. Great.

reply
eric.brissette.83

| Profile | #

Using all of these new technologies and using hacks to prop up old browsers (or new browsers with less than ideal standards compliance, I'm looking at you, IE) makes me a little nervous, but I trust YooTheme to make sure everything remains cross-browser compatible and consistent.

reply
morgan.gustafsson

| Profile | #

As always, Yootheme exceeds expectations!

reply
Jon

| #

I am so excited to put this new stuff on the web. What tools are you guys using to debug this new stuff?

reply
kevin.morrison.1

| Profile | #

In the conclusion you say "this allows you to create". does this mean we will now have access to the framework to build out or designs?

reply
- sascha
  
  | Profile | #
  
  Of course you can build your own themes using Warp6. "Allows" mean you can do...
  
  reply
tobiasnyman

| Profile | #

This sounds really awesome

reply
Ishq

| #

You guys rock.. Any easy HTML 5 video tools in the works?

reply
joomla developer

| #

Very informative blog on Warp6 and HTML5. I learnt so many things through your post. Thanks for providing code here. I always love to learn new things. I look forward more post from you.

reply
bill.seddon

| Profile | #

Are you saying IE6 is not supported?

reply
- sascha
  
  | Profile | #
  
  Yes, we dropped IE6 support more than one year ago...
  
  reply
Buffalo Jerky

| #

Will this system be downloadable for free?

reply
- Buffalo Jerky
  
  | #
  
  Sorry if it seems to be a silly question, but the price is one of the adequate questions for me. (I don't make homepages/Joomla templates very often, so maybe it takes time for me to work it out.)
  So I change my question to: approximately how much does it cost?
  
  (And when will it be available for download?)
  
  And a new one :)
  - will it be able to "convert" to HTML5 the output only of the core Joomla components, or is there an easy way to use it for 3th party components too?
  
  reply
kim.dyrlund.schuett

| Profile | #

Do i get this right? Will Warp6 be implemented in the Wordpress themes you have created so far?
Or strictly for NEW themes (joomla and wordpress)?

Thanks so much!

reply
- sascha
  
  | Profile | #
  
  Only new themes will be based on Warp6. Old themes based on Warp5.5 will not be converted.
  
  reply
  - Ambiolix
    
    | #
    
    It would be really nice if YOOtheme could update the 2011 themes to use Warp6 ...
    
    reply
Scott

| #

I realize that you mention the HTML5 Shim approach to facilitate older versions of I.E., however the great consensus is that MOST browsers being used around the world OF ALL TYPES are not fully HTML5 capable. See this report for example:
http://html5tutorial.net/general/which-browsers-support-html5.html

As Warp 6 claims to be completely based on HTML5, how do you plan to achieve cross-browser capability for the majority of web users out there?

reply
- sascha
  
  | Profile | #
  
  First and foremost we are talking about the many new syntactical features HTML5 offers. New elements, such as <section>, <article>, <header>, and <nav>, are designed to enrich the semantic content of documents. We make proper use of all these new HTML5 elements in our themes. We are not talking about the scripting APIs and extended DOM interfaces HTML5 specifies.
  
  reply
  - Scott
    
    | #
    
    Thanks for the clarification.
    
    reply