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.

26 Responses

  1. Very Useful Information. Because, in future the people’s use the device like Ipad for all e-purposes. So, that the website owners are aware about that and check them websites compatibility with Ipad.

  2. I’ve tried the simulation thing in Safari for the iPhone/iPad and could never get it to work for me…everything looked exactly the same as normal.

    • Russ Dear

      Hi Amber

      Did you sort out the iPad simulation problem. I am having the same problem.

      Cheers
      Russ

    • yingying

      I am thinking because your website has a great compatibility? Basically if there is no flash plugin, it will look the same . I was expecting to see the screen size change, but seems the screen size is still whatever your original size. I think it will be different if your website has a flash something, and that flash part will be blank.

  3. One don’t need to do anything, the site will render exactly how it looks in the browser because it uses the same engine.

  4. With the iPad fast becoming a revolutionary product websites will soon start addressing site dimensions so they display correctly on the device. I wasn’t aware that you could test this already in Safari, so this is a great foundation for tweaking your website in preparation for iPad usage.

    As HTML 5 and CSS3 start to come into mainstream, usage issues such as the lack of support for Flash with the iPad can be solved. I’d imagine that using a HTaccess redirect and an iPad specific CSS file would address any compatibility problems.

    It will be interesting to see if Adobe releases any iPad developer plugins for Dreamweaver, especially considering their current position with Apple.

  5. Wow this is an excellent idea!

  6. I won’t install anything. The 4 websites i manage are IE and FF compatible and it’s enough.

  7. this is interesting..this works fine to my ipad too. I like this, thanks!

  8. Martin S

    I’m a little confused by the Safari ipad simulations generated by this method, it seems to display
    whole page flash sites completely normally, why is this, what am I doing wrong ?

  9. Phils G

    I am developing a website which has a pdf reader embedded on the web page. The simulator works fine and the pdf is displayed according to the dimensions that I specified in the css. But on the ipad, the entire pdf document is displayed (from first page to last page) and the menu on the embedded pdf reader is not rendered.

    If you have some information regarding a possible solution to this problem, I would greatly appreciate it. Thank you

  10. I’ve tried this iPad detection script in an .htaccess page in my root directory, but the detection does not appear to be working. What might I be missing here? The host is running with Apache on Linux. Is there something that needs to modified to get it to detect correctly? Permissions check out ok. Are the two lines shown the only lines the .htaccess needs? Would appreciate any help or feedback

  11. I have copied and followed all instructions above my site seems fine on Safari here but on my new ipad is it showing a massive gap on the right hand side. Please can you help : site url : xcapade.co.uk/index2.html

  12. Jeremy

    Ahm…as someone said above. When I use safari to show me what my site will look like on an ipad, it still displays the flash elements as normal, when in fact, on the actual ipad, these elements will display as blank boxes with the ‘update your flash player’ icon. This is not a very good metod obviously for showing how your site will display on an ipad.

  13. Awesome article and very very useful for a dummy. Thanks for sharing this article for long i was looking for something like this.

  14. nice article. thx for sharing

  15. Cris

    Nice Article

    One Question left. Will this work for a website run on a windows server?

  16. A friend of mine have learnt a lot from Slava’s SEO Secrets. The owner of the site is posting about what he really knows and has tested. Practically all of his websites are in Top 10 Google.

  17. Mark

    Unfortuneately ipad simulation by changing ‘user agent’ in Safari on (in my case) Windows Vista dose NOT work. I have a website online which isn’t showing properly on a (real) iPad – but it IS showing properly on Safari with changed ‘user agent’ on my Windows Visat PC.

  18. I never thought about creating an Ipad version. Great post

  19. This might not be such a big help for people looking to convert their existing site for iPad compatibility but there is now a CMS that focuses on simplicity. I only mention this because the simplicity of the resulting sites has the site effect that all sites created are fully compatible with iOS devices. If you are a designer that is looking to create sites for clients and don’t want to have to even worry about how they will look on iPhones and iPads, Simple Different might just be a good tool for you.

  20. made

    Thanks for the article! I tried my websites with Safari simulating iPad and it showed that NONE of the flash or dhtml menus work… Thanks Apple for yet again making something that is only compatible with your brand *rolls eyes*
    For those who used the simulation and it didn’t work, remember to uncheck the “Enable plugins” as well as changing the user agent.

  21. shan

    hi frinds

    i created a dropdownmenu (ddmenu.js) all browser are working. but not working this ipad what problem this pls help me enybdy

    shan