Apps don’t own communication

Communication needs to be reliable. Users will always default to established platforms for sharing anything critical. Another chatbox, notification bell, or comment thread is not always appreciated. It is easy for new applications to become “another thing” to check.

Everything important happens on Slack, Teams, meeting notes, email, or whatever the team’s preferred ritual is. If you need to be a part of that, you need to make it easy to share content from your application.

Sharing is a feature

If you are building a product that houses content, said content should be easy to share.

Printability

Say you are building office applications. Users often default to printing a page as a PDF to share content over email when they are unsure of the recipient’s ability to open the file; a common pattern for sharing content cross-platforms.

It might be tempting to build a bespoke print or PDF export feature, but there is undoubtedly a more efficient use of your time. There is nothing wrong with using the browser’s built-in print dialog: it is well-established and reliable.

Not all pages, especially, single-page applications with complex layouts are suitable to print out of the gate. In this case we can use the CSS @media print rule to create a print-friendly version of the page.

@media print {
  .document {
    /* remove dark-mode styles */
    color: black !important;
    background: none !important;
  }
 
  .toolbar,
  .cursor,
  .suggestion {
    /* hide elements that don't make sense to print */
    display: none;
  }
}

Some interfaces (like Google Sheets) completely override the browser print dialog in favor of a more feature-rich version. This is a great way to add polish to your product, but it can also be a much larger undertaking than ensuring the page is print-friendly out of the box.

In Google’s case it makes sense to provide a custom UI since spreadsheets are complex and do not have an intuitive print layout. For getting off the ground with most applications this would be overkill.

Open Graph

Most people who work on websites or sell anything digital (i.e. SEO farmers) should be familiar with open graph (OG) tags. If you don’t: they are data a website can provide to social media platforms to customize the images and preview text on a card.

Open graph data is used to generate a preview card when a link is shared in Slack. It’s important for teammates to know what they’re clicking at a glance.

APIs & Resources

• Clipboard API - A browser API for reading and writing to the clipboard.
• Open Graph Protocol - A standard for sharing content on social media.
• Web Share API - A browser API for sharing content to native apps.