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.
- Size: 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. To do this in a browser copy this code: "javascript:resizeTo(600,600)" and paste it in the address bar of the page you want to take a screenshot of. Press Enter. 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.). Only if the screenshot is overflowing the required 600px wide window may you resize 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
If you are laying these screenshots out in Word and you are circling things and pointing to things with arrows try not to use arrows. A square box around some content is more desirable than a circle or oval. Most content comes in boxes, so go with that shape. It will make it much cleaner and easy to understand.
- Alt Tags - In Word right click on an image, go to "fomat picture", click the "web" 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.
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.