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.