89 lines
2.7 KiB
Markdown
89 lines
2.7 KiB
Markdown
# Screenshots for Google Play Store
|
|
|
|
## Required Screenshots
|
|
|
|
You need to capture **2-8 screenshots** from the deployed PWA at https://app.placebo.mk
|
|
|
|
### How to Capture Screenshots
|
|
|
|
#### Using Chrome DevTools (Recommended)
|
|
|
|
1. Open Chrome browser
|
|
2. Navigate to https://app.placebo.mk
|
|
3. Press `F12` to open DevTools
|
|
4. Click the device toolbar icon (or press `Ctrl+Shift+M`)
|
|
5. Select device: **Pixel 5** (1080 x 2340)
|
|
6. Capture each screen:
|
|
- Click the three dots menu in device toolbar
|
|
- Select "Capture screenshot"
|
|
- Save as PNG in this directory
|
|
|
|
#### Recommended Screenshots
|
|
|
|
Capture these key screens (in order):
|
|
|
|
1. **screenshot-1-home.png** - Homepage with hero article and latest articles
|
|
2. **screenshot-2-article.png** - Article detail page showing full article
|
|
3. **screenshot-3-archive.png** - Archive page with article grid
|
|
4. **screenshot-4-live-blogs.png** - Live blogs listing page
|
|
5. **screenshot-5-live-blog-detail.png** - Live blog detail with real-time updates
|
|
6. **screenshot-6-categories.png** - Category page (Sport/Art/Science)
|
|
|
|
### Google Play Requirements
|
|
|
|
- **Format**: PNG or JPEG (PNG recommended)
|
|
- **Minimum dimensions**: 320px (shortest edge)
|
|
- **Maximum dimensions**: 3840px (longest edge)
|
|
- **Aspect ratio**: 16:9 or 9:16 recommended
|
|
- **File size**: Under 8MB per screenshot
|
|
- **Quantity**: Minimum 2, maximum 8
|
|
|
|
### Current Device Settings
|
|
|
|
Using **Pixel 5** emulation:
|
|
- Resolution: 1080 x 2340 pixels
|
|
- Pixel ratio: 2.75
|
|
- Portrait orientation
|
|
- This meets Google Play requirements perfectly
|
|
|
|
### After Capturing
|
|
|
|
Once you've captured the screenshots:
|
|
|
|
1. Name them as: `screenshot-1.png`, `screenshot-2.png`, etc.
|
|
2. Place them in this directory (`pwa/public/screenshots/`)
|
|
3. Optionally add them to the PWA manifest for better install UX
|
|
4. Upload to Google Play Console when creating the app listing
|
|
|
|
### Optional: Add to Manifest
|
|
|
|
If you want screenshots to appear in the browser install prompt, update `vite.config.ts`:
|
|
|
|
```typescript
|
|
manifest: {
|
|
// ... other config
|
|
screenshots: [
|
|
{
|
|
src: '/screenshots/screenshot-1.png',
|
|
sizes: '1080x2340',
|
|
type: 'image/png',
|
|
form_factor: 'narrow',
|
|
label: 'Homepage with latest articles',
|
|
},
|
|
// Add more screenshots here
|
|
],
|
|
}
|
|
```
|
|
|
|
### Tips for Great Screenshots
|
|
|
|
- ✅ Use actual content (not Lorem Ipsum)
|
|
- ✅ Show the app in use with real articles
|
|
- ✅ Capture different sections to show variety
|
|
- ✅ Make sure text is readable
|
|
- ✅ Use light mode (default theme)
|
|
- ✅ Clear navigation bar and UI elements
|
|
- ❌ Don't include device frames (Google Play adds them)
|
|
- ❌ Don't add text overlays (save for marketing images)
|
|
- ❌ Don't capture error states or empty screens
|