Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Every pricing page should have GIFs

tdinh.notion.site

Post reply on HN
Print view View original

41–50 of 228 posts

Re: Every pricing page should have GIFs

#41

Post by k1t »

ichydkrsrnae wrote: post #36
pyronite wrote: post #32

Earlier quoted context omitted.

> There's a UX problem on mobile. I have to click on something to make the GIF appear. What do I click? A link. Expected behavior of a link is to link me elsewhere, not to show a pop-up GIF, so I'm immediately confused when that happens. The underlines being dotted, it's closer to an element ( https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ab... ), which does not act as a link.

I'm staring at this conclusion with the most bemused expression on my face. I'm thinking of the lines painted on the highway, wondering what tragedies would result if yellow line, white line, dotted line, and solid line were similarly ambiguous.

Sometimes liberties are taken here, such as California originally separating carpool lanes with yellow lines (when they should have been white).

Presumably they felt that even though yellow was incorrect, it sent a clearer "do not cross" message to drivers.

They were later ordered to change them to white.

Re: Every pricing page should have GIFs

#42

Post by [deleted] »

k1t wrote: post #41
ichydkrsrnae wrote: post #36

Earlier quoted context omitted.

I'm staring at this conclusion with the most bemused expression on my face. I'm thinking of the lines painted on the highway, wondering what tragedies would result if yellow line, white line, dotted line, and solid line were similarly ambiguous.

Sometimes liberties are taken here, such as California originally separating carpool lanes with yellow lines (when they should have been white). Presumably they felt that even though yellow was incorrect, it sent a clearer "do not cross" message to drivers. They were later ordered to change them to white.

[deleted]

Re: Every pricing page should have GIFs

#43

Post by technobabbler »

janekm wrote: post #22
franciscop wrote: post #15

Don't use GIFs, use audioless mp4s instead. They can be made to work in the exact same way as GIFs (autoplay, loop or not, etc) but are a fraction of the bandwidth.

Not for screen recordings, unless you're doing a screen recording of photos or videos a GIF will typically be more bandwidth efficient (as there will be large areas of single colours and few changes between frames which GIF is good at).

> as there will be large areas of single colours and few changes between frames which GIF is good at

Pretty sure that's how modern video codecs work too. A lot of movies have regions that don't change much between frames (e.g. backgrounds, or some dude's face staring at the camera all dramatically).

What GIF gets you is a lossless video, which is overkill for most applications. Video codecs can achieve a similar perceptual quality at a tiny fraction of the size, which is why services like gyfcat and imgur will often auto-convert gifs to videos for browsers that support it.

Take this 2MB GIF (https://blackmagic.so/assets/sidebar/most-engaging-hours.gif) and put it through an online converter: https://ezgif.com/gif-to-mp4/ezgif-7-68b177ec1944.gif

WebP: 1.64 MB

MP4: 300 kB

AVIF: 274 kB

Re: Every pricing page should have GIFs

#44

Post by adrianh »

franciscop wrote: post #15

Don't use GIFs, use audioless mp4s instead. They can be made to work in the exact same way as GIFs (autoplay, loop or not, etc) but are a fraction of the bandwidth.

This is exactly what we do on https://www.soundslice.com/features/ (the minivideos below the main hero section). Would definitely recommend using MP4s instead of GIFs, for the bandwidth savings.

Re: Every pricing page should have GIFs

#45

Post by aloisdg »

mikepurvis wrote: post #21
aloisdg wrote: post #5

What about using video with control instead? Furthermore what about performance?

I think for many tech-savvy users, video = long-winded, annoying, work to scrub through for the good parts, etc. Whereas these brief animations are a helpful visual teaser of exactly what the feature is. It's not unlike a modern Assassins Creed game, where the skill tree shows a little silent video of what the move you're about to unlock looks like in action. You feel more confident that you know exactly what you're…

Fable 1 did this too

Re: Every pricing page should have GIFs

#46

Post by strogonoff »

A cool way of demonstrating features that are more or less represented by their respective GUI widgets could be by dogfooding the actual React components you use in production (just pass fake demo data in props/context). That said, demonstrating them in action is a bit trickier, since there’s no ready-made solution that could animate a virtual mouse cursor and simulate pointer events in accord.

Re: Every pricing page should have GIFs

#47

Post by mceachen »

gpvos wrote: post #35
capybara_2020 wrote: post #17

Earlier quoted context omitted.

Can they be used exactly like gifs? I have seen a few sites with mp4s but Firefox blocks them. I do not think even sites like Dribbble have figured it out. I have a lot of issues there with videos.

In what way does Firefox block them? If you mean they don't autoplay: that is how it is meant to be. Please do not annoy your users.

They may have tried to open arbitrary mp4s and had Firefox not render it.

Firefox seems to only render MP4 files that use yuv colorspace and aa3 audio channels, which require specific ffmpeg flags during transcoding. It took me a day of grinding whackamole to find the magic set of arguments to make all recent, popular browsers actually display a video:

https://github.com/photostructure/photostructure-for-servers...

Re: Every pricing page should have GIFs

#48

Post by matt-attack »

k1t wrote: post #41
ichydkrsrnae wrote: post #36

Earlier quoted context omitted.

I'm staring at this conclusion with the most bemused expression on my face. I'm thinking of the lines painted on the highway, wondering what tragedies would result if yellow line, white line, dotted line, and solid line were similarly ambiguous.

Sometimes liberties are taken here, such as California originally separating carpool lanes with yellow lines (when they should have been white). Presumably they felt that even though yellow was incorrect, it sent a clearer "do not cross" message to drivers. They were later ordered to change them to white.

I noticed that change recently and assumed it was motivated by Tesla. There are certain things we all take for granted when driving. A huge one that we probably don’t give much conscious thought to us this:

How do we know if the lane to the left is ok to go in, or if it actually is for carrying oncoming traffic?

You’d like to think that one way though not the only way, is to look for a double yellow line. As in, double yellows always separate opposing traffic so never cross them.

In CA though, double yellow was also chosen to separate the carpool lane as OP mentioned. So there was actually a really mundane case where driving to the left of a double yellow was actually fine. Seems very confusing to an autonomous car that’s operating at the mental-level of an 18mo old.

Re: Every pricing page should have GIFs

#50

Post by astroalex »

capybara_2020 wrote: post #17
franciscop wrote: post #15

Don't use GIFs, use audioless mp4s instead. They can be made to work in the exact same way as GIFs (autoplay, loop or not, etc) but are a fraction of the bandwidth.

Can they be used exactly like gifs? I have seen a few sites with mp4s but Firefox blocks them. I do not think even sites like Dribbble have figured it out. I have a lot of issues there with videos.

I have issues with videos on Twitter. It's not every video, but about 10% refuse to play in Firefox.
Post reply on HN