Quick links:

View the Web Canvas in your browser

Download the Firefox add-on

Pick the right canvas for your audience

How the Web Canvas was calculated

Introduction

The ideal “canvas” size for web design is a moving target. To keep better track of that target, Methodologie created the Web Canvas. It helps us design websites with the largest possible area without leaving behind the majority of Internet users.

The viewable area of websites varies considerably for each user. Assuming the user maximizes the browser window, the two main factors affecting this area are browser chrome and screen resolution.

Browser chrome is anything that borders the browser window: frames, menus, scrollbars, and extra toolbars. It varies by browser type, operating system, and individual preference. Likewise, the resolutions of monitors and laptop screens are as diverse as the selection found at any electronics store. A design that looks great on a state-of-the-art monitor through the latest version of Firefox may fall apart when viewed on an older monitor through Internet Explorer 6.0 with the Bookmarks menu open.

Screen resolution statistics is not an exact science. The numbers vary by source, and they change as technology progresses. No standard will ever stand the test of time. Additionally, these statistics come from Internet users at large and may not reflect the true audience of a particular website. Your primary source of statistics should always be your own server logs/analytics. (If you don’t have such information, you can use third-party statistics combined with benchmarks from websites that target audiences similar to yours.)

At Methodologie, we work with a standard of 960×600px. We’ve determined this to be the optimal size for most of our projects; however, we’ll continue to monitor screen resolution statistics and update our standard accordingly. Please feel free to consult the Web Canvas for your own projects. That’s why it’s here. 

Pick the right canvas for your audience

Just as designers like to create websites with the largest canvases, marketers often want to reach the largest audience possible. The ideal website usually falls somewhere in between. We recommend that you pick the canvas that best fits your target audience. And don’t worry about alienating the small percentage of users who fall below that group. As far as we know, using scrollbars never hurt anyone.

Canvas 1 (760×420): 100% of users can see this area without scrolling (excluding mobile devices). Choose this canvas size if you are targeting users with poor eyesight or those who are likely using legacy hardware (e.g., the developing world). This canvas size also caters to non-HD TV-based browsers.

Canvas 2 (960×600): 91% of users can see this area.
Choose this canvas size for B2B audiences, especially people within corporations and other large organizations (hardware and software gets updated less often within large organizations). Internet Explorer 6 and 7 will dominate.

Canvas 3 (1210×630): 50% of users can see this area.
Choose this canvas size if you are targeting B2C audiences. Expect to see an increase in usage of Firefox, Chrome, and Safari, compared to B2B and corporate audiences.

Canvas 4 (1370×730): 11% of users can see this area. Choose this canvas size if you are targeting media professionals. These individuals are likely to use Safari, Firefox, and Google Chrome. Compared to other groups, they are also more likely to use Macs. (Note, however, that few users will use full-screen mode at this resolution.)

How the Web Canvas was calculated

Step 1: Get the raw data

We consulted thecounter.com and marketshare.hitslink.com, two of the most well-known sources of screen resolution statistics. These sources provided user percentages for the following screen resolutions: 800×600, 1024×768,1152×864,1280×800, 1280×864,1280×768, 1280×960, 1440×900, 1680×1050, 1600×1200, 1920×1200, and unknown.

Step 2: Make the data more digestible

Next, we collapsed these percentages (and their corresponding resolutions) into four groups:

Group 1: 9% (800×600)
Group 2: 41% (1024×768)
Group 3: 39% (1152×864, 1280×768, 1280×800, 1280×960, 1280×1024)
Group 4: 11% (1440×900, 1680×1050, 1600×1200, 1920×1200)

(Because “unknown” is a rather unhelpful data point, we distributed its percentage evenly across the other groups. Our college statistics professor would probably not approve, but the difference is negligible for our purposes.)

In creating each of our four canvases, we had to pick one resolution that could represent each group. We opted for the smallest resolution size in each group unless that resolution accounted for only a fraction of users. This is why Group 3 is identified by 1280×800 (the largest size in terms of users) instead of1152×864 (the smallest resolution size in that group).

Step 3: Account for chrome

To turn these groups into useful canvases, we had to account for browser chrome. Based on the browser chrome of Internet Explorer 6.0 on Windows XP at 1024×768 resolution, we estimated the need to decrease width by at least 70px and height by at least 170px (better safe than sorry). Then we made this adjustment across all groups, rounding up or down where it made sense to do so. (With an exception for Group 1, where we relied on the old-but-proven standard from the late 90s of 760×420.)

Group 1: 800×600 became 760×420px (Canvas 1)
Group 2: 1024×768 became 960×600 (Canvas 2)
Group 3: 1280×600 became 1210×630 (Canvas 3)
Group 4: 1440×900 became 1370×730 (Canvas 4)