Qaid
ARTICLE

Mobile Optimization: Feedback on Touch Devices

Optimize the feedback widget for mobile devices with touch-friendly buttons and responsive positioning.

Qaid Team

The Qaid feedback widget works on mobile devices out of the box, but with a few optimizations you can create a truly touch-friendly experience for your mobile users.

Default Mobile Behavior

By default, the feedback widget adapts to mobile screens with:

  • Responsive button sizing
  • Touch-enabled interactions
  • Automatic modal positioning
  • Swipe-friendly element selection

However, you may want to customize the experience further based on your specific use case.

Touch Target Sizes

Apple’s Human Interface Guidelines and Google’s Material Design both recommend a minimum touch target size of 44x44 pixels. The default widget buttons meet this requirement, but if you’re customizing the appearance, ensure your buttons remain accessible:

/* Ensure minimum touch target size */
.qaid-feedback-btn {
  min-width: 44px;
  min-height: 44px;
  padding: 12px;
}

/* Add extra padding for easier tapping */
@media (pointer: coarse) {
  .qaid-feedback-btn {
    min-width: 48px;
    min-height: 48px;
    padding: 14px;
  }
}

The pointer: coarse media query specifically targets touch devices, allowing you to increase tap targets only where needed.

Responsive Button Sizing with CSS

Create a responsive button that scales appropriately across device sizes:

.qaid-feedback-btn {
  /* Base size for desktop */
  width: 40px;
  height: 40px;
  font-size: 18px;
}

/* Tablet */
@media (max-width: 1024px) {
  .qaid-feedback-btn {
    width: 44px;
    height: 44px;
    font-size: 20px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .qaid-feedback-btn {
    width: 48px;
    height: 48px;
    font-size: 22px;
  }
}

/* Small mobile */
@media (max-width: 480px) {
  .qaid-feedback-btn {
    width: 52px;
    height: 52px;
    font-size: 24px;
  }
}

Mobile-Specific Positioning

On mobile devices, bottom-positioned buttons often work better than corner positions to avoid interference with browser navigation:

/* Default desktop position */
.qaid-feedback-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

/* Mobile: center at bottom */
@media (max-width: 768px) {
  .qaid-feedback-btn {
    right: 50%;
    transform: translateX(50%);
    bottom: 16px;
  }
}

Alternatively, position the button above the mobile keyboard area:

@media (max-width: 768px) {
  .qaid-feedback-btn {
    bottom: env(safe-area-inset-bottom, 16px);
  }
}

The env(safe-area-inset-bottom) ensures the button stays above the home indicator on notched devices.

Full-Screen Modal on Small Screens

For the best mobile experience, consider making the feedback modal full-screen on small devices:

/* Desktop modal */
.qaid-modal {
  width: 400px;
  max-width: 90vw;
  border-radius: 12px;
}

/* Full-screen on mobile */
@media (max-width: 480px) {
  .qaid-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    border-radius: 0;
    display: flex;
    flex-direction: column;
  }

  .qaid-modal-content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .qaid-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
  }
}

Hiding on Very Small Screens

In some cases, you may want to hide the feedback widget on very small screens where it would interfere with core functionality:

/* Hide on very small screens */
@media (max-width: 320px) {
  .qaid-feedback-btn {
    display: none;
  }
}

Or hide only when in landscape orientation on mobile:

@media (max-width: 768px) and (orientation: landscape) and (max-height: 400px) {
  .qaid-feedback-btn {
    display: none;
  }
}

You can also use JavaScript to conditionally initialize the widget:

// Only initialize on screens wider than 320px
if (window.innerWidth > 320) {
  window.initQaidFeedback({
    projectId: "your-project-id"
  });
}

Testing on Different Devices

When testing your mobile optimization, consider these scenarios:

Device Testing Checklist

  1. Physical devices - Test on actual iOS and Android devices when possible
  2. Browser DevTools - Use device emulation for quick iteration
  3. Different screen sizes - Test on small phones (320px), standard phones (375px), large phones (428px), and tablets
  4. Orientation - Test both portrait and landscape modes
  5. Touch interactions - Verify tap targets are easy to hit
  6. Scroll behavior - Ensure the widget doesn’t interfere with scrolling
  7. Keyboard interaction - Test that the modal works when the virtual keyboard is open

Common Mobile Browsers

Test across multiple browsers since behavior can vary:

  • Safari on iOS
  • Chrome on Android
  • Samsung Internet
  • Firefox Mobile

Video Capture Considerations on Mobile

Video capture has some limitations on mobile devices that you should be aware of:

Battery and Performance

Video recording is resource-intensive on mobile. Consider:

window.initQaidFeedback({
  projectId: "your-project-id",
  // Reduce video quality on mobile
  videoQuality: window.innerWidth < 768 ? "low" : "medium"
});

Browser Support

Screen recording APIs have limited support on mobile browsers:

  • iOS Safari: Limited screen capture support
  • Chrome Android: Supports screen capture with user permission
  • In-app browsers: Often have restricted capabilities

For mobile users, you might want to emphasize screenshot capture over video:

/* Hide video button on mobile, emphasize screenshot */
@media (max-width: 768px) {
  .qaid-video-btn {
    display: none;
  }

  .qaid-screenshot-btn {
    width: 100%;
  }
}

Storage Considerations

Mobile users may have limited data plans. Consider offering lower quality options or shorter maximum recording times:

const isMobile = window.innerWidth < 768;

window.initQaidFeedback({
  projectId: "your-project-id",
  maxRecordingTime: isMobile ? 15 : 30, // Shorter on mobile
  videoQuality: isMobile ? "low" : "high"
});

Complete Mobile-Optimized Example

Here’s a complete CSS snippet for mobile optimization:

/* Mobile-optimized feedback widget */
@media (max-width: 768px) {
  /* Larger touch targets */
  .qaid-feedback-btn {
    min-width: 48px;
    min-height: 48px;
    bottom: env(safe-area-inset-bottom, 16px);
  }

  /* Full-screen modal */
  .qaid-modal {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    border-radius: 0;
  }

  /* Scrollable content */
  .qaid-modal-content {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: env(safe-area-inset-bottom, 20px);
  }

  /* Larger form inputs */
  .qaid-modal input,
  .qaid-modal textarea {
    font-size: 16px; /* Prevents zoom on iOS */
    padding: 12px;
  }

  /* Larger submit button */
  .qaid-modal button[type="submit"] {
    min-height: 48px;
    font-size: 16px;
  }
}

/* Hide on very small screens */
@media (max-width: 320px) {
  .qaid-feedback-btn {
    display: none;
  }
}

/* Landscape mobile adjustments */
@media (max-width: 768px) and (orientation: landscape) {
  .qaid-modal {
    flex-direction: row;
  }
}

By implementing these optimizations, you’ll ensure that mobile users have a seamless experience when providing feedback on your site.

Loading embed...
Back to all articles