Best Practices for Catalog Page Layout

Last updated
Save as PDF

This article shares recommended practices for designing and maintaining Catalog Page layouts in Skilljar Starter.

Overview

A Catalog Page is the primary entry point for learners visiting your Skilljar Starter site. A well-designed layout helps learners orient themselves quickly, find relevant content, and complete the actions you want them to take. The recommendations below cover planning, layout structure, visual design, content, accessibility, and ongoing maintenance.

Plan Before You Build

Define the primary goal of the page. Decide whether the page is intended for discovery, enrollment, ongoing learning, or completion.
Identify the target learner. A page designed for new learners looks different from a page designed for advanced learners or returning users.
Sketch the section order. Decide what sections you need and in what order before entering layout mode.
Inventory your content. Confirm the courses, banners, and assets you plan to feature are ready.

Structure the Layout for Clarity

Place the most important section near the top. Learners often decide whether to engage within the first screen of content.
Group related sections together. Keep enrolled courses near other learner-progress sections, and keep promotional banners away from completion-focused content.
Limit the number of sections. A focused page outperforms a long page with many competing elements.
Use hidden sections for staging. Hide sections that are not ready instead of deleting them.

Maintain Visual Consistency

Configure no-code style options first. Use the Branding, Colors, Buttons, Fonts, and Cards options in the Style menu before reaching for Custom CSS.
Apply colors and typography consistently. Reuse brand colors and font choices across all Catalog Pages so the learner experience feels unified.
Keep contrast high. Ensure text remains legible against banner backgrounds and card images.
Use Custom CSS sparingly. Reserve Custom CSS for cases that cannot be addressed through the standard style options, and follow the conventions in the Customize Style in Skilljar Starter article.

Write for Learners

Use plain, action-oriented language. Banner titles, subtitles, and section headings should make the next step obvious.
Keep banner copy short. A title plus a single supporting line is usually enough.
Match the page tone to your audience. Formal training pages, customer education pages, and onboarding pages each call for a different voice.

Validate Across Preview States

Layout decisions can look correct in one learner scenario and break in another. Always validate your page across all four states in Preview State:

No enrollments
One item in progress
Items in mixed progress states
Multiple items completed

Pay particular attention to empty states and to pages with mixed progress data, since these scenarios surface the most layout issues.

Consider Accessibility

Ensure adequate color contrast. Test brand color combinations to meet accessibility guidelines.
Provide descriptive headings. Use the title and section headings to convey structure, not just visual hierarchy.
Avoid relying solely on color. Use icons, labels, and copy to communicate state in addition to color.
Verify on multiple screen sizes. Check that the page is usable on smaller breakpoints in addition to desktop.

Maintain the Page Over Time

Review the page regularly. Schedule a recurring review (for example, quarterly) to confirm content is still accurate.
Retire stale content. Hide or remove sections that are no longer relevant.
Track third party scripts. Periodically audit any analytics or marketing scripts inserted through the Settings menu. For more information, refer to the Insert Third Party Scripts article.
Document custom styles. Keep a comment header in Custom CSS describing the purpose of each rule so future admins can maintain it.
Communicate large changes. Coordinate significant layout updates with learner-facing communications so the change is expected.