PASTPERFECT-ONLINE DESIGN GUIDE

Transcription

1 PASTPERFECT-ONLINE DESIGN GUIDE INTRODUCTION Making your collections available and searchable online to Internet visitors is an exciting venture, now made easier with PastPerfect-Online. Once you have your collections online and available for research, it is important to make searching as easy as possible, while keeping the look of your site attractive. This guide is intended to assist you in this process. Good design principles not only help you create a site that is easy to use, but these principles also help you build a site that will keep online visitors coming back often for more information. Sites that have confusing layouts or harsh color schemes may unintentionally keep visitors from finding information at your site. If you have any questions about how to achieve a certain look, or if you would like someone to customize your site for you, please contact us by at pposupport@museumsoftware.com or by phone at An MWeb PastPerfect-Online Client s Guide is available to you by going to Additional technical tips are also located in the Customizing and Tech Tips sections of the PastPerfect- Online User s Guide. 1

2 PastPerfect-Online Design Guide 2 OUR RECOMMENDATIONS When designing the interface of a searchable online database, it is important to keep the Internet visitor in the forefront of your mind. They are at your site looking for information that one of your employees or volunteers spent lots of time entering. The site should be clean and attractive, giving top priority to functionality and ease of use. Let your data and images take center stage and have the site complement the information. With the millions of combinations of colors, fonts, layouts, and designs, it is impossible for every PastPerfect-Online site to exactly match the existing sites of each organization while remaining affordable. Every PastPerfect-Online site can, however, complement each client s existing site so the Internet visitor will have an easy transition between the main website and the PastPerfect-Online site. Common layout, colors, fonts and logos greatly help the Internet visitor transition to your PastPerfect-Online site. EXAMPLES OF CUSTOMIZED PASTPERFECT-ONLINE SITES Many of our current PastPerfect-Online clients have customized their PastPerfect-Online site or have asked us to create a PastPerfect-Online site that more closely complements their existing websites. If you are looking for ideas or just want to browse, some examples include: Hoboken Historical Museum: Jewish Museum of Maryland: Chevy Chase Historical Society: Long Island Museum of American Art, History & Carriages: For a complete listing of PastPerfect-Online sites, please visit:

