Cultivating a Successful Screenshot Archive
Let’s face it. Websites are as transient as the wind. Developers and designers spend countless hours producing sites that may exist online for mere months or even less before being restructured, redesigned or removed completely, forever disappearing into eternal nothingness — or, even worse, into the sterile void of a search engine database. Clearly not the best situation for designers looking to maintain a complete record of their online work.
Don’t rely on 3rd-party services
Even for sites proactively encouraging their caching and archiving by the search engines, accurate and reliable online site preservation approaches the impossible. Unfortunately, search engines are extremely inconsistent when it comes to archiving websites. If you doubt that, try digging up one of your old sites and see how it looks as stored deep within the archives of say, Google or Yahoo. Search engine archives commonly omit associated CSS, JavaScript, and image files, rendering sites incomplete and useless as a design reference.
Local or offline site storage also is impractical, especially if your sites are database-driven and require a server to process content. Replicating the original server environment is usually a hassle, requiring database reconfiguration and URL path repairs. Further, databases frequently involve absolute URL’s, thereby rendering offline sites practically useless. Besides, many sites are often aesthetically redundant, consisting of hundreds of virtually identical, dynamically created pages. Such archived sites are waste of disk space, especially if their content is now obsolete or exists elsewhere online.
Roll your own screenshot archive
Rather than rely on the search engines or depend on impractical offline archiving methods, savvy web designers and developers should develop a concise, high-quality screenshot archive of all their work. A well-maintained screenshot archive is an invaluable design tool providing streamlined reference for future projects, source material, and portfolio development. Clearly, from a visual-design perspective, screenshot archiving is far more valuable, useful, and beneficial than traditional methods of storing antiquated or otherwise dismantled websites.
As you begin developing your screenshot archive, reach as far back as possible into your design history and capture a solid set of screenshots for each of your sites. This is necessary to establish a complete screenshot portfolio on which to build. After setting up a comprehensive library of past work, begin collecting screenshots for each new project as it unfolds and, most importantly, upon completion. Screenshots captured at key stages during project development may prove worthwhile down the road.
Keep in mind that websites are not the only candidate for screenshot captures — any digital project worth remembering will appreciate its inclusion within your growing archive. This is especially true for extensive Photoshop projects, Flash movies, and even video productions. Anything that may require future visual referencing will prove beneficial as an easily accessible screenshot. Plus, capturing such projects into a single location will save you time searching, opening, configuring, and displaying them.
Managing your archive
Once a project has been successfully captured and archived, there are several options for dealing with the original project: zip it, delete it, or forget it. Zipping the original project enables future consultation of code, scripts, and other mechanics. The zipped file then may be stored locally or transferred to DVD. The goal here is preservation and consolidation: zip and file a complete copy and delete all remaining chaff. This process transforms the mess of old, broken, unused projects littering your hard-drive into an articulately maintained, ultra-streamlined screenshot archive.
As you collect your screenshots, it is essential to associate plenty of meta-information with each image. Include the time, date, site name, URL, browser type and version, platform, as well as anything else that you might find useful seven years from now. There are several ways to add such metadata to your screenshots, including editing the image properties in Photoshop, naming the file to include the information, or including the info in the screenshot itself. For this trick, open a small text window next to the project window. Edit the info shown in the text window for each screenshot and you’re off to the races.
Stay focused
When collecting screenshots for websites and other layout-specific applications, it may prove beneficial to capture images via multiple browsers, such as Firefox, Opera, and Internet Explorer. There are also different platforms (e.g., Mac, PC, Linux) to consider. For each website, capture at least three different page views, including important, novel, or otherwise memorable presentations. For scrolling pages extending beyond the height of the screen, you may want to check out the Full Web Page Screenshots Firefox extension, which is an excellent tool for capturing complete screenshots of long pages.
While there are many possible configurations to capture and archive, it is up to you to decide what is actually needed or beneficial. Don’t get overwhelmed trying to capture every possible setup variation. Remember, the goal here is to collect enough information to create an accurate record of your websites and projects. With practice, the fine art of screenshot archiving will manifest a streamlined process that is as efficient and effective as it is satisfying and rewarding.
