My Awesome Technical Creations!!!

Hello Everyone! Meet our friend, the iPad!

As we all know, it is a tablet computer developed and designed by apple, and some people actually do believe it is iPhone's big brother ( I used to too, when it first came out :p), But to be honest, it is not!
As surprising as it may sound, there are certain differences between iPhone and iPad ( obviously size being one), but I don't want to discuss them in detail on here, as that is not the topic under consideration.

But to understand the topic you have to know that an iPad has certain functionalities of iPhone and certain functionalities of computer, combine them together you get a padded iPhone like computer(resembles an iPhone but NOT at all it's big brother) , the iPad!
Now, you have to remember one thing, iPad does not support flash and some of the usual plug-in's you used happily on your computers!

First let us check ,how do you figure out your web-site is iPad compatible.

Step-1: The Simulation Testing!

If you're planning to buy an iPad and are keen on knowing if your website will work on iPad or what it looks like on iPad, here's something you can do!
a)Download Safari Browser(if you don't have one already, since safari is apple's pet, you can test most of their newer inventions on there, compatibility wise, as and when required)
b)Enter your website URL in safari(for example, let's check with one of my oldest website: www.glattmart.com)
c)Now on safari, on the top left corner, you'll see 'Safari',click on it, go to preferences, you'll see a number of tabs 'General,Appearance...Advanced',Click on Advanced and 'tick' or select "Press tab to highlight each item on webpage"option, followed by 'ticking' or selected another option that appears below it which says "Show develop menu in menu bar", Figure as follows:
d) Now 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.
This is how the iPad will be able to 'see' your website.

Step-2: The Compatibility Test

As I mentioned before,some plug-in's will not work on iPad, say flash, certain 3D-2D Animations etc., the reason being iPad supports HTML5 & not certain web formats. Either you can remove those plug-in's or recode/embed them using HTML5 options.
Go to Safari’s "Safari" option on top left of the browser, from there go to "preferences" followed by Security Preferences tab, and in the “Web Content” options, you’ll see the checkboxes for each plugin. Uncheck “Enable plugins”.(In our case "www.glattmart.com" is in the URL for the test)


Before I unchecked the plug-in my website looked like this:

After doing that and reloading the page, it now looks like this:


The flash disappeared! This is because iPad would not support flash plug-in.So, you either replace that with something more compatible with iPad (Javascript/HTML5) or better not use it at all!

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 myexamplesite.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.

Step-3: The re-direction!

It's time to redirect iPad users to specific URL using .htaccess
If you don't know what or where you can find .htaccess , I recommend you visit this link:

http://httpd.apache.org/docs/1.3/howto/htaccess.html

Now that you have an iPad compatible version of your website, just add a browser detection script for the iPad on your .htaccess file, as shown 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]

These are among the most common issues you face with iPad.
There are other script and gesture recognition(track pad click recognition and mouse recognition) issues with iPad, which might be a concern if you plan to code in those specific scripts( better start working on finding substitutes if you have an issue there).

That's one thing as far as website compatibility is concerned. Now let us look at a broader scenario.
If you're a coder/developer/designer like me and have these issues and want to test and implement the code in a way it works flawlessly then i recommend you use cross platform compatibility browser tools available online. You can check them out by clicking on this given link:

Click here 

Hope the given information helps you with most of your browser compatibility issues.
If you have any questions or feel like sharing anything useful with regards to this topic, feel free to contribute via comments, feedback is always welcome!
Happy Browsing everyone!

Best,
Vishwan Aranha!