Web Design Tips for Print Designers

Many print designers are being asked to create for the web, whether they have experience in this area or not. One of the biggest challenges I see for print designers is considering the fluid nature of web design. In print design, you can control every aspect, such as the size, fonts, leading, images, borders, etc. In web design you are at the mercy of the user’s browser settings. They have the ability to change all those items.

As a designer you want to make the site really pop. You want it to be the most fantastic and engaging web site the world has ever seen! Unfortunately, your site is probably going to have some real life limitations you need to design for. It’s the same concept as designing a brochure for a client that can only afford cheap paper and one color of ink. Think of it as a challenge.

Below are some technical tips centered around screen sizes and what to think about when you sit down to work on a web design.

Make a decision on what screen size you need to make the site.

Most times you will need to pick the lowest common denominator (screen resolution size) of the typical target audience for your site. The lower the denominator, the more restricted your design will be. Note I said “typical”. You can’t please everyone. You can only please “most”.

This step is achieved using some critical thinking about your audience. Who will use the site? Will it be for businesses, clients of businesses, designers, underprivileged, the local library or another closed business system? Who is the target market end user? Who do you care about seeing the site optimally? Who don’t you care about?

For example:

• Business: You might assume that businesses are going to have updated computer systems and the latest software and browsers. They probably have decent computer equipment and a modern browser. They can probably take advantage of a larger than average screen.
• Clients of businesses: Some users will probably be at work computers. Others will be looking from home. If these are clients of a company that makes yachts they probably have decent computers. If you are selling coupons for the dollar store, they might have older equipment. Maybe it’s a mix and you need to dip down to the lowest common denominator.
• Designers: These people might all be on Macintosh computers and have very high resolution. They’re probably prettier, too.
• Underprivileged: You can bet they don’t have the newest equipment or great connection speeds. You want to design for something that loads quickly (less graphics) and looks readable at a smaller screen resolution.
• Local library: If this is a site that you can only look at at the local library, you can find out what resolutions all their computers are and design accordingly. These monitors are often better than you think.

NOTE: You can always find the latest statistics on what browser sizes are being used here at the W3. It is ever changing.

Downloadable Templates

I have created templates for some common screen sizes to download here.

You can use them to mask your site as you are building, to see what it will look like. I suggest you use these when working on client sites. It helps the both the designer and the client visualize the end product more easily. And, it looks nice!

There is also a template that is based on a 1024 width, but is actually wider than this so you can make decisions on what someone will see if they happen to expand the website further than the original, visible design. This is important because it is always going to happen. You may want to show the client multiple versions of a site design with relation to screen size.

It’s always a good idea to find out what screen size the client proofing your work has. We want it to work across the board, but I like to pay special attention to the client’s machine if possible since it’s the environment that will see the site more than any other.

Feel free to make your own templates at other sizes. But note that the screen resolution is the entire browser window, not just the image area of a website.

In the screen shot below and the downloads link above, I’ve created a template that shows visible image area as well as some extra area on the sides in case a viewer expands the screen. You should always design for this.

Visible Area vs Browser Window

The visible area changes based on the users browser window. What tools and sidebars people have open/loaded/showing, all affect what their browser window looks like. You can’t control this. (Well, in some cases you CAN control this, but it’s considered rude. That’s another article.) All you can do is go for the lowest common denominator and give yourself some extra space if you feel like you need it.

Anatomy of the Screen Template

These are the specifics of the screen template below. You may choose to create your own based on your clients, and what you are trying to achieve by increasing or decreasing the dead and live image areas.

• The screen size height is 768 pixels.
• The total width is 1024. This would include any browser window tools and sidebars the user might be using.
• Image area: The actual live website area is approximately 700 pixels, and is the area between the vertical lines.
• Dead area: This is the area you aren’t counting on people seeing. Think of it as bleed for a print project. In this case however, you can’t permanently chop it off. You must always consider that  it might be seen.

Fluid Design

You can also consider making a fluid design… meaning that the site stretches and contracts with the browser window. For very design heavy sites this is much more challenging because you must design for the smallest window, the largest window, all the while keeping in mind how the transitions will work between the two sizes. If you have any areas of the design that must  be static in size, (like a 1000px photo running across the top) this might not be a good choice for you.

If you are considering a fluid design, you should probably conspire with your web developer, so he or she can help you develop a plan for something that will look good at different widths.

Wrap up

Designing for the web can be great fun. Spend some time looking at other sites and how they look in both little browser windows and large ones, to see how they compare. You will find plenty of sites that work great, as well as plenty that don’t. But it’s all teaching you, and will give you great ideas for your next web site design.