Recommended website resolution width and height

Question

Is there any standard on common website resolution   We are targeting newer monitors  perhaps at least 1280px wide  but the height may varies  and each browser may have different toolbar heights too   Is there any sort of standard to this

User · Answer

Here are statistics of browser display in 2008: http://www.w3schools.com/browsers/browsers_display.asp

About 50% users are still using 1024x768. If you want your site to look nice in high resolutions use flexible layout.

User · Answer

The guidelines we use  which seem to be fairly widely used and are backed up by the figures that we get from Google Analytics  are to design the site so that it will work on a screen that is 1024 pixels wide and 768 pixels high  1024x768 and 1280x800 are the most common resolutions we see  accounting for at least 70  of all traffic    This is why you see many sites  this one included  which use a central column approx 1000 pixels wide and with the most important content in the top 500-600 pixels so it s above the fold when being viewed in screens this size   Using a 1000 pixel wide layout works fairly well on screen sizes of up to about 1680 pixels in width  typically as high as you ll see on laptops  except the large 17  ones  but do start to look a bit silly on 1920 pixel wide ones  high end computers  typically workstations   however these very high resolutions don t account for a large percentage of traffic on the general internet - 2  or less  on the other hand  if you have a specialist audience like this site  the figure with high resolutions may be somewhat higher

User · Answer

I just took a sampling of screen resolutions from all of the client sites I have access to  this includes more then 20 sites in more then 8 industries here are the results  alt text http   unkwndesign com so percentScreenResolutions png Based on this I would say makes sure it looks good on 1024x768 as that is the majority here by a long shot   Also don t worry about the height as much  however try to avoid making most pages more then 1-2 printed pages at your default font size  most people wont read a page that long  and if a user installs a toolbar that takes up vertical space  my personal preference is that it s their problem  but I don t think it s to big of a deal    note the percentage adds up to 100 05  because of rounding

User · Answer

Whatever your target browser size  make sure to include space for browser toolbars  status bars  and scroll bars as above  Internet Explorer  IME  often has over 100px of vertical space in toolbars and status bars  Typically  if I m shooting for 1024 x 768  I would try to create a design of around 960 - 980px wide and 600px high to be safe  That way you accomodate scrolling if necessary and some nice white space  if the design requires it   I highly recommend YUI grids for instances where you need to target specific sizes   YUI Grid

User · Answer

I ve personally always stuck to max width of 1000px  centered in the middle of the page  via margin left right  auto    If you re running at anything less than 1024x768  it s time to upgrade  Seriously  It s almost 2010  You can buy bargain bin lcd monitors with a native res of 1280x1024

User · Answer

Flexible or liquid layouts do restict design a little though  for example if you use background images that have to match the body background image   I would rather make different css layouts for the site and have them apply depending on the user s resolution  or if that s not possible  have not digged into that yet   make it a choosable option

User · Answer

Bad idea  I believe  The whole point in separating content from layout was to enable your web page to be displayed on any sort of browser   Putting in artificial limitations such as a minimum screen size will limit your market   Having said that  I believe every desktop should be able to display 1024x768  But what about the browsers running on iPhones or other screen-challenged devices  or even those that don t use their entire desktop for the browser   In answer to your specific question  no  I don t believe there is any standard for a minimum or common display area in browsers

User · Answer

I just took a sampling of screen resolutions from all of the client sites I have access to  this includes more then 20 sites in more then 8 industries here are the results  alt text http   unkwndesign com so percentScreenResolutions png Based on this I would say makes sure it looks good on 1024x768 as that is the majority here by a long shot   Also don t worry about the height as much  however try to avoid making most pages more then 1-2 printed pages at your default font size  most people wont read a page that long  and if a user installs a toolbar that takes up vertical space  my personal preference is that it s their problem  but I don t think it s to big of a deal    note the percentage adds up to 100 05  because of rounding

User · Answer

Although the best width may by 1024 you ll have to adjust height for account for various browser settings  navigation  toolbar  bookmark toolbar  status toolbar  etc  and account for taskbar settings   It ll quickly drop the 768 down to around 550

User · Answer

Bad idea  I believe  The whole point in separating content from layout was to enable your web page to be displayed on any sort of browser   Putting in artificial limitations such as a minimum screen size will limit your market   Having said that  I believe every desktop should be able to display 1024x768  But what about the browsers running on iPhones or other screen-challenged devices  or even those that don t use their entire desktop for the browser   In answer to your specific question  no  I don t believe there is any standard for a minimum or common display area in browsers

User · Answer

sbeam said that  you always want there to be 65-80 characters per line   That is not true  Wikipedia  for example  may have 180 characters per line  Or was it meant to be a particular website

User · Answer

