1453934e29
Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: thomasnordquist <7721625+thomasnordquist@users.noreply.github.com>
157 lines
5.1 KiB
Markdown
157 lines
5.1 KiB
Markdown
# 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:
|
|
|
|
```css
|
|
@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
|
|
|
|
- [Google Mobile-Friendly Test](https://search.google.com/test/mobile-friendly)
|
|
- [Material Design Touch Target Guidelines](https://material.io/design/usability/accessibility.html#layout-typography)
|
|
- [MDN Responsive Design](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design)
|
|
- [Playwright Device Emulation](https://playwright.dev/docs/emulation)
|