A viewport is a rectangular area of screen space within which a Web page is displayed. It determines how content is displayed and scaled to fit onto the iPhone. Using the viewport is analogous to looking at a panoramic scenic view of a mountain range through a camera zoom lens. If you want to see the entire mountainside, you zoom out using the wide angle zoom. As you do so, you see everything, but the particulars of each mountain become smaller and harder to discern. Or, if you want to see a close-up picture of one of the peaks, you zoom in with the telephoto lens. Inside of the camera's viewfinder, you can no longer see the range as a whole, but the individual mountain is shown in terrific detail. The viewport meta tag in Safari works much the same way, allowing you to determine how much of the page to display, its zoom factor, and whether you want users to zoom in and out or whether they need to browse using one scale factor.

The way in which Safari renders the page is based largely on the width (or initial-scale) property of the viewport meta tag. With no viewport tag present, Safari considers the Web page it is loading as 980 pixels in width, and then it shrinks the page scaling so that the entire page width can fit inside the 320-pixel viewport (see Figure 12-3). Here is the default declaration:

<meta name="viewport" content="width=980;user-scalable=1;"/>

Suppose your Web site is only 880 pixels wide. If you let Safari stick with its default 980-pixel setting, the page is scaling more than it needs to. Therefore, to adjust the viewport magnification, you can specify a width optimized for your site:

<meta name="viewport" content="width=880"/>

Figures 12-4 and 12-5 show the noticeable difference between a 980- and an 880-width viewport for an 880-pixel width site.

Figure 12-3. A 980px-wide Web page scaled to fit in iPhone.

With this declaration, instead of trying to fit 980 pixels into the 320 pixels of width, the site only needs to shrink 880 pixels. Less scaling of content is needed (.363 scale instead of .326), making the site easier to use for iPhone and iPod touch users. Note that the viewport meta tag will not affect the rendering of the page in a normal desktop browser.

Figure 12-4. The default width creates empty space on the edges.

Figure 12-5. The viewport is adjusted to better fit the Web page.

In addition to the width property, you can programmatically control the scale of the viewport when the page initially loads through the initial-scale parameter. For example, if you wanted to set the initial scale to be .90, the declaration would be

<meta name="viewport" content="initial-scale=.9;user-scalable=1;"/>

Once the page loads, however, users can change the scale factor as they want using pinch and double-tap gestures as long as the user-scalable property is set to true (the default). If you want to limit the scale range, you can use the minimum-scale and maximum-scale properties:

<meta name="viewport" content="initial-scale=.9;maximum-scale=1.0;
minimum-scale=.8;user-scalable=1;"/>

In this way, users can pinch and zoom, but only to the extent that you want to allow.

If you develop a site or app specifically for iPhone, you'll want to size the page to the viewport by setting the width=device-width (device-width is a constant) and initial-scale=1.0. Because the scale is 1.0, you don't want users to be able to rescale the application interface, so the user-scalable property should be disabled. Here's the declaration:

<meta name="viewport" content="width=device-width; initial-scale=1.0;
maximum-scale=1.0; user-scalable=0;">

Table 12-1 lists the viewport properties. You don't need to set every property. Safari infers values based on the properties you have set.

Keep in mind that the width attribute does not refer to the size of the Safari browser window, but instead the perceived size of the page in which Safari shrinks down to be displayed properly on the mobile device.

Although it's not generally recommended, you can specify the width of the content to be greater than the viewport width, but that requires the users to scroll horizontally.

Note that current versions of the iPhone OS (1.1.1 and above) support two width and height constants: device-width (width of device in pixels, or 320) and device-height (height of device in pixels, or 480).

One of the most important ways to make your Web site friendly for iPhone users is to turn your Web page into a series of columns and blocks. Columns make your page readable like a newspaper and help you avoid wide blocks of text that cause users to horizontally scroll left and right to read.