I would say that you should only expect users to have a monitor with 800x600 resolution   The Canadian government has standards that list this as one of the requirements   Although that may seem low to somebody with a fancy widescreen monitor  remember that not everybody has a nice monitor   I still know a lot of people running at 1024x768   And it s not at all uncommon to run into someone who s running in 800x600  especially in cheap web cafes while travelling  Also  it s nice to have to make your browser window full screen if you don t want to   You can make the site wider on wider monitors  but don t make the user scroll horizontally   Ever   Another advantage of supporting lower resolutions is that your site will work on mobile phones and Nintendo Wii s a lot easier   A note on your at least 1280 wide  I would have to say that s way overboard   Most 17 and even my 19 inch non widescreen monitors only support a maximum resolution of 1280x1024   And the 14 inch widescreen laptop I m typing on right now is only 1280 pixels across   I would say that the largest minimum resolution you should strive for is 1024x768  but 800x600 would be ideal

User · Answer

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 -  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    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   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    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    And finally a good long article that goes into great detail  I d post more but SO says I am too noob   - How to design for Browser Sizes - baekdal com

User · Answer

Ultimately  this is not a matter of standards or best practices for markup  but rather knowing your audience and making sure your website does what you want it to do    It s more important to consider the width of the browser viewport rather than screen resolution -- you cannot assume that every pixel on a display will be allocated to the browser  and even if it is  you have to subtract browser chrome   If you have access to analytics that report browser width  n b  browser width  not screen resolution  then pay very close attention   It s nice to try to accommodate the widest possible range of viewports but there are some limitations  Some challenges can be handled with CSS media types  some can t  Some can be handled with fluid layouts  But fluid layouts cannot work in all situations  depending on the type of information to be displayed  line length  reading comfort  etc  Some fluid layouts don t work in wide displays  Most break when sized below a certain width  etc   As much as I d personally like to design for viewports  960 pixels and up  you can t always do it  So in some cases  it s still safest to design for viewports  lt  760 pixels or so  800 pixel wide display  maximized  -- though the time we can finally toss this limitation once and for all -- for the desktop at least -- is very fast approaching   Where conversions are an issue -- and you have a fixed width layout -- you better have a darned good reason for putting anything that the user needs to click in order for the cash register to go  ka-ching  anywhere east of the 760th pixel   Ditto for the primary navigation   Finally  test your layout in everything you can get your hands on  Big  Small  Desktop  Handheld  The works  There s no substitute

User · Answer

Here are statistics of browser display in 2008: http://www.w3schools.com/browsers/browsers_display.asp

About 50% users are still using 1024x768. If you want your site to look nice in high resolutions use flexible layout.

User · Answer

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 -  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    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   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    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    And finally a good long article that goes into great detail  I d post more but SO says I am too noob   - How to design for Browser Sizes - baekdal com

User · Answer

Ultimately  this is not a matter of standards or best practices for markup  but rather knowing your audience and making sure your website does what you want it to do    It s more important to consider the width of the browser viewport rather than screen resolution -- you cannot assume that every pixel on a display will be allocated to the browser  and even if it is  you have to subtract browser chrome   If you have access to analytics that report browser width  n b  browser width  not screen resolution  then pay very close attention   It s nice to try to accommodate the widest possible range of viewports but there are some limitations  Some challenges can be handled with CSS media types  some can t  Some can be handled with fluid layouts  But fluid layouts cannot work in all situations  depending on the type of information to be displayed  line length  reading comfort  etc  Some fluid layouts don t work in wide displays  Most break when sized below a certain width  etc   As much as I d personally like to design for viewports  960 pixels and up  you can t always do it  So in some cases  it s still safest to design for viewports  lt  760 pixels or so  800 pixel wide display  maximized  -- though the time we can finally toss this limitation once and for all -- for the desktop at least -- is very fast approaching   Where conversions are an issue -- and you have a fixed width layout -- you better have a darned good reason for putting anything that the user needs to click in order for the cash register to go  ka-ching  anywhere east of the 760th pixel   Ditto for the primary navigation   Finally  test your layout in everything you can get your hands on  Big  Small  Desktop  Handheld  The works  There s no substitute

User · Answer

The guidelines we use  which seem to be fairly widely used and are backed up by the figures that we get from Google Analytics  are to design the site so that it will work on a screen that is 1024 pixels wide and 768 pixels high  1024x768 and 1280x800 are the most common resolutions we see  accounting for at least 70  of all traffic    This is why you see many sites  this one included  which use a central column approx 1000 pixels wide and with the most important content in the top 500-600 pixels so it s above the fold when being viewed in screens this size   Using a 1000 pixel wide layout works fairly well on screen sizes of up to about 1680 pixels in width  typically as high as you ll see on laptops  except the large 17  ones  but do start to look a bit silly on 1920 pixel wide ones  high end computers  typically workstations   however these very high resolutions don t account for a large percentage of traffic on the general internet - 2  or less  on the other hand  if you have a specialist audience like this site  the figure with high resolutions may be somewhat higher

User · Answer

