Designing specifically for PDA access

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
this.

I have an example of my first attempt at:
http://swiftys.org.uk/shopping.html
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
http://www.swiftys.org.uk/swifty.html
http://www.ringers.org.uk

On 17 Apr, 07:21, Steve Swift <Steve.J.Sw... (AT) gmail (DOT) com> wrote:

What sorts of things should I look out for if I'm designing a webpage
specifically for use on mobile phones or PDA's?

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 under £100? 8-)

I have an example of my first attempt at: http://swiftys.org.uk/shopping.html

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

On 17 Apr, 08:21, Steve Swift <Steve.J.Sw... (AT) gmail (DOT) com> wrote:

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
this.

I have an example of my first attempt at:http://swiftys.org.uk/shopping.html
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).

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