Quick Summary
Thrivepix tests all work across multiple browsers and devices to ensure compatibility. Learn what devices we test on, browser support, responsive design testing, and how to report bugs effectively.
What You'll Learn
- Devices we test on
- Browser compatibility standards
- Responsive design testing
- How to report bugs and issues
- Testing best practices
- Common compatibility issues
Devices We Test On
Desktop Devices
Screen Sizes:
- 1920px (Full HD)
- 1440px (Standard desktop)
- 1366px (Laptop)
- 1280px (Small laptop)
Operating Systems:
- Windows 10/11
- macOS (latest version)
Tablet Devices
Devices:
- iPad Pro (12.9")
- iPad Air (10.9")
- iPad (10.2")
- Samsung Galaxy Tab
Orientations:
- Portrait (768px width)
- Landscape (1024px width)
Mobile Devices
iOS Devices:
- iPhone 14 Pro Max (430px)
- iPhone 14/13 (390px)
- iPhone SE (375px)
Android Devices:
- Samsung Galaxy S23 (360px)
- Google Pixel 7 (412px)
- OnePlus (various sizes)
Orientations:
- Portrait (primary)
- Landscape (tested for critical pages)
Browser Compatibility
Supported Browsers
Desktop Browsers:
- Chrome (latest 2 versions)
- Firefox (latest 2 versions)
- Safari (latest 2 versions)
- Edge (latest 2 versions)
Mobile Browsers:
- Safari iOS (latest version)
- Chrome Android (latest version)
- Samsung Internet (latest version)
Browser Market Share
Priority Testing:
- Chrome: ~65% market share (highest priority)
- Safari: ~20% market share (iOS users)
- Edge: ~5% market share
- Firefox: ~3% market share
- Others: ~7% market share
Legacy Browser Support
Not Supported:
- Internet Explorer (all versions)
- Very old browser versions (3+ years old)
Why:
- Security risks
- Outdated technology
- Very small user base
- Limits modern features
If You Need Legacy Support:
- Mention in request
- May require additional work
- May limit features available
Responsive Design Testing
Breakpoints We Test
Standard Breakpoints:
- Desktop: 1440px and above
- Laptop: 1024px - 1439px
- Tablet: 768px - 1023px
- Mobile: 320px - 767px
What We Test
Layout:
- Content fits within viewport
- No horizontal scrolling
- Proper spacing and padding
- Elements don't overlap
- Grid/column layouts adapt
Typography:
- Text is readable
- Font sizes appropriate
- Line heights comfortable
- No text overflow
Images:
- Images scale properly
- Maintain aspect ratios
- Load correctly
- Optimized file sizes
Navigation:
- Menu works on all devices
- Mobile menu functions
- Touch targets adequate (44px min)
- Links are tappable
Forms:
- Input fields accessible
- Buttons tappable
- Proper keyboard on mobile
- Validation works
Interactions:
- Buttons and links work
- Hover states (desktop)
- Touch interactions (mobile)
- Animations perform well
Responsive Testing Tools
We Use:
- Browser DevTools (Chrome, Firefox)
- Real devices (iPhone, iPad, Android)
- BrowserStack (cross-browser testing)
- Responsive design mode
Testing Process
Our Testing Workflow
- Development: Build feature/page
- Initial Testing: Test on primary browser (Chrome)
- Responsive Testing: Test all breakpoints
- Cross-Browser: Test other browsers
- Device Testing: Test on real devices
- Bug Fixes: Fix any issues found
- Final Review: Complete testing pass
- Delivery: Mark request as complete
What We Test For
Functionality:
- All features work as expected
- Forms submit correctly
- Links go to right pages
- Buttons trigger actions
- Interactive elements respond
Visual:
- Design matches mockup
- Colors are correct
- Fonts render properly
- Spacing is consistent
- Images display correctly
Performance:
- Page loads quickly
- Images optimized
- No console errors
- Smooth animations
Reporting Bugs and Issues
How to Report a Bug
Include This Information:
- What's Wrong: Clear description of issue
- Where: Specific page/section URL
- When: When did it start happening
- Device: What device you're using
- Browser: Which browser and version
- Steps to Reproduce: How to see the issue
- Expected Behavior: What should happen
- Screenshots: Visual proof of issue
Good Bug Report Example
Title: Mobile Menu Not Opening on iPhone
Description:
The mobile menu hamburger icon doesn't open the menu when tapped on iPhone.
Page: All pages (https://mysite.com)
Device: iPhone 13, iOS 16.5
Browser: Safari (latest version)
Steps to Reproduce:
1. Visit site on iPhone
2. Tap hamburger menu icon (top right)
3. Nothing happens - menu doesn't open
Expected Behavior:
Menu should slide in from right side
Screenshots: See attached (shows hamburger icon)
Additional Info:
- Works fine on desktop
- Works on Android Chrome
- Started after yesterday's update
Bad Bug Report Example
❌ "The menu is broken. Please fix."
Missing: Device, browser, steps to reproduce, screenshots
Using Screenshots
What to Capture:
- Full page screenshot
- Close-up of issue
- Browser console (if errors)
- Multiple angles if needed
Annotation Tools:
- Arrows pointing to issue
- Text boxes explaining
- Highlights or circles
- Use Skitch, Snagit, or similar
Screen Recording
When to Use:
- Complex interactions
- Animation issues
- Multi-step problems
- Hard to describe in words
Tools:
- Loom (easy, free)
- QuickTime (Mac)
- Windows Game Bar (Windows)
- Phone screen recording
Common Compatibility Issues
Mobile Issues
Touch Targets Too Small:
- Buttons less than 44px
- Links too close together
- Hard to tap accurately
Text Too Small:
- Font size below 16px
- Hard to read on mobile
- Users have to zoom
Horizontal Scrolling:
- Content wider than viewport
- Images overflow
- Fixed width elements
Menu Not Working:
- Hamburger icon not tappable
- Menu doesn't open
- Links not working
Browser-Specific Issues
Safari Issues:
- Date picker differences
- Video autoplay restrictions
- Flexbox quirks
- Font rendering differences
Firefox Issues:
- CSS Grid differences
- Form styling variations
- Animation performance
Edge Issues:
- Legacy Edge vs new Edge
- CSS compatibility
- JavaScript differences
Performance Issues
Slow Loading:
- Large images
- Too many requests
- Unoptimized code
- No caching
Janky Animations:
- Too many animations
- Heavy JavaScript
- Not using GPU acceleration
Testing Best Practices
Test Early and Often
- Don't wait until end of project
- Test as features are built
- Catch issues early
- Easier to fix
Test on Real Devices
- Emulators are helpful but not perfect
- Real devices show actual experience
- Test on devices your users have
Test Critical Paths
Priority Testing:
- Homepage
- Main navigation
- Contact forms
- Checkout process (e-commerce)
- Key conversion pages
Document Issues
- Keep list of bugs found
- Track what's been fixed
- Retest after fixes
- Verify resolution
Your Testing Responsibilities
What We Test
- Functionality works
- Design matches mockup
- Responsive on standard devices
- Cross-browser compatibility
- No console errors
What You Should Test
- Content is correct
- Links go to right places
- Forms send to right email
- Matches your brand
- Meets your requirements
- Works for your specific use case
User Acceptance Testing
Before Approving:
- Test on your devices
- Check all pages
- Test all features
- Verify content
- Check links
- Test forms
Common Questions
Q: Do you test on all devices?
A: We test on common devices and screen sizes. If you need specific device testing, let us know.
Q: What if I find a bug after approval?
A: Submit a new request for the bug fix. We'll address it promptly.
Q: Do you support Internet Explorer?
A: No, IE is no longer supported due to security and compatibility issues.
Q: Can you test on specific devices?
A: Yes, mention specific devices in your request and we'll test on them.
Q: What if something works on desktop but not mobile?
A: Report it as a bug with device details. We'll fix responsive issues.
Q: How do I check my browser version?
A: Go to browser settings > About. It will show version number.
Q: Do you test on older iPhones?
A: We test on recent models (last 2-3 years). Older devices may have issues.
Q: What if I need to support old browsers?
A: Mention this in your request. May require additional work and limit features.
Need More Help?
Contact support@thrivepix.com or message your project manager