Back in 2005, while you were browsing MySpace and listening to Hollaback Girl, there was an invisible battle being fought behind the scenes of your browser. The prize? Total control of the way your content was presented.

The World Wide Web Consortium (W3C, since we’re buds) wanted to replace HTML with XHTML 2, a complete rewrite of the way HTML looks and works. A group of web superheroes from Apple, Mozilla, and Opera didn’t like this. In fact, they demanded more semantics and structure and wanted to keep the foundations of HTML. They decided to form their own group (a geek Justice League, if you will) called the Web Hypertext Application Technology Working Group, or the WHATWG. Their charge: HTML5.

As you can probably gather by the title of this article, the WHATWG won the battle and XHTML 2 is dead. In fact, XHTML 2 has been dead for just over 2 years now. With that in mind, you may be asking yourself, “Nick, why isn’t my company using HTML5?” The answer is simpler than you think: your company probably doesn’t know about HTML5 or its benefits.

But fear not, fellow warrior of the web! I’m about to hit you up with some HTML5 features and talking points that will satisfy the concerns of all team members.

1. HTML5 Allows For Multiple <h1> Tags
The original HTML specification was written back when websites were tiny and static. You know, when nothing ever really changed on a page? The exact opposite of what happens online today. With the not-so-recent explosion of online shopping and blogs, websites are growing more dynamic by the hour, let alone the day.


Website for the movie Space Jam: static since 1996.

With that in-mind, the WHATWG introduced a new semantic tag called <article>, which, essentially, tells the browser that the chunk of content contained in the tag is unique to everything else on the page and, therefore, has its own structured importance. Translated into plain English, using <article> means that every blog post, every product, and every search result can have its own <h1> tag. If this doesn’t get your SEO people salivating, nothing will.

2. HTML5 Makes It Easier For People (and Search Engines) To Find You
As I mentioned earlier, the WHATWG were charged with creating a more semantically-nuanced language. And that’s exactly what HTML5 is. HTML5 features a ton of new tags that allow you to specify the exact intent of your content to the search engines, while the presentation to the user remains unchanged. Some of these new tags include: <time>, for time codes, <cite>, for the title of a cited work, <q>, for quotes, <dfn>, for abbreviations or jargon, and <address>, for contact info.

For example, the <time> tag allows you to specify the data/time when you publish an article. The user will still see “February 2nd, 2012” (or however you choose to format it), but now the browser will understand that this is a date and not just a random collection of alphanumeric characters. Neat, huh?

3. HTML5 is Backwards Compatible
One important distinction between HTML5 and XHTML 2 is that HTML5 is backwards compatible. Older browsers (like the ancient IE6, the not-much-better IE7, and the getting-there IE8) can still read HTML5. Though they most likely won’t be able to interpret HTML5’s more advanced semantic tags correctly, text-based content will still display.

As of the writing of this post, 32.78% of users in the U.S. are running those older browsers, a number that declines daily as more users choose modern browsers like Mozilla Firefox or Google Chrome.

What if a sizable chunk of your audience uses these older IEs? Don’t fret; there are ways to make HTML5 and IE6/7/8 play nice. Keep reading, friend.

4. HTML5 is the Preferred Choice of Mobile Browsers (Flash is Dead)
You may have heard that Adobe recently decided to kill Flash for mobile devices, citing poor performance, vulnerability, and a lack of standards. Instead, Adobe has decided to bask in the warm, loving embrace of HTML5.

In the last two years, thanks to technology like the iPhone, mobile browsing has exploded. In fact, it now makes up for 6% of all browser usage. That might not seem like much, until you consider that mobile browsing increased by 600% from 2009–2010. In fact, according to mobile usability expert Luke Wroblewski, mobile browsing will outpace desktop browsing by 2013.

Of that aforementioned 6%, roughly 80% use a browser that supports HTML5 and does not support Flash. So if your company is looking to tap into the exploding market of mobile browsers, I’d go with HTML5.

5. HTML5 has a Flash-like Tag
Rapidly decreasing Flash usage has some people on the web a bit bummed out. Flash is still a robust toolset for creating media, but it’s not very standards friendly. So, what if you want to create Flash-like experiences with HTML5? The WHATWG’s got you covered with the handy <canvas> tag.

The <canvas> tag doesn’t boast an IDE or GUI like Flash, but it’s just as powerful, runs on mobile devices, and is powered by JavaScript.

Here are a few examples of <canvas> in the wild: Ball Pool, Blob, JS Cloth, and The Arcade Fire’s The Wilderness Downtown.

6. HTML5 has Native Video and Audio Tags
Another reason that most developers are alright with letting Flash go the way of Betamax is that HTML5 comes with its own video and audio elements, surprisingly, <video> and <audio>. Now you can show off your sweet product demo without having to load Flash.

You may be saying, “But Nick, what about my poor grandmother who still has Internet Explorer 7? How will she be able to see my awesome demo?” Easy peasy, lemon squeezy. HTML5 allows you to specify Flash as a fallback. If the browser can’t figure out what the <video> or <audio> tags are, it will use Flash; if it picks up what <video> or <audio> is throwing down, then Flash won’t even be loaded.


YouTube is one of the services taking full advantage of HTML5’s new capabilities while still serving content to older browsers.

7. HTML5 + CSS3 + Modernizr  = The Future, Today!
Just like Oprah or (the late great) Steve Jobs, I’ve saved the best for last aka one more thing!

