Optimise site for iPad (and ensure displays correctly on mobile devices)

Hi I have an image search website that I want to ensure displays correctly on the iPad and other tablets and smartphones. The first step of this job will be to ensure the css is set so it displays correctly. The next step is to optimise it for ipad (web app) and this involves 3 extra things in addition to ensuring it looks ok: 1. On the home page, adding a notification to 'add to homescreen' so they can save the site on their homescreen. This should have our icon as the image for the button on the homecreen. 2. On the search results page, display the site as normal in landscape mode, but in portrait mode (fade in and out as rotate ipad) display the image results one by one, filling the whole screen - swipe left and right to scroll through search results. Tap the screen to go to that image's page. Overlay a couple of icons to indicate that you can swipe left and right to scroll, and rotate to see the normal site. The icons should fade out after a 2 seconds of not touching the screen so only the image is left. They fade in again as the user starts to scroll again. 3. On the image info page, in landscape mode display as normal, but in portrait mode display full screen image (as in 2), scroll left and right to view all the images on that page, and overlay of icons to indicate they can do this. I have attached some screen mock-ups to show what i mean. My site is [login to view URL]