Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I get questions a lot from designers about not only width but what height to use to 'keep everything above the fold'. Here is one answer I gave recently -</p> <p>For width, I'm not a designer but I've read that 960px width is the way to go these days, because it lends itself to being divided into columns that look nice, and fits nicely within most displays. If you can, design a liquid layout - but this is not always practical depending on your designer, your CSS skills, the images and the amount of text.</p> <p>(you always want there to be 65-80 characters per line, with a line-height of about 1.15). This is the optimal column width for text, and it has been proven to be much faster and pleasant to read than very wide or narrow columns)</p> <p>As far as 'above the fold', I just have to caution against using any such concept on the web. Horizontal scrolling can and should be avoided, but vertical scrolling is something you cannot 100% avoid. All I can tell you is that on a 1024x768 display (at least 95% of users have that or higher) you should be OK with a fixed 600px high block. But there are many different display formats out there, the browser chrome can take up a lot of room, and not everybody maximizes the browser window. </p> <p>here are some other sites that say more-or-less the same thing - but planning to get absolutely everything 'above the fold' for everyone is tough because then you might only have 400px or so, according to the actual statistics. </p> <p>And finally a good long article that goes into great detail (I'd post more but SO says I am too noob) - <a href="http://www.baekdal.com/articles/Usability/browser-size-design/" rel="nofollow noreferrer">How to design for Browser Sizes - baekdal.com</a></p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload