Free Trial

Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.

  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

2. Basic iPhone Styling > First Steps

First Steps

Theory is great, but I’m a “show me, don’t tell me” kinda guy. So let’s dive in.

Imagine that you have a website that you want to iPhone-ize (Figure 2-1). In this scenario, there are a number of easy things you can do to optimize a site for the iPhone. I’ll go over your options in this chapter.

The desktop version of a typical web page looks fine in Safari on a computer
Figure 2-1. The desktop version of a typical web page looks fine in Safari on a computer

Figure 2-2 shows what the same web page looks like on the iPhone. It’s usable, but far from optimized for the iPhone.

The same web page looks OK on an iPhone, but we can do much better
Figure 2-2. The same web page looks OK on an iPhone, but we can do much better

Example 2-1 shows an abbreviated version of the HTML for the web page shown in Figure 2-1. This is the HTML you’ll be working with in this chapter. You can download it from the book’s website (see How to Contact Us) if you’d like to try styling it as you go through the chapter. The desktop stylesheet (screen.css) is not shown, as it is not essential, but you can use the stylesheet from the previous chapter if you’d like to have something to play with.


  

You are currently reading a PREVIEW of this book.

                                                                                                                    

Get instant access to over $1 million worth of books and videos.

  

Start a Free Trial


  
  • Safari Books Online
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint