246
The screenshots displayed in this section were captured on Safari for Mac OS X, not on iPhone or iPod
touch. The results are not fully identical to the optimized UI when viewed under Mobile Safari.
Figure 11-3: Community sports Web site ready for iPhonification
and coaches of the sports league will have fingertip access to the league schedule, game results, league
news, and the rule book — either at the games or else en route to them.
c11.indd 246c11.indd 246 12/7/07 2:58:10 PM12/7/07 2:58:10 PM
form a community sports Web site, as shown in Figure 11 - 3 . The use for this mobile app is that parents
into a useful mobile Web application. For this example, you ’ ll venture out of the corporate world to trans-
A second case study demonstrates how you can turn a plain vanilla Web site with minimal functionality
Case Study: Mobile WYFFL
Chapter 11: Case Studies: Beyond Edge-to-Edge Design
247
Given the traditional site structure of the site, an edge - to - edge navigation scheme is an ideal design
model for the entry - level page. The iUI framework will be used in the implementation. However, as
you ’ ll see later on, Mobile WYFFL will employ some design ideas not included with iUI to give parts of
the application a fresh look, but one that remains consistent with Apple ’ s built - in applications.
Each of the links on the top - level menu will be translated to a menu item on the Mobile WYFFL applica-
tion. However, note the scoreboard at the top of the homepage. It serves a double purpose. Before games,
it provides a game schedule for the current week. Then, after the games are completed each Saturday, the
scoreboard is then used to display the scoring results. To display this information in Mobile WYFFL,
you ’ ll add a menu item called
Gameday
.
Not all of the content on the main Web site makes sense to include in the mobile version of the applica-
tion. For example, the Documents page containing downloadable forms is not useful in iPhone or iPod
touch. Therefore, in these cases, you will simply refer them to the main Web site by adding a final link to
it in the initial list. Here is the initial code for the primary HTML page of the application:

!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“ >

Chapter 11: Case Studies: Beyond Edge-to-Edge Design
248
Figure 11-4: Mobile WYFFL (as shown in Safari for Mac)
There are three types of links represented in the navigation list: AJAX links (
Latest News
,
Game Day
,

Standings
, and
About
); Page links (
Schedule and Rules
); and External links (
Visit Web Site
).
The Standings and Schedule pages on the regular Web site are lengthy. Therefore, for the mobile version,
these pages are broken into small readable sections. These sections are displayed as second tier menus:

< ul id=”schedule” title=”Schedules” >
< li > < a href=”seniors.html” > Seniors < /a > < /li >
< li > < a href=”juniors.html” > Juniors < /a > < /li >
< li > < a href=”freshman.html” > Freshman < /a > < /li >
< li > < a href=”instructional.html” > Instructional < /a > < /li >
< /ul >
< ul id=”rules” title=”Rules” >
< li > < a href=”field.html” > Fields and Players < /a > < /li >
< li > < a href=”game.html” > Game < /a > < /li >
< li > < a href=”time.html” > Time < /a > < /li >

Jefferson School Fields in Holden. < /p >
< h3 > Wachusettflagfootball.com - Your Best Source for Weather Info < /h3 >
(continued)
c11.indd 249c11.indd 249 12/7/07 2:58:11 PM12/7/07 2:58:11 PM
Chapter 11: Case Studies: Beyond Edge-to-Edge Design
250
< p > Be sure to come to this web site throughout the year in case it looks rainy
outside on a Saturday morning. Throughout the season, the league will post any rain
postponement or cancellation announcements here by 7:00am on gameday. < /p >
< h3 > Dick’s Sporting Goods as Community Partner < /h3 >
< p > Wachusett Youth Flag Football would like to thank and recognize Dick’s Sporting
Goods as a sponsor and community partner. < /p >
< /fieldset >
< /div >
As is standard for iUI apps, a
div
with
class=”panel”
is used to contain this type of destination page.
A
fieldset
is used as a container for the rest of the content to take advantage of the iUI styles. Custom
styles are set inside of iuiadd.css for the
h3
,
p
, and
a
styles:
.panel p, .panel a {

< th > PS < /td >
< th > PA < /td >
< /tr >
< tr class=”row-a” >
< td > Steelers < /td >
< td > 4 < /td >
< td > 0 < /td >
< td > 0 < /td >
< td > 74 < /td >
< td > 6 < /td >
< /tr >
< tr class=”row-b” >
< td > Bears < /td >
< td > 3 < /td >
< td > 0 < /td >
< td > 1 < /td >
< td > 92 < /td >
< td > 36 < /td >
< /tr >
< tr class=”row-a” >
< td > Eagles < /td >
< td > 3 < /td >
< td > 1 < /td >
< td > 0 < /td >
< td > 104 < /td >
< td > 54 < /td >
< /tr >
< tr class=”row-b” >
< td > Pats < /td >
< td > 2 < /td >