3 PastPerfect-Online Design Guide 3 GETTING STARTED: UPLOADING A PAGEBANNER The best way to get started is to display your logo at the top of the site. The logo provides continuity for Internet visitors moving between your existing website and your PastPerfect-Online site. The logo that displays at the top of each PastPerfect-Online site is called a pagebanner. The pagebanner file should be named pagebanner.jpg. Our recommended size for this image is 800 pixels long by 100 pixels high, keeping the pagebanner short in height so the Internet visitor can use most of the screen for viewing search results. Later on in this guide, you will learn how to make the pagebanner clickable to take the Internet visitor to your main website. To upload your pagebanner, please locate the PPO Welcome Letter with the login information that came in your PastPerfect-Online User s Guide and follow the steps below: 1. Make sure you have the banner or logo of your current site saved as pagebanner.jpg. 2. Right click on pagebanner.jpg and select Copy. 3. Next, right click on the Windows Start button, then click on Explore or Open Windows Explorer. 4. In the address bar, type in your FTP SITE as listed in your PPO Welcome Letter (ftp://server#.pastperfect-online.com replacing # with your one- or two-digit server number). Then press Enter. 5. Type in your USER ID and PASSWORD as listed in your PPO Welcome Letter. Then, click Log On. 6. Double click your graphics folder (00000graphics). 7. Right click on a blank spot. 8. Select "Paste." You should see the pagebanner.jpg file listed in the folder. 9. Close out of all windows and open a new Internet window or tab. Go to your PastPerfect-Online SEARCH SCREEN LOCATION. You may need to refresh the screen (by clicking the "Refresh" button at the top of the browser or pressing the F5 key) for the new banner to appear. If you need assistance with your logo or pagebanner, please contact PPO Support.

4 PastPerfect-Online Design Guide 4 MWEB TM INTERFACE MANAGEMENT SYSTEM (IMS) In addition to adding a pagebanner, there are other changes you can make to your site, such as modifying the color scheme, layout, font styles, etc. All of these changes are controlled by the Interface Management System (IMS) website. Accessing the Interface Management System To access IMS, please follow these steps: 1. Open an Internet browser and go to the IMS SITE ADDRESS as listed in your PPO Welcome Letter. 2. Enter your IMS USER ID, IMS PASSWORD, and IMS PROJECT CODE as listed in your PPO Welcome Letter, then click the Go button. This will bring you to your IMS site where you can make changes to the look of your PastPerfect-Online website. When you first log in, there are four options (components): Change Options This section allows you to add or remove the Click & Search and/or Random Images search functions from your PastPerfect-Online site. You can also add a Home button that visitors can click to get back to your main website, set up notifications, set up statistic reports, and more. Change Messages This section allows you to change the messages that appear on your website pages, including: the title of the window, the footer, the address for the Home button, and the HTML text to insert the pagebanner. Change Layout This section allows you to change the layout, color scheme, and font style of your site to better complement your existing site. Change Styles This section allows you to change the Cascading Style Sheet (CSS) that formats your PastPerfect-Online site. If you are not sure what changes to make here, you should leave the information in the fields as is. More details about these components can be found later in this Design Guide. Once you have saved your changes in the MWeb TM Interface Management System, you can view them immediately on your PastPerfect-Online site. You may need to refresh the web page (by clicking the Refresh button or pressing the F5 key) for the changes to appear.

5 PastPerfect-Online Design Guide 5 IMS CHANGE OPTIONS The Change Options screen allows you to add/remove certain optional features. Once you ve made your selections, be sure to click the Accept New Options button at the bottom. Options Selections Quick Help Click-&-Search This Page Feedback Form Home Button Human Verification Image Order Form Images in Main Window Image Window Height Image Window Width Random Images Statistics Objects Photos Library Archives Images Creators People Search Terms Adds a Click-&-Search button to the MWeb Main Menu. Links will be added to all Full Records and Image Windows, for users to a link to the page. If you enter an address, links will be added to all Full Records and Image Windows for users to provide feedback. This can be anything you ask for, such as information about the object or image. The information they provide will be ed to the address you enter here. Using IMS you may allow the user to sign up for your and/or paper mail lists. A Home button will be added to the MWeb Main Menu. To provide the URL for the Home button, use IMS Change Messages to change the MM_HOMEBUTTON in the MAIN MENU section. Adds arithmetic problem to forms to verify sender is human. If you enter an address, links will be added to all Full Records and Image Windows for users to order the images. The order form will be ed to the address you enter here. Check if images should NOT open in separate windows. For Image Window Height and Width, enter the size in pixels (without adding "px"). To test the Image Window dimensions, click the Accept New Options button below, then close all MWeb image windows, refresh the MWeb display, then click a thumbnail. Checking one or more Content Types will add a Random Images button to the MWeb Main Menu. Images shown will be from the selected Content Types. To remove the Random Images button entirely, uncheck all of the options. (Changes require re-running Preprocessor.) If you enter an address, a monthly statistics report will be prepared and you will be notified by when it is ready.

6 PastPerfect-Online Design Guide 6 IMS CHANGE MESSAGES This section allows you to change the messages that appear on your website pages, including: the title of the window, the footer, the address for the Home button, and the HTML text to insert the pagebanner. Here are some of the most common messages to change: ALL PAGES The messages available to change under ALL PAGES are those that appear on every screen. AP_PAGEBANNER allows you to change the pagebanner path or filename. Most of the time you do not need to do anything with this section. The default HTML coding allows you to display your logo (called pagebanner.jpg). See the Getting Started section earlier in this Design Guide for more detailed instructions about uploading a pagebanner. AP_WINDOWTITLE allows you to change what text is displayed at the top of the window browser. The default text is PastPerfect for the Web, 2d edition, but you can edit it to read whatever you would like. DP_FOOTER allows you to change the text displayed in your footer. The default text is Put your footer here and can be customized to display almost anything - your museum s contact information, visitation hours, copyright rules, tips for searching, etc. The MWeb TM copyright statement at the very bottom of the footer is required and cannot be changed. See Edit Footer Text section under the Customizing tab for detailed instructions. MAIN MENU This section contains items from the main menu available for customization.

7 PastPerfect-Online Design Guide 7 MM_HOMEBUTTON allows you to enter a complete link to your homepage so that when you click the Home button on your PastPerfect-Online site, you will automatically be directed back to your homepage. FULL RECORDS These allow you to change the heading text that appears on the search results page for each type of record found. The defaults are: Object Record, Photograph Record, Library Record, Archive Record, Image Record, Creator Record, Person Record and Search-term Record. For a full list of available messages that can be changed, click the Help button anywhere in IMS. Please contact pposupport@museumsoftware.com if you need assistance figuring out if a message can be changed and how to change it.

8 PastPerfect-Online Design Guide 8 IMS CHANGE LAYOUT The Change Layout section allows you to make basic changes to the layout, color scheme, and font style of your PastPerfect-Online site. We recommend making your selections in order. You can also periodically update the preview at the top of the screen to see your changes. The preview displays approximate changes, so be sure to click Save All Selections once you re finished and then view the results on your live PastPerfect-Online site. You may need to refresh the web page (by clicking the Refresh button or pressing the F5 key) to see the changes. 1. Click to choose layout Suggestion: Do this first as it will overwrite color selections. 2. Position narrow displays (applies to vertical menu only) 3. Narrow display width Width of the content for all displays except Search Results, Full Records, and Image Windows. 4. Click to choose color scheme Please note: Different color options will appear online in IMS Warning: Clicking one of these will overwrite any custom colors you may have in the next section.

9 5. Customize specific colors PastPerfect-Online Design Guide 9 Enter color names shown in this Color List, or any valid HTML color codes (such as #AB66CD, upper- or lower-case; you must add the # before a color code, but not before a color name). You need to change only the colors you wish to override. It is a good idea to view the colors on your computer as colors may appear differently on other computers and when printed. 6. Set background image or pattern Enter filenames of GIF or JPEG images, such as "background.jpg". Enter the word "none" in a box to remove a background image. Images must be uploaded to your graphics directory (such as /12345/12345graphics/) before they can appear in PastPerfect-Online, or in the preview window above. 7. Position of logo and text in the Toppane

10 PastPerfect-Online Design Guide Choose fonts 9. Main Menu button size Click button to choose. 10. Main Menu button borders Click button to choose. 11. Link and button text colors Enter color names shown in this Color List, or any valid HTML color codes (such as #AB66CD -- you must add the # before the code). You need to add only the colors you wish to override. It is a good idea to view the colors on your computer as colors may appear differently on other computers and when printed. Selections are not saved until you click the "Save All Selections" button above!