While testing devices, I found a number of websites that documented how the Android should handle various situations. I tested sites with the Android emulator in addition to, of course, using an actual Android smartphone. I found that only on rare occasions did the docs match either of the displays, and that was still considerably more common than the emulator matching the phone's output. To get somewhat dependable results, I ended up duplicating several of the styles from mobile.css. Here's what's different:
h1, h2, h3, h4, h5, h6 {
font-family: "Droid Serif", Georgia, "Times New Roman", serif;
}
.landscape { font-size: 16px; }
.portrait { font-size: 24px; }
The heading tags are set to fonts supported by the Android, as there's no need for iOS, WebOS, or BlackBerry support here. I also set the fonts for landscape and portrait to fixed pixel sizes to improve the chances of getting the desired results.
Don't get me wrong: The Palm and Apple devices had their share of fun quirks as well. Happily, there are free emulators for them, which you can get from the Palm Developer Center and Apple's iPhone Developer Program, respectively.
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.
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, placing 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.
This article, "How to make your website mobile today," originally appeared at InfoWorld.com. Follow the latest developments in mobile technology and programming at InfoWorld.com.
Read more about software development in InfoWorld's Developer World Channel.
Dori Smith is the co-author (with Tom Negrino) of "JavaScript & AJAX for the Web: Visual QuickStart Guide," 7th ed., and "Styling Web Pages with CSS: Visual QuickProject Guide."
This story, "How to make your website mobile today" was originally published by InfoWorld.