Semantic HTML5 and MicroFormats for better SEO

What is Semantic HTML or Semantic Coding?

In a nutshell, it is two things.

  • Naming all of your ID’s and Class’s so that they are descriptive towards the contents within them.
  • Making sure all your Tags/elements are in the appropriate places plus validate.

<div id=”news_articles”>
<article class=”news_article the_weather”>
<header class=”news_article_title”><h1>The weather</h1></header>
<div class=”news_article_content”><p>It will be hot today</p></div>
<footer class=”news_article_author”>
<address>Written by <a href=””>Michael Guild</a</address>

I am not going to go any deeper into this because I want to focus on how Micro Formats help you with Semantic Code and makes your code more SEO friendly. For more information on Semantic code, go here:

What is MicroFormats and how does that help me with Semantic Code and SEO?

MicroFormats is a standardized way of solving the common day issues of how to go about naming your ID’s and Classes plus making your content more faceted. So instead of trying to think of a good semantic ID or Class, you can just look at the list of supplied names that are SEO friendly. By using the listed names provided, you are allowing search engines to better understand the content within your elements. The search engine looks for these key classes and the way they are nested to define the contents.

<div id=”hcard-Michael-Guild” class=”vcard”>
<a class=”url fn” href=””>Michael Guild</a>
<div class=”org”>PBS</div>
<a class=”email” href=””></a>
<div class=”adr”>
<div class=”street-address”>5555 This Road Rd</div>
<span class=”locality”>Washington</span>
<span class=”region”>DC</span>
<span class=”postal-code”>22222</span>

<span class=”country-name”>USA</span>

<div class=”tel”>555-555-5555</div>
This code was generated by using the hCard Creator:

Now MicroFormats isn’t something new, it’s been around for a long time ( 7 years ). The reason I am mentioning this now is because it is now becoming more adopted. Google, facebook, Obama’s website and others use it. The future of MicroFormats will become more and more standardized as time goes by.


Vertical Rhythm and Responsive design Rant

Vertical Rhythm and Responsive design go hand-in-hand. Both are necessary for the greatest consistent grid layout. In my thoughts of designing a web layout consistently, in cross-platform and cross-browser, needs to be sought after.

Now the idea of vertical rhythm is still kind of young but I believe its something that has been thought of for a long time. I remember looking back at design-chops and panning between the homepage design to the subpage design thinking of all the inconsistencies. Most, if not all, of these inconsistencies involved spacing. No offense to designers but if they didn’t specialize for web..well, you get the idea. So in a nutshell, vertical rhythm is about consistency in spacing and sizing within a design.

Responsive design isn’t exactly something that is new. The fluid layout has been around for quite sometime now as well as javascript browser detectors. It’s more new in the sense that it pulls all of the ideas of user experiences for the design under one term to rule them all.

Because of new devices that or coming out, as a web designer, you have to thinking about how you would want the user experience to be for users that are using all of these devices. Today, I just read about an interactive window that was developed. It’s like something out of the movie Minority Report. It’s crazy awesome. Yeah, so that’s another new device we need to consider in our designs.

What are our goals for the user experience and what screen resolutions or devices do we target?

A good rule of thumb is to design and architect with the idea of the future in mind. Don’t set constraints to your canvas. Realize that you can’t control how the users use their browsers. They can increase the font size, change font color, shrink the window or anything else for that matter.

Responsive design essentials

How to do Responsive Design and Media Queries:

How to do Media Queries with Compass ( Sass ):

To do Responsive design or not?

W3C Mobile Best Practices:

Screen Resolutions:

  • Ipad / Tablets 1280 x 800, 1024×768, 1024 x 600,600 x 800
  • Iphone / Smart Phones 960×640, 480×800, 240×320