r e - d e s i g n ❓

[ablwr]

Thinking about the open and recently closed issues of header tags #228, filtergraph explanation #233, search functionality #211, and doing a lot of personal-site refactoring to reduce code bloat and increase responsiveness/accessibility, I am thinking...

Is it time for a re-design?

I'm very happy to take on this task, but I need some requirements (constraints) from the community to think about the best ways to make ffmprovsr better visually. I think I heard @retokromer mention that students found it visually intimidating (because of the black? because of all the options at once?).

Fellow maintainers, contributors, interested parties, what do you think?

[kieranjol]

I think a re-design would be very helpful - I keep hearing from users that it is difficult to find what you want on the page - though they are then full of praise for what ffmprovisr teaches them..

I kinda like the black btw..

And perhaps some refactoring is needed so that things like 'ffmpeg concepts' could be incorporated without adding a flood of more items. I love the idea of the 'concepts', there's room for a lot of tips and tricks that might be worthy of a dedicated ffmpeg wiki page.

[retokromer]

because of the black?

No.

because of all the options at once?

Yes. And without a clear hierarchy and/or workflow. They need some time to find where to start – today, people are impatient… ;-)

[ablwr]

I like the black background too because that is what command line interfaces mostly default to. :)

[ablwr]

Not thrilled about our use of modals either -- I think it'd be better to have the text grow/expand out of the button but stay on the page rather than pop up on top of it.

From the technical side, we are also using jQuery and Bootstrap but really don't need either, so we can eliminate a lot of code this way and simplify things. We can probably simplify the formula with which we add new scripts, too.

[retokromer]

)Side note 1: currently, ffmprovisr does not work fine on a Braille terminal :-( (Side note 2: we should say how to pronounce ffmprovisr ;-)

[kfrn]

I'm not in love with modals either - a 'click to expand' approach would be good, I think.

[ablwr]

I'll be thinking about this. Please ask around or relay what else you've learned from other people coming to this for the first time! I am going to tweet about it cuz that seems to get good results.

[ablwr]

I LOVE ASKING PEOPLE WHAT THEY DISLIKE

[ablwr]

What do you think of... more space, like this (one is normal screen, other is "mobile size")? I want to prepare for making this look better on smaller devices (by making it all in one column) but also make way for a lot of space on larger screens for a future move to take the modals and move them in-line, so clicking doesn't open up a pseudo-popup but rather shows the recipe right there.

[ablwr]

I'm trying to avoid one BIG redesign in favor of small, iterative changes.

[retokromer]

During a presentation, increasing the font size, on the screen I got:

Can we add a test like: if left column < 3 x right column, then use the one-column layout? I.e. not only absolute, but also relative values.

cc @ablwr @kfrn

[ablwr]

Whoops! Sorry @retokromer! I am going to send a PR right now.

[ablwr]

That should fix it. And it switches to single-column at 175% zoom, for me. This should be considered in the future because the table of contents buttons lean over the side a little bit at 150%, etc., but it's better to zoom properly and deal with that more-minor aesthetic issue later.

[retokromer]

Thank you very much, @ablwr!

[ablwr]

I am about to send a big change that moves recipes from Modal mode to Open-inline mode but I am still testing, so hang tight -- this restructures all the recipes!

[bturkus]

redesign looks awesome, but I noticed some funky overlaps when browser windows are unusually sized (chrome on mac and windows). like this:

I'm really loving all the changes! y'all rock!

[ablwr]

Haha @bturkus yeah I'm working on fixing an issue related to that right now... it's driving me crazy.

[ablwr]

straight up want to put an "under construction" gif up on here cuz I gotta do some real work....

😅

[ablwr]

I used my twitter skills to make the buttons more succinct.

[ablwr]

I merged #256 which changes the Table of Contents to a list instead of buttons, which helps with the wonkiness when resizing, as @bturkus pointed out. I was also not seeing the text on any of the ToC buttons in Firefox on my iPhone (but Firefox on desktop was fine).

That PR (and sorry for convoluting issues together) also changes the link primary color to shades of green, to reflect the green on ffmpeg.org. It ups the font size a little overall, for easier reading, and makes the h2 and h3 tags size themselves in relation to that default size (from 14px to 16px).

There's still a viewport overflow sizing issue also probably caused by one of the longer buttons that makes things not fit onto screens less than ~550px wide.

[ablwr]

I'm just digging around wild like a little wild boar on the hunt for truffles 🐷, but please let me know if you don't like something, or something else needs refinement.

[todrobbins]

A light and dark mode would be helpful. I like the dark mode, but having a black on white option would be stellar.

[privatezero]

Maybe this is just my inner librarian speaking, but perhaps the ToC should be alphabetized? (Apart from pinning informational entries like About This Resource and Advanced FFmpeg Concepts?

[retokromer]

I guess, if one knows how it’s called, yes; but when one don’t, it’s easier, if similar recipes are grouped.

[privatezero]

Wasn't referring to the organization of recipes, rather the organization of the groupings of recipes in the table of contents - while some of these groupings seem conceptually organized, many of them aren't, and the groupings themselves might benefit from additional order?

Alphabetization would at least establish a clear style for any future additions/changes of categories...or maybe the ToC needs one extra layer of granularity to identify the themes that things are grouped by?

For example

• Generate image files from video
• Generate an animated GIF
• Create a video from imag(es) and audio

could become

• Work with Image Files and GIFs
  • Create a video from imag(es) and audio
  • Generate an animated GIF
  • Generate image files from video

Anyway, just thoughts! Don't wanna spark a death spiral of cataloguing issues!

[retokromer]

Thank you for clarifying, @privatezero!

[kfrn]

I wouldn't alphabetise for the reason @retokromer says. Not sure about creating meta-groupings in the ToC as @privatezero mentions - I see the benefits, but I think it could be a little unwieldy.
Perhaps in reorganising the page, I've over-categorised? Should some of the sections merge back together? e.g. should Generate image files from a video & Create an animated GIF become simply Create thumbnails or GIFs?
The ordering of the page could probably be improved a little bit.

[privatezero]

I tend to favor over-categorization myself, but unfortunately I think my instincts are always to push it to the edge of TOO much categorization which might be cumbersome (subcategories and cross-references!!) so please take all my opinions with a grain of salt ;-P

[retokromer]

We have to take account of our audience. (Cum grano salis – more is too salty ;-)))

[ablwr]

See #262

https://www.youtube.com/watch?v=6nr8hPnZfMU

[ablwr]

preparing another big change, hang tight

[kfrn]

You're on fire at the moment Ashley!

[retokromer]

Can this be closed?

[ablwr]

YES.