HTML5 was lucky to have been developed in confluence with the third iteration of the Cascading Style Sheets specification, or CSS3. CSS3 allows for newer presentation elements that could previously be done only with nasty image slicing, like rounded corners and gradients. Usage of CSS3 greatly cuts down on development time and speeds up browser performance because images no longer need to be loaded.

Since HTML5 and CSS3 are not supported by every browser, developer Faruk Ates created Modernizr, a toolkit that allows non-compliant browsers to render HTML5 tags and load alternate styles to a page based on the browser being used. In plain English, if Modernizr detects that a browser doesn’t support rounded corners, it will allow you to load an alternate style that has image-based rounded corners. Modernizr can be a deterrent to the usual, “It needs to look the same in every browser!” argument while still allowing for the latest and greatest designs.

So, I’ve barely scratched the surface of what HTML5 can do for you and your website. HTML5 also supports brand new form elements, native drag and drop, local databases for offline usage, native geolocation, and much, much more.

Hopefully this post will open the door to the new frontier that is HTML5. If you have any questions about HTML5, CSS3, or how to use these technologies today, please feel free to email me at: nsnyder@madpow.net.

In my past experiences as a designer and creative director, I often found that the process was ripe for letting one’s ego get in the way of creating the best concept possible. Critiques would get cutthroat, with each contributor selling why their solution was better than the others. In many cases, the loudest presenter could sway the client to choose their design, even if it wasn’t the best choice for the end user.

Now that I manage the Mad*Pow Visual Design Team, I’ve been able to remove this negative attribute from the design process completely. The design team has learned to check their egos at the door, knowing that they’re contributing to the greater good of any given project. It’s this understanding that empowers the team to act collaboratively and come to the best solution possible; even if it means that one’s approach isn’t chosen.

There are many attributes that an egoless designer must possess, the most important being an understanding of where their contribution lies within the overall project. Knowing that you’re a part of a greater whole makes the adoption of this style more appealing, and critiques (we call them internal reviews) become true collaborative sessions.

Desirability and usability testing plays heavily into this approach. If a designer’s concept doesn’t test well for whatever reason, no offense is taken. Instead, a better design solution evolves to meet the end user’s needs, which is the ultimate goal.

So, how do you instill this sense of being a true contributor as opposed to the ‘winning’ designer?

1. Provide clear intentions up front
The design team should know that their contributions are tested against a defined set of attributes that may or may not impact the end design.

2. Clear the design mind
Encourage your design team to ‘forget’ what they know, and approach the challenge at hand from the end user’s perspective. Ensure that they know what primary business and user goals are, and place them directly in the shoes of the person trying to complete the action. Reviewing the personas, task flows and business drivers helps accomplish this goal.

3. Instill a sense of positive collaboration
We’re all working for the same end result, so flexibility within the design process is critical to achieving the best possible solution – even if it means compromise and iteration within the design process.

4. Provide metrics of success after the fact
Let your design team know that they make a difference in people’s lives by designing FOR them. The end result may not be the comp they want in their portfolio, but the results of their contributions will mean more when paired with positive metrics.

Having an environment based upon these basic principles allows us to create visual solutions that have positive and measurable impacts for our users. At the end of the day, that is what makes us VERY happy.

Search engines interact with your website in two ways: Crawling and Indexing. First, they crawl your site for content, URLs, coding, and imagery to understand its content. Then they index your pages for specific keyword phrases based on their indexing algorithms. They use this indexing data to display relevant sites for users based on their keyword queries. Sounds simple. But one overlooked aspect of indexing is that most search engines put a cap on the number of pages they will index for one site.

This poses a problem for anyone with a large site. How do you make sure your top priority webpages are indexed? You can’t tell the search engines which pages to index, though it would be wonderful if you could. But is there a way to make sure that your top priority pages have the best chance of being indexed?

The answer lies within the code. Most SEO experts focus on optimizing each page for SEO best practices and forget about indexing limits. The best SEO experts know how to code their pages so they won’t automatically be indexed, thus avoiding the search engine cap. Want to know how they do it?

Step 1: Identify the pages you don’t want to be indexed.
Sometimes it’s hard to decide which pages aren’t worth indexing, but it’s a worthwhile process that will ultimately lead to greater search engine visibility for your top priority pages. You can start by looking for pages that have been indexed but don’t get much traffic. If no users come to a page, it’s clearly not delivering any conversions, offering customer service, or serving any other of your business needs. You want to take pages like this out of play to leave room for the pages that do.

Step 2: Update your page code to reflect a “noindex” rule.
Once you’ve compiled your list of “non-index” pages, add the following code to them: [meta name="robots" content="noindex, follow" /]. Any page containing this string of code will not be indexed, and consequently, won’t count toward the search engine’s page count.

Step 3: Monitor your site’s search rankings.
Your total number of rankings may not change, but you should see a change in your overall indexing. More of your top-priority pages should be indexed by search engines and end up in the new search rankings.

Getting Started
Google has some helpful tips on indexing and crawling to guide you. If you don’t have a comprehensive list of all the pages on your site, you can use a free sitemap tool like http://www.xml-sitemaps.com/ or http://code.google.com/p/sitemap-generators/wiki/SitemapGenerators to create a list. Apply Step #1 to  that list and determine which pages don’t have to be indexed. Then, start updating your code to make sure your site’s top priority pages get indexed. And, of course continue to use SEO best practices across the site. Doing all this will ensure that prospective users will end up exactly where you want them to be – on your site.