Whatever your target browser size  make sure to include space for browser toolbars  status bars  and scroll bars as above  Internet Explorer  IME  often has over 100px of vertical space in toolbars and status bars  Typically  if I m shooting for 1024 x 768  I would try to create a design of around 960 - 980px wide and 600px high to be safe  That way you accomodate scrolling if necessary and some nice white space  if the design requires it   I highly recommend YUI grids for instances where you need to target specific sizes   YUI Grid

User · Answer

there are actually industry standards for widths  well according to yahoo at least   Their supported widths are 750  950  974  100    There are advantages of these widths for their predefined grids  column layouts  which work well with standard dimensions for advertisements if you were to include any   Interesting talk too worth watching   see YUI Base

User · Answer

Whatever your target browser size  make sure to include space for browser toolbars  status bars  and scroll bars as above  Internet Explorer  IME  often has over 100px of vertical space in toolbars and status bars  Typically  if I m shooting for 1024 x 768  I would try to create a design of around 960 - 980px wide and 600px high to be safe  That way you accomodate scrolling if necessary and some nice white space  if the design requires it   I highly recommend YUI grids for instances where you need to target specific sizes   YUI Grid

User · Answer

Here s an awesome tool  Google Labs Browser Size

User · Answer

It s best not to target any specific resolution  but to adapt easily to many different resolutions

User · Answer

Keep in mind that the higher the resolution  the less likely the internet browser will be maximiced   And some browsers have lateral bars too   It depends on what you want to render  but I d go with a variable width layout that doesn t break at about 800-900 width   Height is not really a problem

User · Answer

Here are statistics of browser display in 2008: http://www.w3schools.com/browsers/browsers_display.asp

About 50% users are still using 1024x768. If you want your site to look nice in high resolutions use flexible layout.

User · Answer

I d suggest you have a look at media-queries   This is a useful new addition to CSS that really makes so much sense  you d wonder why this wasn t implemented waaay earlier   Basically it allows you to target browser attributes  such as max and min-widths  directly via CSS and branch your layout code from there   Similar to creating a print stylesheet  you can create your desktop and mobile layouts in parallel in the same file  which kicks ass for development

User · Answer

I ve personally always stuck to max width of 1000px  centered in the middle of the page  via margin left right  auto    If you re running at anything less than 1024x768  it s time to upgrade  Seriously  It s almost 2010  You can buy bargain bin lcd monitors with a native res of 1280x1024

User · Answer

I just took a sampling of screen resolutions from all of the client sites I have access to  this includes more then 20 sites in more then 8 industries here are the results  alt text http   unkwndesign com so percentScreenResolutions png Based on this I would say makes sure it looks good on 1024x768 as that is the majority here by a long shot   Also don t worry about the height as much  however try to avoid making most pages more then 1-2 printed pages at your default font size  most people wont read a page that long  and if a user installs a toolbar that takes up vertical space  my personal preference is that it s their problem  but I don t think it s to big of a deal    note the percentage adds up to 100 05  because of rounding

User · Answer

Bad idea  I believe  The whole point in separating content from layout was to enable your web page to be displayed on any sort of browser   Putting in artificial limitations such as a minimum screen size will limit your market   Having said that  I believe every desktop should be able to display 1024x768  But what about the browsers running on iPhones or other screen-challenged devices  or even those that don t use their entire desktop for the browser   In answer to your specific question  no  I don t believe there is any standard for a minimum or common display area in browsers

User · Answer

Here are statistics of browser display in 2008: http://www.w3schools.com/browsers/browsers_display.asp

About 50% users are still using 1024x768. If you want your site to look nice in high resolutions use flexible layout.

User · Answer

there are actually industry standards for widths  well according to yahoo at least   Their supported widths are 750  950  974  100    There are advantages of these widths for their predefined grids  column layouts  which work well with standard dimensions for advertisements if you were to include any   Interesting talk too worth watching   see YUI Base

User · Answer

I target the 1024 pixel monitors  but don t use 100  of that space   I ve given up on those with 800x600  I d rather punish the few with outdated hardware by making them scroll if they need to  versus punishing everyone with new equipment by wasting space   I suppose it depends on your audience  and the nature of you app though

User · Answer

there are actually industry standards for widths  well according to yahoo at least   Their supported widths are 750  950  974  100    There are advantages of these widths for their predefined grids  column layouts  which work well with standard dimensions for advertisements if you were to include any   Interesting talk too worth watching   see YUI Base

User · Answer

Although the best width may by 1024 you ll have to adjust height for account for various browser settings  navigation  toolbar  bookmark toolbar  status toolbar  etc  and account for taskbar settings   It ll quickly drop the 768 down to around 550

User · Answer

