Penn State mark   AIS Header AIS Home Page link ITS Home Page link
in:
AIS Home > Online Documentation > AIS Web Style Guide

AIS Web Style Guide



  • Recommendations

  • Reference Material

     

  •  

     

    STANDARDS/REQUIREMENTS

    AD54 Policy (taken from ITS Web Style Guide)

    Requirements are generally connected to site managers' redesign schedules. First and second level pages should comply with Policy AD54 by August 15, 2005, but other pages can wait for the normal revision/redesign process. The requirements are summarized below. For details, see Policy AD54.


         Policy AD54 Compliance Checklist (required by August 15)
    Ensure that first and second level pages (ITS home page, unit home pages, unauthenticated major service home pages) include the following:


         Additional ITS-specific Requirements (required by August 15)
    Ensure that first and second level pages (ITS home page, unit home pages, unauthenticated major service home pages) include the following:

    •  ITS banner as shown in sample templates currently being developed (very similar to the current banners but the Penn State Mark will be resized and repositioned, and the Penn State search elements will be added.)
    •  ITS logo below left navigation linking to ITS home page (http://its.psu.edu/). For one-column pages, ITS logo in footer and text links are sufficient.
    • Footers containing the following links: Penn State, unit home page, ITS home page, and http://its.psu.edu/legal.html. See templates for further details.
    •  Last date revised should be included in footer.


         Policy AD54 requirements upon redesign (not required by August 15, 2005)


         Recommendations and General Guidelines (not required by August 15, 2005)

    • Site-wide consistency
    • Use best practices for XML/XHTML/HTML and CSS (see W3C)
    • Validation: "Pages that validate properly to older standards do not need to be changed until that page is redesigned as part of a general or sectional redesign." — Policy AD54
    • Campuses/Colleges link
    • Site index
    • Contact form
    • Usability testing
    •  ROI analysis

      Tip:
      See the Web Developers Luncheon Presentations to learn more about Policy AD54, why it was revised, what is required, and how to get started. Read Policy AD54 Web Page Design and Image for details about the requirements.

     

    Associated Press Style

    The AIS Web site is formatted in Associated Press (AP) Style. To consult, please see The Associated Press Stylebook and Briefing on Media Law ©2002.

    Directory Structure and File Names

    • Lowercase
    • Files have ".html" extension
    • Underscores between words; for example, "production_control" or "web_standards".
    • Names are to be short and to the point; for example,"PC_Replacement_Program_Policy_and_Guidelines.doc" changed to "pc_replacement.doc"
    • Avoid redundant terms; for example, ".../ais/ais_standards/" changed to ".../ais/standards/" or ".../ais_standards/"

    Labels

    Forms

    • Templates available

    User Documentation

    Document Formats

    • - Documents should be submitted in either Word format or as an HTML page(s). *NOTE: If a document is subject to frequent adjustments or will be printed by users, Word format is suggested for its ease of use and printability. If a document contains more than 1,000 words, it should be submitted as an HTML page, or converted to PDF format by the editor (See **note below)

      - HTML versions of content preferred over downloadable media

      - No PowerPoint presentations unless information isn't readily available on the AIS Web site. Those PowerPoints used must be reviewed by the editor prior to releasing

      **NOTE: Those documents used for final documentation, i.e. user documentation that will not change, Annual Report, etc., may be converted in PDF format by the editor. Viewing of these documents from the Web requires Adobe Reader.

       

    Back to top


    COPYRIGHT

    Copyright Statement
    Penn State authorizes the use of unaltered reproduction of these images by its faculty, staff and students on Penn State Web servers solely for matters within the course of University employment or educational programming offered by the University. Penn State also authorizes the use of unaltered reproduction of these marks by news media organizations for the sole purpose of illustrating news publications. These images may not be used by any person or organization to represent a personal or non-University Web page as being a publication of Penn State University. All other uses require prior permission from the University's Licensing Programs Office or the Office of University Publications.
    Copyright infringement may be reported to security@psu.edu. See copyright information for details.

    Copyright, Server Management and Other Guidelines and Policies
    Content of Web pages must not violate Penn State policies or federal, state or local laws. Generally, laws that apply to the printed word apply in the electronic medium as well. Publishers should be concerned with issues related to copyright, libel, and liability. Following are some of the main issues that people should be concerned about when publishing on paper or online.

    1. Copyright: Electronic publishing is much like publishing in any other medium; you generally cannot use materials created by someone else without the author's permission. This is not an issue if you are publishing a collection of your own works, but it is crucial when distributing the works of other people. If you wish to publish copyrighted works authored by other people, you must obtain written consent from the copyright owner and keep a copy of that document in your records. These requirements apply to anything copyrighted (for example: paintings, sculpture, photographs, articles, poetry, novels, software, screenplays and student papers).
    2. Policy and Law Violation:
    There are a number of University policies, plus federal and state laws, that pertain to the use of computers and networks. These include laws or policies pertaining to libel, slander, threats of bodily harm, pornography and sexual harassment.
    3. Non-profit Use: Use of University systems are reserved for University related activities only. You may not use the Penn State network, equipment or any other Penn State resources for personal profit.
    4. Electronic Surveys: Penn State researchers know that all research performed on human subjects must be approved by the Office for Research Protections. However, they should also be aware that Internet surveys are subject to the same regulations. Whether conducting a survey on paper or online (by using e-mail, the World Wide Web, and other Internet resources) researchers must comply with all policies, including Policy SY22, The Use Of Human Subjects In Research. All researchers and the students who work for them are expected to exercise responsible, ethical behavior when using Access Accounts, the University's computers, information, networks or resources. See Policies, Guidelines, and Laws for additional information.

    Back to top



    USE OF IMAGES

    GIF vs. JPEG
    The two primary file formats for Web graphics are GIF and JPEG.

    GIF stands for Graphic Interchange Format and JPEG stands for Joint Photographic Experts Group. The words “graphic” and “photographic” are intentionally bolded here to indicate what each file format handles best. Each is best suited for a certain type of image.

    GIFs are best for flat or simple graphic images that incorporate solid areas of color, such as logos, illustration, cartoons, line art, and so on.

    JPEGs are best for continuous-tone images, such as photographic, glows, gradients, drop shadows, and so on.

    In general, when posting Web graphics to Red Dot, you will want to use an image that is at minimum 72 DPI (dots-per-inch) resolution. It will not benefit you to use an image with higher resolution since the output of the screen is 72 DPI, however if you use a larger image resolution, your image will be larger and it will take longer to upload.

    Graphics Resolution

    Resolution refers to the amount of information in the graphic image. Resolution is often expressed in dots-per-inch (DPI) that follows upon the language of electronic prepress and printing. The following resolutions are indicated:

    300 DPI for the scanning of color images
    100 DPI for electronic presentations, e.g., PowerPoint, etc.
    At least 150 DPI for a decent print (300 DPI preferred)
    72 DPI for Web presentation

    File Size
    Graphics files uploaded to the Web should be as small as possible so that they load quickly in the reader's browser. If your pages load too slowly, users will either go away or be annoyed. There is no hard and fast rule about the actual size of graphics files, but large graphics are usually no larger than 40k to 50k. Many smaller images will be no larger than 7k to 10k in size.

    PowerPoint Presentations
    Images or graphics placed into your PowerPoint presentations should be a minimum of 72 DPI resolution and no larger than 150 DPI. Images or graphics that are 150 DPI will slow upload time, 300 DPI may result in broken image links. Make your images as small as possible before placing them into your presentation.

    Image files used for PowerPoint should be no larger than 200kb. If they are larger than this, you may consider reducing its size. There are several ways you can reduce the size of your image file. The most obvious and easy is to crop the image and remove the parts that are not relevant. You can also reduce the resolution of your image – the most commonly used resolution is 72 DPI that is the resolution of your computer screen, anything larger is just not necessary.

    PowerPoint Presentations going online should be small in file size because it must be uploaded. Recommended size is between 4-10MB or less. 


    Back to top


    RECOMMENDATIONS


    Commonly-Used Web Terms

    Below is a list of commonly used computer and Internet terms, acronyms and software programs. This page is intended to provide proper spelling of the following terms. For definitions and expanded information on the terms listed here, consult a computer/Internet dictionary or style guide, such as Wired Style: Principles of English Usage in the Digital Age, by the editors of Wired magazine.

    Adobe Photoshop
    Aldus PageMaker
    America Online (AOL)
    ASCII (pronounced As-kee)
    AutoCAD
    backbone
    backup
    BinHex
    bit map (or bit-mapped)
    BITNET
    CAD (computer-aided design)
    CADD (computer-aided design and drafting)
    CD-ROM
    CompuServe
    computer-assisted instruction (CAI)
    database
    download
    E-mail or e-mail
    Ethernet
    Eudora
    ftp or FTP (file transfer protocol; capped when referring to a specific set of rules that comprise an ftp)
    GIF (Graphics Interchange Format)
    Gopher
    Graphical User Interface (GUI)
    home page
    HTML (HyperText Markup Language)
    HTTP (HyperText Transport Protocol)
    information superhighway
    Internet/internet (lowercase when used informally to refer to a group of LANs connected by means of a common communications protocol)
    Internet2
    keyword
    LAN (local area network)
    laptop computer
    listserv
    mainframe
    Microsoft
    MINITAB
    MS-DOS
    multimedia
    NCSA Mosaic
    Netscape
    newsgroup
    offline, online (solid as both adjective and adverb)
    page break
    PC
    pop-up menu, pull-down menu
    PostScript
    PowerPoint
    Prodigy
    QuarkXPress
    reboot, reformat
    screen saver (two words)
    spreadsheet
    startup disk, startup screen
    Sun SPARCstation
    time-sharing
    troubleshooting
    Uniform Resource Locator (URL)
    UNIX
    UseNet
    Web site
    World Wide Web; Web; WWW
    WordPerfect

    Back to top


    RedDot Glossary of Terms
    Administrative entries can be used in the SmartEdit for exchanging information and messages of specific pages.

    ClosePage RedDot
    The ClosePage RedDot is a RedDot symbol for closing the editing mode of the page in the SmartEdit mode.

    Edit RedDot
    The Edit RedDot is a RedDot symbol. Via the Edit RedDot icon RedDot elements are opened for editing in the SmartEdit mode.

    Keyword
    A keyword is a crucial component in the SmartEdit mode. That is, keywords can be assigned to RedDot pages. Particular pages can, for example, be automatically displayed in lists via keyword lists.

    Link RedDot
    The Link RedDot is a RedDot symbol for editing link properties of a link in the SmartEdit mode.

    Mandatory RedDot
    The Mandatory RedDot is a RedDot symbol. RedDot elements that have to be edited before a page can be saved are denoted with this symbol in the SmartEdit mode.

    Media Element
    The Media element is a RedDot element used as a placeholder for a media file in the template (such as MS Office, PDF, Word or Real Audio files).

    MultiLink
    A MultiLink is a RedDot symbol for linking the link elements Container and List to several pages in the SmartEdit mode.

    OpenPage RedDot
    The OpenPage RedDot is a RedDot symbol for opening RedDot pages in the SmartEdit mode.

    Page
    A RedDot page is an integral part of a RedDot project. Every RedDot pages is based on a template.

    Page Headline
    A RedDot page is named by a page headline.

    Publishing
    Publishing means transferring pages that have been completed and released to their publishing target.

    RedDot Start Page
    The RedDot start page is the initial page of the project in SmartEdit. It is displayed in SmartEdit via the menu item “Start Page” in the navigation menu.

    RedDot Symbols
    A project can be edited in the SmartEdit mode via RedDot symbols. Some examples include: Link RedDot , Add Page Content , ClosePage RedDot and OpenPage RedDot .

    SmartEdit
    SmartEdit is a project component of the RedDot Content Management Server. A project selected in the Component Manager is edited via RedDot symbols in SmartEdit. SmartEdit users have corresponding authorizations.

    Tasks
    Tasks are an integral part of a workflow. A user can have a look at his or her tasks under the menu item “Tasks” in the Navigation Menu in the SmartEdit mode.

    Template
    Templates consist of different code forms (such as HTML, WML or SGML), and placeholders with element properties. Templates form the basis of every RedDot page.

    Text Editor
    The Text Editor is an integral part of the SmartEdit for editing the content of text elements.

    Thumbnail
    A thumbnail – also termed preview image – is a small image of image symbol that is displayed instead of the real image.

    User Account
    User accounts are part of the RedDot software and contain all information about the user.

    Work Area
    The work area is a component of the user interface in the Component Manager and the SmartEdit mode.

    Workflow
    The workflow is a component of RedDot.

    Back to top


    RECOMMENDATIONS

    Headers

    • Headings should use key words or phrases to immediately tell the reader what will appear below
    • Nearly all good headings have some kind of power in their language
    • Do not “undersell” your content
    • Use active, rather than passive verbs

    Subheads

    • Use subheads to break up long text passages
    • Horizontal rules go above subheads
    • Use matching typography for headlines, subheads and pull-quotes

    Body Copy

    • Choose a familiar typeface
    • Avoid using stylized typefaces
    • Avoid long lines of small type or short lines of large type
    • Replace underlined text with words set in bold, italic or small caps
    • Avoid overusing bold and italicized text
    • Use small caps for abbreviations, titles and acronyms

    Paragraphs

    • Choose one, and only one, way to indicate new paragraphs
    • Use a measured amount of white space to separate paragraphs
    • Avoid unnecessary paragraph indents
    • Avoid isolated letters and words.

    Punctuation

    • Eliminate unecessary punctuation
    • Do not add unnecessary emphasis to punctuation
    • In numbered or bulleted lists, punctuate only when the list item forms a complete sentence. In all other cases, omit punctuation.

    Hyphenation

    • Do not hyphenate headlines, subheads or pull quotes
    • Avoid splitting proper nouns and dates
    • Pay attention to context when hyphenating words

    Back to top


    REFERENCE MATERIALS

     

       

       


       





    Questions: AIS Webmaster


    Printer friendly view



    The Pennsylvania State University © 2008 | Copyright | Privacy and Legal Statements | Alternative Media - Nondiscrimination Statement
    This site is maintained by Administrative Information Services, a unit of Information Technology Services.
    Provide site feedback to AIS-webmaster@psu.edu. Can't find it? Ask AIS
    Last revised: Friday, November 04, 2005 9:53