Consider adding images/screenshots to the UI related features

[bijington]

Currently the following pages do not show off the features in the form of a screenshot:

• [x] Snackbar
• [x] Toast
• [ ] Popup

[michael-hawker]

One thing to note a problem we had in the past repo was large image files. We should make sure we cap the size of any images and try and avoid animated images. I know they're useful, but they bloat the repo size, especially if they get changed and make it harder to clone the repo in the future.

Not sure if there's a way we could exclude them from history at least or something so it's more manageable. Or offload storage of videos for more active demonstrations to another storage spot. Not sure what the best practices here for docs.microsoft.com are. @mattwojo any advice?

[bijington]

@michael-hawker very good point re: image files! We have so far avoided screenshots for many pages but we probably should include some. If we can define a size limit at the bare minimum that would be good

[mattwojo]

Great call-out regarding image and gif sizes! Keeping the size of screenshots down is super important as you call out. I have not heard of any offloading storage methods and my opinion is to keep everything in the repo, but just be thoughtful about file size. You can find guidance on creating a screenshot here: https://review.docs.microsoft.com/en-us/help/contribute/contribute-how-to-create-screenshot?branch=main The Docs site automatically adjusts images to a certain maximum dimension based on the browser type (mobile or desktop). Image file dimensions shouldn't exceed 1200 pixels wide. Ensuring that none of your images exceed 1200px wide will help keep file size in check, but also recommend using a tool like pngquant (in the command line) or tinypng.com (in the browser) to optimize images. It's recommended to use .PNG format. In regard to animated .gif videos, there is guidance here: https://review.docs.microsoft.com/en-us/help/contribute/contribute-animated-gifs?branch=main There are accessibility issues to be aware of there, in addition to the size consideration. Gif files can also be optimized for file size reduction with tools like ezgif... but the most helpful guideline is to keep them short - no more than 5 seconds. Even that can result in a large file size. If it's any larger, we recommend embedding a video instead. I recommend reaching out to Ross Heise if you would like some help with how to create, host, and embed video shorts that demo UI interactions. Happy to do an intro if you'd like. Hope that's helpful. Happy to connect further about this.

[michael-hawker]

Thanks @mattwojo! Very helpful! 🦙❤

An introduction to Ross to find out more about embedding videos would be great. Usually when we want to have an animated gif, it's really for showing a UI component so having a higher quality and longer video is generally going to be what we're looking for rather than an over-optimized short GIF.

[bijington]

Thank you both for the input it is really helpful.

Question: Is is possible to obtain a copy of those guidance documents for those of us external to Microsoft?