I would say that you should only expect users to have a monitor with 800x600 resolution   The Canadian government has standards that list this as one of the requirements   Although that may seem low to somebody with a fancy widescreen monitor  remember that not everybody has a nice monitor   I still know a lot of people running at 1024x768   And it s not at all uncommon to run into someone who s running in 800x600  especially in cheap web cafes while travelling  Also  it s nice to have to make your browser window full screen if you don t want to   You can make the site wider on wider monitors  but don t make the user scroll horizontally   Ever   Another advantage of supporting lower resolutions is that your site will work on mobile phones and Nintendo Wii s a lot easier   A note on your at least 1280 wide  I would have to say that s way overboard   Most 17 and even my 19 inch non widescreen monitors only support a maximum resolution of 1280x1024   And the 14 inch widescreen laptop I m typing on right now is only 1280 pixels across   I would say that the largest minimum resolution you should strive for is 1024x768  but 800x600 would be ideal

User · Answer

Forcing your user to scroll horizontally is a serious UI transgression   Unless you are specifically building a web site for a population with a known screen size  you are safest ensuring that your design works with screens as small as 800 pixels wide  about 8  of the web surfing population if memory serves me right    It is wise to make it adapt well to larger screens but not at the cost of the folks still surfing at 800x600   Here s another thing to consider as well  not everyone runs their browser at full screen  I don t    So the idea that if is Ok to design for a specific  and large   screen size  really doesn t work for a number of reasons   Update on 12 15 2010  When I first answered this question  800 pixels was an appropriate answer   However  at this point  I would recommend 1024 pixels wide  or 960 as someone else points out    Technology marches on

User · Answer

All of the answers so far talk about desktop monitors  but I m using stack overflow on my iPhone and I don t think you should exclude any mobile platform by targeting 1024 or 1280 horizontal pixels  Mark up your page so the browser knows what it all means and making it usable will come for free  even on screen readers and other kit you haven t thought of

User · Answer

I target the 1024 pixel monitors  but don t use 100  of that space   I ve given up on those with 800x600  I d rather punish the few with outdated hardware by making them scroll if they need to  versus punishing everyone with new equipment by wasting space   I suppose it depends on your audience  and the nature of you app though

User · Answer

sbeam said that  you always want there to be 65-80 characters per line   That is not true  Wikipedia  for example  may have 180 characters per line  Or was it meant to be a particular website

User · Answer

Try to target 1024 as the minimum width  Try how it looks at 800  but don t bother too much making that work  At 800x600 almost none of the major websites are going to work  so people working at that resolution are going to have problems all the time anyway   If you re going to go for a liquid layout  make sure that text doesn t get too wide  because when lines are too long  they become hard to read   That s the main reason why most websites have a fixed width

User · Answer

Keep in mind that the higher the resolution  the less likely the internet browser will be maximiced   And some browsers have lateral bars too   It depends on what you want to render  but I d go with a variable width layout that doesn t break at about 800-900 width   Height is not really a problem

User · Answer

The guidelines we use  which seem to be fairly widely used and are backed up by the figures that we get from Google Analytics  are to design the site so that it will work on a screen that is 1024 pixels wide and 768 pixels high  1024x768 and 1280x800 are the most common resolutions we see  accounting for at least 70  of all traffic    This is why you see many sites  this one included  which use a central column approx 1000 pixels wide and with the most important content in the top 500-600 pixels so it s above the fold when being viewed in screens this size   Using a 1000 pixel wide layout works fairly well on screen sizes of up to about 1680 pixels in width  typically as high as you ll see on laptops  except the large 17  ones  but do start to look a bit silly on 1920 pixel wide ones  high end computers  typically workstations   however these very high resolutions don t account for a large percentage of traffic on the general internet - 2  or less  on the other hand  if you have a specialist audience like this site  the figure with high resolutions may be somewhat higher

User · Answer

All of the answers so far talk about desktop monitors  but I m using stack overflow on my iPhone and I don t think you should exclude any mobile platform by targeting 1024 or 1280 horizontal pixels  Mark up your page so the browser knows what it all means and making it usable will come for free  even on screen readers and other kit you haven t thought of

User · Answer

I target the 1024 pixel monitors  but don t use 100  of that space   I ve given up on those with 800x600  I d rather punish the few with outdated hardware by making them scroll if they need to  versus punishing everyone with new equipment by wasting space   I suppose it depends on your audience  and the nature of you app though

User · Answer

I would say that you should only expect users to have a monitor with 800x600 resolution   The Canadian government has standards that list this as one of the requirements   Although that may seem low to somebody with a fancy widescreen monitor  remember that not everybody has a nice monitor   I still know a lot of people running at 1024x768   And it s not at all uncommon to run into someone who s running in 800x600  especially in cheap web cafes while travelling  Also  it s nice to have to make your browser window full screen if you don t want to   You can make the site wider on wider monitors  but don t make the user scroll horizontally   Ever   Another advantage of supporting lower resolutions is that your site will work on mobile phones and Nintendo Wii s a lot easier   A note on your at least 1280 wide  I would have to say that s way overboard   Most 17 and even my 19 inch non widescreen monitors only support a maximum resolution of 1280x1024   And the 14 inch widescreen laptop I m typing on right now is only 1280 pixels across   I would say that the largest minimum resolution you should strive for is 1024x768  but 800x600 would be ideal

User · Answer

