Chapter 8: Enabling and Optimizing Web Sites for iPhone and iPod touch 197 Tier 4: Parallel Sites Unless you are creating an iPhone or iPod touch application, developing for Tier 2 or 3 support will provide sufficient support for most sites. However, you might find a compelling need to actually develop a site specifically written for iPhone/iPod touch. The content may be the same, but it needs to be structured in a manner discussed in Chapters 2 and 3 . Avoid Handcuffs, Offer Freedom If you are going to offer an iPhone/iPod touch version of your site, you want to offer your users the freedom to choose between the customized site and your normal site. Don ’ t auto - redirect based on user agent. Because Mobile Safari can navigate a normal Web site, you should always allow users to make the decision themselves. Amazon.com provides a good model. As Figure 8 - 16 shows, when you access their homepage on your iPhone, it clearly notifies you of the alternative site, but does not handcuff you into using it. c08.indd 197c08.indd 197 12/7/07 2:54:42 PM12/7/07 2:54:42 PM Chapter 8: Enabling and Optimizing Web Sites for iPhone and iPod touch 198 Figure 8-16: Amazon offers freedom to use the normal site or an iPhone-specific version. 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 will serve as the placeholder for the message that you will display to iPhone and iPod touch 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() { c08.indd 198c08.indd 198 12/7/07 2:54:42 PM12/7/07 2:54:42 PM Chapter 8: Enabling and Optimizing Web Sites for iPhone and iPod touch 199 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() function to determine whether the user agent is an Apple mobile device. If so, then HTML content is added to the placeholder div element. If not, then nothing is added. The init() function is then called from the onload handler of the body . Figure 8 - 17 shows the results when viewed from an iPhone or iPod touch. Figure 8-17: Offering a freedom of choice to your users c08.indd 199c08.indd 199 12/7/07 2:54:42 PM12/7/07 2:54:42 PM Chapter 8: Enabling and Optimizing Web Sites for iPhone and iPod touch 200 Transform a Site to an iPhone/iPod touch Design Once you decide to create a companion site specifically for Mobile Safari users, you have to decide how existing content best fits inside of an iPhone and iPod touch UI design. You need to determine whether you want to create your own custom design or model after the standard edge - to - edge naviga- tion. (See Chapters 2 and 3 for more on UI design.) 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 homepage of which is shown in Figure 8 - 18 . Several aspects of this site lend itself to using the edge - to - edge navigation UI. First, the site hierarchy could be easily converted to a series of nested list items. Second, the news entries and quick links entries also work great as lists. Top menu Quick links section News entries Figure 8-18: Operation Classroom homepage Using the iUI framework and the cUI extension (see Chapter 7 ), you ’ ll create a new HTML page contain- ing the top - level menu. Here ’ s the initial code: < body > < !-- Top iUI toolbar -- > < div class=”toolbar” > < h1 id=”pageTitle” > < /h1 > c08.indd 200c08.indd 200 12/7/07 2:54:43 PM12/7/07 2:54:43 PM Chapter 8: Enabling and Optimizing Web Sites for iPhone and iPod touch 201 < 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 > The top list items include both the top - level links from the regular site, along with news entries, quick links, as well as a link back to the regular Web site. Figure 8 - 19 shows the top - level menu when displayed on the iPhone. Figure 8-19: OC for iPhone/iPod touch c08.indd 201c08.indd 201 12/7/07 2:54:43 PM12/7/07 2:54:43 PM Chapter 8: Enabling and Optimizing Web Sites for iPhone and iPod touch 202 The news entries from the regular homepage are converted to their own list of new articles. Notice that the entries are organized by date (see Figure 8 - 20 ) using the iUI class group : < !-- News menu -- > < ul id=”news” title=”Latest News” > < li class=”group” > Sept. 20, 2007 < /li > < li > < a href=”#news1” > 20 Year Celebration Coming Soon < /a > < /li > < li class=”group” > Aug. 18, 2007 < /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, 2007 < /li > < li > < a href=”#news4” > Special Speakers Coming to Indiana in October < /a > < /li > < li class=”group” > May 24, 2007 < /li > < li > < a href=”#Bill_Drake” > Combat Malnutrition in Sierra Leone < /a > < /li > < /ul > Figure 8-20: News entries by date c08.indd 202c08.indd 202 12/7/07 2:54:44 PM12/7/07 2:54:44 PM Chapter 8: Enabling and Optimizing Web Sites for iPhone and iPod touch 203 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 20th year celebration on Sunday 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. Email 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 8 - 21 displays the results of this page. Figure 8-21: News article as a destination page c08.indd 203c08.indd 203 12/7/07 2:54:44 PM12/7/07 2:54:44 PM Chapter 8: Enabling and Optimizing Web Sites for iPhone and iPod touch 204 iPhone services 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 7 : < !-- 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” onclick=”return (navigator.userAgent.indexOf(‘iPhone’) != -1)” > (765) 555-1212 < /a > < /div > < div class=”row” > < label class=”cui” > mobile < /label > < a class=”cuiServiceLink” target=”_self” href=”tel:(765) 545-1211” onclick=”return (navigator.userAgent.indexOf(‘iPhone’) != -1)” > (765) 545-1211 < /a > < /div > < div class=”row” > < label class=”cui” > email < /label > < a class=”cuiServiceLink” target=”_self” href=”mailto:info@operationclassroom.org” onclick=”return (navigator.userAgent.indexOf(‘iPhone’) != -1)” > info@oc.org < /a > < /div > < /fieldset > < fieldset > < div class=”rowCuiAddressBox” > < label class=”cui” > office < /label > < p class=”cui” > P.O. Box 120208.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 email links (see Figure 8 - 22 ). iPod touch users will not be able to link to Phone or Mail applications, so an onclick handler is added to each link to enable the link only if it is running on c08.indd 204c08.indd 204 12/7/07 2:54:44 PM12/7/07 2:54:44 PM Chapter 8: Enabling and Optimizing Web Sites for iPhone and iPod touch 205 Figure 8-22: iPhone service integration an iPhone. (That ’ s also why the text label for the email link displays the actual address instead of “ Email Us. ” ) The middle fieldset provides static address information, while the bottom fieldset contains a Google Maps link to the Operation Classroom warehouse (see Figure 8 - 23 ). If running on an iPhone, the Maps application will open. If running on an iPod touch, the Google Maps Web site is displayed. Figure 8-23: The link to Google Maps works in both iPhone and iPod touch. The following code shows the full source code for the sample OC for iPhone/iPod touch site. Note that many sections are not shown for this example that would need to be implemented for a live 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;”/ > (continued) c08.indd 205c08.indd 205 12/7/07 2:54:44 PM12/7/07 2:54:44 PM Chapter 8: Enabling and Optimizing Web Sites for iPhone and iPod touch 206 < 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, 2007 < /li > < li > < a href=”#news1” > 20 Year Celebration Coming Soon < /a > < /li > < li class=”group” > Aug. 18, 2007 < /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, 2007 < /li > < li > < a href=”#news4” > Special Speakers Coming to Indiana in October < /a > < /li > < li class=”group” > May 24, 2007 < /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 Sunday 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. Email 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 > (continued) c08.indd 206c08.indd 206 12/7/07 2:54:45 PM12/7/07 2:54:45 PM [...]...Chapter 8: Enabling and Optimizing Web Sites for iPhone and iPod touch office (765) 555-1212 mobile (765) 545-1211 email info@oc.org . 8: Enabling and Optimizing Web Sites for iPhone and iPod touch 205 Figure 8-22: iPhone service integration an iPhone. (That ’ s also why the text label. Enabling and Optimizing Web Sites for iPhone and iPod touch 198 Figure 8-16: Amazon offers freedom to use the normal site or an iPhone- specific version. To add