I think we are the first Web design company in Costa Rica that designs a website in HTML5; we searched for other sites and couldn’t find any other made by Web design companies in Costa Rica. If I am wrong please feel free to correct me; Veterinaria Machado is our first website made with such technology and was we promised in our portfolio, we wanted to write our impressions regarding HTML5, what we liked and what we didn’t like. We are not going to talk about CSS3 because we have been adapting it gradually on our Web designs and we don’t think it’s worth to discuss it here, even though it’s a good subject to discuss some other time.
The most notorious difference
Let’s be honest. The most notorious difference isn’t notice when you visit a website made in HTML5. Simple and complicated at the same time isn’t it? The essence of HTML5 lies there in our opinion; it uses elements that are far more semantic than resorting to DIV’s that have little sense to devices that must read our code. The elements we used for Veterinaria Machado are:
Before someone asks, does the new code actually matter? As we said a bit earlier, for the average visitor, absolutely nothing, and for the Web designer who is trying to take a peak at one’s code, maybe to feel good or bad about it. But for a Google, Yahoo or Bing bot? Better safe than sorry one would say. By having elements that are truly semantic and that fully identify the blocks of content of your Web design, you are giving information to a bot as to what can be indexed with a higher or lower priority, according to the blocks that compose your Web page. This is very important because if you style your Web pages using XHTML or HTML4 alongside your CSS as you have been doing thus far, how does a bot distinguish what part of the document is what, such as a navigation menu, a footer, or a header of a document?
Another aspect of the code is how clean it is and how easy we can manipulate it through CSS. This part we found fascinating because we don’t have to resort to DIV after DIV if we a few lines of code we can access those elements and style them as blocks (if applicable).
I think I am not alone when I say that it can get bad when searching a CSS document and trying to edit it’s properties and to make matters worse, we are rushing for a deadline to deliver a Web design to a client ASAP. We had to search DIV’s like madmen with names that sometimes we didn’t even remember anymore. HTML5 makes this a bit more semantic and easier to search as we are looking for elements instead of classes or ID’s. Let’s explain the elements.
A fast explanation on each HTML5 element
To explain the HTML5 elements and how we styled them within the Web design of Veterinaria Machado, let’s take a look at the wireframe that we’ve placed below that makes up for the Web design we made and how to style it using CSS.
Header element alongside a nav.
We style it in a way that the header is treated is as a block, and we change the CSS properties according to the objective; the header on HTML5 is interpreted as a part of the heading of a document (the name kind of says it), typically reserved for the elements that usually go at the top of a Web page such as a logo, navigation, and any other button-text that is important at the upper part of our design.
In regards to the nav element, the name also kind of gives it away; it’s to be used a block reserved for navigation (menu). This makes it easier for us to style the entire element as a block. With the case of the design of the veterinary, we just moved it a bit using a right margin. Once again, is this the same thing (visually) as styling it with a DIV ID = “nav”? Yes, it is. But HTML5 isn’t about that. It’s about using the most semantic way of identifying key elements within your Web design. Trough your code you are talking back to a bot-spider and telling them which parts of your Web design are what on each page. Before you weren’t able to!
Aside and repeat
Aside, which is another HTML5 element and as it name implies it, it is reserved for blocks of content that are supposed to go on the side of a Web design, typically reserved for information that might be (or not) relevant to the main content. Secondary pages can use this element quite a lot. With the veterinary, what we did is float the aside to the left and accommodate the article so that it flows around it. Alongside a wrapper (container) we have made a liquid Web design. We include the nav element once again for the side menu, but styled differently.
Article, the meat of the bone
Article is an interesting element because this is where the “content” is supposed to start. If we look at any Web design we see that we first have the title and then the text (where the content starts). Article is the element that encapsulates all of that. Think of it as a newspaper article; it goes from the header of such piece of news until the last word of it. Everything else, like the header of the newspaper, ads to the side, etc, don’t really have anything to do with the actual content of the news article. It’s exactly like this using the article element on a Web design.
Another HTML 5 element is the footer; although Veterinaria Machado asked us to keep the design as simple as posible, we like to put interesting footers, because it’s a new trend in Web design, and considered like the “signature” of the Web designer. All of this is placed within the footer element. A well made footer, alongside a solid looking Web design, is a good sign of the overall quality of the Web design.
Which begs to the million dollar question, which is going to leave a more pleasant and long lasting experience? The first one, we have seen I don’t know how many times, and the second one, probably never.
But alright, going back to the subject, the footer element allows us to delimit and tell any live being (or not) that this part of the site is the “bottom” part of the document.
Figure and figcaption were love at first sight.
We love to have our Web designs with captions underneath each image. We try to implement this on ALL of our Web designs from the moment we discovered HTML5 (Lan Zone doesn’t have it since it was made with XHTML). It’s something we really like and I don’t know why they aren’t included on most Web designs if newspapers and magazines usually do. There is always a little text legend next to an image.
Figure and figcaption do precisely that; figure is the block that can wrap the image (or more) and the text beneath the image which is what figcaption does; it’s just a matter of styling it and we have both ready.
What we didn’t like about HTML5.
We know that HTML5 has not reached it’s potential yet and even more so in Costa Rica; I think it will take years before companies in Costa Rica adopt it. We do believe it’s a way for the Web to evolve and head to the right direction. In the chaos amidst tables, Flash and more, it seems that all of this is coming to an end because we can appreciate more and more Web designs made with HTML5 + CSS3, and finally there is a direction and consent between the leading companies worldwide and the W3C. But not everybody has moved to this direction yet and we have right now and if we must give our impressions we found two great inconveniences on developing sites with HTML5:
WordPress and HTML 5
WordPress handles HTML5 quite well, in an acceptable manner; declaring these elements outside the editor doesn’t compose any risk. The problem comes up when the user tries to edit content using the visual editor of WordPress; any element that was in there is wiped out by the visual editor of WordPress; in other words, the script that handles the editor doesn’t recognize HTML5 elements. There are some solutions but they are a bit inefficient and unorthodox that they haven’t quite worked for us. We wound up separating parts of the content that had HTML5 elements. The only hope right now is either a plug-in that hasn’t been made still or wait for WordPress to include native support for HTML5 elements within its editor. More news if something comes up.
Internet Explorer yesterday, today and tomorrow.
For all Web designers out there, you didn’t think for a second that Internet Explorer wasn’t going to be a problem, right? Microsoft doesn’t let us down (once again); Internet Explorer 6-8 doesn’t support HTML5 elements natively. The problem is that it does recognize them, but doesn’t style them which is obviously a huge problem. Luckily there is a solution called HTML5SHIM, developed by Google’s team (they even host it for you, which saves you the extra bandwidth).