Alright  I see alot of misinformation here  For starters  creating a web page using a certain resolution  say 800x600 for example  makes that page render properly using that resolution only  When that same page is displayed on someone else s laptop  or home PC monitor  the page will be displayed using that screen s current resolution  NOT the resolution you used when designing the page  Don t create web pages for one specific resolution  There are too many different aspect ratios and screen resolutions to expect a  one size fits all  scenario  that with web design does not exist  Here s the solution  Use CSS3 Media Queries to create resolution adaptable code  Here s an example    media screen and  max-width  800px    styles    media screen and  max-width  1024px    styles    media screen and  max-width  1280px    styles     See  what we just did was specify 3 sets of styles that render at different resolutions  In the case of our example  if a screen s resolution is larger than 800px  the CSS for 1024 will be executed instead  Likewise  if the screen displaying the content was 1224px  the 1280 would be executed since 1224 is larger than 1024  The site I m working on now functions at all resolutions 800x600 to 1920x1080  Another thing to keep in mind is that not all monitors with the same resolution have the same size screens  You could put 15 4 laptops side by side  while both look the same  both could have drastically different resolutions  since not all pixels are the same size on different LCD screens  So  use media queries  and start creating your website with a laptop screen with high resolution  particularly 1280   Also  create each media query using a different resolution on your laptop  You could use your resolution settings in Windows to adjust down 800x600 and creating a media query at that res  and then switch to 1024x768 and create another media query at that res  I could go on and on  but I think you guys should get the point    UPDATE  Here s a link to using media queries that will help explain more   Innovative Web Design for Mobile Devices with Media Queries  That tutorial will show you how to design for all devices  There s also tutorials for Media Queries specifically  I developed the entire site to render on all devices  all screens  and all resolutions using no subdomains  and only CSS  I am still working on support for tablets and smart phones  The site renders perfectly on any laptop  or your 50inch LCD TV  and many pages work perfectly on all mobile devices  If you put all your code on page  then your pages will load lightening fast  Also  be sure to pay attention to discussion in that article about the CSS  background-size  cover   or  contain  properties  they will make your background graphics fluid and able to render perfectly at all resolutions   Follow the sites tutorials and you can make a single web page that renders on everything and anything

User · Answer

Flexible or liquid layouts do restict design a little though  for example if you use background images that have to match the body background image   I would rather make different css layouts for the site and have them apply depending on the user s resolution  or if that s not possible  have not digged into that yet   make it a choosable option

User · Answer

Bad idea  I believe  The whole point in separating content from layout was to enable your web page to be displayed on any sort of browser   Putting in artificial limitations such as a minimum screen size will limit your market   Having said that  I believe every desktop should be able to display 1024x768  But what about the browsers running on iPhones or other screen-challenged devices  or even those that don t use their entire desktop for the browser   In answer to your specific question  no  I don t believe there is any standard for a minimum or common display area in browsers

User · Answer

It s best not to target any specific resolution  but to adapt easily to many different resolutions

User · Answer

Try to target 1024 as the minimum width  Try how it looks at 800  but don t bother too much making that work  At 800x600 almost none of the major websites are going to work  so people working at that resolution are going to have problems all the time anyway   If you re going to go for a liquid layout  make sure that text doesn t get too wide  because when lines are too long  they become hard to read   That s the main reason why most websites have a fixed width

User · Answer

Ultimately  this is not a matter of standards or best practices for markup  but rather knowing your audience and making sure your website does what you want it to do    It s more important to consider the width of the browser viewport rather than screen resolution -- you cannot assume that every pixel on a display will be allocated to the browser  and even if it is  you have to subtract browser chrome   If you have access to analytics that report browser width  n b  browser width  not screen resolution  then pay very close attention   It s nice to try to accommodate the widest possible range of viewports but there are some limitations  Some challenges can be handled with CSS media types  some can t  Some can be handled with fluid layouts  But fluid layouts cannot work in all situations  depending on the type of information to be displayed  line length  reading comfort  etc  Some fluid layouts don t work in wide displays  Most break when sized below a certain width  etc   As much as I d personally like to design for viewports  960 pixels and up  you can t always do it  So in some cases  it s still safest to design for viewports  lt  760 pixels or so  800 pixel wide display  maximized  -- though the time we can finally toss this limitation once and for all -- for the desktop at least -- is very fast approaching   Where conversions are an issue -- and you have a fixed width layout -- you better have a darned good reason for putting anything that the user needs to click in order for the cash register to go  ka-ching  anywhere east of the 760th pixel   Ditto for the primary navigation   Finally  test your layout in everything you can get your hands on  Big  Small  Desktop  Handheld  The works  There s no substitute

User · Answer

Although the best width may by 1024 you ll have to adjust height for account for various browser settings  navigation  toolbar  bookmark toolbar  status toolbar  etc  and account for taskbar settings   It ll quickly drop the 768 down to around 550

User · Answer

