The Office of Communications and Marketing has developed a Cascade webpage builder to streamline the look and functionality of Auburn University webpages. The mix-and-match set of modules ensures consistency in branding, user experience and accessibility while providing a flexible framework for managing web content.

  • Consistency and User Experience: Ensure that all new and redesigned websites maintain a cohesive appearance and user-centric design that aligns with the organization’s overall branding guidelines.
  • Scalability: Offer a flexible design that can grow with the needs of each department, whether for new programs, events or other updates.
  • Search Engine Optimization (SEO): Support SEO best practices, ensuring higher visibility and discoverability of department pages.
  • Compliance: Adhere to web accessibility standards and data privacy regulations.

To request assistance with site creation, redesign or update, please fill out a project request form.

Layout Examples

The modules allow for many different layouts, but there are several prebuilt examples to show the possibilities and what modules work well for different types of pages.
Example Homepage
Example Landing Page
Example Interior Page
Module Style Guide
Explore Module Options

Getting Started

  • Determine the purpose and your audience; conduct research if needed.
  • Determine information architecture. Group content into primary categories or sections that align with the needs of both the user and the department.
  • Trim copy, making it purposeful, clear and concise.
  • Gather images from the Photo Services library or other source, or plan for new photography or video.

If you are creating a new site or need access to an existing site to create a new section or page, contact John Walker to setup the new site in Cascade. He will confirm the details with OIT. 

  • Log into cascade.auburn.edu with your Auburn credentials
  • Find your site under "My Sites"
  • Navigate to the folder where the page will be located
  • Choose "Add Content" at the top of the page and choose "Blank Modular Page"

Please note: Each section of your site should have a folder. Each folder should contain an "index" page.

Building Your Site

  • Page Properties: Click "yes" in advanced settings to see Page Properties. Choose navigation, breadcrumbs and footer options. 
  • Navigation and footer: Add and customize in the "includes" folder

Guidelines for colleges:

    • Main navigation: About, Academics, Research and two optional. We encourage some version of Extension/Outreach/Engagement as one of the options.
    • Dropdown: Choose up to eight menu items for each (prefer 4-6).
    • Audience-specific: All audience-specific pages are customizable, but if the college doesn’t have a page for an audience, it’ll point back to the university-level page by default.
    • Quick links: Include college logo. Links are customizable, and colleges can have up to 12.
    • Footer: Resources to the far right are university-wide, but the left side is customizable.

Though images can be added at any time, it's best to begin by adding the ones you know you'll use first.

  • Navigate to the "assets>images" folder.
  • "Add Content" and choose "File"
  • When uploading:
    • Use lowercase file names with no spaces.
    • Add required alt text for accessibility.
  • Publish image 

Tips:

  • Recommended size for most modules: Rectangle 1280x720px, Square 600 x 600
  • Keep files under 150KB to avoid slow load times.
  • Use the Squoosh app (https://squoosh.app) to resize and compress images efficiently.

  • Headers: There are a number of different header options for each type of page: college or unit homepages, department/subject pages, marketing, interior and information.
  • Add Content: Content is added in rows, and each row is a module. Choose from a number of different content modules — many with different color and layout options.
  • Each page can include up to seven modules, but many modules allow for several items within the module.

  1. Preview: View draft before submitting; visible only to you.
  2. Drafts: Auto-saved versions; recoverable if accidentally closed.
  3. Submit: Saves changes in Cascade but doesn’t publish them.
  4. Publish: Pushes changes to the live website.

Best Practices

  • Information Architecture: Always begin with the purpose and audience in mind. Place the most important content in the top sections and use information modules to highlight important information or CTAs.
  • Navigation Structure: Keep menus simple and intuitive, avoiding excessive dropdowns.
  • Mobile Responsiveness: Ensure the design adapts well to different screen sizes.
  • Ensure Accessibility (WCAG Compliance): See guidelines.
  • Avoid using PDFs when possible.
  • Call-to-Action (CTA) Buttons: Ensure buttons are action-oriented (e.g., “Apply Now” vs. “Click Here”).

Each page is limited to seven modules. There are several templates available (including college/unit homepage, department page, interior page) for use or reference, but the following are guidelines to follow when building pages.

  • White space: Many modules offer several color options, so carefully consider the balance of whitespace on each page. In general, don't begin the page with a very visual feature module. 
  • Vary photos and text: Do not use all the same modules, same color modules or all large marketing-style modules.
  • Consider audience and purpose: Some landing pages may have more visual elements, while interior informational pages will have more text and lists.

  • Image Optimization: Headers and modules indicate appropriate image sizes. In no size is indicated, we suggest 1280 (w) x 720 (h) for horizontal photos and 600 x 600 for square. Use WebP or compressed JPEGs/PNGs for faster load times.
  • Responsiveness: Test images to ensure responsiveness.
  • Use vibrant, action-oriented photography: See brand photography guidelines.
  • Descriptive alt text: Alt text improves accessibility for visually impaired users, enhances SEO and provides context when images fail to load.
  • Icons: Images need to be added to Cascade, but the icon library is preloaded for use.  

  • Short Sentences & Paragraphs: Aim for concise, easy-to-digest content. Avoid large blocks of text. Break up long content with subheadings, bullet points, or images.
  • Avoid Jargon & Acronyms: Use plain language unless industry-specific terms are necessary.
  • Active Voice: Prioritize active voice over passive (e.g., "We offer support" vs. "Support is offered by us").

Content Updates: Establish a process for regular content reviews to ensure accuracy.

Submit issues here.