Standard Canvass

[eneza]

Is there a standard canvass size when you starting your website?

[AutisticCuckoo]

The canvas is virtually infinite. The problem is the viewport, which is the browser window, the paper (when printing), etc.

And a browser window can be just about any size; it doesn't have to be maximised and there are different monitor sizes and hand-held devices with odd display dimensions.

A user-friendly web site adapts to the size of the viewport (within reasonable limits) and takes into account that the font size is also adjustable by the user. In other words, don't specify dimensions in pixels!

[eneza]

So its by percent(%)? Since you brought up the font size, is it ok if I specify it by POINT?

Thanks Man

[AlexDawson]

No you should not specify in points, PT is a measurement unit intended for print media not the web. You should be either specifying in EM (for elastic layouts) or percentages (%) for a liquid layout, both have their own pro's and con's but both are much more flexible to the visitors needs than pixel which is fixed and therefore inherently flawed in scalable resolutions

[harristown]

This is an interesting question. I would also like to know the "rule of thumb" answer. I understand that the dimensions must change as technology upgrades. Specifically as the 'average' monitor size increases, so may the 'designed for' size of a website.

I was under the impression the 960px was the width currently considered appropriate. I am unsure of a height.

[marioo]

For me, it's determined by the purpose of the site, audience and content.

[Blue Sky]

Originally Posted by AlexDawson

You should be either specifying in EM (for elastic layouts) or percentages (%) for a liquid layout, both have their own pro's and con's but both are much more flexible to the visitors needs than pixel which is fixed and therefore inherently flawed in scalable resolutions

Hmm, I use ems for liquid layouts - but what is an "elastic layout"?

[weborglodge]

In an ideal world, you'd have data from Google Analytics where you could see what resolution visitors are using currently on the site and then make a decision. As far as height, the most important thing to keep in mind perhaps, is that valuable real estate "above the fold." This space should be used to maximize traffic and visitor engagement.

Chris

[mathieuf]

Thank you for promoting liquid (and elastic) layouts. I have always held that the user knows best what dimensions they want for their browser, for their viewport. The browser gives the user a lot of flexibility (more than most people want or use), and web authors should design for that. The common practice of designing web pages as if they are on a fixed sheet of paper is, well, disgusting.

Unfortunately, eneza asks a very good question which I have not been able to find addressed on professional web sites. Even with fluid web pages, there is some minimum width one has to design for. I have not been able to find a good discussion of this, although some people I talked to say that in college courses the instructor defines a pixel size students should design for. Of course, this may be just the instructors preference for the course, and we are left to our creative side to make this decision (accounting for the intended audience, of course).

On the humorous side, I noted during a presentation of Sharepoint that the default web page size it used was always 10% wider than the browser viewport, and was fixed layout. While I think most people hate horizontal scrolling, I still see a lot of web pages that require me to horizontally scroll. This detracts from the professional impact of a site, I believe. Although I have seen some sites (such as Sitepoint) where this is a benefit in cutting off the advertizing that is often placed on the right side of the page!

[Fre420]

I use a 960px grid for about a year and a half now, since only a small percentage of the websites I make still has visitors with 800x600 screens.

The only thing I do still check manually is the viewport height.
I make a transparent png in Photoshop with the regular viewport heights (not screen heights) for all screensizes
it shows:

• a line where the viewport ends for a certain resolution.
• the percentage of visitors who can still see the content on this height.
• the % percentage of visitors whose viewport ends here (fold)

Since my last project, I experimented a bit to get this data easily in my html prototypes & wireframes.

When I put the initial wireframes in HTML, I place 2 dumy divs in my html
- div with grid under my container div --> 960 grid repeat Y
- div with viewports as last div in my body --> transparent png with viewport folds, fixed position to the screen. (display:none in css, I enable it for quick checks with firebug (display:block)).

Advantages in the storyboarding phase (html + css (layout only) prototype where I start filling in texts) :

