46
C
HAPTER
Redeveloping web pages for the iPhone
Each of the three bars shown in table 3.8 works slightly differently. The status bar is a 
permanent fixture of every iPhone page. Users probably don’t even notice it because of 
its omnipresence, but nonetheless it takes up 20 pixels at the top of the screen. The sta-
tus bar can appear in two different colors, black or gray, but we won’t be able to control 
that until we get to 
SDK
development; for web pages, the status bar is always gray.
The bottom bar is similarly stuck to the bottom of the page. It’s a more obvious 
intrusion because it only appears on web pages. Many web developers have hoped for 
a way to get rid of the bar or replace it, but so far no methods have been made avail-
able. If you want a site-specific bottom bar, you have to use absolute positioning, as we 
mentioned earlier when discussing 
CSS
.
The 
URL
bar appears at the top of every web page you view, but it scrolls off the top 
of a page as a user moves downward, recovering those 60 pixels of space. Like the bot-
tom bar, there’s an advanced WebKit method that will get rid of this chrome. You can 
also exert some control over it using normal web methods. You can automatically 
push the 
URL
bar off the top of the screen with a 
window.scrollTo(0, 1)
command 
in JavaScript. This command must be delayed until the page has loaded sufficiently. 
Listing 3.3 shows one way to do this.
<script type="application/x-javascript">
if (navigator.userAgent.indexOf('Mobile Safari') != -1) {
addEventListener('load',hideURLBar,false);   
}
function hideURLbar() {    
window.scrollTo(0, 1);   
       
</script>
The code for our 
URL
scroller is very simple. The 
hideURLbar
function does the scroll, 
but it isn’t executed until the page is loaded. 
Before you use this functionality be warned that, as with your work with the 
initial-
scale
property of the view screen, the result will not be entirely intuitive for the user. 
On the one hand, the user might be confused by seeing the page suddenly jump after 
it loaded. On the other hand, the user might be confused about where the 
URL
bar went 
to, since it went away without the user doing anything. Some developers like the ability 
to instantly give their iPhone users another 60 pixels of space “above the fold,” but these 
UI
difficulties must be considered.
Of course, the iPhone does lots of automated stuff like this. The manner in which it 
swaps between two orientations as you twist your iPhone around isn’t too different 
from an automatic scroll. So, perhaps users will get used to iPhones moving stuff 
around for them as they use the device more.
3.4.2
Web clips
Although not quite chrome, web clips represent another way in which mobile Safari 
provides you with unique functionality. Simply, a web clip is an icon that you can use 
to represent a web page on the iPhone. 
Listing 3.3 Scrolling the URL bar chrome off the screen with JavaScript
Adds delayed 
function
Scrolls 
window
Licensed to Nick Wood <nwood888@yahoo.com>
Conversion of pdf to jpg - Convert PDF to JPEG images in C#.net, ASP.NET MVC, WinForms, WPF project
How to convert PDF to JPEG using C#.NET PDF to JPEG conversion / converter library control SDK
change format from pdf to jpg; pdf to jpeg converter
Conversion of pdf to jpg - VB.NET PDF Convert to Jpeg SDK: Convert PDF to JPEG images in vb.net, ASP.NET MVC, WinForms, WPF project
Online Tutorial for PDF to JPEG (JPG) Conversion in VB.NET Image Application
convert pdf picture to jpg; convert pdf to jpg 300 dpi
47
Capturing iPhone events
As a developer, you just have to create a simple icon to represent your website. The 
web clip icon should be a 60x60 
PNG
graphic. Apple also suggests using “bold shapes 
and pleasing color combinations.” You don’t have to worry about the rounded corners 
or gloss that define Apple iPhone icons, because the iPhone will take care of all that 
for you. 
Once you’ve uploaded your icon to your server, you can specify it with a link of 
type 
apple-touch-icon
, like this:
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
Now you can encourage users to add your web page to the home screen of their 
iPhone, which they do by hitting the plus sign (+) in their bottom bar, then choosing 
Add to Home Screen. Your web page will appear with a short name and the icon that 
you designed, laid out in the standard iPhone manner.
Chrome defines the ways in which an iPhone looks unique, but as we’ve already dis-
covered, it also acts unique. We’ve already looked at many events that were different or 
unavailable on the iPhone. Now that we’re working on iPhone-specific code, we can 
examine the flipside: events that are totally new to the iPhone.
3.5
Capturing iPhone events
Earlier in this chapter we showed how some events don’t work the same on the iPhone 
because of its unique input method. At the time, our task was simply to figure out 
which events to avoid when designing iPhone-friendly pages.
Now we’re ready to look at the flipside of user input by examining many of the 
standard iPhone gestures and seeing how those touches turn into JavaScript events. If 
you prefer to instead capture touches by hand, we refer you to the next chapter, which 
discusses some WebKit-specific events that do exactly that. 
3.5.1
One-fingered touches
Table 3.9 gets us started with iPhone events by looking at the different one-fingered 
touches (which we previously encountered in chapter 1) and the events that they 
create. 
Table 3.9 The iPhone recognizes several unique one-fingered touches, some of which correlate to 
normal web events. 
Touch
Summary
Events
Bubble
User views info bubble with touch-and-hold gesture on clickable  
elements.
(None)
Flick
User scrolls page with a one-fingered flick.
onscroll
Tap / Nothing
User touches to emulate a mouse, but doesn’t click on a clickable  
element.
(None)
Tap / Click
User touches to emulate a mouse and clicks on a clickable element, 
and it doesn’t otherwise change.
mousemove 
mouseover 
mouseout
Licensed to Nick Wood <nwood888@yahoo.com>
Online Convert Jpeg to PDF file. Best free online export Jpg image
start immediately to sort the files, try out some settings and then create the PDF files with the button at the bottom. The perfect conversion tool. JPG is the
changing pdf to jpg on; best way to convert pdf to jpg
Online Convert PDF to Jpeg images. Best free online PDF JPEG
takes a few seconds. Web Security. Your PDF and JPG files will be deleted from our servers an hour after the conversion. No-one has
convert pdf to high quality jpg; batch pdf to jpg
48
C
HAPTER
Redeveloping web pages for the iPhone
The most important thing to note here that the iPhone doesn’t give you access to cer-
tain events. In particular, you can’t see the two pure interface-centric one-fingered 
touches: zooming and info bubbles.
Of the accessible touches described in table 3.9, the flick is the only one that’s 
somewhat iPhone-specific, but it’s just mapped to a normal scroll event. You’re not 
likely to need to know too often when your users are scrolling your page, but if you 
want to, simple JavaScript lets you do so:
<script type=" application/x-javascript">
window.onscroll = function() {
alert("A SCROLL has occurred");
}
</script>
In this example the 
window.onscroll
function automatically detects whenever a flick 
occurs, just as it does a normal scroll on a desktop platform. Some developers have 
hoped for the ability to determine the length of a flick, but thus far Apple has not 
made that functionality available.
3.5.2
Two-fingered gestures
The iPhone also supports two two-fingered gestures. These are functions that truly dis-
tinguish the iPhone, because they would be impossible to emulate easily on a mouse. 
Table 3.10 summarizes them.
Tap / Change
User touches to emulate a mouse and clicks on a clickable element, 
and the content changes, as with a select box.
mousemove 
mouseover 
mouseout 
mousedown 
mouseup 
click
Tap, Double
User zooms into a column with a rapid double tap.
(None)
Table 3.10 The iPhone’s unique two-fingered gestures generate additional events, some of which 
can again be seen through normal web-based events.
Gesture
Description
Events
Two-finger flick/scrollable 
User pans the screen with two fingers inside a 
scrollable element
mousewheel
Two-finger flick/not scrollable
User pans the screen with two fingers not 
inside a scrollable element
onscroll
Pinch
User zooms in or out with a two-fingered pinch
(None)
Table 3.9 The iPhone recognizes several unique one-fingered touches, some of which correlate to 
normal web events. (continued)
Touch
Summary
Events
Licensed to Nick Wood <nwood888@yahoo.com>
C# Image Convert: How to Convert Adobe PDF to Jpeg, Png, Bmp, &
C# sample code for PDF to jpg image conversion. This demo code convert PDF file all pages to jpg images. C# sample code for PDF to jpg image conversion.
pdf to jpeg; changing pdf to jpg file
C# Image Convert: How to Convert Dicom Image File to Raster Images
RasterEdge.XDoc.PDF.dll. Conversion from Dicom to Jpeg Image. String inputFilePath = @"C:\input.dcm"; String outputFilePath = @"C:\output.jpg"; // Convert dicom
changing pdf file to jpg; change from pdf to jpg on
49
Redisplaying web pages
We’ve already met the pinch-zoom functionality, and perhaps it’s not too surprising 
that we can’t see its event, given that we haven’t been given access to any zoom events 
so far. The two-fingered flick, on the other hand, is new. It may, in fact, be new to most 
of your users too, as it’s one of the more secret functions of the iPhone. However, if 
you can trust your users to use it, you can take advantage of this function to accom-
plish some interesting things.
First, two-fingered flicks give you an option to implement framesets. You might 
recall that we cautioned against them earlier because one-fingered flick scrolling 
doesn’t work right with them. But if you can train your users to do two-fingered scroll-
ing, they’ll be able to easily scroll individual frames.
Second, they allow you to create other types of scrollable elements, solely to detect 
the 
mousewheel
event, and thus introduce new functionality to your web page. The 
following example shows a page with a 
<textarea> 
which that is scrollable, along with 
some JavaScript code that will detect a two-fingered scroll in that area:
<script type="text/javascript">
window.onmousewheel = function() {
alert("A two-fingered SCROLL has occurred");
}
</script>
<textarea rows=100 cols=100>
</textarea>
This might be a nice feature if you want to lock a header and footer on your page but 
allow users to scroll the content in the middle.
Third, two-fingered flicks are (obviously) the functionality that you need to train 
your users to use if you’re already detecting for 
mousewheel
events on your web page.
3.6
Redisplaying web pages
To date we’ve talked about how to take your existing web pages and redevelop them 
for the iPhone. So far it’s been a largely additive process. But what if you have web 
pages that still don’t look good, no matter what you do? In this case, consider a differ-
ent solution, which probably means totally redisplaying your web pages for the 
iPhone. Granted, this may not be a possibility for all sites. To use this method, you 
must have good data abstraction built into your site—usually via individual web pages 
pulling data from an external source (such as 
MySQL
), and then dumping that con-
tent into a template. 
The first step in redisplaying your pages is simply creating new templates for 
iPhone users and then selecting them when you detect an iPhone. For optimal iPhone 
usage, your new templates should use a “river” format. This means that you redisplay 
your web pages’ data in a single column rather than using a multiple-column 
approach. You should place your most important navigation elements at the top of the 
page and your least important navigation elements at the bottom of the page. Your 
content then flows in between those spaces.
Licensed to Nick Wood <nwood888@yahoo.com>
JPEG to PDF Converter | Convert JPEG to PDF, Convert PDF to JPEG
similar software; Support a batch conversion of JPG to PDF with amazingly high speed; Get a compressed PDF file after conversion; Support
convert multiple page pdf to jpg; convert pdf to gif or jpg
JPG to DICOM Converter | Convert JPEG to DICOM, Convert DICOM to
Open JPEG to DICOM Converter first; Load JPG images from local folders in "File" in toolbar Windows Explorer; Select "Batch Conversion" & Choose "DICOM" in
reader convert pdf to jpg; best program to convert pdf to jpg
50
C
HAPTER
Redeveloping web pages for the iPhone
However, you should only decide to redisplay your page if it really doesn’t look 
good on iPhones. Because the iPhone is a desktop-class browser, you don’t have to 
notably cut down your web pages to make them work. Some professional websites 
have made the mistake of replacing a great user interface that worked well with the 
iPhone’s columnar zoom with a crippled river formatting; in doing so, they’ve 
decreased functionality for iPhone users, not increased it.
Given the limitations of a total redisplay, you may wish to consider a more piece-
meal approach. In rewriting web pages for the iPhone, we have been more likely to 
move a single column here or there than to totally rewrite a page. Such a develop-
ment process is very personal—much as web design itself is. Often it will be a process 
of deciding which minor bits of information can be removed from a page to allow 
everything else to be larger and more readable on a comparatively small screen.
Because the real work of page redisplay is so personal, we can’t give precise guide-
lines for how it will work on your individual pages. But we can look at what’s been 
done already and see what lessons those pages suggest. We’ll finish our look at iPhone 
optimization by exploring a couple of notable websites and what they’ve done.
There’s a fine line between creating an iPhone optimization of an existing web 
page and redisplaying your web page to the point where you’ve actually created a new 
iPhone web app (the topic of the rest of part 2). Our next two examples surely cross 
that line. Gmail and Facebook both provide insightful looks at how you might redis-
play your own pages and also offer a bridge to the topics of the next chapters, where 
you’ll be creating iPhone-specific 
UI
s for pages meant to be viewed exclusively on 
the iPhone.
3.6.1
The Gmail iPhone pages
Google’s Gmail was one of the earliest websites to redisplay itself for the iPhone, and 
perhaps for good reason. The Gmail pages as they existed were a definitive example of 
how hard it could be to read pages on the iPhone. They contained tons and tons of 
information in a tiny font, and the majority of it was in one huge column that didn’t 
get much more visible when you double-tapped it.
Today, iPhone Gmail users have a different experience. When they first log in, 
things seem the same; they’re presented with a tiny login screen at the top left of their 
iPhone screen, which could really use a 
device-width
viewport. Yet as soon as they hit 
the first content page, they encounter an entirely redisplayed page. Figure 3.2 shows 
the same Gmail page side-by-side in Safari on the Mac and in mobile Safari on the 
iPhone Simulator.
The Gmail interface offers several ideas that developers redisplaying their pages for 
the iPhone should take note of. Most importantly, the iPhone page has been redevel-
oped into a river format. Whereas the desktop web page has a column to the left, every-
thing has been incorporated into a single column on the iPhone page by putting 
navigation at the top of the page (and, though we can’t see it here, also at the bottom).
Beyond that, Google has adopted the same look as the iPhone chrome. We’ll talk 
more about how to make your iPhone web app look like a native app in the future 
Licensed to Nick Wood <nwood888@yahoo.com>
JPG to GIF Converter | Convert JPEG to GIF, Convert GIF to JPG
Open JPEG to GIF Converter first; Load JPG images from local folders in "File" in toolbar Windows Explorer; Select "Batch Conversion" & Choose "GIF" in "Output
.pdf to jpg; change pdf file to jpg
JPG to PNG Converter | Convert JPEG to PNG, Convert PNG to JPG
Open JPEG to PNG Converter first; Load JPG images from local folders in "File" in toolbar Windows Explorer; Select "Batch Conversion" & Choose "PNG" in "Output
convert pdf images to jpg; convert pdf file into jpg
51
Redisplaying web pages
when we cover i
UI
. Part of this chrome centers on the use of menus that appear only 
when you click a button, much as is the case with the << Menu button here.
However, the Gmail page also shows some of the limitations of redisplaying your 
pages on the iPhone. For one, it often hides content at deeper levels; you can no lon-
ger look at a list of your Gmail tags without going to a separate web page. In addition, 
Google has cut back on the amount of information on the screen. This helps you to 
read things, and also means that you have to download less at a time through a poten-
tially slow 
EDGE
connection, but it also makes it difficult to figure out what’s inside a 
message when you view it from the iPhone. This is because much of the subject gets 
cut off—a particularly annoying problem for mailing list messages where a mailing list 
title takes up part of the subject line.
3.6.2
The Facebook iPhone pages
Facebook is another website that has been rewritten to redisplay on the iPhone. Their 
main content pages are much more readable on the iPhone thanks to, once again, a 
river format. Rather than using the iPhone standard of pushing a menu off to another 
page, the iPhone Facebook pages create an elegant tabbed interface that works pretty 
nicely, though it eventually scrolls off the screen, thanks to the lack of absolute posi-
tioning on the iPhone.
Rather than repeating our Gmail discussion by looking at those core content 
pages, we’ve decided to examine the Facebook login screen, shown in figure 3.3.
Figure 3.2 Gmail offers a different experience for iPhone users through a page that has been 
redisplayed to the point where it’s become an iPhone web app.
Licensed to Nick Wood <nwood888@yahoo.com>
52
C
HAPTER
Redeveloping web pages for the iPhone
If Facebook’s normal login page were shown on the iPhone, it’d be impossible to 
read—and impossible to click on the login forms—until you did a columnar zoom on 
the left-hand column. The iPhone page instead just shows you login widgets that are 
full sized on your screen. Although it’s not shown, they’re also perfectly sized to fill an 
iPhone screen if it’s in landscape mode. The downside is that you lose all the extra 
information from the normal login page. To offset that deficit, the iPhone page gives 
users the option to hop over to the regular Facebook page, something that more sites 
should offer.
On the whole, this special Facebook login is much more functional on the 
iPhone. Further, this type of redevelopment is easy to do, since it just requires recod-
ing a simple form for iPhone usage. If you’re clever, you could even do it without 
recoding the page: a simple viewport command with an 
initial-scale
set to zoom 
in to the left column would have accomplished much the same job as Facebook’s 
wholescale redevelopment.
3.7
Supporting non-iPhone users
As we’ve noted, at some point your iPhone-optimized page will be so iPhone specific 
that it moves out of the arena of optimization and actually becomes a web app. When 
this happens, make sure you have a fallback page for non-iPhone users. Just as it’s 
great to have mobile versions of your desktop pages, you should also have desktop ver-
sions of your mobile pages.
Figure 3.3 Facebook’s iPhone Optimized login screen makes everything big and easy to use, and gets 
rid of superfluous content.
Licensed to Nick Wood <nwood888@yahoo.com>
53
Supporting non-iPhone users
If you have two parallel websites running side by side, you can either automatically for-
ward users from one set of pages to the other depending on their device, or give them 
the choice to move to the parallel website no matter which device a user is working 
from. We suggest the latter, as we saw in the Facebook example site. 
We recommend this approach because we remain committed to letting users 
choose their web experience whenever possible, but also because we’ve already seen 
iPhone web apps that we felt provided an inferior experience to viewing the desktop 
web pages. This could well be a personal preference, and that’s a great reason to offer 
a choice. Even if your iPhone pages make the best possible use of an iPhone’s unique 
capabilities, some users may prefer the creakier but probably more fully featured pos-
sibilities offered by a true desktop web page.
When you step up to offering a full web app—without any parallel desktop 
pages—it’s polite to at least let desktop users know what’s going on. Some websites 
give a warning as to why an iPhone web app looks so funky on a desktop screen, while 
others just don’t allow users to visit the web app pages from a desktop browser. 
Lessons for SDK developers
Many of the lessons in this chapter had to do specifically with web design, including 
good HTML practices and specific attributes and tags that can be used on the Safari 
web browser. This chapter also gave us our first look at the two biggest innovations 
we discussed in chapter 1: input and output.
When looking at input, we saw the problems of fat fingers and how events have to be 
modeled differently because the finger isn’t a mouse. These same differences and 
limitations will appear in your own SDK designs.
When looking at output, we saw the clever way in which the iPhone uses its relatively 
small screen to model a much larger viewing space. Using a similar model for an SDK 
program can help you to use the iPhone’s architecture to its fullest (and in fact is 
already used in the SDK’s 
UIWebView
class).
We also saw our first hints at core iPhone functionality: the chrome and events.
The chrome will be a minor issue when you’re doing SDK development. You’ll still 
have a top bar, but you’ll have better control over what it looks like. You’ll be able to 
choose whether to have status-like bars or bottom bars depending on the needs of 
your program. Once you’ve made a choice, you can just pick the right class of objects 
from the SDK and drop it into your program.
The events listing in this chapter offer an excellent preview of how iPhone events are 
different from standard mouse-driven events. iPhone events aren’t just about point-
and-click; they’re about one or more fingers temporarily touching the screen, then 
moving in different ways. You’ll learn about how touches can be accessed—even on 
the web—starting in the next chapter. In the meantime you should be considering 
how this new paradigm for input might change how users interact with your programs.
Licensed to Nick Wood <nwood888@yahoo.com>
54
C
HAPTER
Redeveloping web pages for the iPhone
Another possibility that we haven’t seen yet would be to force a browser resize to a 
320x480 screen. Ultimately your choice will depend on what you expect your user 
base to be—but giving readers more information by providing some sort of desktop 
page is rarely going to be a bad thing.
3.8
Summary
Although an iPhone theoretically contains a fully enabled desktop browser, there’s no 
way that a small handheld device could ever provide the complete functionality of a 
desktop display. Fortunately, there are some easy things you can do to improve the 
experience for iPhone viewers of your web page. 
We’ve broken our redevelopment suggestions into two parts. First, there are fixes 
that you need to apply to make your web pages iPhone friendly. Second, there’s 
functionality you can use to directly detect iPhone usage and thus make your pages 
iPhone optimized. If you follow all the advice in this chapter—adding some sim- 
ple iPhone variables to your pages, improving your web abstractions, engaging in 
some iPhone best practices, playing with the chrome, and looking at iPhone ges-
tures—you’ll have dramatically improved how your web pages work on an iPhone.
The ultimate in iPhone optimization is creating totally new displays for your web 
page that format content in a method that’s more accessible on the iPhone’s smaller 
screen. If you go too far in this direction you’ll end up branching your code base, pro-
viding entirely different support for iPhones and desktops. Although that may be fur-
ther than you want to go if you’re just supporting the occasional iPhone user, if you’re 
providing serious iPhone support—and as a reader of this book, you probably are—it 
may end up being a necessity. This leads nicely into our next topic—iPhone web apps, 
which are web pages built solely for use on the iPhone.
Licensed to Nick Wood <nwood888@yahoo.com>
55
Advanced WebKit 
and textual web apps
In the previous chapter we covered the fundamentals of redeveloping an existing 
web page for use on iPhones. In the process you learned about important concepts 
like the viewport, and we discussed a lot of what works—and what doesn’t—on 
Apple’s unique mobile platform. We expect, though, that most of you aren’t just 
interested in touching up existing web pages but instead are looking to create 
totally new programs. Further, after considering the advantages and disadvantages 
of both web and native development, you’ve decided that writing a new program 
using a web language is the best way to go. We’re now ready to enter the world of 
web apps, a topic that will consume the rest of part 2 of this book.
We’ve identified three ways to create web apps for the iPhone. Each will take 
advantage of all your existing web knowledge, but each will also connect you with a 
specific library or Apple browser add-on that will allow you to unlock additional 
functionality on the iPhone platform.
This chapter covers
Learning about the WebKit
Recognizing touch gestures
Recognizing orientation
Licensed to Nick Wood <nwood888@yahoo.com>
Documents you may be interested
Documents you may be interested