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-
Trang 1Defining 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
T ier 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
Trang 2Media 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;
Trang 3In 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
Trang 4However, 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
Trang 5As 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:
Trang 6#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
Trang 7width 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
Trang 8Figure 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
T ier 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