logo

Designing for the Web: Screen Resolution and Browser Size

It’s important to consider screen resolution and browser size when designing for the web. Since not everyone has a nice big 27-inch iMac on which to cruise the internet, screen resolutions will vary. Luckily, there are a number of industry standards and resources that can help us find the right size for our intended target audience.

Screen size is always a tricky issue and plagues most web designers – especially due to the limited vertical height of a monitor. However, any web designer worth their salt will make sure that vital content, calls to action and primary navigation remain “above the fold”. This is the area of a website that’s viewable without requiring the user to scroll down. This is important because it’s counterproductive to force users to hunt around for the means to navigate to or view important content on your site. Designing for “above the fold” follows standards of good web and user interface design.

Considering Sizes:
While I remember a time when I was designing websites for 640 x 480 pixels, nowadays most screen resolutions can be assumed to be set at a minimum of 1024 x 768 pixels. In fact, designing for a screen resolution of 1280 x 800 pixels is considered appropriate for folks in the creative fields. Many sites are even designed so that the composition stretches with the browser’s expanding or constricting size – creating what’s called a “liquid layout”. Also consider that having a website up that’s still designed for a smaller screen size (like 800 x 600 pixels ) will make it seem outdated.

When designing for the web, you really want to utilize the space you’ve got. Including, designing navigation so that it’s readily available, but unobtrusive to one’s view of the content. Even if you’re not the one designing and/or building your own portfolio website, it’s a good idea to be aware of good web design practice. Ultimately the site has your name on it and will reflect your standards. Not to mention that it’ll take away from the purpose of having a portfolio or promo site if the site itself detracts from the experience of enjoying your work.

Use this Equation:
The following equation is used to find the optimum viewable area of a website design (keeping in mind the space the browser and desktop menus take up). Screen Resolution [minus] The Browser/Desktop Menu [equals] Above the Fold.

screen_res

Resources:
These are great resources that will help ensure your site is designed for optimum screen resolution and usability.

Google Browser Size App: Google Labs Browser Size app
Washington Post article about “above the fold”: Washington Post Article about “Content Above the Fold”
Browser Display Stats: Browser Display Statistics
Browser Size Utility: Browser Size Utility from BrowserSize.com

An Example:
The following website, submitted to No Plastic Sleeves by photographer José Mandojana of Seattle, WA is a good example of a portfolio site that was designed to take advantage of optimum screen space. It’s designed for an optimum screen resolution of 1280 x 800 pixels. So, subtracting for desktop menus and browser attributes, the physical design fits comfortably at about 1160 x 760 pixels. The site is also “liquid” and scales up or down depending on browser size. One of the nice features of the site is the ability to hide the bottom menu – creating an even cleaner presentation of the photographic images. The images themselves are the focal point of the composition and fill the majority of the compositional space – utilizing the space that’s available “above the fold”.

http://www.josemandojana.com/
Redesigned by Greg Lutze at http://scienceoffiction.com, with backend programming by Michael Madrid at http://work.entrauge.com/.

mando1

mando2


Comments?
Drop us a line.
Click here to comment.

  1. Andriy
    Good point about considering your target audience. If you take average Internet crowd maybe 1024x768 is dominant but since we target 'visual' folk spread is slightly different. Here I pulled Google Analytics top stats from my site: 1. 1920x1200 30.54% 2. 1280x1024 12.55% 3. 1024x768 11.30% 4. 1280x800 11.30% 5. 1440x900 10.88% 6. 1680x1050 10.04% Scalable layout is a great idea for sure.
  2. Pingback: Site of the Week: Photographer Corey Arnold « No Plastic Sleeves

  3. Pingback: Elektrische Zahnbuerste