Skip to content

MOBILE_COMPATIBILITY.md

Latest commit

 

History

History
156 lines (119 loc) · 5.06 KB

MOBILE_COMPATIBILITY.md

File metadata and controls

156 lines (119 loc) · 5.06 KB

Mobile Compatibility Concept

Overview

This document outlines the mobile compatibility strategy for MQTT Explorer, focusing on providing a good mobile experience without requiring a complete UI rewrite.

Target Device

Reference Device: Google Pixel 6

  • Viewport: 412x915 pixels (portrait)
  • Typical modern smartphone dimensions
  • Good representation of common mobile browsers

Strategy

1. Browser Mode First

Mobile compatibility focuses on the browser mode (yarn dev:server) rather than native mobile apps, as:

  • Browser mode already supports any device with a modern web browser
  • No app store deployment complexities
  • Users can access via mobile browser or save as PWA

2. Responsive Design Enhancements

Without rewriting the UI, we implement strategic responsive improvements:

Viewport Configuration

  • Ensure proper viewport meta tag for mobile scaling
  • Already present: <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no" />

Layout Adaptations

  • Tree Panel: Make touch-friendly (larger tap targets, better scrolling)
  • Sidebar: Collapsible by default on mobile, swipe-friendly
  • Chart Panel: Stack vertically instead of side-by-side
  • Split Panes: Adjust minimum sizes and default positions for mobile

Touch Interactions

  • Increase tap target sizes for mobile (minimum 44x44px)
  • Improve scrolling performance
  • Add touch-friendly gestures where applicable

3. Minimal CSS Changes

Use CSS media queries to adapt the UI for mobile viewports:

@media (max-width: 768px) {
  /* Mobile-specific overrides */
}

Key areas for CSS adjustments:

  • Typography sizing (ensure readability on small screens)
  • Padding and margins (optimize for touch)
  • Button and icon sizes (larger for touch targets)
  • Navigation (hamburger menu, collapsible sections)

4. Feature Prioritization

On mobile devices, prioritize:

  1. Core Functionality: View topics, read messages, basic navigation
  2. Search: Easy topic filtering and search
  3. Connection Management: Connect/disconnect, basic settings
  4. Publishing: Simple message publishing

Less critical on mobile (can be de-emphasized):

  • Advanced connection settings (can use smaller text/collapse)
  • Extensive keyboard shortcuts
  • Multi-panel simultaneous viewing

Implementation Approach

Phase 1: Foundation (Current)

  • Document mobile compatibility concept ✓
  • Create mobile demo video showing current experience
  • Identify pain points and opportunities

Phase 2: Quick Wins (Minimal Changes)

  • Adjust default split pane positions for mobile
  • Increase touch target sizes in critical areas
  • Improve sidebar collapse behavior on small screens
  • Optimize tree node spacing for touch

Phase 3: Enhanced Experience (Future)

  • Add PWA manifest for "add to home screen"
  • Implement swipe gestures
  • Optimize connection dialog for mobile
  • Add mobile-specific keyboard (numeric for ports, etc.)

Demo Video

Purpose

Create a demonstration video showing MQTT Explorer running on a mobile viewport (Pixel 6 dimensions) to:

  • Showcase current mobile experience
  • Identify UX issues
  • Demonstrate the feasibility of mobile usage
  • Guide future improvements

Technical Implementation

  • Use Playwright with Chromium in mobile emulation mode
  • Viewport size: 412x915 (Pixel 6 portrait)
  • Record typical mobile use cases:
    • Connecting to broker
    • Browsing topic tree (with touch gestures)
    • Viewing message details
    • Searching topics
    • Publishing messages

Script Location

src/spec/demoVideoMobile.ts - Mobile-specific demo video script

Testing Strategy

Manual Testing

  • Test on real mobile devices (iOS Safari, Android Chrome)
  • Use Chrome DevTools device emulation during development
  • Verify touch interactions work smoothly

Automated Testing

  • Create mobile-specific UI tests
  • Run demo video generation with mobile viewport
  • Validate responsive breakpoints

Future Considerations

Progressive Web App (PWA)

Add PWA capabilities:

  • Service worker for offline support
  • App manifest for installability
  • App icon and splash screen

Platform-Specific Optimizations

  • iOS: Handle safe areas, notch
  • Android: Material Design guidelines
  • Dark mode (already supported via theme)

Performance

  • Optimize bundle size for mobile networks
  • Implement lazy loading for large topic trees
  • Add connection retry logic for unreliable mobile networks

Metrics for Success

A successful mobile experience should provide:

  • ✅ All core features accessible on mobile
  • ✅ No horizontal scrolling required
  • ✅ Touch targets minimum 44x44px
  • ✅ Readable text without zooming
  • ✅ Smooth scrolling and interactions
  • ✅ Quick load times (<3s on 3G)

Resources