Intermediate-Level Training for Web Maintainers: Session Outline

  • Before We Get Started

    Review

    Covered in “The New Basics”

    • Login
    • Updating existing pages
    • Posting News
    • Posting Events
    • Getting Help and Contacting the Web Team
    We’re presuming you’ve been using these skills and that you are comfortable with them.

    In This Session

    • Creating New Pages and Sections
    • CMS Navigation and Menus
    • Section Home Pages
    • Resizing Images for the CMS
    • Using Other File Types
    • Top Five Web Team Tips

    Creating New Pages and Sections

    • On our CMS, Folder = Section
    • Generally, new pages go in existing sections (not your home folder)
    • You can also add new subsections to existing sections

    Create a New Folder

    • Go to the “For Students” folder in “Webology ___”
    • Create a new folder and name it after yourself (e.g., “Joe”—no apostrophes, please)

    Add a Content Block

    • Go into the folder you created and create a new content block
    • Name it “___s Internships” (e.g., “Jens Internships”—avoid apostrophes)
    • Cut and paste the content from the first section of the Word doc
    • Remember, in Ektron, pages are made of content blocks

    Content Block Tips

    • Choose a meaningful title (if possible, use keywords someone might search for)
    • Write a summary
    • Always use Paste Text to paste from Word
    • Use styles for Consistency and Google Findability

    CMS Navigation and Menus

    Navigation: All the links, labels, and other elements that provide access to pages and help people orient themselves while interacting with a given website

    Navigation Includes

    • Menus
    • Labels
    • Page titles
    • URLs
    • Link Text
    • Breadcrumbs
    • Search Box
    • A–Z Index
    • Site Map
    • Image Maps
    • Linked Images

    Navigation Answers Two Basic Questions

    Where am I?

    Where can I go?

    • We need to answer these questions on every page, in a consistent way.
    • Every page sets expectations for the whole site.

    How the Menu System Works

    • Websites are made of sections (folders)
    • Sections contain
      • Pages
      • Other sections
    • Every section has a section home page

    Three Ways to Move

    • Down—Through the menu
    • Up—Through the breadcrumbs
    • Across—In the body of the page

    Add Your Page to a Menu

    • Add your page to the menu in the folder above (“For Students”)
    • When a folder has one item, it doesn’t need a menu
    • When there’s no menu in a folder, we show the menu from the folder above.

    Create Another Page

    • Use the second section of the Word document
    • Apply styles
    • Preview
    • How do we reach this one?

    Adding a Menu

    • View —> Menu
    • Click the +
    • Give it a name
    • Add pages (including the section home page)

    Do

    • Check for other menus first
    • Put every page on a menu

    Don’t

    • Have more than one menu per folder
    • Edit the names of menu items (change the page titles instead)
    • Put non-webpages on the menu (no Word docs)

    Section Home Pages and Navigation Pages

    Section Home Page Can Be:

    • Just Content
    • Navigation
    • Content and Nav

    Navigation Page Can Be:

    • Table of Contents
    • Collection
    • Free Form

    Table of Contents

    Pros

    • Easy to make
    • Completely automatic

    Cons

    • Can change the URL of your page
    • Alphabetical order only

    Collection

    Pros

    • Display in any order
    • Mostly automatic
    • Doesn’t change page URL

    Cons

    • A little harder to set up
    • Can’t preview until published
    • Need to remember to add new pages to collection

    Free Form

    Pros

    • Can create a more usable and unique presentation

    Cons

    • “Unique” might mean harder to use
    • More work to maintain
    • Not automatic at all

    Additional Navigation Bits and Pieces

    • Headlines: short title on menu, long title on page
    • “Learn More” box
    • Ask Web Team to create breadcrumbs

    Resizing Images for the CMS

    Digital Images Have Two Kinds of Size

    • Dimensions: Height and width in pixels
    • File Size: Size in KB or MB

    They are separate—a picture from your camera is too big in both ways

    Resizing

    • Chose the right file type
    • Change the dimensions
    • Save for Web (compress)

    File Types

    Photographs

    • JPG

    Line Art (Solid Colors)

    • PNG (usually smaller)|
    • GIF (for transparency)|

    All of these formats are compressed for web use. Using the wrong file type for your image can result in an image that is too big, too grainy, or both.

    Dimensions

    Always use 72 dpi

    Standard widths:

    • 550px (full page)
    • 270px (half page)
    • 200px (for news posts)
    • 130px (for thumbnails)
    • Height can vary

    Save for Web

    • Lots of options here to set compression level
    • It’s easier to use www.resize2mail.com or another on-line service

    On the Web, HTML is best

    • Understood by everyone on the Web
    • Faster
    • Better searched by Google
    • Automatic printed versions
    • 1 in 10 users doesn’t have Adobe Reader
    • 1 in 10 doesn’t have Office

    If You Must Use Non-HTML

    • Load them into the Content area of the workarea
    • Set a title and summary
    • Don’t put them on the menu

    If you must update PDF and Office Docs

    • Don’t make a new content block—that will create a new URL
    • Open the old content block for editing and “browse” to choose a new file from your computer

    Top Five Web Team Tips

    Use a Quicklink Every Time

    • If it is on the CMS, use a quicklink—otherwise, you risk broken or untestable links
    • Where is it? (examples)
      • URSA: Registrar
      • Academic Calendar: Registrar

    Avoid Insider Abbreviations

    • Outsiders (our audience) don’t know what they mean
    • Screen readers may try to pronounce them
    • Users searching the web won’t search for our local abbreviations

    Avoid URLs in Text

    • Hard to read
    • Don’t always suggest what’s on the other side of the link
    • Missing an opportunity to feed keywords to Google
    • Printed versions print out the URL

    Only Use mailto: Links on E-mail Addresses

    • E.g., “e-mail Joe Bloggs (jbloggs@iup.edu)”
    • Breaks expectation that links to go pages
    • Many users (especially students) use webmail and can’t use mailto: links
    • Writing out the e-mail allows easy cut and paste

    Use Good Headlines for News Items

    • Good headline tells the story alone
    • Get keywords in the title—it’s the best place for them
    • Don’t: “Jones Publishes Article”
    • Do: “Jones Publishes Solution to Global Warming”

    Summary

    • Creating New Pages and Sections
    • CMS Navigation and Menus
    • Section Home Pages
    • Resizing Images for the CMS
    • Using Other File Types
    • Top Five Web Team Tips

    Step-by-step directions are available at www.iup.edu/web/howto