All of the answers so far talk about desktop monitors  but I m using stack overflow on my iPhone and I don t think you should exclude any mobile platform by targeting 1024 or 1280 horizontal pixels  Mark up your page so the browser knows what it all means and making it usable will come for free  even on screen readers and other kit you haven t thought of

User · Answer

I target the 1024 pixel monitors  but don t use 100  of that space   I ve given up on those with 800x600  I d rather punish the few with outdated hardware by making them scroll if they need to  versus punishing everyone with new equipment by wasting space   I suppose it depends on your audience  and the nature of you app though

User · Answer

The advice these days is   Optimize for 1024x768  For most sites this will cover most visitors  Most logs show that 92-99  of your visits will be over 1024 wide  While 1280 is increasingly common  there are still lots at 1024 and some below that  Optimize for this but don t ignore the others   1024    960  Accounting for scrollbars  window edges  etc means the real width of a 1024x768 screen is about 960 pixels  Some tools are based on a slightly smaller size  about 940  This is the default container width in twitter bootstrap   Don t design for one size  Window sizes vary  Don t assume screen size equals windows size  Design for a reasonable minimum  but assume it will adjust   Use responsive design and liquid layouts  Use layouts that will adjust when the window is resized  People do this a lot  especially on big monitors  This is just good CSS practice  There are several front-end frameworks that support this   Treat mobile as a first-class citizen  You are getting more traffic from mobile devices all the time  These introduce even more screen sizes  You can still optimize for 960  but using responsive web design techniques means your page will adjust based on the screen size    Log browser display info  You can get actual numbers about this  I found some numbers here and here and here  You can also rig your site to collect the same data   User will scroll so don t worry much about height  The old argument was that users wouldn t scroll and anything important should be  above the fold   This was overturned years ago  Users scroll a lot   More about screen resolutions    Screen Resolution and Page Layout Best Screen Resolution to Design Websites Design for browser size - not screen size   More about responsive design    Responsive Web Design  2010  May 25   Ethan Marcotte  A List Apart  Responsive Web Design at Wikipedia Multi-device layout patterns  2012  Mar 14  Luke Wroblewski  Catalogs the most popular patterns for adaptable multi-device screen layouts    Tools and front-end frameworks for responsive design and liquid layouts    Twitter Bootstrap Zurb Foundation 50 fantastic tools for responsive web design  2012  April 24  Denise Jacobs  amp  Peter Gasston

User · Answer

Forcing your user to scroll horizontally is a serious UI transgression   Unless you are specifically building a web site for a population with a known screen size  you are safest ensuring that your design works with screens as small as 800 pixels wide  about 8  of the web surfing population if memory serves me right    It is wise to make it adapt well to larger screens but not at the cost of the folks still surfing at 800x600   Here s another thing to consider as well  not everyone runs their browser at full screen  I don t    So the idea that if is Ok to design for a specific  and large   screen size  really doesn t work for a number of reasons   Update on 12 15 2010  When I first answered this question  800 pixels was an appropriate answer   However  at this point  I would recommend 1024 pixels wide  or 960 as someone else points out    Technology marches on

User · Answer

The advice these days is   Optimize for 1024x768  For most sites this will cover most visitors  Most logs show that 92-99  of your visits will be over 1024 wide  While 1280 is increasingly common  there are still lots at 1024 and some below that  Optimize for this but don t ignore the others   1024    960  Accounting for scrollbars  window edges  etc means the real width of a 1024x768 screen is about 960 pixels  Some tools are based on a slightly smaller size  about 940  This is the default container width in twitter bootstrap   Don t design for one size  Window sizes vary  Don t assume screen size equals windows size  Design for a reasonable minimum  but assume it will adjust   Use responsive design and liquid layouts  Use layouts that will adjust when the window is resized  People do this a lot  especially on big monitors  This is just good CSS practice  There are several front-end frameworks that support this   Treat mobile as a first-class citizen  You are getting more traffic from mobile devices all the time  These introduce even more screen sizes  You can still optimize for 960  but using responsive web design techniques means your page will adjust based on the screen size    Log browser display info  You can get actual numbers about this  I found some numbers here and here and here  You can also rig your site to collect the same data   User will scroll so don t worry much about height  The old argument was that users wouldn t scroll and anything important should be  above the fold   This was overturned years ago  Users scroll a lot   More about screen resolutions    Screen Resolution and Page Layout Best Screen Resolution to Design Websites Design for browser size - not screen size   More about responsive design    Responsive Web Design  2010  May 25   Ethan Marcotte  A List Apart  Responsive Web Design at Wikipedia Multi-device layout patterns  2012  Mar 14  Luke Wroblewski  Catalogs the most popular patterns for adaptable multi-device screen layouts    Tools and front-end frameworks for responsive design and liquid layouts    Twitter Bootstrap Zurb Foundation 50 fantastic tools for responsive web design  2012  April 24  Denise Jacobs  amp  Peter Gasston

User · Answer

