Responsive Design
PawPlacer automatically adapts to different screen sizes:
- Smartphones (small screens)
- Tablets (medium screens)
- Desktop computers (large screens)
The core functionality remains the same across all devices, but the layout adjusts for optimal viewing.
Mobile Navigation Differences
When using PawPlacer on mobile devices, you'll notice several adaptations:
Mobile Adopter Management
The adopters list on mobile devices:
- Adopters appear as cards instead of a table
- Each card shows key information: name, pets, status
- Quick actions available via tap
- Search and filters work seamlessly
Starting Adoptions on Mobile
From an adopter's profile on mobile:
- The "Adopt" button appears prominently at the top
- Tapping it launches the QR code modal
- You can easily share the QR code with the adopter
- Or continue the process on your mobile device
Screen Transitions
On mobile devices:
- Each step takes up the full screen
- Transitions between steps slide horizontally
- Back and forward navigation is touch-optimized
QR Code Adoption Mode
PawPlacer offers a unique mobile feature: QR code adoptions. This allows adopters to complete part of the process on their own device:
- After selecting an adopter on your staff device, a QR code appears
- The adopter scans this code with their smartphone
- The adoption process opens on their device
- They can review terms, select donation amount, and make payment directly
This feature is especially useful for:
- Letting adopters read terms and conditions at their own pace
- Allowing secure payment on their personal device
- Maintaining social distance when needed
- Speeding up the adoption process during busy periods
Donation Step on Mobile
The donation step is optimized for mobile with:
- Larger touch targets for donation amounts
- A full-width custom donation input
- Easily tappable next/skip buttons
Payment Processing on Mobile
The payment step on mobile includes:
- Vertically stacked payment method options
- Clear payment summaries
- Touch-optimized buttons
For QR payments (when using digital payment methods):
- The QR code is sized appropriately for the screen
- Clear instructions guide adopters through the scanning process
- Confirmation options are easily accessible
Mobile-Specific Tips
When completing adoptions on mobile devices:
- Stable Internet Connection: Ensure you have reliable WiFi or cellular data
- Battery Life: Keep devices charged, especially during adoption events
- Brightness Settings: Increase screen brightness when displaying QR codes
- Orientation: The interface works in both portrait and landscape, but portrait is generally recommended
- External Payment: If adopters are using their own device for payment, confirm completion before finalizing
Adoption Receipts on Mobile
Viewing adoption receipts on mobile devices:
- Information is presented in a single column
- All details remain accessible by scrolling
- Printing is available through compatible mobile printing options
- Email receipt option provides easy sharing
Mobile Adoptions List
The adoptions list on mobile devices presents:
- Adoptions as cards rather than table rows
- Expandable sections for additional details
- All the same sorting and filtering options as desktop
- Touch-optimized navigation to receipt pages
Cross-Device Compatibility
You can start an adoption on one device and continue on another. For example:
- Begin an adoption on a tablet at an adoption event
- Complete paperwork and processing on a desktop computer at the organization
- All information syncs automatically between devices
Next Steps
The mobile adoption experience contains all the same features as the desktop version. For more information on specific adoption steps, refer to the other guides in this section.