Earlier today Mashable posted an article on a site that supposedly allowed you to see what your site looked like on the iPad. This claim was quickly shot down by another blog that tested their site on an actual iPad and found more than a few differences. I think we can all agree that there is gonna be a rush to format webpages to look and interact great with an iPad similar to all of the iPhone optimized sites out there. Luckily Apple provides us with a quasi-simple method of actually seeing what our website would look like without relying on any third party hacks.

Step 1 Let’s go on a Safari

First and foremost you are gonna have to agree to play by Apple’s rules which means that you need to use the Safari browser for this to work. But that’s not so bad. Safari is a pretty great browser when it comes to cutting edge standards support and a blazing fast rendering engine. If you don’t have Safari already you can download it here. It is completely free, works on a mac or pc, and takes about 3 minutes to download and install. I’ll wait…

Step 2 User Agent String

In web world the “User Agent” is a fancy word for your browser. You know, firefox, chrome, or in this case Safari. Safari is the user agent. Each user agent has a way to identify it called a user agent string. The iPad’s user agent string is: Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10 Wah!? Don’t worry,  you won’t need to memorize it or anything. You simply need to copy and paste it in the next step.

Step 3 HTTP Request

By now you should have safari running. Load the website you wish to see through the lens of an iPad. I recommend gmail.com – who recently launched an HTML5 iPad version of their popular email site. This site gives you a great sense of the new 2 column layout that is so prevalent in many of the iPad apps like the Wolfram Alpha app below.

Next, open Safari’s Advanced Preference pane. Check the checkbox next to “Show Develop menu in menu bar.”

After this from the drop-down menu select Develop -> User Agent -> Other  You will see a prompt that says “Type a custom user agent string for this page”  like the picture below. Copy the  iPad user agent string from above and paste in it into the dialog box that appears.

Step 4 Done

When you click ok your page will reload. If prompted verify that you are NOT serving ipad the mobile version of your site. You should now see what your site looks like on the iPad. To confirm that this works check out gmail to see the iPad specific 2 column layout. Keep in mind that this user agent string setting persists on a per-window basis. I hope that this helps those of you out there who don’t have an iPad (yet) to get an accurate picture of what your site looks like on this great new device. For more info on how to prepare your website for the iPad check out this great material from apple (where I got the information for this post and more) and please check back to this blog.

Now that the ipad is launching this weekend without flash video support many of the web’s top video sites are launching an HTML5 stream to make sure their sites work on this new device. This includes youtube, brightcove, NBC, ABC, TED, and many more. This is the coming of age of HTML5 and the beginning of web developers worldwide taking the plunge into the wonderful new world of multi-media that is native to the markup. This is pretty much a starting signal for web developers around the world to start using <video> instead of flash. Never again should your video not work on an iPhone or iPod! Never again will you struggle with complicated hacks to get your video to play. Now you simply add <video src=”" controls></video> and your problems are solved. Right? Hold one second. Last time I checked HTML5 wasn’t even a W3C Recommendation. Which means that there are some parts of it that are not totally complete yet. Which parts you might be asking yourself? Why, <video> of course. Yep, thats right. Even though all of these companies are launching “HTML5″ <video> streams in time for the iPad, the <video> element in HTML5 isn’t even finished. The problem comes with video encoding and licensing. Let’s start at the beginning shall we? Right now there are 2 main ways that people encode their video online. One is Ogg Theora and the other is h.264. Theora is owned by some open source types. They encourage anyone to license and use their algorithm, totally free of charge. h.264 is owned by some big scary lawyer types. They say that to use their encoding algorithm they want to get paid. How much? It varies, but it ain’t cheap. Now that money doesn’t come out of my nor your pocket. No, its companies like Google and Apple that have web browsers or big video sites that pay that licensing fee. They argue that h.264 is the most efficient algorithm to encode with and worth the price if it allows them to remain kings of the cloud. Chris DeBona of Google even said “If [youtube] were to switch to theora and maintain even a semblance of the current youtube quality it would take up most available bandwidth across the Internet.” On the other side of the web is Firefox which is based around an open source ideology. They don’t have any trouble paying the fat licensing fee but they argue that any future startup might not be able to raise that kind of money just to use the h.264 licensing fee thus preventing them from entering the web ecosphere. On that principle alone Firefox has decided to not support h.264 and has went with .ogg instead. There are debates about which encoding algorithm is better. But it appears if those debates are about to be silenced. And that is really what this post is all about. Once upon a time .ogg was the codec that was actually mentioned in the official HTML5 specification. Then on one fateful day it was dropped from the spec all together. At the current moment there is no codec that is mentioned in the specification. It is a figurative black hole at the center of all HTML5 <video>. And it is now being filled with what is becoming the defacto codec—h.264. Last year Google acquired video compression company On2 for around 100 million dollars. Since then many of us have feebly hoped that they would appropriately license their new video codec and then use their overwhelming strength on the WHATWG(Web Hypertext Application Technology Working Group) to make this the new codec in the HTML5 spec. But alas, our hopes and dreams have gone unanswered. So now we have the iPad and “HTML5 <video>” – and the fat licensing fee.