When an element is double-tapped, iPhone finds its closest block (div, ol, ul, table, and so on) or image ancestor. If a block is found, Safari zooms the content to fit the block's content based on the viewport tag's width property value and then centers it. If an image is tapped, Safari zooms to fit the image and centers it. If an image is already zoomed, zoom out occurs.

Figure 12-6 shows a sample page with a relatively simple structure, but one that makes it difficult for the iPhone to zoom in on it. The table is defined at a fixed width of 1000px, and the first column takes up 875px of that space. The text above the table spans the full document width, but because it is outside of a block, Safari can do no zooming when the text is double-tapped. The user is forced to go to landscape mode and pinch to get readable text, but it still scrolls off the right of the screen (see Figure 12-7).

Figure 12-6. Unfriendly page on page load

Figure 12-7. Zooming to a cell

However, with a few simple tweaks, you can transform the page into something far easier for iPhone and iPod touch to work with. First, you can add a viewport meta tag to gain greater control over the width:

<meta name="viewport" content="width=950"/>

Second, you can enclose the paragraph into a div block element and transform it into a column (say 50 percent of the page):

<div style="width:50%">
</div>

In the real world, you would obviously want to tailor the entire page design around a more column-based approach.

Third, you can size by percentage (90 percent of width) rather than the fixed width of 1000px:

<table width="90%" border="1" cellspacing="1" cellpadding="1">
  <tr>
    <th width="75%" valign="top" scope="col"><div align="center">Column1</div></th>
    <th width="25%" valign="top" scope="col">Column2</th>
  </tr>
  <tr>
.
</table>

Even with these rudimentary changes, the page becomes easier to browse when you double-tap the page, as shown in Figure 12-8.

Figure 12-8. The text block is now readable

Figure 12-9 shows the model block-based Web page that is easily navigated with the double-tap and pinch gestures of iPhone.

Figure 12-9. The prototype structure of an easy-to-browse page

As you can see, a big part of the strategy being employed is to use percentage-based sizing rather than fixed sizes for page elements.

The latest versions of WebKit (Safari) and Mozilla-based browsers provide support for new CSS3 properties that enable you to create newspaper-like, multicolumn layouts. For a content block, you can specify the number of columns, the width of the columns, and the gap between them. Because not all browsers currently support multiple columns, these style properties are prefixed with -webkit and -moz:

-webkit-column-count: 2;
-moz-column-count: 2;
-webkit-column-width: 200px;
-moz-column-width: 200px;
-webkit-column-gap: 13px;
-moz-column-gap: 13px;

If you want to specify a style sheet for iPhone usage, you can use a CSS3 media query. iPhone does not support the handheld or print media types, but instead looks for the screen media type. You can then use the link element to set specific styles for iPhone by looking only for devices that support the screen and have a maximum width of 480px:

<link media="only screen and (max-device-width: 480px)"
  rel="stylesheet" type="text/css" href="iphone-ipod.css"/>

Or, to set iPhone-specific styles inside a particular CSS style sheet, you could use

@media only screen and (max-device-width: 480px)
{
  /* Add styles here */
}

The link element and the CSS rule would apply only to devices that have a maximum width of 480 pixels. Browsers that do not support the only keyword ignore the rule anyway. However, under certain situations, earlier versions of Internet Explorer (versions 6 and 7) fail to ignore this rule and render the page anyway using the iPhone-specific style sheet. You need to guard against this possibility by using IE's conditional comments:

<!--[if !IE]>-->
<link media="only screen and (max-device-width: 480px)"
  rel="stylesheet" type="text/css" href="iphone-ipod.css"/>
<!--<![endif]-->

Internet Explorer now ignores this link element, because the [if !IE] indicates that the enclosed code should only be executed outside of IE.

Therefore, if you want to have a default style sheet for normal browsers and a custom style sheet for iPhone users, use the following combination:

<link media="screen and (min-device-width: 481px)"
  rel="stylesheet" type="text/css" href="default.css"/>
<!--[if !IE]>-->
<link media="only screen and (max-device-width: 480px)"
  rel="stylesheet" type="text/css" href="iphone-ipod.css"/>
<!--<![endif]-->

