Home arrow HTML arrow Page 2 - Honey, I Shrunk My Website
HTML

Honey, I Shrunk My Website


Ever thought about developing a "PDA friendly" version of your site? In this article Keith shows us the steps we need to get started.

Author Info:
By: Keith Reichley
Rating: 4 stars4 stars4 stars4 stars4 stars / 5
October 22, 2002
TABLE OF CONTENTS:
  1. · Honey, I Shrunk My Website
  2. · Decide What to Publish

print this article
SEARCH DEVARTICLES

Honey, I Shrunk My Website - Decide What to Publish
(Page 2 of 2 )

Your first step is to decide what to deliver to your PDA-equipped audience. Start small and be selective. News stories, articles, product descriptions and order forms are good candidates for a channel's timely content.

You want a simple 2-3 level navigation, such as a main menu, submenus (optional) and content pages. For example, our WEBtheJOINT channel consists of two levels - a main menu of articles, and the articles themselves.

Keep the sum total of your pages to 50-100KB in size. AvantGo enforces limits of 256KB per channel, 32KB per page. Pages should be short and limited to one subject.

Coding Basics
AvantGo supports HTML 3.2 -- with exceptions. Forget about using frames and image maps. Image tag attributes like height, width, and text floating won't fly either. Text formatting capabilities are limited. The FONT and BASEFONT tags are useless.

Keep screen size in mind. You can design your pages for the lowest common denominator (Palm's 150 x 150 of usable screen). Or, you can use an HTTP Header (described in the next section) to adapt your content to fit the larger screens of Windows CE and HPC Pro devices.

With PDA's limited graphics capabilities, your safest bet is to use high-contrast grayscale images with a width of 150 pixels or less. Color images will be converted to grayscale by non-color devices. Be sure to use alt tags.

Using HTTP Headers
Once you've identified your channel's content-to-be, you face the prospect of optimizing it for the PDA. You can create separate versions for the standard browser and for PDA's, but the experienced developer may prefer to use JavaScript, PHP or another scripting tool to optimize pages on-the-fly. Use HTTP headers to determine the client's operating system, screen size, color capabilities, and more.

For our channel, we use PHP simply to determine whether the user's browser is "AvantGo". If it is, a downsized header file (PDA_header.inc) containing the HTML for one small image and a few navigational links is called, rather than the full-blown header (FULL_header.inc) that our regular site's visitors see:

<?php
$agent = getenv("HTTP_USER_AGENT");
$handheld = strpos($agent, "AvantGo") ? "Yes" : "No" ;
if($handheld == "Yes")
{
include("../PDA_header.inc");
} else {
include("../FULL_header.inc");
}
?>


Click here for the full scoop on using HTTP Headers.

Create Your Content
Design a small home page that gives the visitor a clear idea of what lies beneath. A main menu is good. Second and lower level content can either be created from scratch, or existing pages can be scripted with HTTP Headers as described above to eliminate the need for separate PDA-friendly versions.

Save the home page file and any other new or modified files on your web server. Consider putting the home page file into a separate subdirectory with header, footer and image files used solely for your AvantGo channel.

Using Forms
Any website worth the cyberspace it occupies has some interactivity via forms. AvantGo and PDA's can handle just about any kind of form. Be sure to keep in mind screen size and the HTML limitations mentioned previously.

The form that your user fills out and submits on the PDA is saved in the Forms Manager. The next time the user sync's to your channel, AvantGo sends the completed form to your server where it is processed as usual by your form's cgi-bin or other action.

The only major change you need to make to the form is to customize the Submit button with a little JavaScript. Replace the standard:

<input type="submit" name="submit" value="Submit">

with:

<input type="button" name="submit" value="Submit"
onClick="document.forms[0].submitNoResponse(
'This is the message that will be displayed after form
submission',
false,
true);
back()">


The submitNoResponse function is AvantGo's way of displaying a confirmation message t the user, and of specifying whether the form is hidden in the Forms Manager (in this example, "false") and whether multiple forms can be submitted ("true").


Create Your AvantGo Channel
If you haven't already done this, sign up for a free AvantGo account. Next, use AvantGo's wizard to create your channel. You'll specify the location of your home page, link depth, and more. This should take all of five minutes.

When finished, click on "Export Channels" to generate the URL that you can copy and post on your site so that customers can sign up for your channel. The URL will look like this:

http://avantgo.com/mydevice/ autoadd.html?title=WEBtheJOINT&url=ht
tp%3A%2F%2Fwww.webthejoint.com %2Favantgo%2Findex.php&max=100&dept
h=2&images=1& links=0&refresh=always&hours=1&dflags=127& hour=16&qu
arter=30&s=00

It ain't pretty, but it works like a charm. When you go to this URL the channel will be added to your "My Channels" list. Sync up your PDA, and then click the AvantGo icon on your PDA to test your handheld-friendly site.

If you don't own a PDA, don't worry. Download the Palm OS Emulator onto your Windows/Mac/Unix computer here.

Alternative PDA Browser Solutions
AvantGo's not the only game in town, but it's way ahead of whatever's in second place.

Blazer: Palm browser that can access virtually any site on the web, but strips out unsupported content (streaming media, Java, JavaScript). Unlike AvantGo, Blazer does not store content on the PDA. Cost: US$19.95.
http://www.handspring.com/software/blazer_overview.jhtml

Web Clippings: Stand-alone applications supported by Palm VII handhelds, Palm Vs with the OmniSky modem, and other handhelds with the Mobile 1nternet Kit installed.
http://www.palmos.com/dev/tech/webclipping/

What Are You Waiting For?
If you haven't already, sign up for a free AvantGo account. Subscribe to several channels -- you'll quickly find some with elegant navigation and valuable content. Yours could be one of them. Give it a shot.
DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

blog comments powered by Disqus
HTML ARTICLES

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials