Chapter 8: Enabling and Optimizing Web Sites for iPhone and iPod touch 190 Defining Multiple Columns (Future Use) Safari 3 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, width of the columns, and the gap between them. Because Internet Explorer does not 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; Unfortunately, the current version of Mobile Safari does not support these properties. However, be watching for their future support. When Mobile Safari does support multicolumns, it can offer an easy way to transform existing content into the columnar structure that iPhone and iPod touch users love. Tier 3: Custom iPhone/iPod touch Styles An iPhone and iPod touch user can navigate a Tier 2 Web site with double - tap, pinch, and flick gestures, but that does not necessarily mean that it is easy or enjoyable to do so. Panning and scrolling across the screen can become quickly tiresome after the excitement over the “ full Web ” wears off. Users will quickly find themselves returning to sites that provide a richer, more tailored experience for Mobile Safari. The easiest way to do this is to create custom styles specifically for iPhone and iPod touch. c08.indd 190c08.indd 190 12/7/07 2:54:40 PM12/7/07 2:54:40 PM Chapter 8: Enabling and Optimizing Web Sites for iPhone and iPod touch 191 Media Queries If you wish to specify a style sheet for iPhone and iPod touch usage, you can use a CSS3 media query. iPhone and iPod touch do not support the dumbed down handheld or print media types. Instead, iPhone and iPod touch look for the screen media type. You can then use the link element to set specific styles for iPhone and iPod touch by looking only for devices that support 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/iPod touch – 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. And, for browsers that do not support the only keyword, they will ignore the rule anyway. However, the problem is that, under certain situations, Internet Explorer 6 and 7 fail to ignore this rule and will render the page anyway using the iPhone/iPod touch – specific style sheet. As a result, 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 will now ignore this link element, because the [if !IE] indicates that the enclosed code should only be executed outside of IE. Therefore, if you would like to have a default style sheet for normal browsers and a custom style sheet for iPhone and iPod touch users, you would 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]-- > Text Size Adjustment Normally, the font size of a Web page adjusts automatically when the viewport is adjusted. For instance, after a double - tap gesture, Mobile 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 would like to prevent the text from resizing, then use the following CSS rule: -webkit-text-size-adjust: none; c08.indd 191c08.indd 191 12/7/07 2:54:40 PM12/7/07 2:54:40 PM Chapter 8: Enabling and Optimizing Web Sites for iPhone and iPod touch 192 In general, for most Web site viewing, you will want to keep this property enabled. For iPhone/iPod touch – specific applications in which you want more control over scaling and sizing, you will want to disable this option. Case Study 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 will need to be optimized in a unique manner, but this case study will demonstrate some of the common issues that will crop up. Figure 8 - 11 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 will still need to double - tap in order to read any of the text on the page. What ’ s more, the top - level links are difficult to tap unless you pinch and zoom first. Figure 8-11: The prototype structure of an easy-to-browse page c08.indd 192c08.indd 192 12/7/07 2:54:40 PM12/7/07 2:54:40 PM Chapter 8: Enabling and Optimizing Web Sites for iPhone and iPod touch 193 However, by creating an iPhone and iPod touch – specific style sheet, you can transform the usability site for Mobile Safari users without impacting any of the HTML code. Looking at the page (see Figure 8 - 12 ), you ’ ll notice that several transformations need to occur: ❑ Shrink the page width. ❑ Shrink the Operation Classroom logo at the top of the page. ❑ Increase the font size for the menu links, page header, rabbit trail links, and body text. ❑ Move the sidebar to appear below body text. Shrink page width Shrink header Enlarge menu links Increase font sizes Move sidebar content Figure 8-12: Transforming the structure using CSS c08.indd 193c08.indd 193 12/7/07 2:54:41 PM12/7/07 2:54:41 PM Chapter 8: Enabling and Optimizing Web Sites for iPhone and iPod touch 194 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 of the work that you need to do to the HTML files. To create the new custom style sheet, you will 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; } While this size is not as large as what an iPhone/iPod touch application 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: c08.indd 194c08.indd 194 12/7/07 2:54:41 PM12/7/07 2:54:41 PM Chapter 8: Enabling and Optimizing Web Sites for iPhone and iPod touch 195 #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 and 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 along side of 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, you remove the float property and add a clear: both declaration to prevent the sidebar from any side wrapping. You also change the small c08.indd 195c08.indd 195 12/7/07 2:54:41 PM12/7/07 2:54:41 PM Chapter 8: Enabling and Optimizing Web Sites for iPhone and iPod touch 196 width of 254px to 100 percent, which enables it to take up the entire contents 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 8 - 13 , 8 - 14 , and 8 - 15 show the results of the transformation. Figure 8-13: The top banner is smaller, but the link sizes are larger. c08.indd 196c08.indd 196 12/7/07 2:54:41 PM12/7/07 2:54:41 PM Chapter 8: Enabling and Optimizing Web Sites for iPhone and iPod touch 197 Figure 8-14: Text is easily readable without the need for double-tap or pinch gestures. Figure 8-15: Sidebar content now follows main body text. 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 . content into the columnar structure that iPhone and iPod touch users love. Tier 3: Custom iPhone/ iPod touch Styles An iPhone and iPod touch user can navigate. rel=”stylesheet” type=”text/css” href= iphone- ipod.css”/ > Or, to set iPhone/ iPod touch – specific styles inside a particular CSS style sheet, you could