How to create an iPad version of your site

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.

create-ipad-version-website

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”. ipad-simulation-1

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

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

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

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.

RewriteCond %{HTTP_USER_AGENT} ^.*iPad.*$
RewriteRule ^(.*)$ http://yourdomain.com/ipad [R=301]

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.

Latest Comments
  1. Gadget Reviews June 11, 2010
  2. Amber Weinberg June 11, 2010
    • Russ Dear November 25, 2011
    • yingying July 23, 2012
  3. Ashfame June 12, 2010
  4. Stephen Webb June 14, 2010
  5. Maxwell June 15, 2010
  6. Toumes June 16, 2010
  7. Search Engine Tek June 21, 2010
  8. Martin S July 6, 2010
  9. Phils G August 5, 2010
  10. Trippdm August 10, 2010
  11. Xcapade August 26, 2010
  12. Jeremy November 18, 2010
  13. Pradeep November 19, 2010
  14. Tommy Saputra December 12, 2010
  15. Cris January 13, 2011
  16. seo February 2, 2011
  17. Mark March 4, 2011
  18. Apil November 10, 2011
  19. Ryan Chappell December 6, 2011
  20. made January 9, 2012
  21. shan January 18, 2012

Leave a Reply

Your email address will not be published. Required fields are marked *

themekiller.com