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 the same as on desktop.
Starting Adoptions on Mobile
From an adopter's profile on mobile:
- The Adopt button appears prominently at the top.
- Tapping it opens the adoption method choice.
- Use PawPlacer Checkout generates a QR code that the adopter can scan.
- Complete In Person opens the direct completion dialog for staff-entered adoption details.
- Staff can also continue a PawPlacer Checkout session from the current 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 choosing Use PawPlacer Checkout 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 adoption record pages.
Cross-Device Compatibility
You can start an adoption on one device and continue on another. For example:
- Begin checkout on a tablet at an adoption event.
- Have the adopter complete terms, donation, and payment on their phone.
- 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.