How do you design a web page that will look good on tablet or even iPhone as well as on a computer? How do you get everything to shrink down proportionally?

If someone could take a look at this page I'm doing for a friend -- www.arobinson.net. If you want to see the source code, look at www.tadrichards.com/arobinson.

It looks OK on a computer screen, but not on a tablet. The graphics are done as an absolute size, so obviously they don't shrink down. But if I do the graphic as a relative size -- height="75%" width="75%" -- it looks OK on some browsers, not on others.

Here it is that way: www.tadrichards.com/arobinson/indextest4


It looks fine on Firefox and Opera, but on Chrome it's distorted horizontally, and on my iPad (Safari) it's horribly distorted vertically. Is the relative sizing option simply a loser? If so, what do I do about optimizing it on a small screen?

I don't have any good answer to the question except to follow the basic design guidelines here:

http://stackoverflow.com/quest...idth-height-standard

Many sites write alternative Web sites for iPads and iPhones--the code recognizes the browser being used to view and switches to a mobile version of the site instead of the standard one.

There probably will be decent tools developed which will handle the problems better in the future, but right now I don't see any simple solutions to the dilemma. For one thing, even on an iPad or iPhone you don't know the orientation of the device, which of course affects the way Web sites are viewed.

Jeff/CompGuy

I'm finding that out.

 
Tad,

Perhaps there's something (or several somethings--detecting mobile devices, redirecting to pages designed for same) here that might help?