A Brand New Design

davatron5000 — Wed, 05 May 2010 23:09:47 +0000

To date, my blog has had 3 themes in just 7 short months. Just about as many posts as themes really. But I’m making a concerned effort to change that. To start, I thought I’d write a little bit about the process of this version.

The Prototype

The new theme started as a brilliant idea for an iPad-centric tap-a-thon. The menu seen here was a fly out that would appear once the actions button was tapped or clicked. It was cool, fancy, animated and really fun but after much weeping and gnashing of teeth, it became clear that the fancy menu – although really functional – involved too much thinking. The First Law of Simplicity is Reduce. Ultimately, it fell into the Design Graveyard.

Reagan Ray’s Magic

Because my coworkers have awesome sites and The Many Faces Of is so beautiful, it made sense to selfishly enlist the help of Paravel’s strongest asset Reagan Ray. Reagan art directed (in the most purest “standing over my shoulder” sense of that job title) the blog and built everything that you see here: the AMAZING logo, the kickass site texture, the colors, the choices, and the pixel nudged margins that I usually can’t stand to give 2 shits about.

The Code

The theme was built from Starkers HTML5 by Elliot Jay Stocks. I love this theme. It’s so semantic and so simple. I went with HTML5 not because it possesses some HTML super powers, but because it’s fun. And I’ll let javascript wizards like Remy Sharp and Paul Irish solve older browser compatibility problems for me.

The CSS is based on The 960 Grid. 30+ sites or so later and it hasn’t let me down yet. That was a no-brainer.

My cohort, Trent Walton, has a really nice blog and is also insatiable when it comes to making things perfect. Trent was over and over encouraging me to keep maintenance mode ON and tweak it more. If something didn’t feel right or wasn’t working, Trent’s keen eye had something to say about it. So thanks, Trent for putting up with me and all the long hours of me asking “How about this?… Refresh now…. How ’bout Now?… Now?”

Optimization

Expect a longer (already written!) blog post on this later. But ever since an episode on my podcast, I’ve been obsessed with web performance. So using a lot of Page Speed and Sprite.me and some caching, I crushed this site down to a less than 1s.

I get nosebleeds with how exciting this stuff is. Subscribe to the RSS Feed or follow me to know when that post drops.

Thanks to everyone for the help and feedback. Now off to write more posts. Keep reading, Dear Reader! And whatever you do, don’t get lost. I repeat. Don’t Get Lost

davatron5000 — Mon, 01 Mar 2010 14:15:22 +0000

Occasionally my wife and I will record a song together and release it on our blog. I was using the WP Audio Player plugin to show off these little ditties, but at some point this month it unexpectedly broke and ceased loading.

I couldn’t be bothered to track down and fix the bug or even another audio plugin. In a brief “A-Ha!” moment, I thought, “Why not just use HTML5?” So I threw in the brand new HTML5 tag and…

Instant success! Sure, it’s not the prettiest thing in the world but if the browser is working the magic it’ll never break again and I’m satisfied. I was pretty elated and began thinking about how this would positively impact and speed up a music blog I help run. I was drunk on simplicity.

Firefox #Fail

I remembered that some of my friends still use Firefox as their primary browser so I thought I’d just check the site in Firefox and take a peek at the design of their HTML5 audio player. Unfortunately, all I saw was a big ol’ “X”.

Some quick googling led me to the answer. Firefox’s tag implementation only supports Ogg Vorbis and WAV. I was shocked and astonished at the fact that a browser as great as Firefox doesn’t support MP3.

The Wars

It appears the problem connected to the same issue the tag is facing: codec licensing issues. This lack of standards issue is raised a lot in the HTML5 vs. Flash debate. I personally don’t care what standard is decided – I only use H.264 because that’s what ships on my Mac – I just want a standard. Although it would be nice if H.264 was the standard and the majority of the web didn’t have to re-encode their videos, I understand that licensing it from Apple could potentially bankrupt Firefox. As inconsequential as this codec thing may seem, this quibble is making HTML5 impotent.

How does the tag make my life better if I have to create 3 different versions of the same video for cross browser support? Answer: none better. It renders it useless.

Unfortunately for Firefox, in reality there’s never going to be a massive shift in the web towards Ogg. Especially if at YouTube, every minute there’s 20 hours of video being uploaded that’s immediately encoded in H.264.

No one uses Ogg Vorbis. The web uses MP3.

The Open Source Utopian Dream is great: a world without restrictive licensing. But when the rubber meets the road, no one is going to spend the time to specially convert audio files to Ogg just so they works in Firefox. In the case of Austin Town Hall, it has (to-date) 1,196 songs on it – all MP3. It would take seconds to create a plugin that would change the current shortcode tag to output HTML5 instead of Flash. However, it would take hours or even days to hunt down, convert, and re-upload to each post in an Ogg format.

I could understand if Firefox chose not to support AAC or M4A, but MP3 however is non-negotiable when it comes to audio. It’s ubiquitous. It’s the established slang term for “digital audio file”. It’s an inseparable part of the web’s history.

The Bottom Line

If Firefox cannot support MP3 in their tag, it’s as useless as a CD player. If Firefox will not support MP3, one of 2 things will happen. One: HTML5 will remain dead in the water or Two: Firefox will lose browser share bit by bit and eventually go belly up in this episode of the Browser Wars. In the meanwhile, if Firefox cannot license MP3 they should at least be cognizant of the fact the web uses MP3 as its standard and degrade their tag if the source file is unsupported.

So what can you do? Not much really. It’s a total stalemate. Web developers have to sit around and wait for the working groups to get over themselves and come to consensus. Someone needs to make a website called Write Your WHATWGressman. Then we can let them know that this needs issue to be solved… and FAST!

daverupert.com » HTML5