Canvas Size

1 Nov 2005 - 10:16am
8 years ago
3 replies
607 reads
Danna Hudson
2005

RE: Web site canvas area

I'm working with a client that we have always designed their site with a
canvas area of 720 px X 442 px (800 X 600 sans browser chrome).

We're ready to move into the 1024 X 768 realm but we don't want to assume
that the canvas area should utilize this entire space; many users do not
browse the web with their browser at full screen... So I'm looking for a
canvas area in between 800 X 600 & 1024 X 768... A size that takes advantage
of the users larger monitor resolution but doesn't require them to browse
the web site at full screen.

Is anybody else encountering this issue?
Have you already solved this and if so how?
Any research findings that helped you land on a specific canvas area between
800X600 & 1024X768?
Any thoughts?

Thanks so much!!!!

danna

--
danna hudson
information architect

the designory
211 east ocean blvd suite 100
long beach ca 90802-4850

ph 562-624-0255
fax 562-432-3518
cell 949-533-4350

danna.hudson at designory.com

Comments

1 Nov 2005 - 11:32am
Ben Hunt
2004

Danna, I have 3 major solutions for this, which depend on the design and the
needs of the web site.

One is to stick to 720 or so wide, usually in a centrally-positioned column.

The other is to use a zoom layout, where all proportions are measured in
ems, rather than fixed. Then, the user can zoom in and out to their heart's
content. If you have a big screen area, you can zoom the column to fit it,
if you want.

The third solution is to use the full width, whatever that is. i.e. Use
full-width divs or widths set in percentages that fill up the space.

May not be much help. It is a knotty perennial problem, and having done 100
web sites, these solutions are the state of the art as far as I'm concerned.

- Ben

-----Original Message-----
Danna Hudson

I'm working with a client that we have always designed their site with a
canvas area of 720 px X 442 px (800 X 600 sans browser chrome).

We're ready to move into the 1024 X 768 realm but we don't want to assume
that the canvas area should utilize this entire space; many users do not
browse the web with their browser at full screen... So I'm looking for a
canvas area in between 800 X 600 & 1024 X 768... A size that takes advantage
of the users larger monitor resolution but doesn't require them to browse
the web site at full screen.

Is anybody else encountering this issue?
Have you already solved this and if so how?
Any research findings that helped you land on a specific canvas area between
800X600 & 1024X768?
Any thoughts?

Thanks so much!!!!

danna

1 Nov 2005 - 11:52am
Jim McCusker
2004

Danna Hudson wrote:

>Is anybody else encountering this issue?
>Have you already solved this and if so how?
>Any research findings that helped you land on a specific canvas area between
>800X600 & 1024X768?
>Any thoughts?
>
>
I think that you should go with a liquid layout at 800x600 sans chrome.
Meaning that it should scale up to 1024x768 and beyond, but will scale down
to look good at that lower level.

Here are some resources on designing liquid layouts:

http://www.mardiros.net/liquid-css-layouts.html

Jim

1 Nov 2005 - 11:51am
timothymills
2005

> We're ready to move into the 1024 X 768 realm but we don't want to
> assume
> that the canvas area should utilize this entire space; many users do
> not
> browse the web with their browser at full screen... So I'm looking for
> a
> canvas area in between 800 X 600 & 1024 X 768... A size that takes
> advantage
> of the users larger monitor resolution but doesn't require them to
> browse
> the web site at full screen.

Danna,

We've had a lot of luck lately designing sites with some elasticity
that allows them to stretch based on the user's screen size. This way
we can still provide a great experience at 800x600 while targeting a
higher resolution. This kind of stretching can pose a danger of course
if gone unchecked as you don't want the line length of the content to
stretch too wide. We recently launched a client's site that
incorporates some elasticity in its design:
<http://kcai.edu/admissions/>. It's not the most amazing example of
this type of stretching, but it gets the point across.

Probably the best example I've seen of this recently is Shaun Inman's
new stats package, Mint <http://haveamint.com/>. You can see in the
demo movie on that site how the columns expand and reposition
themselves based on the width of the browser window.

Tim

.....................................................
timothy mills

information architect
tanagram partners

125 n halsted st
chicago illinois 60661

http://www.tanagrampartners.com
tel 312 876 3668
fax 312 876 3662

Syndicate content Get the feed