Applying Design Principles for iPhone eLearning Applications
As with any medium, instructors must tailor their course to fit within the medium's limitations. The iPhone is a new medium that many businesses are exploring for delivering eLearning. This app helps you to become knowledgable of basic design principles to make effective eLearning for the iPhone.

Selecting Fonts
The quick brown fox jumps over the lazy dog.

On this page you can control the font name, font size, bolding, italics and colors. Click on the buttons to change these properties.

On the right are several buttons to control the size (+ and -), boldness (B), italics (I) and dropshadow (T). There are also two color boxes you can click on to change the color of the text and background.

The most important thing to think of when choosing a font is readability. It doesn't matter how pretty or cool it looks if it can't be read. Contrasting colors (like red text on a green background) can cause readability problems as well. It is important to experiment with your text to make it work for your eLearning course app.

Sample text.

It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair, we had everything before us, we had nothing before us, we were all going direct to heaven, we were all going direct the other way - in short, the period was so far like the present period, that some of its noisiest authorities insisted on its being received, for good or for evil, in the superlative degree of comparison only.

 
123
45
67
 
Sizing Photos
   
Both images above are displayed at 57x84. The image on the left is originally 57x84 and the one on the right is 114x168. That means the nicer looking image is scaled down to 50%. Notice the difference in the cracks and text.

In this example, both images are displayed at 220x180. The second one is originally twice as large as the other, yet you don't notice a difference.

In most cases, using the smaller image is adequate. You may wish to use a larger image for logos or gradations.

The screen dimension for the iPhone is 320x480 but you will lose 20 pixels on the top for the status bar.

When making buttons for touching, try not to make it smaller than 30x30 or it may be too small to select.

Plan for iPhone Rotation
Here are some tips for modifying your style sheet (CSS) to take advantage of iPhone rotation.

To center a graphic that is 66x44 on the screen use this:

position: absolute;
left: 50%;
margin-left: -33px; (half of 66)
top: 50%;
margin-top: -22px; (half of 44)
When you rotate your phone, you may see your text enlarge when in the horizontal mode. To prevent this add this:
html { -webkit-text-size-adjust: none; }
You can make additional pages by putting them inside a div tag and use JavaScript to make them visible or hidden:
document.getElementById("my div id").style.visibility = "visible";
...
<div class="my div id" id="my div id">
Normally when you plan for the placement of div tags you use top and left. When planning for rotation, you may wish to use bottom and right instead with percentage values. If you want an object to always be in the bottom right corner use:
bottom: 0%;
right: 0%;
If some pages have too much blank space at the bottom when you scroll, you may wish to change the overflow of all pages to hidden at start, then change overflow to visible and you view each page.

Using YouTube Video
YouTube provides a nice player that you can use inside your app. Just copy this code into your page:
<iframe class="youtube-player" type="text/html" width="320" height="192" src="http://www.youtube.com/embed/YK6z2-CqxA0" frameborder="0"> </iframe>
Just change the yellow video id above to the video id YouTube provides for your video. When it displays on your screen it will just be 320 pixels wide, but once you start playing, the YouTube program will make it full screen.
Select a Color Scheme
If you are familiar with making colors on the computer, you are used to using red, green and blue (RGB). When mixing paints, there are three different primary colors; red, yellow and blue. Even though you are designing for an app, you must keep the paint colors in mind.

It is good to stick with a color family for your course, so if you want orange to be your main color, you can use it and the two colors on both sides on the color wheel above.

Another option is to stick with consistent values (brightness) or saturations (grayness). An example of this is using jewel tones. This includes all the colors but they are rich in saturation and a little on the dark side. Another option would be pastels.

A classic color scheme is using mostly black and white with some grays and one accent color. Red is a popular accent color. The accent color should be used sparingly.