Normally, the font size of a Web page adjusts automatically when the viewport is adjusted. For instance, after a double-tap gesture, Safari looks at the zoomed width of the content block and adjusts the text to zoom in proportion. This behavior makes the text easier to read for typical uses, though it can affect absolute positioning and fixed layouts. However, if you want to prevent the text from resizing, use the following CSS rule:

-webkit-text-size-adjust: none;

In general, for most Web site viewing, keep this property enabled. For iPhone-specific applications in which you want more control over scaling and sizing, disable this option.

Consider a case study example: the Web site of Operation Classroom, a nonprofit organization doing educational work in Africa. Keep in mind that the style sheet of each Web site needs to be optimized in a unique manner, but this case study demonstrates some of the common issues that will crop up.

Figure 12-10 displays a page from the site with a basic viewport meta tag set at width=780, which gives it the best scale factor for the existing page structure. However, even when the viewport setting is optimized, a user still needs to double-tap to read the text on the page. What's more, the top-level links are difficult to tap unless you pinch and zoom first.

Figure 12-10. The prototype structure of an easy-to-browse page

However, by creating an iPhone and iPod touch-specific style sheet, you can transform the usability site for Mobile Safari users without impacting the HTML code. Looking at the page (see Figure 12-11), you'll notice that several transformations need to occur:

As a first step, add a media query to the document head of each page in the site:

<link media="screen and (min-device-width: 481px)"
  rel="stylesheet" type="text/css" href="css/oc-normal.css"/>
<!--[if !IE]>-->
<link media="only screen and (max-device-width: 480px)"
  rel="stylesheet" type="text/css" href="css/oc-iphone-ipod.css"/>
<!--<![endif]-->

Next, inside of the HTML files, change the viewport meta tag to a smaller width:

<meta name="viewport" content="width=490"/>

The 490px width is wide enough to be compatible with the existing site structure but small enough to minimize the scaling.

That's all the work that you need to do to the HTML files.

To create the new custom style sheet, begin with the default style sheet already being used and then save as a new name — oc-iphone-ipod.css. Your first task is to change the width of the document from 744px to 490px. Here's the updated style:

@media all {
  #wrap {
    position:relative;
    top:4px;
    left:4px;

background:#ab8;
    width:490px;
    margin:0 auto;
    text-align:left;
   }

Next, you change the original font-size:small property defined in body to a more specific pixel size:

body {
  background:#cdb;
  margin:0;
  padding:10px 0 14px;
  font-family: Verdana,Sans-serif;
  text-align:center;
  color:#333;
  font-size: 15px;
  }

Although this size is not as large as what an iPhone Web app would use, it is the largest font size that works with the current structure of the Operation Classroom Web site. Fortunately, the rabbit trail (pathway) and page header fonts are relative to the body font:

#pathway {
  margin-top:3px;
  margin-bottom: 25px;
  letter-spacing: .18em;
  color: #666666;
  font-size: .8em;
}
#pageheader {
  font-family:Helvetica,Arial,Verdana,Sans-serif;
  font-weight: bold;
  font-size: 2.2em;
  margin-bottom: 1px;
  margin-top: 3px;
}

The next issue is to shrink the size of the banner at the top of the page. Here's the style for the banner text:

#banner-text{
  background:url("./images/bg_header.jpg") no-repeat left top;
  margin:0;
  padding:40px 0 0;
  font:bold 275%/97px Helvetica,Arial,Verdana,Sans-serif;
  text-transform:lowercase;
  }

The two properties you need to try to shrink are the padding and the font size. Here's a workable solution:

#banner-title {
  background:url("./images/bg_header.jpg") no-repeat left top;

margin:0;
  padding:10px 0 10px;
  font: Bold 35px Helvetica,Arial,Verdana,Sans-serif;
  text-transform:lowercase;
  }

The final and perhaps most important change is to enable the sidebar to follow the main text rather than float alongside it. Here's the original definition:

