View Modes

#

Stashed offers multiple ways to display your links. Choose the view that best fits your content and browsing style.

Available View Modes

#

1. Grid View

#

Best for: Visual content, browsing, discovery

Layout:

• Cards arranged in responsive grid
• 1-4 columns depending on screen size
• Images prominently displayed
• Consistent card heights

When to use:

• Stashes with good preview images
• Visual inspiration boards
• Quick scanning and browsing
• Desktop or tablet viewing

Pros:

• ✅ Visually appealing
• ✅ Easy to scan quickly
• ✅ Shows multiple links at once
• ✅ Responsive across devices

Cons:

• ❌ Less text visible per link
• ❌ Images required for best experience
• ❌ May waste space with text-only links

2. List View

#

Best for: Text-heavy content, detailed information

Layout:

• Vertical list of link cards
• Full width on all screens
• More text visible
• Images as thumbnails (if present)

When to use:

• Links without images
• Detailed descriptions important
• Accessibility focus
• Mobile viewing

Pros:

• ✅ Shows more information per link
• ✅ Works well without images
• ✅ Easy to read descriptions
• ✅ Better for screen readers

Cons:

• ❌ Fewer links visible at once
• ❌ Requires more scrolling
• ❌ Less visual variety

3. Compact View

#

Best for: High-density browsing, power users

Layout:

• Minimal card design
• Maximum links per screen
• Essential info only (title, URL)
• Small or no images

When to use:

• Large stashes (100+ links)
• Quick reference lookup
• You know what you’re looking for
• Fast scanning needed

Pros:

• ✅ Most links visible at once
• ✅ Fast scanning
• ✅ Minimal scrolling
• ✅ Works without images

Cons:

• ❌ Less context per link
• ❌ Descriptions hidden
• ❌ Can feel cramped
• ❌ Harder to discover content

4. Masonry View

#

Best for: Mixed content, visual discovery

Layout:

• Pinterest-style staggered grid
• Images maintain aspect ratio
• Variable card heights
• Optimal space usage

When to use:

• Mixed image sizes
• Visual inspiration boards
• Discovery and exploration
• Aesthetic presentation

Pros:

• ✅ Beautiful, modern layout
• ✅ No image cropping
• ✅ Efficient space usage
• ✅ Great for visual content

Cons:

• ❌ Can have uneven rows
• ❌ Harder to find specific links
• ❌ May load slower
• ❌ Less predictable layout

How to Switch View Modes

#

On Desktop

#

1. Look for the view mode selector (usually top-right of stash page)
2. Click the icon for your preferred view:
   • Grid — Grid/squares icon
   • List — Lines/list icon
   • Compact — Dense lines icon
   • Masonry — Staggered blocks icon
3. View changes instantly
4. Preference may be saved per stash or globally

On Mobile

#

1. Tap the view mode button (may be in a menu)
2. Select from dropdown or popup
3. Choose your preferred view
4. View updates immediately

View Mode Comparison

#

View Mode Tips

#

Grid View Tips

#

Optimize for Grid:

• Add preview images to all links
• Use high-quality, consistent images
• Keep titles short and descriptive
• Add relevant tags for filtering

Best Practices:

• Use for visual inspiration stashes
• Great for portfolios and galleries
• Ideal for social sharing screenshots

List View Tips

#

Optimize for List:

• Write detailed descriptions
• Include context in titles
• Add tags for organization
• Use consistent formatting

Best Practices:

• Perfect for resource collections
• Great for documentation links
• Ideal for article archives

Compact View Tips

#

Optimize for Compact:

• Use clear, descriptive titles
• Keep URLs clean and short
• Add tags for quick filtering
• Organize logically

Best Practices:

• Use for personal reference stashes
• Great for tool directories
• Ideal for link indexes

Masonry View Tips

#

Optimize for Masonry:

• Use varied image sizes
• Include vertical and horizontal images
• Add images to all links
• Consider visual consistency

Best Practices:

• Perfect for design inspiration
• Great for photography collections
• Ideal for visual portfolios

Responsive Behavior

#

Desktop (1024px+)

#

• Grid: 3-4 columns
• List: Full width
• Compact: 2-3 columns
• Masonry: 3-4 columns

Tablet (768px - 1023px)

#

• Grid: 2-3 columns
• List: Full width
• Compact: 2 columns
• Masonry: 2-3 columns

Mobile (< 768px)

#

• Grid: 1-2 columns
• List: Full width
• Compact: 1 column
• Masonry: 1-2 columns

Accessibility Considerations

#

Screen Reader Support

#

All view modes are accessible:

• Proper heading hierarchy
• Alt text for images
• Keyboard navigation
• ARIA labels

Best View for Accessibility

#

List View is recommended for:

• Screen reader users
• Keyboard-only navigation
• Users who need high contrast
• Users who prefer text over images

Reducing Visual Clutter

#

If you find views overwhelming:

• Use Compact view for minimal design
• Enable reduced motion (if available)
• Use browser reader mode
• Adjust zoom level

Performance Considerations

#

Loading Speed

#

Fastest to Slowest:

1. Compact — Least data, fastest load
2. List — Moderate data
3. Grid — More images to load
4. Masonry — Variable images, layout calculation

Optimizing Performance

#

For Large Stashes (100+ links):

• Use Compact or List view
• Enable lazy loading (if available)
• Consider splitting into multiple stashes
• Use pagination (if available)

For Image-Heavy Stashes:

• Optimize image sizes before uploading
• Use WebP format when possible
• Consider Grid over Masonry for consistency
• Enable image compression (if available)

Personal Preferences

#

Saving Your Preference

#

Some features may include:

• Per-stash preference — Different view for each stash
• Global preference — Same view everywhere
• Remember last used — Auto-switch to last view
• Default view setting — Set in profile

Choosing Based on Task

#

For Browsing/Discovery: → Grid or Masonry view

For Finding Specific Link: → Compact or List view

For Reading Descriptions: → List view

For Quick Scanning: → Compact view

For Visual Inspiration: → Masonry or Grid view

Troubleshooting

#

View Not Changing?

#

• Refresh the page
• Clear browser cache
• Try a different browser
• Check if view is locked (some stashes may have fixed views)

Images Not Loading in Grid/Masonry?

#

• Check your internet connection
• Some sites block image scraping
• Try fetching metadata again
• Manually add image URLs

Layout Looks Broken?

#

• Zoom level may affect layout (try 100%)
• Browser compatibility issue
• Clear cache and reload
• Report bug if persists

Mobile View Different?

#

• Mobile has optimized layouts
• Some features may be limited
• Tap to expand details
• Use landscape mode for wider view

Next Steps

#

Related documentation:

• Adding Links
• Tags & Organization
• Tips & Best Practices

Quick Reference

#