Profile banner dimensions

As of now, Smokesignal profile banners are 16:9. Most profile banners are wider than 16:9, including Bluesky, which uses 3:1. This is because banners are not main content, so they shouldn’t take up too much vertical space on the screen. When rendered at full width on large window sizes, 16:9 dominates the visible window area, pushing down the important attributes of a profile or event below the fold.

I suggest that smokesignal reuse the banner image from bsky.app.actor.profile records. In lieu of that, the dimensions of the banner should be the same so that users can reuse the asset if they choose to. This follows common convention of profile banners on other sites and improves usability.

See below some screenshots of smokesignal profiles and event pages with a header on the desktop. The wider the window, the more the tall image takes over the screen.

Considering other sites with banner images, they are typically width-constrained at large window sizes to avoid this scaling issue.

So, my thoughts are to change banner images to a wider aspect ratio (3:1 to maximize compatibility with the most common banner image on the atmosphere), and to add a max-width to content on larger-than-portrait-tablet sized windows, at least for the banner, avatar, and displayname/title chunk of the page.

1 Like

Yeah, using 3:1 sounds super reasonable.

Event banners are slightly different than profile banners.

The event “hero image” is also going to be the open graph share, and so we should look at the dimensions for this – what’s going to show up in Bluesky or leaflet?

If I’m organizing an event, then I make an “event poster” that often has the title, date, and other info right on the image.

(yes, helping me do this would be amazing, by like just compositing this on top of an image I select, but that’s a whole other feature!)

Luma has moved to square event images, so it works well in feeds / on mobile.

1 Like

Agreed. Much different use cases and should be laid out differently on the page. I would love to see a default og:image that compiles the metadata as you describe, with the option to add a custom background to that or replace it entirely.