Guidelines for Taking Screenshots
Who is Your Audience?
Do you really need to be showing this or is a bit of text going to do the trick?
What Are You Trying to Show?
Narrow in on the element on the page that you are focusing on.
How Little Can You Get Away with Showing?
- 600 pixels wide: The smallest screen size we support is 1024px wide x 768px high. The University Template has a fixed width for the content area that is 900px. If there is a sidebar on the page (and there usually is for pages that contain screenshots) that is reduced to 700px. To allow enough room for padding and indenting, as needed, we require that all screenshots be no wider than 600px.
Copy this code: "javascript:resizeTo(600,600)" and paste it in the address bar.
Your browser window will be changed to that size. Length (height) of the screenshot is not crucial. Width is. This technique works well for pages that are designed to reformat according to the width of the screen (e.g. text wrapping, etc.). If after using the window resizing code above your screenshot is overflowing the required 600px wide window you may widen the window to take the screenshot.
- Borders: Do not include any borders. We will add them in html. Unless it is a screenshot of a dialog box that has unique borders i.e. the title of the application appears in the title area of the window's border don't include them. If your method of shooting screenshots does not allow you to crop out the border of a window, the WDC will crop out the borders for you. If all of the images are the same size this greatly decreases the amount of time it will take us to do that. Please indicate if the window border is integral to the meaning of the screenshot by typing in red "screenshot needs window border" under the screenshot in the word doc that you will give us.
- Extraneous graphics: Do not include any extraneous graphics; buttons, borders, banners in the screenshot. Anything that does not have to do specifically with what you are trying to convey in the image should not be included when you take the screenshot. If you include those elements it increases the download time for users and adds unnecessary complexity to an image of something they don't understand in the first place that you are trying to explain to them. Make it easy on people.
In Microsoft Word
Circles, Squares and Arrows (Callouts)
Avoid using circles, squares and arrows in Word to point to parts of your screenshot. If you can get away with a simple text explanation do that. It will be easier for people to understand if you explain it well in writing.
Do not leave the callout and screenshot as separate images. If you do this it becomes impossible to make them accessible.
Each of those elements (the screenshot itself, the circle, square, or arrow) need to have alternative text (alt tag). Some people who are blind or have low vision use sfotware called screen readers to listen to web pages. Screen readers read the alt tag to the user. The problem is that the circle, square or arrow is a separate piece of art and needs its own alt tag. There is no way to connect the two images (the callout and the screenshot) unless they both exist on one image.
If you really need to have a circle, square or arrow take another screenshot the screenshot with your callout and use that screenshot of the screenshot. That way you can put an alt tag on that screenshot and its contained in one image.
Add Alt Tags to Images
In Word 2007 right click on an image, go to "Size", click the "Alt Text" tab, type in the meaning of the picture. If this picture wasn't here, what would we be missing? That way the WDC can tell what to put as the alternate text of the image on the html page. Closing the Size window saves the image with the alt text you added.
Source Art
Make sure you provide the Web Designer with the source artwork either in .png or .tif format. Do not give us jpgs. If we edit the jpg and re-export it as another jpg, it loses graphical integrity (the image quality gets worse). If you are showing screenshots that people might need to read this might present a problem. It is also the desire of the Designers here at the WDC to provide the best quality images possible. Please help us reach this goal.