Although the best width may by 1024 you ll have to adjust height for account for various browser settings  navigation  toolbar  bookmark toolbar  status toolbar  etc  and account for taskbar settings   It ll quickly drop the 768 down to around 550

User · Answer

The guidelines we use  which seem to be fairly widely used and are backed up by the figures that we get from Google Analytics  are to design the site so that it will work on a screen that is 1024 pixels wide and 768 pixels high  1024x768 and 1280x800 are the most common resolutions we see  accounting for at least 70  of all traffic    This is why you see many sites  this one included  which use a central column approx 1000 pixels wide and with the most important content in the top 500-600 pixels so it s above the fold when being viewed in screens this size   Using a 1000 pixel wide layout works fairly well on screen sizes of up to about 1680 pixels in width  typically as high as you ll see on laptops  except the large 17  ones  but do start to look a bit silly on 1920 pixel wide ones  high end computers  typically workstations   however these very high resolutions don t account for a large percentage of traffic on the general internet - 2  or less  on the other hand  if you have a specialist audience like this site  the figure with high resolutions may be somewhat higher

User · Answer

I would say that you should only expect users to have a monitor with 800x600 resolution   The Canadian government has standards that list this as one of the requirements   Although that may seem low to somebody with a fancy widescreen monitor  remember that not everybody has a nice monitor   I still know a lot of people running at 1024x768   And it s not at all uncommon to run into someone who s running in 800x600  especially in cheap web cafes while travelling  Also  it s nice to have to make your browser window full screen if you don t want to   You can make the site wider on wider monitors  but don t make the user scroll horizontally   Ever   Another advantage of supporting lower resolutions is that your site will work on mobile phones and Nintendo Wii s a lot easier   A note on your at least 1280 wide  I would have to say that s way overboard   Most 17 and even my 19 inch non widescreen monitors only support a maximum resolution of 1280x1024   And the 14 inch widescreen laptop I m typing on right now is only 1280 pixels across   I would say that the largest minimum resolution you should strive for is 1024x768  but 800x600 would be ideal

User · Answer

I d suggest you have a look at media-queries   This is a useful new addition to CSS that really makes so much sense  you d wonder why this wasn t implemented waaay earlier   Basically it allows you to target browser attributes  such as max and min-widths  directly via CSS and branch your layout code from there   Similar to creating a print stylesheet  you can create your desktop and mobile layouts in parallel in the same file  which kicks ass for development

User · Answer

Here s an awesome tool  Google Labs Browser Size

User · Answer

Forcing your user to scroll horizontally is a serious UI transgression   Unless you are specifically building a web site for a population with a known screen size  you are safest ensuring that your design works with screens as small as 800 pixels wide  about 8  of the web surfing population if memory serves me right    It is wise to make it adapt well to larger screens but not at the cost of the folks still surfing at 800x600   Here s another thing to consider as well  not everyone runs their browser at full screen  I don t    So the idea that if is Ok to design for a specific  and large   screen size  really doesn t work for a number of reasons   Update on 12 15 2010  When I first answered this question  800 pixels was an appropriate answer   However  at this point  I would recommend 1024 pixels wide  or 960 as someone else points out    Technology marches on

User · Answer

Try to target 1024 as the minimum width  Try how it looks at 800  but don t bother too much making that work  At 800x600 almost none of the major websites are going to work  so people working at that resolution are going to have problems all the time anyway   If you re going to go for a liquid layout  make sure that text doesn t get too wide  because when lines are too long  they become hard to read   That s the main reason why most websites have a fixed width

User · Answer

there are actually industry standards for widths  well according to yahoo at least   Their supported widths are 750  950  974  100    There are advantages of these widths for their predefined grids  column layouts  which work well with standard dimensions for advertisements if you were to include any   Interesting talk too worth watching   see YUI Base

User · Answer

Whatever your target browser size  make sure to include space for browser toolbars  status bars  and scroll bars as above  Internet Explorer  IME  often has over 100px of vertical space in toolbars and status bars  Typically  if I m shooting for 1024 x 768  I would try to create a design of around 960 - 980px wide and 600px high to be safe  That way you accomodate scrolling if necessary and some nice white space  if the design requires it   I highly recommend YUI grids for instances where you need to target specific sizes   YUI Grid

User · Answer

All of the answers so far talk about desktop monitors  but I m using stack overflow on my iPhone and I don t think you should exclude any mobile platform by targeting 1024 or 1280 horizontal pixels  Mark up your page so the browser knows what it all means and making it usable will come for free  even on screen readers and other kit you haven t thought of

User · Answer

It s best not to target any specific resolution  but to adapt easily to many different resolutions

User · Answer

Forcing your user to scroll horizontally is a serious UI transgression   Unless you are specifically building a web site for a population with a known screen size  you are safest ensuring that your design works with screens as small as 800 pixels wide  about 8  of the web surfing population if memory serves me right    It is wise to make it adapt well to larger screens but not at the cost of the folks still surfing at 800x600   Here s another thing to consider as well  not everyone runs their browser at full screen  I don t    So the idea that if is Ok to design for a specific  and large   screen size  really doesn t work for a number of reasons   Update on 12 15 2010  When I first answered this question  800 pixels was an appropriate answer   However  at this point  I would recommend 1024 pixels wide  or 960 as someone else points out    Technology marches on

