iPad Website Example
Do you just need a lot of documentation on how to build an iPad Website Web App and see multiple downloadable examples?
Explanation:
I’m going to start by saying that I took CNN’s layout and rebuilt it from scratch to show how to build a complex multi-column layout for iPad. It’s not exact, but I built these two examples in a half of a day. The purpose of this exorcise is to give a real-world example of what you would do if a company came to you and wanted a port of their site.
I am a ".communist," so anyone who wants to take this design or code is welcome to it and feel welcome to drop me a line if you have a questions.
980 or Liquid?
I have provided two separate methodologies of constructing an iPad website / web app. I decided to use divs that focus on the display table, table-inline, and inline-block with my approach. The reason being, is that I wanted to build a liquid site where the content would stay centered and vertically aligned centered when the horizontal dimension changes. If you choose not to go that way, that is totally fine. You should design a webpage that is no more that 980 pixels wide and put this meta tag in, "<meta name="viewport" content="width=980" />."
The deal here is that the iPad’s "Portrait" (virticle) orentation is 768 pixels wide. But since most sites are built for 1024 screens, the majority of designers build at the 980 pixel width. What does this mean? Basically, Apple has done a really good job of getting this iPad to scale websites to 980 pixels, virtually seamlessly. Consequently, when you turn the iPad to "Landscape" (horizontal), the iPad will automatically zoom in to fit the screen. This prevents the page from breaking or looking shoddy.
So keep in mind that the iPad text wraps at 980 pixels and any sites over that number will require horizontal scrolling. Also note, if you put in "<meta name="viewport" content="width=device-width, user-scalable=no" />," this will disable the "pinch and zoom" feature of the iPad. So, if you are going with the "non-liquid" format, it will probably piss off your users because the 980 format is a little small to read.
Apple Touch Icon
In the head you will notice "<link rel="apple-touch-icon" href="images/favicon.png"/>." What this does is to set an "Add To Home Screen Button" on the iPad. (I have included a PSD in the images file of the two download so you can make your own.) If you want more documentation about making one of these see: How To Make Apple Touch Icon Favicon For iPhone iPod.
Focusing on Liquid
I have provided an easy example to port your site with the 980 pixel methodology in Example 1. The rest of the conversation is to explain how the complicated liquid Example 2 works. With example 2, I have thrown in a whole series of bells and whistles including: a .manifest which caches images and files, an iPad JavaScript detect which swaps a Flash SWF with an image, and a CSS3 Lightview LightBox Internal PopUp.
The following will require looking at the source of Example 2 and following along.
Usually, I post the code for everything, but I don’t think people will be excited to see a 15,000 pixel high web page, mostly filled with code.
HTML5 Manifest Document
The first thing you will notice that is different as you look down the code is "<html manifest="mobile.manifest" xmlns="http://www.w3.org/1999/xhtml">." Mobile devices, especially iPhone derivitives, don’t work like normal desktop web browsers. They will not cache information. That means every time a user goes to another page in your site, the mobile device loads every style sheet, javascript, image, and what-have-you again like the it is retarded.
(Also, if you’re thinking you can use CSS to cache the images like my example, "Image Preloading Through CSS3 Caching," you would be dead wrong.)
So in order to get around that, you have to hand feed the most important things you want the mobile device to cache. If you look at "mobile.manifest," you will notice I am caching "global.css," "iPad.js," and "favicon.png." Know that you will want to put in images that are re-occurring through your site, but there is a limit. I will publish a blog in the coming week that explains any questions about manifest documents, including implementation with IIS and Apache Servers.
iPad Viewport
There are several ways to implement a viewport, but since we are going for a liquid layout I am using "<meta name="viewport" content="width=768; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">" and for extra insurance "<link href="css/global.css" rel="stylesheet" type="text/css" media="screen and (min-device-width: 768px)" />." Just know I am using 768 because that is the "Portrait" width of the iPad and the "user-scalable=0;" is turning off the "pinch and zoom."
iPad Flash Image Swap
The "<script type='text/javascript' src='js/iPad.js'></script>" is a piece of code that essentially looks for the iPad user agent, then it swaps the div that contains the Flash SWF with a div that contains an image. You can read a detailed description of how this works at iPad Replace Flash With Image JavaScript Example.
Some CSS Notes
Most of the CSS is straight forward, you may have to do some research on how "display:table," "display:inline-table," and "display:inline-block" work if you don’t know. The brief overview is that you want everything to remained in perfect alignment when you turn to "Landscape." A smart person by this point would say, "Why would you not use floats and percentages?" The answer is, while is works to a degree, it is not precise and exacting in the alignment.
Swapping Divs and Widths
What do you do about adjusting the widths of the main 3 columns ("masterTable") and the image widths when the iPad goes to "Landscape?" To explain how to handle this, look at "<img src="images/img-1.jpg" width="200" height="200" alt="image 1" class="portrait" />" and "<img src="images/img-1-250.jpg" width="250" height="200" alt="image 1" class="landscape" />." What I have done here is to place two images in an anchor with one having a width of 200 pixels and the other having 250 pixels. I have also attached a class of "portrait" and "landscape."
Next take a look toward the bottom of the CSS labeled "/* Portrait and Landscape Settings */." What is going on here is that I am swapping certain CSS characteristics based upon the orientation of the iPad. First I hide both the portrait and landscape classes, ".portrait, .landscape{display:none;}." Next you have two sections, one for portrait and one for landscape. "@media screen and (max-width: 768px)" is saying if the browser has less-than-or-equal-to 768 pixels than show ("display:block;") this section. If the browser is between 769 pixels and 1024 pixels then show ("display:block;") this section: "@media screen and (min-width: 1024px)." Everything in those sections are basically, swapping widths and margins. It is also swapping anything with the class of "portrait" and "landscape" attached to it. So to reiterate, iPad Safari is technically hiding all the images, the divs, and SWF files are incompatible.
Note: I did not change the image or the SWF in the Flash section because I am lazy. I simply changed the width numbers.
CSS3 Lightview LightBox Internal PopUp
For those in the industry, or those that have not discovered, you cannot use an fancy JavaScript/Ajax internal pop up on an iPhone, iPod, Android, or iPad. What you will find out is that no one has built one that will push the overlay and popup image where you are on the screen. This is a major problem for mobile, considering the large amount of scrolling that is involved. What will happen with Lightbox Lightview and others is that when you are several scrolls down, you’ll hit the anchor that fires the popup, at the top of the screen. Therefore, the user has no idea to scroll to the top and see the image.
I’m going to give a brief overview of how this works. I will have a blog in the coming weeks that is specific to iPad, but if you want to see a 98% version of the same thing look here: iPhone Android Lightbox Lightview Internal Popup.
The breif nuts and bolts of this is that the anchor "<a href="#iPadBox1" class="popUpLink">" is calling "<div class="overlay" id="iPadBox1">" to turn on and display the anchor with the image inside depending if you are in "portriat" or "landscape."
Take a look at the bottom of the CSS labeled "/*________ CSS3 LIGHTVIEW LIGHTBOX EXAMPLE POPUP ________*/" to see how this works.
Note: If you need to no How To Hide URL On iPhone iPod, How To Make A Java Script Detect For iPhone & iPod, or How To Make Apple Touch Icon Favicon For iPhone iPod see the links below.
See:
How To Hide URL On iPhone iPod
How To Make Java Script Detect For iPhone & iPod
How To Make Apple Touch Icon Favicon For iPhone iPod