• the 960 grid is always on in the background, it allows me to quickly resize blocks in width (3 on a row, 2 on a row, 3/5 + 2/5 etc ...), makes me able to quickly check different versions.
• The viewport png wich shows on top of the site, has a standard display:none. I enable it for quick checks with firebug (css edit display:block)
• I can check easily how big certain elements have to be (experiment with different header heights over all pages etc ...) to make the main message always clear in the viewport.
• I can always check if an overview table, or any other information design is fully visible for % viewers (in their viewport), even if it's placed in the middle of the page or the bottom.
• The designer needs less viewport checking to do (except homepage) when he's detailing the approved prototype with design elements.

I still use the viewport check png in Photoshop in the design phase.



attachement: grid.png = a version of the 960 grid (line height checker too, vertical rhythm).

attachement: grid-2.png = the viewport sizes of the latest project I did.

edit : click the image in the modal window (lightbox). They are transparent with black on it, you won't see a thing on a black background. Clicking the image will give the transparent png on a white background

[Nick Burd]

Generally when i'm designing a fixed width site, I would set my canvas to 990 x 660.. and use px when im setting widths and sizes.

i dont know if that helps.

[AutisticCuckoo]

Originally Posted by eneza

So its by percent(%)?

It depends on what behaviour you want when font size and/or viewport size is changed by the user.

Per cents let your design adapt to the viewport size, but won't be affected by changes in font size. That means long (unbreakable) words may overflow their column width if the viewport is narrow and/or the font size is large.

Dimensions in em are relative to the current font size, so the design will be elastic as the font size changes. But it won't be affected by changes in the viewport size, so you'll get a horizontal scrollbar in narrow viewports and a lot of dead space in wide viewports.

Most 'normal' sites fare best with a constrained liquid/elastic hybrid, where some columns are elastic (width in em) and one or more column is liquid to take up the remaining space. The 'constrained' part means you'll specify a minimum and maximum width – usually in em – to prevent liquid columns from becoming too narrow or too wide for readability.

Originally Posted by eneza

Since you brought up the font size, is it ok if I specify it by POINT?

Not for screen use, since not all browsers obey the graphic system metrics. I recommend setting a base font size (for the html element) in per cents, and then use either per cent or em for elements that need a different font size. If the exact size isn't too important, the keywords smaller and larger are also quite useful.

Originally Posted by harristown

This is an interesting question. I would also like to know the "rule of thumb" answer. I understand that the dimensions must change as technology upgrades. Specifically as the 'average' monitor size increases, so may the 'designed for' size of a website.

Not if you use liquid or liquid/elastic designs.

Originally Posted by Blue Sky

Hmm, I use ems for liquid layouts - but what is an "elastic layout"?

No, you've got it the wrong way round.
Liquid: dimensions specified in per cents.
Elastic: dimensions specified in em.

Originally Posted by mathieuf

Unfortunately, eneza asks a very good question which I have not been able to find addressed on professional web sites. Even with fluid web pages, there is some minimum width one has to design for.

You usually need both a minimum width and a maximum width for best usability. The most useful unit for those is em, as long as web sites mainly contains textual information.

The minimum width for a column depends on the language. English, which mostly has very short words, can be readable even in quite narrow columns. Languages like German or Swedish, which can have very long compound words, need wider columns.

The maximum width for a column should be somewhere around 65-70 characters, according to many usability studies. That corresponds to 35-40 em for most common proportional fonts.

[Fre420]

Originally Posted by AutisticCuckoo

No, you've got it the wrong way round.
Liquid: dimensions specified in per cents.
Elastic: dimensions specified in em.

I thought the differences where the following:
static: fixed website width
liquid: website width in relation to the view port, full width of the view port
elastic: website width in relation to the view port, but with a min width & max width

[kohoutek]

In my understanding, a liquid layout is a liquid layout, regardless of whether one specifies a layout width of 100% or 60%. It still is liquid. It doesn't have to be the full width of the viewport.

Elastic layouts will contract/expand in accordance with the font-size.

An elastic layout with min/max width, is (in my opinion) a semi-elastic layout, because you specify the maximum or minimum width the layout may contract/expand to.

[shockbotkins]

I usually set my canvas in photoshop to 990X800px

[Michael Morris]