#sidebar {
  background:#565 url(".images/corner_sidebar.gif") no-repeat left top;
  width: 254px;
  float: right;
  padding:0;
  color:#cdb;
  }

To move the sidebar content below the main body text, remove the float property and add a clear: both declaration to prevent the sidebar from side wrapping. Also change the small width of 254px to 100 percent, which enables it to take up the entire content of the content div. Here's the code:

#sidebar {
  background:#565 url("./images/corner_sidebar.gif") no-repeat left top;
  width:100%;
  clear: both;
  padding:0;
  color:#cdb;
}

Figures 12-12, 12-13, and 12-14 show the results of the transformation.

Figure 12-12. The top banner is smaller, but the link sizes are larger.

Figure 12-13. Text is easily readable without the need for double-tap or pinch gestures.

Figure 12-14. Sidebar content now follows main body text.

If you are going to offer an iPhone version of your site, you want to give your users the freedom to choose between the customized site and your normal site. Don't auto-redirect based on user agent. Because Safari on iPhone can navigate a normal Web site, you should always allow users to make the decision themselves. Therefore, when users access the home page on your iPhone, it clearly notifies them of the alternative site but does not handcuff them into using it.

To add a similar functionality to a Web site, begin by adding an empty div element at the top of your content, just below the top menu:

<div id="iphone-ipod-notify"></div>

This element serves as the placeholder for the message you will display to iPhone users.

Next, add the following script:

<script type="application/x-javascript">
function isAppleMobile() {
  result ((navigator.platform.indexOf("iPhone") != −1) ||
          (navigator.userAgent.indexOf('iPod') != −1))
}
function init() {
  if ( isAppleMobile ) {
     var o = document.getElementById( 'iphone-ipod-notify' );
     o.innerHTML = "<h1 style='text-align:center;border: 1px solid #a23e14;
-webkit-border-radius: 10px;'><a href='iphone-ipod-index.html'>Tap here to
go to our<br/>iPhone/iPod touch web site.</a></h1>";
  }
}
</script>

The init() function calls isAppleMobile() to determine whether the user agent is an Apple mobile device. If it is, HTML content is added to the placeholder div element. If it's not, nothing is added. The init() function is then called from the onload handler of the body. Figure 12-15 shows the results when viewed from an iPhone.

Figure 12-15. Offering a freedom of choice to your users.

Once you decide to create a companion site specifically for Safari users, you have to decide how existing content best fits inside of an iPhone UI design. You need to determine whether you want to create your own custom design or model after the standard edge-to-edge navigation. The edge-to-edge design scheme works well for many Web sites, as you'll see here.

As a case study, you'll turn once again to the Operation Classroom Web site, the home page of which is shown in Figure 12-16. Several aspects of this site lend themselves to using the edge-to-edge navigation UI. First, the site hierarchy could easily be converted to a series of nested list items. Second, the news entries and quick links entries work great as lists.

Using the iUI framework and the cUI extension (see Chapter 10, "Integrating with iPhone Services"), you'll create a new HTML page containing the top-level menu. Here's the initial code:

<body>
    <!--Top iUI toolbar-->
    <div class="toolbar">
        <h1 id="pageTitle"></h1>
        <a id="backButton" class="button" href="#"></a>
    </div>
    <!--Top-level menu-->
    <ul id="home" title="OC for iPhone" selected="true">
        <li><a href="#news">News</a></li>

<li><a href="#quick-links">Quick Links</a></li>
        <li><a href="#schools-programs">Schools and Programs</a></li>
        <li><a href="#workteams">Workteams</a></li>
        <li><a href="#shipping">Shipping</a></li>
        <li><a href="#supplies">Supplies</a></li>
        <li><a href="#resources">Resources</a></li>
        <li><a href="#about">About OC</a></li>
        <li><a href="index.html" target="_self">Return to Regular web
        Site</a></li>
    </ul>
</body>

Figure 12-16. Operation Classroom home page

The top list items include both the top-level links from the regular site, along with news entries, quick links, and a link back to the regular Web site. Figure 12-17 shows the top-level menu when displayed on the iPhone.

