Handheld Style Sheet Considerations

You'll begin this tutorial by creating a blank style sheet just as you did in Part 6. After you create this style sheet, save it in the CSSFiles folder and name the file HealthHandheld.css.

Linking to the Handheld Style Sheet

In Part 6, I discussed a particular problem relating to the ordering of the style sheets in the Safari 2 browser on Mac OS X 10.4 (Tiger). With this in mind, it is a good practice to add the link to the style sheet by hand. This ensures that the linked CSS files are requested in the correct in order.

To add the link to the handheld CSS file, complete the following steps:

1. Type <link href="CSSFiles/HealthHandheld.css" rel="stylesheet" type="text/css" media="handheld" />

   Your CSS link code should now look like the following:

   <link href="CSSFiles/HealthHandheld.css" rel="stylesheet" type="text/css" media="handheld" />  
   <link href="CSSFiles/HealthPrint.css" rel="stylesheet" type="text/css" media="print" />
   <link href="CSSFiles/health.css" rel="stylesheet" type="text/css" media="screen" />
   <!--[if lte IE 6]>
   <link href="CssFiles/IE.css" rel="stylesheet" type="text/css" media="screen" />
   <![endif]-->
   

2. Switch to Design view and select the handheld icon from the Style Rendering toolbar.

As you can see from Figure 1, the display is now totally unstyled and not very handheld-device friendly!

Figure 1. Your health.html file with the handheld display selected

Scaling Back the Design for Handhelds

When designing websites for handheld devices, you must consider what the end user really needs. Although your users are likely to have a decent GPRS (General Packet Radio Service) connection—an "always on" data connection for GSM—you really need to remember that this isn't the equivalent of broadband. Keep that in mind when you choose what to pass along to handheld devices on your website.

For example, a wireless handheld customer is not likely to be very happy when the browsing experience is brought to a standstill by large image downloads that are simply unnecessary for the site's functionality. Let's see what you can safely leave out of the design for those users.

The large header graphic is not integral to the design, so that can go. You can also leave out the image in the content area. The width of your design is going to be restricted to a maximum width of 240 pixels. This means you won't able to display your site in three columns. It's clear you have several changes to make to your design—both in the items you display and in the site's structure.

You can now begin to build your HealthHandheld.css file. First, copy over the zeroing selector and the body rule from your health.css file:

• View the movie: Setting the Base Elements

Complete the following steps:

1. Locate the body rule in HealthHandheld.css.
2. Delete the background-image property and value.
3. Add the max-width property and value to the body rule.
4. Type max-width: 240px; and press Enter.
5. Comment out the max-width rule as follows: /*max-width: 240px;*/
6. Press Enter.
7. Type width: 240px; and press Enter.
8. Below the body rule type #header, #content img { and press Enter.
9. Type display: none; and press Enter.
10. Type } and press Enter.
11. Type #wrapper { and press Enter.
12. Type padding: 2px; and press Enter.
13. Type } and press Enter.
14. Save your work
15. Open health.html in Design view
16. Click the Visual Aids button and select CSS Layout Backgrounds.

You can now clearly see the padding on the wrapper (see Figure 2).

Figure 2. Handheld view with CSS Layout Backgrounds switched on

Notice how using this feature allows you to clearly see the padding set on the wrapper div? This is one of the highlights of Dreamweaver 8 for me. The complete range of CSS functions under the Visual Aids button provides fantastic visual references for working with CSS-positioned layouts.

In the previous steps, you commented out the max-width property and value. At this time, Dreamweaver does not support the max-width property. To get a good feel for the design, you must set a width of 240 pixels on the body.

Once your design is ready to be published, you should remove the width property from the body rule and uncomment the max-width rule. This allows your page to flex and appear correctly on handheld devices with screens smaller than 240 pixels. If you leave the width equal to 240 pixels, users of devices with smaller screens will have to scroll horizontally to read everything on your web page.

Page 2 of 6

Previous Page

Next Page