SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,756
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Setting Page Width

    What is a good size for Page Width so your website is usable by a large audience?

    And why do you say so?


    Debbie

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    That's a topic of great debate, the best answer is that should not DEPEND on fix width. OK, That's my disclaimer, now here is my convoluted preferred practice.

    1) I like to make the USABLE ( anything inside the body tag) width to be a multiple of 160px... this only because it makes it easier to convert the styles or even plan them to degrade functionally for mobile devices such as iPhones.

    2) I chose 960px because it complies with the rule above. Although the average monitor has gotten so that it can support MUCH bigger sizes, you will find that ( on average, remember the user can change any setting), really wide blocks of text are difficult to read.

    The complicated stuff:

    Considering the above, you could make your site wider, and still maintain comfortably narrow text blocks... by having more "columns".. of course that means more possibility for vertical scrolling.

    You could also set a BIGGER text/head line size ratio.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,271
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    What is a good size for Page Width so your website is usable by a large audience?

    And why do you say so?


    Debbie
    A good width is the one that fits the devices that your audience is viewing with. If you are targeting mobile devices than a 1024px width is no good (or vice versa).

    The easiest solution is to have a fluid width that adapts to all and then adjust for more capable devices.

    Read the following link and although it applies its primarily concerned with mobile devices the logic can be applied to all.

    http://yiibu.com/articles/rethinking-the-mobile-web/

    For capable sites I prefer an elastic site (one that has a min and max-width) which defaults to fluid for less capable browsers or mobile devices.

    There is no one answer these days as the iphone, ipad and 27" monitors are all common place and it depends on who you need to support

    Small business sites seem to be mainly fixed with still and I rarely get asked to produce a fluid site for a small business.

  4. #4
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,756
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Paul...

    1.) I am planning on using your world-famous 3-column, fixed-width layout where the left and right margin adjust to fill in the difference between the fixed-width part and your monitor size.

    2.) My target audience is PC users.

    3.) I thought I had saw someone on here throwing out a number like 800 pixels?


    Debbie

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,271
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    If you are aiming at mainly pc users then I would go with elastic and stretch from about 700px - 1200px approx.

    More info here:
    http://www.hobo-web.co.uk/seo-blog/best-screen-size/
    http://www.smashingmagazine.com/2011...ve-web-design/

  6. #6
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,881
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    What is a good size for Page Width so your website is usable by a large audience?

    And why do you say so?
    The width of my browser window. And I'm not telling you what it is. In fact, it varies, depending on which computer I'm at and what I'm doing.

    Ideally, your site should be flexible enough to fit to whatever size my browser window is, although you would probably want to set a max-width to avoid it getting too big. People use a range of computers and other devices with a range of screen sizes, from mobile phones through netbooks/old PCs to high end widescreen monitors. Within that range, people will have their resolution set to varying values, and some people will maximise their browser window while others won't, and some will have sidebars open. (eg, on my home PC, which is 12801024, I don't have my browser tabs maximised, because it makes them too big, and lines get too long to comfortably read on textual sites - viewport width is about 960px. On my laptop and work PC, which are both 1024768, I do have my browser maximised. On my mobile phone, for graphical layouts it assumes a width of about 840px)

    But if making a flexible width is too difficult bearing in mind other design constraints and goals, it's better to make it smaller than larger - if possible, go for 768px so that it fits comfortably on an 800px screen. Anything larger than that and you will introduce horizontal scrolling for a significant minority of people ... and horizontal scrolling is BAD. Most people are not going to worry if the website is narrower than the available space, but plenty will complain or miss out on things if it's wider.

  7. #7
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,756
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    The width of my browser window. And I'm not telling you what it is. In fact, it varies, depending on which computer I'm at and what I'm doing.
    Ha ha!


    Ideally, your site should be flexible enough to fit to whatever size my browser window is
    Well, that is why I was thinking of using something like this from Paul O. (Honestly, he has so many examples, that I forget the exact name of the one I wanted to use, which was a few months ago. I just remember the name had "3-column" and "fixed width" and "sticky footer" and used margin: 0 auto; so that it adjusted reasonably to different width monitors. I think the link above is what I decided on?!)


    if possible, go for 768px so that it fits comfortably on an 800px screen.
    You lost me?!

    What is the significance of 768px (wide??).

    And how does 768px become 800px??


    I was going to a design like KLPX-FM which I believe is similar to Paul O's (although not a sophisticated).



    Debbie

  8. #8
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Debbie

    to answer at least one of your Qs. it (768px) doesn't "become" 800px.. but you have to consider that the browser it self takes up some screen real estate. So, if your target audience happens to use a resolution of 800px wide. and you made your site 800px, you'll get a scroll bar(at least most times) .. because the vertical scroll bar from the browser will take up 25-40px (or so) and there might be left-edge.. to the browser window of 5px.
    Also the user may not have his the window maximized to the size of his screen ( it's nice to be able to click onto the desktop w/o having to minimize or close he browser window all together and leave your site, would you?)

    So the "significance" is 800px - (estimated vertical scroller+ possible right border + few pixels to be able to see the desktop)= 768px.

  9. #9
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,756
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    Debbie

    to answer at least one of your Qs. it (768px) doesn't "become" 800px.. but you have to consider that the browser it self takes up some screen real estate. So, if your target audience happens to use a resolution of 800px wide. and you made your site 800px, you'll get a scroll bar(at least most times) .. because the vertical scroll bar from the browser will take up 25-40px (or so) and there might be left-edge.. to the browser window of 5px.
    Also the user may not have his the window maximized to the size of his screen ( it's nice to be able to click onto the desktop w/o having to minimize or close he browser window all together and leave your site, would you?)

    So the "significance" is 800px - (estimated vertical scroller+ possible right border + few pixels to be able to see the desktop)= 768px.
    Oh, okay, that makes sense!

    So, do you agree that I should shoot for a website that is 768px wide? (Kinda "skinny" isn't it?!)



    Debbie

  10. #10
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,784
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    Oh, okay, that makes sense!

    So, do you agree that I should shoot for a website that is 768px wide? (Kinda "skinny" isn't it?!)



    Debbie
    If you are going for a fixed width then 748 pixels is the figure that makes the most sense because then you don't need a separate page design for printing as 748 pixels is the screen equivalent to what is almost certain to fit across the page when printed.

    If you go any wider than that with a fixed width then you need a second version of the stylesheet to reduce the width for printing.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  11. #11
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,756
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    If you are going for a fixed width then 748 pixels is the figure that makes the most sense because then you don't need a separate page design for printing as 748 pixels is the screen equivalent to what is almost certain to fit across the page when printed.

    If you go any wider than that with a fixed width then you need a second version of the stylesheet to reduce the width for printing.
    So you wouldn't go any bigger than that?

    I had a really nice 3-column layout from Paul O but it is different than his one here.

    I am torn which one I should use? In the version I have, it is a 3-column fixed-width with 100% high columns and a sticky footer. (Not sure if you know which one I mean?!)

    I actually picked it on from another thread on here last Fall.

    Is the "max-min" feature really worth redoing everything and adding more complexity to my home page?


    Debbie

  12. #12
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    WHICH you'll notice so far the 'names' on the site that have answered you said don't fix the width -- there's a reason fixed width is a miserable /FAIL/ at web design, and don't let the PSD jockey who call their goof assed non-viable artsy drawings tell you anything different, unless you want to piss all over accessibility.

    I don't even like 768 anymore, even though it was the accepted norm. Browser chrome seems to be a bit bigger these days, so usually I'm setting my min-width to 752 and max-width to either 1104 or 1238 depending on the page and it's content.

    Min-width and max-width are easy so long as you don't get your hopes set on bandwidth chewing wasteful images that just get in the way of your site's content... a typically decent declaration for an outermost wrapper being:

    Code:
    body {
    	text-align:center; /* center #pageWrapper IE 5.x */
    	font:normal 85%/140% arial,helvetica,sans-serif;
    }
    
    #pageWrapper {
    	width:95%;
    	min-width:752px;
    	max-width:1280px;
    	margin:0 auto;
    	text-align:left; /* return to normal behavior after IE 5.x fix, see BODY */
    }
    
    * html #pageWrapper { /* IE6- support */
    	/* first set narrowest fixed width for when scripting is disabled */
    	width:752px;
    	/* then implement fluid width using IE expressions */
    	width:expression(
    		(document.body.clientWidth>1152) ? "1104px"
    			: ((document.body.clientWidth>800) ? "auto" : "752px")
    	);
    }
    That's lifted right out of the baseline screen.css I build most sites around. Said sites typically being a fraction the size of the bloated train wrecks people vomit up today, while working on everything from IE 5.5 to the latest flavor of the week browsers.

    With the wide range of possible screen sizes, resolutions, ratio of resolution to size (aka dot pitch) it's idiotic and lazy to design to a fixed width -- in many ways I find fluid easier to deal with code-wise as you DON'T have to calculate perfect widths on everything.

    As I like to say, let padding and margin do their jobs so you don't have to declare ANY widths on your content column elements. Just as not every element needs a class or ID on it (much like George Carlin's joke about "not every ejaculation deserves a name) people go just as crazy setting widths on things that typically don't need that declaration either. Three column layout you declare more than three widths, you're probably screwing up. (outer container and two fixed columns).

    But again, layouts are only as complex as you make them -- and JHVH people like to take simple layouts and make them needlessly complex. Even MORE pathetic when it's made more complex in the name of making it "simpler"... Which seems to be the current trend in web development -- selling needlessly complex, convoluted and bloated code as if it somehow makes things better, easier or simpler.

    Sorry, I'll get off the soapbox and stop ranting before I start pissing on the idiocy of CSS frameworks, Javascript libraries and the train wreck known as HTML 5.

  13. #13
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,881
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by felgall View Post
    If you are going for a fixed width then 748 pixels is the figure that makes the most sense because then you don't need a separate page design for printing as 748 pixels is the screen equivalent to what is almost certain to fit across the page when printed.

    If you go any wider than that with a fixed width then you need a second version of the stylesheet to reduce the width for printing.
    Bzzzt! 748px is too wide for A4 paper with 1cm margins left and right (on my setup anyway).

    It's good practice to make a separate print stylesheet anyway, because there will usually be quite a number of things you will want to change to optimise it for printing in order to make best use of whatever size paper the user has.

  14. #14
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    If you are going for a fixed width then 748 pixels is the figure that makes the most sense because then you don't need a separate page design for printing as 748 pixels is the screen equivalent to what is almost certain to fit across the page when printed.

    If you go any wider than that with a fixed width then you need a second version of the stylesheet to reduce the width for printing.
    Stevie kind-of said my immediate reaction to your post -- My version of it was more along the lines of "What the devil are you sending PX in your print stylesheet for?!?" (Ok, it actually had profanity in my initial reaction)

    There's a reason we have the MEDIA attribute. Of course I'd LOVE if they actually treated PX as PX for print instead of arbitrarily scaling it up a factor of 30 to 100 -- most people's pages rendering 2.6" to 3" wide at 300dpi... much less the micro-dot effect on a 1200dpi printer.

    Bottom line anything in my SCREEN.CSS which I send with media="screen, projection, tv" I do NOT want being printed.


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
  •