Figure 12-17. OC for iPhone

The news entries from the regular home page are converted to their own list of news articles. Notice that the entries are organized by date (see Figure 12-18) using the iUI class group:

<!--News menu-->
<ul id="news" title="Latest News">
    <li class="group">Sept. 20, 2009</li>
    <li><a href="#news1">20 Year Celebration Coming Soon</a></li>
    <li class="group">Aug. 18, 2009</li>
    <li><a href="#news2">Dr. Marke To Attend Graduate School</a></li>
    <li><a href="#news3">Workteam Scheduled for Kissy Clinic</a></li>
    <li class="group">June 23, 2009</li>
    <li><a href="#news4">Special Speakers Coming to Indiana in
    October</a></li>
    <li class="group">May 24, 2009</li>
    <li><a href="#Bill_Drake">Combat Malnutrition in Sierra Leone</a></li>
</ul>

Each of these links is connected with a destination page:

<div id="news1" class="panel" title="OC News">
<h2>20 Year Celebration Coming Soon</h2>
<p>Have you sent to the OC office to get your ticket for the 20 year
celebration on Sept. 20, 2009? The event will be held at JB's Cafeteria
in Greeley, IN. The evening begins at 5:00pm with a gathering time, and the
dinner and program start at 6:00pm. The price of the meal is $25.00. E-mail
the OC office for your ticket. Please include your check for the tickets. A
number of persons from Liberia and Sierra Leone will be a part of the
evening.</p>
</div>

Figure 12-18. News entries by date

Figure 12-19 displays the results of this page.

Figure 12-19. News article as a destination page

iPhone service integration offers you some special things with Contact Us pages. For example, when displaying contact information for the organization, you use a cUI destination page, which is discussed in Chapter 10:

<!--Contact panel-->
<div id="about" title="About Us" class="panel">
       <div class="cuiHeader">
          <img class="cui" src="images/iclass.png"/>
       <h1 class="cui">Operation Classroom</h1>
       <h2 class="cui">Partnering in Sierra Leone and Liberia</h2>
    </div>
    <fieldset>
        <div class="row">
            <label class="cui">office</label>
            <a class="cuiServiceLink" target="_self"
            href="tel:(765) 555-1212"
            >(765) 555-1212</a>
        </div>
        <div class="row">
            <label class="cui">mobile</label>
            <a class="cuiServiceLink" target="_self"
            href="tel:(765) 545-1211"
            >(765) 545-1211</a>
        </div>
        <div class="row">
            <label class="cui">email</label>
            <a class="cuiServiceLink" target="_self"
            href="mailto:[email protected]"
            >[email protected]</a>
        </div>
    </fieldset>
    <fieldset>
        <div class="rowCuiAddressBox">
              <label class="cui">office</label>
              <p class="cui">P.O. Box 120209.N</p>
              <p class="cui">Colfax, IN 46035</p>
        </div>
    </fieldset>
    <fieldset>
       <div class="row">
            <a  class="cuiServiceButton" target="_self"
            href="http://maps.google.com/maps?q=2012+Main,+Lapel,+IN">Map
            To Warehouse</a>
        </div>
    </fieldset>
</div>

The top div contains a thumbnail image and a place for company name and tagline. The next fieldset provides telephone and e-mail links (see Figure 12-20). iPod touch users will not be able to link to Phone or Mail applications, so an click handler is added to each link to enable the link only if it is running on an iPhone. (That's also why the text label for the e-mail link displays the actual address instead of "E-Mail Us.") The middle fieldset provides static address information, whereas the bottom fieldset contains a Google Maps link to the Operation Classroom warehouse (see Figure 12-21). If running on an iPhone, the Maps app opens. If running on an iPod touch, the Google Maps Web site is displayed.

Figure 12-20. iPhone service integration

Figure 12-21. The link to Google Maps works with both iPhone and iPod touch.

The following code shows the full source code for the sample OC-for-iPhone site. Note that many sections are not shown for this example that need to be implemented for an actual site.

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Operation Classroom</title>
<meta name="viewport" content="width=320; initial-scale=1.0;
maximum-scale=1.0; user-scalable=0;"/>

<style type="text/css" media="screen">@import "./iui/iui.css";</style>
<style type="text/css" media="screen">@import "./iui/cui.css";</style>
<script type="application/x-javascript" src="./iui/iui.js"></script>
</head>
<body>
       <!--Top iUI toolbar-->
    <div class="toolbar">
        <h1 id="pageTitle"></h1>
        <a id="backButton" class="button" href="#"></a>
    </div>
    <!--Top-level menu-->
    <ul id="home" title="OC for iPhone" selected="true">
        <li><a href="#news">News</a></li>
        <li><a href="#quick-links">Quick Links</a></li>
        <li><a href="#schools-programs">Schools and Programs</a></li>
        <li><a href="#workteams">Workteams</a></li>
        <li><a href="#shipping">Shipping</a></li>
        <li><a href="#supplies">Supplies</a></li>
        <li><a href="#resources">Resources</a></li>
        <li><a href="#about">About OC</a></li>
        <li><a href="index.html" target="_self">Return to Regular web
        Site</a></li>
    </ul>
    <!--News menu-->
    <ul id="news" title="Latest News">
        <li class="group">Sept. 20, 2009</li>
        <li><a href="#news1">20 Year Celebration Coming Soon</a></li>
        <li class="group">Aug. 18, 2009</li>
        <li><a href="#news2">Dr. Marke To Attend Graduate School</a></li>
        <li><a href="#news3">Workteam Scheduled for Kissy Clinic</a></li>
        <li class="group">June 23, 2009</li>
        <li><a href="#news4">Special Speakers Coming to Indiana in
        October</a></li>
        <li class="group">May 24, 2009</li>
        <li><a href="#Bill_Drake">Combat Malnutrition in Sierra Leone</a></li>
    </ul>
    <div id="news1" class="panel" title="OC News">
      <h2>20 Year Celebration Coming Soon</h2>
      <p>
Have you sent to the OC office to get your ticket for the 20th year
celebration on Sept. 20, 2009Sunday October 28? The event will be held at
JB's Cafeteria in Greeley, IN. The evening begins at 5:00pm with a gathering
time, and the dinner and program starts at 6:00pm. The price of the meal is
$25.00. E-mail the OC office for your ticket. Please include your check for
the tickets. A number of persons from Liberia and Sierra Leone will be a part
of the evening.</p>
    </div>
    <!--More content would appear here-->

<!--About Us panel-->
     <div id="about" title="About Us" class="panel">
            <div class="cuiHeader">
               <img class="cui" src="images/iclass.png"/>
           <h1 class="cui">Operation Classroom</h1>
           <h2 class="cui">Partnering in Sierra Leone and Liberia</h2>
        </div>
        <fieldset>
            <div class="row">
                <label class="cui">office</label>
                <a class="cuiServiceLink" target="_self"
                href="tel:(765) 555-1212"
                >(765) 555-1212</a>
            </div>
            <div class="row">
                <label class="cui">mobile</label>
               <a class="cuiServiceLink" target="_self"
               href="tel:(765) 545-1211"
               >(765) 545-1211</a>
            </div>
            <div class="row">
                <label class="cui">email</label>
                <a class="cuiServiceLink" target="_self"
                href="mailto:[email protected]"
                >[email protected]</a>
            </div>
        </fieldset>
        <fieldset>
            <div class="rowCuiAddressBox">
                  <label class="cui">office</label>
                  <p class="cui">P.O. Box 120209.N</p>
                  <p class="cui">Colfax, IN 46035</p>
            </div>
        </fieldset>
        <fieldset>
           <div class="row">
                <a  class="cuiServiceButton" target="_self"
                href="http://maps.google.com/maps?q=2012+Main,+Lapel,+IN">Map
                To Warehouse</a>
            </div>
        </fieldset>
    </div>
</body>
</html>