SitePoint Sponsor

User Tag List

Page 1 of 3 123 LastLast
Results 1 to 25 of 63
  1. #1
    SitePoint Enthusiast eneza's Avatar
    Join Date
    Feb 2009
    Location
    Philippines
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb Standard Canvass

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

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Enthusiast eneza's Avatar
    Join Date
    Feb 2009
    Location
    Philippines
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So its by percent(&#37? Since you brought up the font size, is it ok if I specify it by POINT?

    Thanks Man

  4. #4
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    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 (&#37 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. #5
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Location
    Australia
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    SitePoint Addict
    Join Date
    May 2005
    Posts
    248
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For me, it's determined by the purpose of the site, audience and content.

  7. #7
    SitePoint Addict
    Join Date
    May 2006
    Posts
    399
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AlexDawson View Post
    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"?

  8. #8
    SitePoint Enthusiast
    Join Date
    Nov 2008
    Location
    Minnesota
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #9
    SitePoint Enthusiast
    Join Date
    May 2007
    Location
    Washington State, USA
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 07:58. Reason: wording improvement, adding points

  10. #10
    SitePoint Addict Fre420's Avatar
    Join Date
    Nov 2005
    Location
    Leuven, Belgium
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Attached Images Attached Images
    Last edited by Fre420; Jul 21, 2009 at 10:04. Reason: image not visibile on black modal window

  11. #11
    SitePoint Zealot Nick Burd's Avatar
    Join Date
    Jul 2008
    Location
    My Couch
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    NickBurd.Com

    Check out my site, give me a shout
    and let me know what you think.

  12. #12
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by eneza View Post
    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.

    Quote Originally Posted by eneza View Post
    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.

    Quote Originally Posted by harristown View Post
    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.

    Quote Originally Posted by Blue Sky View Post
    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.

    Quote Originally Posted by mathieuf View Post
    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.
    Birnam wood is come to Dunsinane

  13. #13
    SitePoint Addict Fre420's Avatar
    Join Date
    Nov 2005
    Location
    Leuven, Belgium
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    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

  14. #14
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    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.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  15. #15
    SitePoint Evangelist Scott.Botkins's Avatar
    Join Date
    Dec 2004
    Posts
    598
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I usually set my canvas in photoshop to 990X800px

  16. #16
    I solve practical problems. bronze trophy
    Michael Morris's Avatar
    Join Date
    Jan 2008
    Location
    Knoxville TN
    Posts
    2,053
    Mentioned
    66 Post(s)
    Tagged
    1 Thread(s)
    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. #17
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    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. #18
    Designer
    Join Date
    Jun 2006
    Location
    Manila
    Posts
    590
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #19
    SitePoint Addict
    Join Date
    Jan 2008
    Location
    Shaw AFB
    Posts
    282
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    ~ Nate L ~

  20. #20
    SitePoint Member coffeemaniac's Avatar
    Join Date
    Jul 2009
    Location
    Metro Manila, Philippines
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by marioo View Post
    For me, it's determined by the purpose of the site, audience and content.
    i agree with marioo. not so much techy though

  21. #21
    SitePoint Guru
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    852
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #22
    SitePoint Member
    Join Date
    Apr 2009
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i set my canvas to 990*800

  23. #23
    SitePoint Mentor silver trophybronze trophy

    Join Date
    Feb 2008
    Location
    Preston, Lancashire
    Posts
    1,378
    Mentioned
    72 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by eneza View Post
    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.

  24. #24
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,893
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    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 800600 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. #25
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,893
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Sega View Post
    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.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •