Better Ui Better Experience | ASP Playground.NET

Better Ui Better Experience — APG vNext Guide

Better Ui Better Experience — a customization topic from the APG vNext community covering themes, skins, and UI adjustments.

APG vNext Customization Overview

Skins: Each forum can use a separate skin. Skins are stored in App_Themes/ as CSS + image sets.
Master Pages: The .master files control the overall page layout — header, footer, and navigation.
User Controls: Custom .ascx controls can be added to the header, footer, or sidebar regions.
Theme-specific JS: JavaScript can be loaded per-theme via the skin's master page.
CSS Override: Add a custom.css file to your skin folder for targeted overrides without modifying core files.

See Template Customization Guide and Features Overview.

What "Better UI, Better Experience" Means for Your APG vNext Community

The APG vNext 4.0 UI redesign affected every page in the forum — from the thread list to the post editor to the admin panel. This thread discusses the practical impact for community administrators: what changed, what needed to be reconfigured, and how the new design improved member engagement metrics.

Admin Panel Changes

The admin panel received a sidebar navigation overhaul. All settings are now grouped into logical categories (Users, Content, Appearance, Integrations, System) instead of the previous flat alphabetical list of 80+ links. Most administrators report finding settings 50% faster after the first week of adjustment.

Mobile-First Thread Layout

Thread list items now use a card-based layout on mobile instead of a table-row layout. This increases touch target size and improves readability on small screens:

/* APG vNext 4.0 — thread list card layout */
.apg-thread-card {
  display:       grid;
  grid-template: "title  stats" auto
                 "meta   stats" auto / 1fr auto;
  gap:           .25rem .75rem;
  padding:       .875rem 1rem;
  border-bottom: 1px solid var(--apg-color-border);
}
@media (max-width: 640px) {
  .apg-thread-card {
    grid-template: "title" auto "meta" auto "stats" auto / 1fr;
  }
}

Skin Migration from 3.x to 4.0

Custom skins built for APG vNext 3.x require updates to work with the new component structure. The migration guide is available in the Knowledge Base. Key changes:

Replace .apg-btn-old-style with the new .btn component classes
Update all rgba() color references to CSS custom property references
Remove any jQuery UI $.widget() initialisation code — widgets are now native web components

Accessibility Improvements in the UI Redesign

The "Better UI, Better Experience" initiative in APG vNext 4.4 included a significant accessibility overhaul alongside the visual improvements. Prior versions failed several WCAG 2.1 AA checkpoints that prevented members with disabilities from using the forum effectively. Key accessibility changes included:

Keyboard Navigation

All interactive elements (buttons, links, dropdown menus) are now focusable via Tab key
The forum navigation menu supports keyboard arrow key navigation
Modal dialogs (e.g., the quote dialog) trap keyboard focus within the modal until dismissed
Skip-to-content link added at the top of every page for screen reader users

ARIA Landmark Roles

<!-- APG vNext 4.4+ skin template — ARIA landmark structure -->
<header role="banner"> ... </header>
<nav    role="navigation" aria-label="Forum navigation"> ... </nav>
<main   role="main"> ... </main>
<aside  role="complementary" aria-label="Forum sidebar"> ... </aside>
<footer role="contentinfo"> ... </footer>

Performance Gains from the UI Redesign

Beyond the visual changes, APG vNext 4.4's UI improvements delivered measurable performance gains by replacing monolithic CSS and jQuery-heavy DOM interactions with lighter alternatives:

CSS bundle reduced from 280KB to 95KB (minified + gzipped: 12KB)
JavaScript bundle reduced from 420KB to 110KB
LCP (Largest Contentful Paint) improved by an average of 1.2 seconds in field data
Layout shift (CLS) eliminated by pre-sizing avatar and banner image containers

Configuring the New Theme Switching

<!-- web.config: enable member theme selection -->
<add key="APG.Themes.MemberSwitchEnabled" value="true" />
<add key="APG.Themes.Default"             value="light" />
<add key="APG.Themes.Available"           value="light,dark,high-contrast" />
<!-- Member's theme preference stored in localStorage and cookie
     Falls back to prefers-color-scheme on first visit -->

Server-Side Rendering vs. Client-Side Rendering in the UI Redesign

APG vNext 4.4 moved several previously server-rendered UI components (e.g., the online member list, recent activity feed, unread notification count) to client-side fetching via the REST API. This allowed the main page HTML to be served and cached without per-user personalisation, while personalised elements were fetched asynchronously after the page loaded.

// APG vNext 4.4 — client-side notification count fetch:
async function loadNotificationCount() {
  const res = await fetch('/api/v1/me/notifications/count',
    { headers: { 'X-Requested-With': 'XMLHttpRequest' } }
  );
  const { unread } = await res.json();
  document.querySelector('.apg-notif-badge').textContent = unread || '';
}
document.addEventListener('DOMContentLoaded', loadNotificationCount);

Impact on Page Caching

The shift to client-side personalisation enabled APG vNext 4.4 pages to be cached at the CDN edge for anonymous users — previously impossible when user-specific data was embedded in the HTML. Combined with the CSS and JS bundle size reductions, this change resulted in forum homepages loading 60–70% faster on repeat visits for anonymous users browsing from behind a CDN.

Upgrading Custom Skins to Support the New UI

If you maintain a heavily customised APG vNext skin, the 4.4 redesign requires reviewing and updating any skin templates that override default forum components. Use the APG vNext skin diff tool (Admin Panel → Skin → Compare to Default) to identify which templates have changed and need updating.

Related Resources

Server-Side Rendering vs. Client-Side Rendering in the UI Redesign

// APG vNext 4.4 — client-side notification count fetch:
async function loadNotificationCount() {
  const res = await fetch('/api/v1/me/notifications/count',
    { headers: { 'X-Requested-With': 'XMLHttpRequest' } }
  );
  const { unread } = await res.json();
  document.querySelector('.apg-notif-badge').textContent = unread || '';
}
document.addEventListener('DOMContentLoaded', loadNotificationCount);

Impact on Page Caching

Upgrading Custom Skins to Support the New UI

Looking for more help? Browse the support forum or check the Knowledge Base.