Comments on: Optimal Screen Resolution for Web Design (2010 Update)

By: J. Hogue

J. Hogue — Thu, 02 Sep 2010 19:59:05 +0000

I’m a designer and so I think about these numbers all the time. The question about what amount of screen is left over once one accounts for the browsers tool bars is a good one, and frustratingly, is different depending on the browser.

All results are for a 1280 x 800 screen. Mac users do not have a bottom bar, so subtract 22 px for the OS top bar. Windows has a 22px top bar and a variable bottom bar, but XP users can expect at least another 30px for the bottom taskbar. Vista users need to account for a 40px taskbar (subtract another 10px from the numbers below):

IE8: About 1000 x 630 (topbar with tabs is 120px tall)
IE7: About 1000 x 630 (topbar with tabs is 118px tall)
IE6: About 1000 x 700 (top bar is 80px tall – no tabs allowed)
FF4: About 1000 x 670 (topbar with tabs and bookmarks is 110 px tall)
Safari: About 1000 x 680 (topbar with tabs is 94 px tall)
Chrome: About 1000 x 700 (topbar with tabs is 72 px tall)

So, with sites that you do not want to scroll, a safe size is 620 tall… 600 tall is probably safest.

In order to get it to fit nicely on the iPhone, consider fitting the dimensions into the 320 x 240 (or 3:4) aspect ratio.

By: Keith

Keith — Tue, 10 Aug 2010 16:14:39 +0000

My programmers designed for 1024×768 – my site is simple and my rule is “no scrolls” -
even with that – I now have scrolls
They did not anticipate a tool bar or a start bar across the bottom.
How stupid is that? Any advice or data on how many pixels of a typ screen are lost top and bottom for this “normal” stuff?

By: Mark Thompson

Mark Thompson — Sat, 10 Jul 2010 07:17:07 +0000

That is actually a great question. I am not 100% sure, since I really am not a web designer. I know when I was working with the web designer who did my Twitter background, we had to upload the image then set the background color to match the image color.

I would probably just do a Google search for “Screen Resolution for Twitter Backgrounds” or something similar to that.

I would love to hear what you find out Sorry I couldn't be of more help.

By: Ahintoffig

Ahintoffig — Sat, 10 Jul 2010 06:57:03 +0000

Hi Mark! I'm curious as to your thoughts on designing twitter backgrounds…looks like your twitter acct is designed for a 1280 x 800, but I'm reading that custom backgrounds should still be done at 1024 x 768.

By: katinka

katinka — Sat, 06 Mar 2010 17:05:26 +0000

Since browsing with mobile devices seems to be upcoming, I would expect that their smaller screen sizes will soon start showing up in statistics as well.

By: rapo007

rapo007 — Wed, 03 Mar 2010 12:05:43 +0000

Thanks for your updation

By: Tips for Web Designers From an Internet Marketer’s Perspective | lead5.com

Tips for Web Designers From an Internet Marketer’s Perspective | lead5.com — Thu, 11 Feb 2010 05:44:28 +0000

[...] Design a Site for Optimal Screen Resolution [...]

By: David hehehe is me

David hehehe is me — Thu, 11 Feb 2010 02:13:36 +0000

Optimal Screen Resolution for Web Design (2010 Update)…

……

By: Optimal screen resolution for web design | StayOnSearch

Optimal screen resolution for web design | StayOnSearch — Thu, 04 Feb 2010 00:22:02 +0000

[...] for Web Design Posted by Mark Thompson in Design/DevelopmentMay 30th, 2008 | View commentsCommentsUPDATE: 2010 Screen Resolution StatisticsScreen resolutions have changed a lot over the past 8 years. Computer monitors have migrated to [...]