StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>The advice these days is:</p> <p><strong>Optimize for 1024x768</strong>. 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.</p> <p><strong>1024 = ~960</strong>. Accounting for scrollbars, window edges, etc means the real width of a 1024x768 screen is <a href="http://www.cameronmoll.com/archives/001220.html" rel="nofollow noreferrer">about 960 pixels</a>. Some tools are based on a <strong>slightly smaller size, about 940</strong>. This is the default container width in <a href="http://getbootstrap.com/docs/4.1/layout/overview/" rel="nofollow noreferrer">twitter bootstrap</a>.</p> <p><strong>Don't design for one size</strong>. Window sizes vary. Don't assume screen size equals windows size. Design for a reasonable minimum, but assume it will adjust.</p> <p><strong>Use responsive design and liquid layouts</strong>. 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.</p> <p><strong>Treat mobile as a first-class citizen</strong>. 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. </p> <p><strong>Log browser display info</strong>. You can get actual numbers about this. I found some numbers <a href="http://www.w3schools.com/browsers/browsers_display.asp" rel="nofollow noreferrer">here</a> and <a href="http://www.boutell.com/newfaq/creating/resolution.html" rel="nofollow noreferrer">here</a> and <a href="http://www.upsdell.com/BrowserNews/stat_trends.htm#res" rel="nofollow noreferrer">here</a>. You can also rig your site to collect the same data.</p> <p><strong>User will scroll so don't worry much about height</strong>. The old argument was that users wouldn't scroll and anything important should be "above the fold." This was overturned years ago. <a href="http://www.useit.com/alertbox/scrolling-attention.html" rel="nofollow noreferrer">Users scroll a lot</a>.</p> <p>More about screen resolutions:</p> <ul> <li><a href="http://www.useit.com/alertbox/screen_resolution.html" rel="nofollow noreferrer">Screen Resolution and Page Layout</a></li> <li><a href="http://www.hobo-web.co.uk/tips/25.htm" rel="nofollow noreferrer">Best Screen Resolution to Design Websites</a></li> <li><a href="http://justaddwater.dk/2006/08/17/design-for-browser-size-not-screen-size/" rel="nofollow noreferrer">Design for browser size - not screen size</a></li> </ul> <p>More about responsive design:</p> <ul> <li><a href="http://www.alistapart.com/articles/responsive-web-design/" rel="nofollow noreferrer">Responsive Web Design</a> (2010, May 25), Ethan Marcotte, A List Apart.</li> <li><a href="http://en.wikipedia.org/wiki/Responsive_Web_Design" rel="nofollow noreferrer">Responsive Web Design</a> at Wikipedia</li> <li><a href="http://www.lukew.com/ff/entry.asp?1514" rel="nofollow noreferrer">Multi-device layout patterns</a> (2012, Mar 14) Luke Wroblewski. Catalogs the most popular patterns for adaptable multi-device screen layouts.</li> </ul> <p>Tools and front-end frameworks for responsive design and liquid layouts:</p> <ul> <li><a href="http://getbootstrap.com/" rel="nofollow noreferrer">Twitter Bootstrap</a></li> <li><a href="https://foundation.zurb.com/" rel="nofollow noreferrer">Zurb Foundation</a></li> <li><a href="http://www.creativebloq.com/css3/tools-responsive-web-design-5132770" rel="nofollow noreferrer">50 fantastic tools for responsive web design</a> (2012, April 24) Denise Jacobs & Peter Gasston</li> </ul>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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