Designing Web Pages for PDAs

PDAs have tight limits: small screens, fewer colors, slow download speeds. Visitors won't read long pages.

Tips for Content on PDAs

Offer content that people will use when they are walking, in a car, or at a cafe. Examples: directions, office hours, calendars, price comparisons. My page on late-night food in Silicon Valley is an example. The original page for desktop browsers is very long. I broke this up into sub-pages so people select a city and see only the restaurants for that city.
Simplify the text. Avoid long pages of text. Avoid scrolling.
Include telephone numbers in a standard format. Many browsers highlight the phone numbers so people can click to call the number.
Place a site map (index of pages) on your front page so visitors can go to what they want.

So visitor don't have to scroll to the top again, place navigation bars at the bottom. I also include small UP arrows so people can jump to the top.
Don't build graphic-intensive sites
Don't use splash pages
Simplify the HTML. Many PDA browsers only support a limited version or subset of HTML.
Don't nest tables within tables within tables. These may break.
Visitors pay for every byte. Delete unnecessary spaces and code.
Use CSS. When I made the first version of this site, there was no CSS. But be careful with CSS. Test it with your PDA. Some cellphones and PDAs may not support CSS.
Look at my CSS stylesheet for these pages; I simplified it for quick download.
Open the web page in a browser and then resize the browser to the size of your PDA's screen. This is a quick way to test results.
Don't try to accomodate both desktop and PDA visitors on one page. Build a separate page for PDA visitors.
Keep the code as simple as possible. Stick to simple code that works on all sites.
While developing, put the webpage inside a table with the width that matches your PDA. This lets you see the webpage in your desktop browser at a size similar to your PDA. When you upload this, remove (or turn off) the table. Many PDA browsers resize the page to match the PDA's screen. So test, test, test.
Remember the ol' invisible pixel trick? Use an invisible one-pixel gif and change the image size to create space where you need it.

Don't forget SEO! PDA users search with Google, so use SEO on your pages. Write good content and use the tags. There are very few websites for PDAs, so if you get in first, you'll be at the top. Get a free SEO white paper at andreas.com.
Google Adwords has ads specifically for PDAs. Go to Adwords and set up an ad group with Mobile Ads.
Most analytics tools can't track PDA visits because most PDA browsers currently (2007) don't support JavaScript. Embed your analytics code anyway; at some point, these browsers will use JavaScript.

Use JPG and compress the image. Small is better than quality.
Use ALT attributes in image tags. Many users turn off images in their PDA browser.
Design for grayscale. Some cellphones and PDAs have black-and-white screens. These display grayscale with 16 shades. Some color screens use the 216-web-safe colors. Other PDAs offer more colors. Design for your visitors; if their PDAs and phones use grayscale, then design for grayscale.
Some PDA browsers use Windows 16-colors. Here is an image in Windows 16-colors. The left cube is in color; the right cube is a grayscale image of the same colors. On a grayscale screen, both cubes are gray. Note that yellow disappears in grayscale. Red and green are the same color. Test your images in as many PDAs, cellphones, and browsers as you can.
Navigation Icons: To fit icons into a line, the icon should be no taller than nine pixels. Here are various buttons: , , , , , , , and . Yes, you may copy and use these. Don't forget to view your icons in grayscale. These yellow/blue icons also work well in black-and-white.

]