Screen Resolution for Web Design Beginners

If you’re new to web design and setting up a Photoshop document to work on a new project, you might be wondering where to start. A lot of web designers design for a display resolution of 1024×768, because 85% of desktop screens are larger than that. But even though a screen size of 1024×768 is what you design for, it’s not actually the size you should use when you start your design.

Just to clarify before we get started: The resolution of a screen is measured in PPI, or pixels per inch. The display size (1024×768 or 1200×800 or whatever) refers to the width in pixels by the height in pixels. (You can check your own screen resolution instantly here.)

web design screen resolution, screen size web design

Learn with HOW U

In PSD to HTML, a new class with Chris Converse, you’ll learn how to cut your own graphics and create the HTML and CSS files your web developers need. Sign up today!

1024×768 is not really 1024×768

One reason why you shouldn’t just work in a Photoshop document that’s 768 pixels wide is that there are many interface elements in the user’s operating system and web browser that take up screen space. For example, on a Mac, you have the dock at the bottom and operating system interface at the top. On Windows machines, you’ve got the taskbar on the bottom. Plus, you have to consider the common elements in the browser such as the toolbars at the top and the scroll bar on the right.
web design screen resolution, screen size web design
web design screen resolution, screen size web design
web design screen resolution, screen size web design

When you design for a screen resolution of 1024×768, your file dimensions should be closer to 1000×570 (since all browsers are different, this isn’t an exact number but a ballpark figure). Designing for these smaller dimensions will help you avoid those ugly horizontal scroll bars in the end-user’s browser. And while most studies show that users will most likely scroll down, it’s still important to respect “the fold.” If your design has important content toward the bottom of the page, be aware of what users will see without scrolling. Google’s search engine even has algorithms that rate content that appears above the fold differently than content below.

web design screen resolution, screen size web design

Creating Margins in Photoshop

Unlike Illustrator and InDesign, Photoshop files don’t come with built-in margin guidelines—you have to manually pull them out. But addons such as Guide Guide let web designers auto-create rules. Or if you prefer to start your designs with sketching, products like Paper Browser or 960 Grid System Sketch Sheets might be worth using.

photoshop grid guides, guide guide

960 grid system, web design sketchpad

So next time you prepare a Photoshop file for web design, make sure you take all the interface elements on a screen into consideration. Beyond desktop computers—tablet and mobile devices have their own set of interface elements and operating systems components to deal with. Knowing the true number of pixels you’re working with is key in any digital design scenario.

More web design resources

COMMENT