Status Page Customization

Customizing your status page helps align it with your brand identity and provides a cohesive user experience. StatusPageOne offers various customization options to make your status page uniquely yours.

Branding and Visual Identity

Logo Management

Upload Your Logo

1. Navigate to Status Pages > Settings > Branding
2. Click Upload Logo or drag and drop your image
3. Supported formats: PNG, JPG, SVG (recommended for scalability)
4. Maximum file size: 2MB
5. Recommended dimensions: 200x50 pixels for optimal display

Logo Best Practices

• Use vector formats (SVG) when possible for crisp display
• Ensure contrast works on both light and dark backgrounds
• Test at different sizes - logos appear in headers and OpenGraph cards
• Keep file sizes small for faster loading times

Logo Placement

Your logo appears in:

• Status page header (primary position)
• Browser favicon (auto-generated from logo)
• Social media preview cards (OpenGraph)
• Email notifications (when applicable)

Theme Customization

Automatic Theme Detection

StatusPageOne automatically detects and applies user preferences:

• System Theme: Respects user's OS dark/light mode setting
• Manual Override: Users can manually switch themes using the theme toggle
• Persistent Choice: User selections are remembered across visits

Theme Components

Both light and dark themes include:

• Background colors: Optimized for readability
• Text contrast: WCAG AA compliant color ratios
• Status indicators: Consistent green/red/yellow color coding
• Interactive elements: Buttons, links, and form components

Color Scheme

Status pages use a carefully designed color palette:

Status Colors

• Green (#10b981): Operational services
• Red (#ef4444): Down services or critical incidents
• Yellow (#f59e0b): Degraded performance or minor issues
• Gray (#6b7280): Unknown status or maintenance

Semantic Colors

• Primary: Brand accent color for interactive elements
• Success: Confirmation messages and positive states
• Warning: Alerts and important notices
• Error: Error messages and critical alerts

Multi-Language Support

Automatic Language Detection

StatusPageOne includes built-in internationalization:

Supported Languages

• English (en-US): Primary language with full feature support
• Portuguese (pt-BR): Complete translation coverage
• Pseudo Locale: Development and testing language for UI validation

Language Selection

• Browser Detection: Automatically detects user's preferred language
• Manual Override: Language switcher allows manual selection
• URL Structure: Language preference reflected in URL (/en-US/ or /pt-BR/)
• Persistent Setting: Language choice remembered across visits

Content Localization

Automatic Translation

All interface elements are automatically translated:

• Service status labels (Up, Down, Operational)
• Incident severity levels (Minor, Major, Critical)
• Subscription form text and buttons
• Timeline and date formatting
• Error and success messages

Custom Content

User-generated content requires manual translation:

• Status page names and descriptions
• Service/monitor names
• Incident titles and updates
• Maintenance announcements

SEO and Meta Tags

Search Engine Optimization

Automatic SEO Features

• Dynamic titles: Include current status in page titles
• Meta descriptions: Auto-generated based on service status
• Structured data: JSON-LD markup for search engines
• Sitemap integration: Automatic inclusion in site sitemaps

OpenGraph Integration

Social media sharing automatically includes:

• Dynamic status cards: Real-time status in social previews
• Logo integration: Your logo appears in social shares
• Status color coding: Visual status indicators in previews
• Responsive images: Optimized for different social platforms

Page Performance

Loading Optimization

• Server-side rendering: Fast initial page loads
• Image optimization: Automatic resizing and compression
• CDN distribution: Global content delivery network
• Caching strategies: Intelligent caching for static content

Mobile Responsiveness

• Mobile-first design: Optimized for mobile devices
• Touch-friendly interfaces: Large touch targets and gestures
• Responsive layouts: Adapts to all screen sizes
• Fast mobile loading: Optimized for slower connections

Advanced Customization

URL Structure

Default Structure

• Status page: https://yourname.statuspage.one/
• Language variants: https://yourname.statuspage.one/en-US/
• Incident pages: https://yourname.statuspage.one/incidents/incident-id

Clean URLs

• No unnecessary parameters or tracking codes
• SEO-friendly incident and update URLs
• Canonical URLs for proper indexing
• Breadcrumb navigation support

Subscription Customization

Subscription Options

Users can customize their notification preferences:

• Email notifications: Standard email alerts
• Slack integration: Direct webhook notifications
• Frequency settings: Immediate, hourly, or daily summaries
• Service filtering: Subscribe to specific services only

Subscription Management

• One-click subscribe: Simple subscription process
• Preference center: Manage subscription settings
• Unsubscribe options: Easy unsubscribe with one click
• Subscription verification: Email verification for security

Layout and Content

Service Organization

Customize how services appear on your status page:

• Service grouping: Logical organization of related services
• Priority ordering: Most important services displayed first
• Status aggregation: Overall status calculation from individual services
• Performance metrics: Response time and uptime display options

Historical Data Display

Control historical information presentation:

• Uptime graphs: 90-day uptime visualization
• Response time trends: Performance metrics over time
• Incident timeline: Chronological incident history
• Maintenance calendar: Upcoming and past maintenance windows

Accessibility Features

WCAG Compliance

StatusPageOne status pages meet WCAG AA standards:

• Color contrast: Sufficient contrast ratios for all text
• Keyboard navigation: Full keyboard accessibility
• Screen reader support: Semantic markup and ARIA labels
• Focus indicators: Clear focus states for interactive elements

Inclusive Design

Visual Accessibility

• High contrast mode: Enhanced contrast for low vision users
• Scalable text: Respects user font size preferences
• Color independence: Status information not solely dependent on color
• Clear typography: Readable fonts and appropriate line spacing

Interaction Accessibility

• Touch targets: Minimum 44px touch target size
• Gesture alternatives: Alternative methods for gesture-based actions
• Timeout warnings: Adequate time for users to complete actions
• Error prevention: Clear form validation and error messages

Testing Customizations

Preview Functionality

Before publishing changes:

1. Use the preview mode to see changes before they go live
2. Test different screen sizes using browser developer tools
3. Check both themes (light and dark mode)
4. Verify accessibility using accessibility testing tools

Cross-Browser Testing

Ensure your customizations work across browsers:

• Desktop browsers: Chrome, Firefox, Safari, Edge
• Mobile browsers: Mobile Safari, Chrome Mobile, Samsung Internet
• Accessibility tools: Test with screen readers and keyboard navigation

Performance Validation

After customization:

• Check loading times with browser developer tools
• Optimize images if they slow down page loading
• Validate markup using HTML and accessibility validators
• Test mobile performance on slower connections

Best Practices

Brand Consistency

• Match your main website styling where appropriate
• Use consistent terminology across all properties
• Align color schemes with your brand guidelines
• Maintain logo standards according to your brand guidelines

User Experience

• Keep it simple: Don't over-customize at the expense of usability
• Prioritize readability: Ensure text is always readable
• Test with real users: Get feedback from actual users
• Monitor usage: Track which customizations improve user engagement

Maintenance

• Regular reviews: Periodically review and update customizations
• Stay current: Keep up with new customization features
• Backup settings: Document your customization choices
• Test updates: Verify customizations after platform updates

Your status page customization helps create a professional, branded experience that builds trust with your users while maintaining excellent usability and accessibility.