Learn How To Develop For The iPhone

By -

Today I'm going to show you how to build an alternate page and style sheet for the iPhone and iTouch. We will cover how to detect if the user is using an iPhone to view your page as well as the orientation of the device - whether it be landscape or portrait. To accomplish this we will be using javascript, and some Safari mobile specific CSS tags.
Getting Started
We're going to start off with 2 psd's I made and get those working in an iPhone page. I am using images for the background and header although you could use just straight colors instead of images. The plus side to not using images is that it obviously loads faster but also when switching between landscape and portrait the images take a moment to load, depending on how large they are. You can find the source psd files here or you can make your own. Something to keep in mind is that we are building a page specifically for the iPhone or iTouch. If you do not have the device yourself you can download the iPhone SDK freely from Apple and it includes an iPhone simulator. if you would like to detect the iPhone on your standard browser page and either load the iPhone css and html through conditional statements or send the user to a different page entirely, use the following code:

<script type="text/javascript">  
var browser=navigator.userAgent.toLowerCase();
var users_browser = ((browser.indexOf('iPhone')!=-1);
if (users_browser)
{
    document.location.href='www.yourdomain.com/iphone_index.html';
}
</script>
The code above explained:

Line 2: Create a variable that holds the users type of browser ( among other things )
Line 3: Assign the browser type a value if the iPhone browser is present.
Line 4 - 8: An if statement that redirects the user to an "iPhone formated page" if the variable "users_browser" returns a value ( meaning the user is using an iPhone or iTouch to view the current page ).
Below the code will use html conditional statements to hide the code from a regular browser.

<!--#if expr="(${HTTP_USER_AGENT} = /iPhone/)"-->

<!--
place iPhone code in here
-->

<!--#else -->

<!--
    place standard code to be used by non iphone browser.
-->
<!--#endif -->
Step 1: The HTML
So we now know how to point the user to your iPhone page if they are on an iPhone or iTouch device. Now, we will start working on the iPhone HTML page; the code below has some key differences from a regular XHTML transitional document.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">

    <title>My iPhone Page</title>

    <link rel="apple-touch-icon" href="images/myiphone_ico.png"/> 
    <link rel="StyleSheet" href="css/iphone_portrait.css" type="text/css"  media="screen" id="orient_css">
The code above explained line by line:

Line 1 - 5: This is standard 1.0 XHTML Transitional Doctype. Nothing special yet.
Line 6: This line is iPhone and iTouch specific. It sets initial values for the viewport in the Device's browser. width=device-width states the width of the page to be the same width of the device. initial-scale and maximum scale set the starting point for the zoom of the page, maximum-scale is how much the page cane be scaled up.
Line 9: This link element is pointing to the web pages icon. this is used when a user saves the page to their "Home Screen".
Line 10: A link element points to the iPhone style sheet. This element has the id orient_css assigned to it. This is so that we can point to it with javascript to change the css file it points to when it comes to adjusting the layout for the orientation of the device.
Step 2: Laying Out The Divs
We now continue with the rest of the html before we add any javascript functions for orientation detection. Start with ending the head and then start the body. In the body element we add onorientationchange=orient();. So I just lied, that is a bit of javascript, but this is needed to call our "orient" function (we'll go over this in a bit) when ever the device detects a different orientation.

</head>

<body onorientationchange="orient();">

    <div id="wrap">
        <div id="header">
        </div>
        <div id="content">
        <p>This is the main content area of the page. </p>
        <p>Using css and javascript we can manipulate any of these divs using an alternate css file. The css files in this project are for landscape and portrait views.</p>
        <p>Some more filler text here to demonstrate the page.</p>
        </div>
        <div id="bottom">
        </div>
    </div>
</body>
</html>
Step 3: The Orientation Javascript
In the head of the page you will want to place the code seen below

    <script type="text/javascript">
    function orient()
    {
        switch(window.orientation){ 
                case 0: document.getElementById("orient_css").href = "css/iphone_portrait.css";
                break;

                case -90: document.getElementById("orient_css").href = "css/iphone_landscape.css";
                break;
                
                case 90: document.getElementById("orient_css").href = "css/iphone_landscape.css";
                break;

    }
}
    window.onload = orient();

    </script>
switch(window.orientation) works off of the onorientationchange() method in the body element. This will check to see if the current rotation is equal to the "case value", if it returns true it will execute what is after the colon. After an orientation has been matched it breaks out of orient();. window.onload() runs the orient function when the page first finishes loading.

After each case (value) : we have javascript pointing to the link elements id that our css file is attached to. Depending on the case value, 0, 90 or -90 ( there is also 180 but it is not supported on the iPhone at this time) the portrait or landscape css file is attached to the href tag in the link element. 0 is upright (portrait), 90 is landscape counter clockwise. -90 is landscape turned clockwise and 180 although not supported yet would represent the device being upside down.

Step 4: Implementing The CSS
Even with all of this code, the page doesn't do much. That's because we need to add background images and style it all. We will create 2 css files, one called iphone_portrait.css and another called iphone_landscape.css. We will place the portrait css file into the link element as the default css file to use.

body
{
    background-color:#333;
    margin-top:-0px;
    margin-left:-0px;
}

#wrap
{
    overflow:auto;
    width:320px;
    height:480px;

}

#header
{
    background:url(../images/<span class="skimlinks-unlinked">header.jpg</span>);
    background-repeat:no-repeat;
    height:149px;

}

#content
{
    background:url(../images/<span class="skimlinks-unlinked">middle.jpg</span>);
    background-repeat:repeat-y;
    margin-top:-5px;

}

p
{
    margin:5px;
    padding-left:25px;
    width:270px;
    font-size:10px;
    font-family:arial,"san serif";
}

#bottom
{
    background:url(../images/<span class="skimlinks-unlinked">bottom_corners.jpg</span>);
    background-repeat:no-repeat;
    height:31px;
    margin-top:-5px;
}
The above code is for the iphone_portrait.css file and is rather straight forward. Some things to note are:

in the wrap style description overflow:auto makes sure floated items are kept inside the wrap div to keep the page nice and tidy.
the dimensions for the page are 320px wide by 480px tall. be sure to state this in the wrap div.
Below is the code to be placed inside the iphone_landscape.css file. the only differences between portrait and landscape css files are the background images, the wrap dimensions are reversed and the margins are adjusted accordingly.

body
{
    background-color:#333;
    margin-top:-0px;
    margin-left:-0px;
}

#wrap
{
    overflow:auto;
    width:480px;
    height:320px;

}

#header
{
    background:url(../images/<span class="skimlinks-unlinked">l_header.jpg</span>);
    background-repeat:no-repeat;
    height:120px;

}

#content
{
    background:url(../images/<span class="skimlinks-unlinked">l_middle.jpg</span>);
    background-repeat:repeat-y;
    margin-top:-5px;

}

p
{
    margin:5px;
    padding-left:25px;
    width:370px;
    font-size:10px;
    font-family:arial,"san serif";
}

#bottom
{
    background:url(../images/<span class="skimlinks-unlinked">l_bottom_corners.jpg</span>);
    background-repeat:no-repeat;
    height:37px;
    margin-top:-5px;
}
If you are using my sliced background images your page should now look like the image below when in portrait mode.

Or, in landscape mode?

Where To Go From Here?
So now that you have a page formatted and styled for the iPhone and iTouch, what else can you do? Well, if your page is meant to be more of a web app you may want to check out the IUI by Joe Hewitt which is a framework that makes your pages look like native iPhone or iTouch apps. Also keep in mind that you can set 3 specific css files; so you can have one css file that styles the page if its turned clockwise to landscape and a different file again for when its turned counter clockwise to landscape. This will allow for some interesting outcomes. Good luck!

Comments

Post a Comment

Popular posts from this blog

How to Create a Yoga Goddess Illustration in Adobe Illustrator

By -
Image
As the music begins to play, a soft breeze fills the space with the undeniable smell of magnolia blossoms. She gracefully enters and begins a “tree pose” with her hands in Namaste form. Our female figure is inspired by the Indian culture for its gorgeous use of color and the grace of its yoga formations. I hope you’ll enjoy the journey as we retrace, step by step to enlightenment.  1. Becoming Flesh and Blood Step 1 Our first step will be to bring in our sketch. I've scanned her in at 300 dpi to catch as much of the detail as possible. I'm not as picky about my choice of initial drawing tools, and this particular project was completed with a mechanical pencil. We'll be working with a clean line quality from Adobe Photoshop and now we can begin to work. I'm working in Adobe Illustrator at a size of 8.5 x 11 inches for this specific project. When I'm ready to start my layers, I'll label my first layer as "Sketch" and lock the layer to make su...
Read more

How to Create an Icon Set using Adobe Photoshop

By -
Image
In this tutorial, we are going to design a set of icons in Adobe Photoshop. An icon set needs to have the same background and theme. For learning purposes, we are going to design a sun icon, an ice flake icon, and an RSS icon. Let's get started. 1. Preparing the Canvas Step 1 Start by making a new file with size 350 px × 350 px . Click the small box next to the  Background Contents  option to change the new canvas color. Step 2 In the Color Picker dialog box, select grey ( #e0e0e2 ) for the canvas background color. Step 3 It is always a good idea to keep your work structured from the start. Make a new layer group and name it  sun . This is where we will place all layers used in the sun icon. 2. Designing the Icon Base Step 1 Use the  Rounded Rectangle Tool  to draw a rectangle with size  83 px × 64 px and  8 px  radius. To get accurate results, use the  Properties  panel. In this panel, you can simply enter the exact siz...
Read more

Android Essentials: Using the Contact Picker

By -
Image
This tutorial will not only show you how to launch the contact picker and get results, but also how to use those results in Android SDK 2.0 and above. Getting Started This tutorial will start out simple, but then we’ll get in to some of the technical details of using Contacts with the ContactsContract class, which was introduced in API Level 5. Make sure you have your Android development environment installed and configured correctly. You’re free to build upon any application you have, start a new one from scratch, or follow along using the InviteActivity code in our open source project . We’ll then be adding functionality to allow a user to choose one of their existing contacts and send a canned message to them. We’re going to dive right in, so have all of your code and tools ready. Finally, make sure your device or emulator has some contacts configured (with names and emails) within the Contacts application. Step 1: Creating Your Layout There are two essential form control...
Read more