User · Answer

Ultimately  this is not a matter of standards or best practices for markup  but rather knowing your audience and making sure your website does what you want it to do    It s more important to consider the width of the browser viewport rather than screen resolution -- you cannot assume that every pixel on a display will be allocated to the browser  and even if it is  you have to subtract browser chrome   If you have access to analytics that report browser width  n b  browser width  not screen resolution  then pay very close attention   It s nice to try to accommodate the widest possible range of viewports but there are some limitations  Some challenges can be handled with CSS media types  some can t  Some can be handled with fluid layouts  But fluid layouts cannot work in all situations  depending on the type of information to be displayed  line length  reading comfort  etc  Some fluid layouts don t work in wide displays  Most break when sized below a certain width  etc   As much as I d personally like to design for viewports  960 pixels and up  you can t always do it  So in some cases  it s still safest to design for viewports  lt  760 pixels or so  800 pixel wide display  maximized  -- though the time we can finally toss this limitation once and for all -- for the desktop at least -- is very fast approaching   Where conversions are an issue -- and you have a fixed width layout -- you better have a darned good reason for putting anything that the user needs to click in order for the cash register to go  ka-ching  anywhere east of the 760th pixel   Ditto for the primary navigation   Finally  test your layout in everything you can get your hands on  Big  Small  Desktop  Handheld  The works  There s no substitute

User · Answer

It s best not to target any specific resolution  but to adapt easily to many different resolutions

User · Answer

Alright  I see alot of misinformation here  For starters  creating a web page using a certain resolution  say 800x600 for example  makes that page render properly using that resolution only  When that same page is displayed on someone else s laptop  or home PC monitor  the page will be displayed using that screen s current resolution  NOT the resolution you used when designing the page  Don t create web pages for one specific resolution  There are too many different aspect ratios and screen resolutions to expect a  one size fits all  scenario  that with web design does not exist  Here s the solution  Use CSS3 Media Queries to create resolution adaptable code  Here s an example    media screen and  max-width  800px    styles    media screen and  max-width  1024px    styles    media screen and  max-width  1280px    styles     See  what we just did was specify 3 sets of styles that render at different resolutions  In the case of our example  if a screen s resolution is larger than 800px  the CSS for 1024 will be executed instead  Likewise  if the screen displaying the content was 1224px  the 1280 would be executed since 1224 is larger than 1024  The site I m working on now functions at all resolutions 800x600 to 1920x1080  Another thing to keep in mind is that not all monitors with the same resolution have the same size screens  You could put 15 4 laptops side by side  while both look the same  both could have drastically different resolutions  since not all pixels are the same size on different LCD screens  So  use media queries  and start creating your website with a laptop screen with high resolution  particularly 1280   Also  create each media query using a different resolution on your laptop  You could use your resolution settings in Windows to adjust down 800x600 and creating a media query at that res  and then switch to 1024x768 and create another media query at that res  I could go on and on  but I think you guys should get the point    UPDATE  Here s a link to using media queries that will help explain more   Innovative Web Design for Mobile Devices with Media Queries  That tutorial will show you how to design for all devices  There s also tutorials for Media Queries specifically  I developed the entire site to render on all devices  all screens  and all resolutions using no subdomains  and only CSS  I am still working on support for tablets and smart phones  The site renders perfectly on any laptop  or your 50inch LCD TV  and many pages work perfectly on all mobile devices  If you put all your code on page  then your pages will load lightening fast  Also  be sure to pay attention to discussion in that article about the CSS  background-size  cover   or  contain  properties  they will make your background graphics fluid and able to render perfectly at all resolutions   Follow the sites tutorials and you can make a single web page that renders on everything and anything

User · Answer

Try to target 1024 as the minimum width  Try how it looks at 800  but don t bother too much making that work  At 800x600 almost none of the major websites are going to work  so people working at that resolution are going to have problems all the time anyway   If you re going to go for a liquid layout  make sure that text doesn t get too wide  because when lines are too long  they become hard to read   That s the main reason why most websites have a fixed width

User · Answer

I just took a sampling of screen resolutions from all of the client sites I have access to  this includes more then 20 sites in more then 8 industries here are the results  alt text http   unkwndesign com so percentScreenResolutions png Based on this I would say makes sure it looks good on 1024x768 as that is the majority here by a long shot   Also don t worry about the height as much  however try to avoid making most pages more then 1-2 printed pages at your default font size  most people wont read a page that long  and if a user installs a toolbar that takes up vertical space  my personal preference is that it s their problem  but I don t think it s to big of a deal    note the percentage adds up to 100 05  because of rounding

[browser] Recommended website resolution (width and height)?

Examples related to browser

Examples related to standards

Examples related to resolution