I set a canvas of 1200, but that includes the gutters. I imediately draw a 1000px rectangle to frame out the page. I get it looking right as a fixed width, then apply fluid layouts to all browsers expect IE 6 which remains on a fixed width layout. I presume that an IE 6 browser is a corp machine or an old machine and expect it to have a 1024 or so monitor. If they have larger tough crap for them - if they can afford to upgrade their monitor they can afford to upgrade their browser.

Also fixed widths are easier to do on IE 6 since it doesn't have min-width and similar tags.

[AlexDawson]

kohoutek, actually when they use min or max width I prefer to call it a fluid layout... somewhere between elastic and liquid (kinda like jell-o)

Fixed = PX
Elastic = EM
Fluid = % + Min/Max-width/height
Liquid = %
Hybrid = PX+EM / PX+% / EM+%

At least that is how I differentiate them

[XLCowBoy]

De facto standard is 960px wide. The reason for this are the ads in the side bar. Practically 90% of modern popular websites (news, music, apple, e-commerce shops, etc.) are using a sub-1004px size. (I'm on twin large widescreen monitors, and it's obvious they have a max size of 1004px because the content never extends past 1004px.)

[NateL]

I like for the content to be in a 960px container.

I will start with a 1200px wide canvas in Photoshop and usually the background will be 1200px or so.

[coffeemaniac]

Originally Posted by marioo

For me, it's determined by the purpose of the site, audience and content.

i agree with marioo. not so much techy though

[Wardrop]

I'm a big fan of sites with a set maximum width, which can however shrink horizontally to fit in smaller view ports. I hate sites like most forums which are simply too wide. It just makes reading more difficult, as not only is each line simply too long, but also because the page also loses some of its visual structure.

In other words, I like having my browser maximised when browsing, as I don't like being distracted by the rest of my operating system, however, I don't like websites like sitepoint which consume the entire 1920 pixels of horizontal resolution. It doesn't do me any favours. A good example of an liquid layout with a set maximum width is www.whirlpool.net.au. It has a maximum width of 1410px, while still maintaining good usability at 1024x768.

[durrenmatt]

i set my canvas to 990*800

[Sega]

Originally Posted by eneza

Is there a standard canvass size when you starting your website?

I have a 24" monitor, so as you expect I prefer non-liquid layouts. Liquid layout just make the text go on and on, making readability unbearable unless you change the browser size. Granted you might argue and state that liquid layouts are better because the user defines the width of the site, but for this reason I prefer fixed.

Liquid layouts will become very popular once CSS 3 becomes more accessible in various browsers. The only browser than touches on proper CSS3 is Opera. There is a CSS3 property than can divide text into sections. I prefer fixed centered layouts with a width of 990px.

[Stevie D]

Ideally, a design should be adaptable to a range of screen sizes. It should certainly accommodate a viewport of 750px wide without horizontal scrolling. It is unlikely that you would want it to stretch wider than about 1200px, because it gets harder to read lines that long at a 'normal' font size.

A significant proportion of people do still use 800×600 screen resolutions. A significant proportion of people have sidebars on the browser. A significant proportion of people don't want to maximise their windows. And nobody wants a horizontal scrollbar!

Unfortunately, there are far too many people peddling the myth that a fixed or minimum width of 960px (or greater) is acceptable. That's fine - if it is genuinely impossible to design the website in such a way that it resizes to a smaller viewport, and if you truly believe that the aesthetic design of your site is more important than the comfort and convenience of your users, then go for a wide fixed width.

On the other hand, if you give the slightest consideration to the people using your website, you will design it so that it will fit on a 750px wide screen.

[Stevie D]

Originally Posted by Sega

I have a 24" monitor, so as you expect I prefer non-liquid layouts. Liquid layout just make the text go on and on, making readability unbearable unless you change the browser size. Granted you might argue and state that liquid layouts are better because the user defines the width of the site, but for this reason I prefer fixed.

A good liquid design will be constrained by a max-width, so that it doesn't continue to expand ad infinitum, but is capped at a suitable maximum size, usually about 1200px, to ensure readable line lengths. That way people with the widest screens don't suffer by having exceptionally long lines, people with wider screens benefit from making full use of them, and people with narrower screens benefit from the website fitting onto them.

In other words, everybody wins. All it takes is a modicum of effort from the designer, and it is usually straightforward to achieve.