The end result is shown in Figures 4 through 8. No, they aren't identical; with screen sizes that vary as much as these devices do, they shouldn't be. But they're all clear and readable, and that's what matters when you're on the move.
Figure 5: The iPad version never looked too bad, but the modified version definitely makes it easier on the eyes.
Figure 6: This looks much better than Figure 3 (and not only because it's now horizontal).
Figure 7: The Palm Pre Plus finally gets its chance to look good.
Figure 8: The iPhone 3G S gets to show off how the hover menus work when tapped.
With some simple Web technologies, it's not difficult to make your site feel friendly to even the smallest among us. Hopefully, you've seen that you can get a start without a whole lot of effort.
After you've become comfortable with these techniques, you can take the next step and work with the user agent detection method I described for Android. From there, you can detect other devices and load specific style sheets for each to invoke more layout-oriented CSS functions. For example, you may end up showing and hiding
divs in different locations, or actually changing the layout of a Web page based on the mobile device accessing it -- but that's for another day.