DailyBlogr - How to create an iPad version of your site

http://feedads.g.doubleclick.net/~a/6d0s3PkTGfO4vlxJ0-eRg6eHfv4/0/di</img>http://feedads.g.doubleclick.net/~a/6d0s3PkTGfO4vlxJ0-eRg6eHfv4/1/di</img>

http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fwww.dailybloggr.com%2F2010%2F06%2Fhow-to-create-an-ipad-version-of-your-site%2F&source=ManiKarthik&style=compact&service=bit.ly

Now that we know the iPad owners community is growing, its probably time to give them some recognition. The mobile device browsing community is on an all time high and iPads are not far away. And while having a mobile version of the website was enough to cater for all sorts of mobile devices, iPads need some special treatment. They cannot use the mobile version of a website because the dimensions are completely different.

http://www.dailybloggr.com/wp-content/uploads/2010/06/createipadversionwebsite.png

</p>So how do you create an iPad compatible version of your website without any drastic change in code ? Let’s find out.

1. Testing how your website looks on the iPad – Simulation

If you’re unable to test with an iPad, you can simulate an HTTP request from Safari on iPad in Safari on your computer. First, download the Safari browser. Load your website in Safari ( Mac OS X or Windows). Then go to Safari’s Advanced Preference pane and enable the checkbox next to “Show Develop menu in menu bar”. http://www.dailybloggr.com/wp-content/uploads/2010/06/ipadsimulation1.png

Next, select Develop -> User Agent -> Other from the menu.

When prompted, copy the following string and paste it in the box.

Click OK, and the page will reload. That’s how the iPad will see your website.

2. Testing website compatibility on the iPad

Now, its very likely that some plugins, won’t work on the iPad like flash (obviously!), some animations etc. This is because the iPad supports HTML5 and not certain web formats. Unfortunate, you have to either remove those elements manually or convert them to HTML5 format.

Go to Safari’s Security Preferences pane, and in the “Web Content” options, you’ll see the checkboxes for each plugin. Uncheck “Enable plugins”.

Now reload the page. Now, wherever there were non-compatible plugins used, will be shown blank. This is how it will look on the iPad. You might want to remove them for the iPad version.

Once, all the non-compatible plugins are removed, and the site looks good, you might want to create a new URL specific for the ipad. Something like yourweb.com/ipad

And make sure that you add a canonical tag to the header pointing the iPad version to the original URL – so that you avoid duplicate content issues with the search engines.

You can find more details on it here – Canonical tags to avoid duplicate content.

3. Redirect iPad users to specific URL using .htaccess

Now that you have an iPad ready version of the site, add a browser detection script for the iPad on your .htaccess file, as below. This will detect all iPad users and forward them to the iPad version site, while the rest of the folks remain on the original URL.

So, that should be it. This is a fairly simple process of creating an iPad version of your website. There are several technical glitches to sort, if you dive deep into it, like mouse gestures and other scripts, but unless you’re an expert in that area, you don’t need to check it. Meanwhile just creating an iPad version to cater to your growing iPad visitors is good enough.

If you have further inputs, do let me know.

http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fwww.dailybloggr.com%2F2010%2F06%2Fhow-to-create-an-ipad-version-of-your-site%2F&source=ManiKarthik&style=compact&service=bit.ly

<div align="center">