|
|||||||
New to SitePoint Forums? Register here for free!
|
![]() |
|
|
Thread Tools | Display Modes |
|
|
#1 |
|
SitePoint Enthusiast
![]() Join Date: Feb 2009
Location: Philippines
Posts: 63
|
Is there a standard canvass size when you starting your website?
|
|
|
|
|
|
#2 |
|
SitePoint Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() Join Date: Nov 2004
Location: Åsnorrbodarna
Posts: 11,581
|
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! |
|
|
|
|
|
#3 |
|
SitePoint Enthusiast
![]() Join Date: Feb 2009
Location: Philippines
Posts: 63
|
So its by percent(%)? Since you brought up the font size, is it ok if I specify it by POINT?
Thanks Man |
|
|
|
|
|
#4 |
|
SitePoint Mentor
![]() Join Date: Feb 2009
Location: England, UK
Posts: 4,416
|
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
![]() |
|
|
|
|
|
#5 |
|
SitePoint Enthusiast
![]() Join Date: Apr 2009
Location: Australia
Posts: 46
|
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. |
|
|
|
|
|
#6 |
|
SitePoint Zealot
![]() ![]() Join Date: May 2005
Posts: 187
|
For me, it's determined by the purpose of the site, audience and content.
|
|
|
|
|
|
#7 | |
|
SitePoint Addict
![]() ![]() ![]() Join Date: May 2006
Posts: 366
|
Quote:
|
|
|
|
|
|
|
#8 |
|
SitePoint Enthusiast
![]() Join Date: Nov 2008
Location: Minnesota
Posts: 55
|
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 |
|
|
|
|
|
#9 |
|
SitePoint Member
Join Date: May 2007
Posts: 4
|
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! Last edited by mathieuf; Jul 21, 2009 at 08:58. Reason: wording improvement, adding points |
|
|
|
|
|
#10 |
|
SitePoint Addict
![]() ![]() ![]() Join Date: Nov 2005
Location: Leuven, Belgium
Posts: 210
|
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:
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) :
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 Last edited by Fre420; Jul 21, 2009 at 11:04. Reason: image not visibile on black modal window |
|
|
|
|
|
#11 |
|
SitePoint Zealot
![]() ![]() Join Date: Jul 2008
Location: My Couch
Posts: 111
|
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. |
|
|
|
|
|
#12 | ||||
|
SitePoint Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() Join Date: Nov 2004
Location: Åsnorrbodarna
Posts: 11,581
|
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. Quote:
Quote:
Quote:
![]() Liquid: dimensions specified in per cents. Elastic: dimensions specified in em. Quote:
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. |
||||
|
|
|
|
|
#13 | |
|
SitePoint Addict
![]() ![]() ![]() Join Date: Nov 2005
Location: Leuven, Belgium
Posts: 210
|
Quote:
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 |
|
|
|
|
|
|
#14 |
|
Mah-lye-kuh
![]() Join Date: Aug 2004
Location: Hamburg, Germany
Posts: 2,364
|
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. |
|
|
|
|
|
#15 |
|
SitePoint Guru
![]() ![]() ![]() ![]() ![]() Join Date: Dec 2004
Location: cincinnati
Posts: 612
|
I usually set my canvas in photoshop to 990X800px
|
|
|
|
|
|
#16 |
|
SitePoint Addict
![]() ![]() ![]() Join Date: Jan 2008
Posts: 309
|
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. |
|
|
|
|
|
#17 |
|
SitePoint Mentor
![]() Join Date: Feb 2009
Location: England, UK
Posts: 4,416
|
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 ![]() |
|
|
|
|
|
#18 |
|
The Only Designer on SP
![]() ![]() ![]() ![]() Join Date: Jun 2006
Location: Somewhere below the equator, in South East Asia
Posts: 553
|
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.)
|
|
|
|
|
|
#19 |
|
SitePoint Addict
![]() ![]() ![]() Join Date: Jan 2008
Location: Orlando, FL
Posts: 249
|
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. |
|
|
|
|
|
#20 |
|
SitePoint Member
Join Date: Jul 2009
Location: Metro Manila, Philippines
Posts: 10
|
|
|
|
|
|
|
#21 |
|
SitePoint Guru
![]() ![]() ![]() ![]() ![]() Join Date: Oct 2006
Location: Queensland, Australia
Posts: 662
|
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. |
|
|
|
|
|
#22 |
|
SitePoint Member
Join Date: Apr 2009
Posts: 11
|
i set my canvas to 990*800
|
|
|
|
|
|
#23 |
|
SitePoint Addict
![]() ![]() ![]() Join Date: Feb 2008
Location: European Union
Posts: 269
|
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. |
|
|
|
|
|
#24 |
|
SitePoint Addict
![]() ![]() ![]() Join Date: Mar 2006
Posts: 206
|
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. |
|
|
|
|
|
#25 | |
|
SitePoint Addict
![]() ![]() ![]() Join Date: Mar 2006
Posts: 206
|
Quote:
In other words, everybody wins. All it takes is a modicum of effort from the designer, and it is usually straightforward to achieve. |
|
|
|
|
![]() |
| Bookmarks |
| Tags |
| web design |
«
Previous Thread
|
Next Thread
»
| Thread Tools | |
| Display Modes | |
|
|
|
All times are GMT -7. The time now is 13:27.













Linear Mode
