Designing specifically for PDA access

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
What sorts of things should I look out for if I'm designing a webpage
specifically for use on mobile phones or PDA's? Obviously smaller is
better (in terms of the overall page) but there's probably a lot more to

I have an example of my first attempt at:
This is simply a non-functioning capture of the page, showing  how far I
haven't got.

Please note: I don't care if it is valid HTML or not; the target
audience is my wife's XDA, and *nothing* else. She puts the data *into*
the live version of this sample, and I print it off before going
shopping. My closing of table elements is sporadic at best, for example.
My FORM is inside the table but not in any of the elements (it works
better in most browsers).

The actual webpage that we're using comes from a CGI script, so I have
control over the HTTP headers, if that helps (i.e. it doesn't have to be
served as text/html if that helps)

Steve Swift

Re: Designing specifically for PDA access

Steve Swift wrote:

Quoted text here. Click to load it

Yes, but it isn't rocket surgery.

Quoted text here. Click to load it

Oh my. 1995-style code!  :-)

Did you write that by hand? Or use some kind of generator? I would
suggest visiting a good tutorial first. This one is recommended: /

Quoted text here. Click to load it

Your browser will, though.

Quoted text here. Click to load it

First of all, I don't see any reason to have tables on the little page
at all. The <form> cannot be in between the <table> and the <tr>.

Quoted text here. Click to load it

Use a Strict DOCTYPE, and yes, server as text/html.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   " ">

   -Motorcycles defy gravity; cars just suck

Re: Designing specifically for PDA access

Quoted text here. Click to load it

Do just the same stuff as you ought to do anyway,
just be even more careful about actually doing it.

* Use HTML + CSS

* Don't use any HTML 3.2 features

* Build a fluid design, by use of CSS' features

* Choose CSS relative units such as em, rather than absolute units
such as pixels or points.

* Avoid absolute positioning

* Avoid <table>s. Avoid them for layout, as usual.

* Use real markup, not pictures of markup. Don't turn text into
images, or rely on graphical connivances to convey information etc.

* Use valid markup, according to an appropriate doctype declaration.

* Read Joe Clark's accessibility book

* Don't build a "modal" site. Don't use "magic" CSS stylesheets for
particular devices, or for "extra accessibility".

Then also consider (even more carefully) the linearised version of the
page. Switch off the CSS for a moment (Firefox Web Developer tookit et
al.) and see what it looks like afterwards. Imagine the way that a
screen reader might read this stuff out, if it could only progress in
a single linear manner, without two-dimensional screens or branching.
Worst case (phone-like) access is generally as a tiny scrolling window
onto a long one-dimensional tape, just from the  limitations of how
much text can fit onto the screen at a time.

When thinking of linearisation, make sure that any "vital" navigation
appears early on in that list.

In particular, you might want to reduce the use of <table>s that would
generally be "justified"  because they're tabular data. Even though
this isn't wrong, it's a hard task to make large tables accessible
through tiny screen devices.

Then get a more recent PDA. Why struggle to read things through 200px
when you can get 800px width for under100?  8-)

Quoted text here. Click to load it

Eeeeewwwww.....   You've posted to this ng. plenty of times. Didn't
you _read_ any of it?

Re: Designing specifically for PDA access

Quoted text here. Click to load it

You are using #E0F8FF as a background color. How du you know that
wife's XDA is not using #E0F8FF as a forgound color?

Site Timeline