Designing specifically for PDA access

17/04/2008, 07h21

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 s (i.e. it doesn't have to be
served as text/html if that s)

--
Steve Swift
http://www.swiftys.org.uk/swifty.html
http://www.ringers.org.uk

17/04/2008, 12h28

Steve Swift 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.

Yes, but it isn't rocket surgery.

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

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:
http://htmldog.com/

> Please note: I don't care if it is valid HTML or not;

Your browser will, though.

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

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

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

--
-bts
-Motorcycles defy gravity; cars just suck

17/04/2008, 15h08

On 17 Apr, 07:21, Steve Swift <Steve.J.Sw...@gmail.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?

18/04/2008, 19h52

On 17 Apr, 08:21, Steve Swift <Steve.J.Sw...@gmail.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?

17/04/2008, 07h21	#1 (permalink)
Steve Swift Messages: n/a Hébergeur:	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 s (i.e. it doesn't have to be served as text/html if that s) -- Steve Swift http://www.swiftys.org.uk/swifty.html http://www.ringers.org.uk

17/04/2008, 12h28	#2 (permalink)
Beauregard T. Shagnasty Messages: n/a Hébergeur:	Re: Designing specifically for PDA access Steve Swift 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. Yes, but it isn't rocket surgery. > 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. 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: http://htmldog.com/ > Please note: I don't care if it is valid HTML or not; Your browser will, though. > 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). 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>. > The actual webpage that we're using comes from a CGI script, so I > have control over the HTTP headers, if that s (i.e. it doesn't > have to be served as text/html if that s) Use a Strict DOCTYPE, and yes, server as text/html. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> -- -bts -Motorcycles defy gravity; cars just suck

17/04/2008, 15h08	#3 (permalink)
Andy Dingley Messages: n/a Hébergeur:	Re: Designing specifically for PDA access On 17 Apr, 07:21, Steve Swift <Steve.J.Sw...@gmail.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?

18/04/2008, 19h52	#4 (permalink)
Roy A. Messages: n/a Hébergeur:	Re: Designing specifically for PDA access On 17 Apr, 08:21, Steve Swift <Steve.J.Sw...@gmail.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?

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email