Unsure of which screen resolution you're using? See the tip "Check Your Screen Resolution" in Chapter 1.
The difficulty in determining which of these screen resolutions to target is caused by the fact that depending on how you build it, your pages can look drastically different on the screens not targeted. To work around this, many designers choose to develop their pages to grow and shrink on whichever screen size they're being viewed. This process is often referred to as creating "liquid" pages.
Creating images larger than the width of the available space on the screen will cause a horizontal scroll bar to appear. If this is not intended, you need to create your web graphics to fit within the available space on the user's screen. Unfortunately, targeting a 640x480 resolution doesn't mean you can create graphics that are 640 pixels in width. Why? Because the following screen elements also take up space:
• Operating system menus, such as the Windows Start menu and the Apple menu
• Browser menus, toolbars, and other aspects of the browser that display onscreen
• Web page offset, the "buffer space" around the web page that most browsers add by default; this can be overridden with certain HTML codes
• Web page frames, the additional edges of the browser that appear in between some pages that use the HTML coding technique called "frames"
After this space is taken into consideration, you're left with significantly less space to work with when designing web pages in Photoshop. Table 4-1 shows rough estimates on available page widths for the most popular screen resolutions. You can use any of these widths when creating your new "page" in Photoshop.
Was this article helpful?